@sis-cc/dotstatsuite-visions 12.15.0 → 12.17.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.
@@ -39,13 +39,19 @@ export var useStyles = makeStyles(function (theme) {
39
39
  height: theme.spacing(3.75)
40
40
  },
41
41
  leftIcon: {
42
- padding: theme.spacing(0.125, 0.5)
42
+ padding: theme.spacing(0.125, 0.5),
43
+ '&.Mui-disabled': {
44
+ color: theme.palette.grey[700] + ' !important'
45
+ }
43
46
  },
44
47
  rightIcon: {
45
48
  padding: theme.spacing(0.125, 0),
46
49
  borderRadius: theme.shape.borderRadius,
47
50
  color: theme.palette.primary.main,
48
- margin: theme.spacing(0.125)
51
+ margin: theme.spacing(0.125),
52
+ '&.Mui-disabled': {
53
+ color: theme.palette.grey[700] + ' !important'
54
+ }
49
55
  },
50
56
  clear: {
51
57
  padding: '3px 0px 0px 0px'
@@ -6,12 +6,16 @@ import * as R from 'ramda';
6
6
  import cx from 'classnames';
7
7
  import makeStyles from '@mui/styles/makeStyles';
8
8
  import Typography from '@mui/material/Typography';
9
+ import { useTheme } from '@mui/material/styles';
9
10
  import { visuallyHidden } from '@mui/utils';
10
11
  import Tooltip from '@mui/material/Tooltip';
11
12
  import { Asterisk } from '../';
12
13
  import { getValue } from './utils';
13
14
  import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
14
15
 
16
+ var flagStylePath = function flagStylePath(theme) {
17
+ return R.pathOr({}, ['mixins', 'table', 'flag'], theme);
18
+ };
15
19
  var useStyles = makeStyles(function (theme) {
16
20
  return {
17
21
  content: _extends({
@@ -31,10 +35,10 @@ var useStyles = makeStyles(function (theme) {
31
35
  fontWeight: 'bold',
32
36
  fontStyle: 'normal',
33
37
  position: 'relative',
34
- top: '-4px'
35
- }, R.pathOr({}, ['mixins', 'table', 'flag'], theme)),
38
+ verticalAlign: R.propOr('middle', 'verticalAlign', flagStylePath(theme))
39
+ }, R.propOr({}, 'root', flagStylePath(theme))),
36
40
  svg: {
37
- verticalAlign: 'middle'
41
+ verticalAlign: R.propOr('middle', 'verticalAlign', flagStylePath(theme))
38
42
  },
39
43
  header: {
40
44
  color: theme.palette.getContrastText(theme.palette.primary.main)
@@ -52,6 +56,7 @@ var Flags = function Flags(_ref) {
52
56
  labelAccessor = _ref.labelAccessor;
53
57
 
54
58
  var classes = useStyles();
59
+ var theme = useTheme();
55
60
  var noFlags = R.isNil(flags) || R.isEmpty(flags);
56
61
 
57
62
  var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
@@ -63,7 +68,7 @@ var Flags = function Flags(_ref) {
63
68
  var hasUncoded = R.any(R.complement(R.has('code')), flags);
64
69
  var codedIcons = R.pipe(R.reduce(function (acc, flag) {
65
70
  return R.when(R.always(R.has('code', flag)), R.append(flag.code))(acc);
66
- }, []), R.join(','))(flags);
71
+ }, []), R.join(R.propOr(',', 'delimiters', flagStylePath(theme))))(flags);
67
72
 
68
73
  var labels = R.map(function (flag) {
69
74
  var value = getValue(labelAccessor)(flag);
@@ -106,7 +111,7 @@ var Flags = function Flags(_ref) {
106
111
  R.and(R.not(R.isEmpty(codedIcons)), hasUncoded) && React.createElement(
107
112
  React.Fragment,
108
113
  null,
109
- ','
114
+ R.propOr(',', 'delimiters', flagStylePath(theme))
110
115
  ),
111
116
  hasUncoded && React.createElement(
112
117
  Fragment,
package/es/theme.js CHANGED
@@ -132,6 +132,9 @@ export var sisccTheme = function sisccTheme(_ref) {
132
132
  },
133
133
  '&.Mui-focusVisible': {
134
134
  backgroundColor: outerPalette.hover || innerPalette.hover
135
+ },
136
+ '&.Mui-disabled': {
137
+ opacity: 1
135
138
  }
136
139
  }
137
140
  }
@@ -349,8 +352,12 @@ export var sisccTheme = function sisccTheme(_ref) {
349
352
  },
350
353
  table: {
351
354
  flag: {
352
- fontSize: 10,
353
- color: outerPalette.textLight || innerPalette.textLight
355
+ root: {
356
+ fontSize: 10,
357
+ color: outerPalette.textLight || innerPalette.textLight
358
+ },
359
+ delimiters: ' ',
360
+ verticalAlign: 'top'
354
361
  },
355
362
  dot: {
356
363
  fontSize: 8
@@ -53,13 +53,19 @@ var useStyles = exports.useStyles = (0, _makeStyles2.default)(function (theme) {
53
53
  height: theme.spacing(3.75)
54
54
  },
55
55
  leftIcon: {
56
- padding: theme.spacing(0.125, 0.5)
56
+ padding: theme.spacing(0.125, 0.5),
57
+ '&.Mui-disabled': {
58
+ color: theme.palette.grey[700] + ' !important'
59
+ }
57
60
  },
58
61
  rightIcon: {
59
62
  padding: theme.spacing(0.125, 0),
60
63
  borderRadius: theme.shape.borderRadius,
61
64
  color: theme.palette.primary.main,
62
- margin: theme.spacing(0.125)
65
+ margin: theme.spacing(0.125),
66
+ '&.Mui-disabled': {
67
+ color: theme.palette.grey[700] + ' !important'
68
+ }
63
69
  },
64
70
  clear: {
65
71
  padding: '3px 0px 0px 0px'
@@ -28,6 +28,8 @@ var _Typography = require('@mui/material/Typography');
28
28
 
29
29
  var _Typography2 = _interopRequireDefault(_Typography);
30
30
 
31
+ var _styles = require('@mui/material/styles');
32
+
31
33
  var _utils = require('@mui/utils');
32
34
 
33
35
  var _Tooltip = require('@mui/material/Tooltip');
@@ -46,6 +48,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
46
48
 
47
49
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
48
50
 
51
+ var flagStylePath = function flagStylePath(theme) {
52
+ return R.pathOr({}, ['mixins', 'table', 'flag'], theme);
53
+ };
49
54
  var useStyles = (0, _makeStyles2.default)(function (theme) {
50
55
  return {
51
56
  content: _extends({
@@ -65,10 +70,10 @@ var useStyles = (0, _makeStyles2.default)(function (theme) {
65
70
  fontWeight: 'bold',
66
71
  fontStyle: 'normal',
67
72
  position: 'relative',
68
- top: '-4px'
69
- }, R.pathOr({}, ['mixins', 'table', 'flag'], theme)),
73
+ verticalAlign: R.propOr('middle', 'verticalAlign', flagStylePath(theme))
74
+ }, R.propOr({}, 'root', flagStylePath(theme))),
70
75
  svg: {
71
- verticalAlign: 'middle'
76
+ verticalAlign: R.propOr('middle', 'verticalAlign', flagStylePath(theme))
72
77
  },
73
78
  header: {
74
79
  color: theme.palette.getContrastText(theme.palette.primary.main)
@@ -86,6 +91,7 @@ var Flags = function Flags(_ref) {
86
91
  labelAccessor = _ref.labelAccessor;
87
92
 
88
93
  var classes = useStyles();
94
+ var theme = (0, _styles.useTheme)();
89
95
  var noFlags = R.isNil(flags) || R.isEmpty(flags);
90
96
 
91
97
  var _useKeyboardEscapeHan = (0, _useKeybordEscapeHandler2.default)(),
@@ -97,7 +103,7 @@ var Flags = function Flags(_ref) {
97
103
  var hasUncoded = R.any(R.complement(R.has('code')), flags);
98
104
  var codedIcons = R.pipe(R.reduce(function (acc, flag) {
99
105
  return R.when(R.always(R.has('code', flag)), R.append(flag.code))(acc);
100
- }, []), R.join(','))(flags);
106
+ }, []), R.join(R.propOr(',', 'delimiters', flagStylePath(theme))))(flags);
101
107
 
102
108
  var labels = R.map(function (flag) {
103
109
  var value = (0, _utils2.getValue)(labelAccessor)(flag);
@@ -140,7 +146,7 @@ var Flags = function Flags(_ref) {
140
146
  R.and(R.not(R.isEmpty(codedIcons)), hasUncoded) && _react2.default.createElement(
141
147
  _react2.default.Fragment,
142
148
  null,
143
- ','
149
+ R.propOr(',', 'delimiters', flagStylePath(theme))
144
150
  ),
145
151
  hasUncoded && _react2.default.createElement(
146
152
  _react.Fragment,
package/lib/theme.js CHANGED
@@ -136,6 +136,9 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
136
136
  },
137
137
  '&.Mui-focusVisible': {
138
138
  backgroundColor: outerPalette.hover || innerPalette.hover
139
+ },
140
+ '&.Mui-disabled': {
141
+ opacity: 1
139
142
  }
140
143
  }
141
144
  }
@@ -353,8 +356,12 @@ var sisccTheme = exports.sisccTheme = function sisccTheme(_ref) {
353
356
  },
354
357
  table: {
355
358
  flag: {
356
- fontSize: 10,
357
- color: outerPalette.textLight || innerPalette.textLight
359
+ root: {
360
+ fontSize: 10,
361
+ color: outerPalette.textLight || innerPalette.textLight
362
+ },
363
+ delimiters: ' ',
364
+ verticalAlign: 'top'
358
365
  },
359
366
  dot: {
360
367
  fontSize: 8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sis-cc/dotstatsuite-visions",
3
- "version": "12.15.0",
3
+ "version": "12.17.0",
4
4
  "description": "Library of visual components",
5
5
  "author": "OECD",
6
6
  "homepage": "https://visions-qa.siscc.org/#o",
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * @sis-cc/dotstatsuite-visions v12.15.0 - https://visions-qa.siscc.org/#o
2
+ * @sis-cc/dotstatsuite-visions v12.17.0 - https://visions-qa.siscc.org/#o
3
3
  * MIT Licensed
4
4
  */
5
5
  (function webpackUniversalModuleDefinition(root, factory) {
@@ -9187,7 +9187,7 @@ if (true) {
9187
9187
  /* 166 */
9188
9188
  /***/ (function(module) {
9189
9189
 
9190
- module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.15.0","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=14"},"files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo","build:dev":"nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@hello-pangea/dnd":"^16.6.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@mui/styles":"^5.16.5","@react-hook/size":"^2.1.1","classnames":"^2.2.6","cross-env":"^7.0.3","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react":"^18","react-a11y":"^1.1.0","react-dom":"^18","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
9190
+ module.exports = {"name":"@sis-cc/dotstatsuite-visions","version":"12.17.0","description":"Library of visual components","author":"OECD","homepage":"https://visions-qa.siscc.org/#o","license":"MIT","repository":"https://gitlab.com/sis-cc/.stat-suite/dotstatsuite-visions","main":"lib/index.js","module":"es/index.js","engines":{"node":">=14"},"files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo","build:dev":"nwb build-react-component --copy-files --no-demo","clean":"nwb clean-module && nwb clean-demo","prepublishOnly":"npm run build","start":"nwb serve-react-demo","test":"jest","test:watch":"jest --watch --no-cache","lint":"eslint src/ --color","precommit":"lint-staged"},"dependencies":{"@emotion/react":"^11.13.0","@emotion/styled":"^11.13.0","@hello-pangea/dnd":"^16.6.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@mui/styles":"^5.16.5","@react-hook/size":"^2.1.1","classnames":"^2.2.6","cross-env":"^7.0.3","date-fns":"^1.30.1","isemail":"^3.2.0","numeral":"^2.0.6","prop-types":"^15.7.2","ramda":"^0.27.0","react-draggable":"^4.4.5","react-error-boundary":"^4.0.10","react-virtualized":"^9.21.2"},"peerDependencies":{"@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","react":"^18","react-dom":"^18"},"devDependencies":{"@babel/eslint-parser":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@cfaester/enzyme-adapter-react-18":"^0.7.0","@mui/icons-material":"^5.16.5","@mui/material":"^5.16.5","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","babel-jest":"^24.8.0","babel-preset-react-app":"^9.0.0","dox":"^0.9.0","eslint":"^8.39.0","eslint-plugin-import":"^2.27.5","eslint-plugin-jsx-a11y":"^6.7.1","eslint-plugin-prettier":"^4.2.1","eslint-plugin-react":"^7.32.2","eslint-plugin-react-hooks":"^4.6.0","husky":"^2.7.0","identity-obj-proxy":"^3.0.0","jest":"^24.8.0","jss":"^10.10.0","jss-rtl":"^0.2.3","lint-staged":"^8.2.1","mutationobserver-shim":"^0.3.7","nwb":"0.23.0","prettier":"^2.8.8","pretty-quick":"^3.1.3","react":"^18","react-a11y":"^1.1.0","react-dom":"^18","react-helmet":"^5.2.1","react-scrollable-anchor":"^0.6.1","react-syntax-highlighter":"^10.2.1","sanitize-html":"2.7.0","webpack":"^5.68.0","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4"},"jest":{"verbose":true,"coverageDirectory":"coverage","collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}","!src/ScopeList/*.{js,jsx,ts,tsx}","!src/**/*.d.ts"],"setupFilesAfterEnv":["<rootDir>/tests/setup.js"],"testMatch":["**/tests/**/*.{spec,test}.{js,jsx,ts,tsx}","!**/tests/ScopeList.test.js"],"testEnvironment":"jsdom","transform":{"^.+\\.(js|jsx|ts|tsx)$":"<rootDir>/node_modules/babel-jest"},"transformIgnorePatterns":["[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$","^.+\\.module\\.(css|sass|scss)$"],"modulePaths":[],"moduleNameMapper":{"^react-native$":"react-native-web","^.+\\.module\\.(css|sass|scss)$":"identity-obj-proxy","\\.(jpg|jpeg|png)$":"identity-obj-proxy"},"moduleFileExtensions":["web.js","js","web.ts","ts","web.tsx","tsx","json","web.jsx","jsx","node"]},"babel":{"presets":["react-app"],"plugins":["@babel/plugin-syntax-dynamic-import"]},"eslintConfig":{"env":{"browser":true,"jest":true,"node":true,"es6":true},"extends":["eslint:recommended","plugin:react/recommended","plugin:jsx-a11y/recommended"],"parser":"@babel/eslint-parser","parserOptions":{"babelOptions":{"presets":[["babel-preset-react-app",false],"babel-preset-react-app/test"]},"ecmaFeatures":{"experimentalObjectRestSpread":true,"jsx":true},"sourceType":"module"},"plugins":["prettier","react","import","react-hooks","jsx-a11y"],"rules":{"no-console":"warn","no-unused-vars":"error","react/display-name":"off","react-hooks/rules-of-hooks":"error","react-hooks/exhaustive-deps":"warn","no-use-before-define":"error"}},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"src/**/*.{js,css}":["prettier --write","git add","yarn lint"]},"prettier":{"endOfLine":"lf","useTabs":false,"printWidth":100,"tabWidth":2,"singleQuote":true,"trailingComma":"all","bracketSameLine":false,"bracketSpacing":true,"parser":"babel","semi":true,"arrowParens":"avoid"}};
9191
9191
 
9192
9192
  /***/ }),
9193
9193
  /* 167 */
@@ -56267,6 +56267,9 @@ var sisccTheme = function sisccTheme(_ref) {
56267
56267
  },
56268
56268
  '&.Mui-focusVisible': {
56269
56269
  backgroundColor: outerPalette.hover || innerPalette.hover
56270
+ },
56271
+ '&.Mui-disabled': {
56272
+ opacity: 1
56270
56273
  }
56271
56274
  }
56272
56275
  }
@@ -56484,8 +56487,12 @@ var sisccTheme = function sisccTheme(_ref) {
56484
56487
  },
56485
56488
  table: {
56486
56489
  flag: {
56487
- fontSize: 10,
56488
- color: outerPalette.textLight || innerPalette.textLight
56490
+ root: {
56491
+ fontSize: 10,
56492
+ color: outerPalette.textLight || innerPalette.textLight
56493
+ },
56494
+ delimiters: ' ',
56495
+ verticalAlign: 'top'
56489
56496
  },
56490
56497
  dot: {
56491
56498
  fontSize: 8
@@ -62546,13 +62553,19 @@ var useStyles_useStyles = makeStyles(function (theme) {
62546
62553
  height: theme.spacing(3.75)
62547
62554
  },
62548
62555
  leftIcon: {
62549
- padding: theme.spacing(0.125, 0.5)
62556
+ padding: theme.spacing(0.125, 0.5),
62557
+ '&.Mui-disabled': {
62558
+ color: theme.palette.grey[700] + ' !important'
62559
+ }
62550
62560
  },
62551
62561
  rightIcon: {
62552
62562
  padding: theme.spacing(0.125, 0),
62553
62563
  borderRadius: theme.shape.borderRadius,
62554
62564
  color: theme.palette.primary.main,
62555
- margin: theme.spacing(0.125)
62565
+ margin: theme.spacing(0.125),
62566
+ '&.Mui-disabled': {
62567
+ color: theme.palette.grey[700] + ' !important'
62568
+ }
62556
62569
  },
62557
62570
  clear: {
62558
62571
  padding: '3px 0px 0px 0px'
@@ -63582,6 +63595,10 @@ var flags_extends = Object.assign || function (target) { for (var i = 1; i < arg
63582
63595
 
63583
63596
 
63584
63597
 
63598
+
63599
+ var flags_flagStylePath = function flagStylePath(theme) {
63600
+ return es_pathOr({}, ['mixins', 'table', 'flag'], theme);
63601
+ };
63585
63602
  var flags_useStyles = makeStyles(function (theme) {
63586
63603
  return {
63587
63604
  content: flags_extends({
@@ -63601,10 +63618,10 @@ var flags_useStyles = makeStyles(function (theme) {
63601
63618
  fontWeight: 'bold',
63602
63619
  fontStyle: 'normal',
63603
63620
  position: 'relative',
63604
- top: '-4px'
63605
- }, es_pathOr({}, ['mixins', 'table', 'flag'], theme)),
63621
+ verticalAlign: es_propOr('middle', 'verticalAlign', flags_flagStylePath(theme))
63622
+ }, es_propOr({}, 'root', flags_flagStylePath(theme))),
63606
63623
  svg: {
63607
- verticalAlign: 'middle'
63624
+ verticalAlign: es_propOr('middle', 'verticalAlign', flags_flagStylePath(theme))
63608
63625
  },
63609
63626
  header: {
63610
63627
  color: theme.palette.getContrastText(theme.palette.primary.main)
@@ -63622,6 +63639,7 @@ var flags_Flags = function Flags(_ref) {
63622
63639
  labelAccessor = _ref.labelAccessor;
63623
63640
 
63624
63641
  var classes = flags_useStyles();
63642
+ var theme = styles_useTheme_useTheme();
63625
63643
  var noFlags = es_isNil(flags) || es_isEmpty(flags);
63626
63644
 
63627
63645
  var _useKeyboardEscapeHan = useKeybordEscapeHandler(),
@@ -63633,7 +63651,7 @@ var flags_Flags = function Flags(_ref) {
63633
63651
  var hasUncoded = es_any(es_complement(es_has('code')), flags);
63634
63652
  var codedIcons = pipe(es_reduce(function (acc, flag) {
63635
63653
  return es_when(es_always(es_has('code', flag)), es_append(flag.code))(acc);
63636
- }, []), es_join(','))(flags);
63654
+ }, []), es_join(es_propOr(',', 'delimiters', flags_flagStylePath(theme))))(flags);
63637
63655
 
63638
63656
  var labels = es_map(function (flag) {
63639
63657
  var value = TableHtml5_utils_getValue(labelAccessor)(flag);
@@ -63676,7 +63694,7 @@ var flags_Flags = function Flags(_ref) {
63676
63694
  es_and(es_not(es_isEmpty(codedIcons)), hasUncoded) && react_default.a.createElement(
63677
63695
  react_default.a.Fragment,
63678
63696
  null,
63679
- ','
63697
+ es_propOr(',', 'delimiters', flags_flagStylePath(theme))
63680
63698
  ),
63681
63699
  hasUncoded && react_default.a.createElement(
63682
63700
  react["Fragment"],