@sis-cc/dotstatsuite-visions 10.28.0 → 10.28.1

package/es/DataFooter/DataFooter.js

@@ -22,25 +22,11 @@ var useStyles = makeStyles(function (theme) {
       flexGrow: 1
     },
     copyright: {
-      padding: function padding(_ref) {
-        var isWidthUp = _ref.isWidthUp,
-            isSourced = _ref.isSourced;
-
-        if (isWidthUp(T4_BREAKPOINTS.sm) && isSourced) return 0;
-        return theme.spacing(0, 1, 0, 1);
-      }
+      padding: 0
     },
     source: {
       padding: theme.spacing(0, 1, 0, 1)
     },
-    typo: {
-      fontSize: function fontSize(_ref2) {
-        var isWidthUp = _ref2.isWidthUp;
-
-        if (isWidthUp(T4_BREAKPOINTS.lg)) return 14;
-        return 12;
-      }
-    },
     logo: {
       height: HEIGHT / 2,
       display: 'flex'
@@ -52,15 +38,15 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var DataFooter = function DataFooter(_ref3) {
+var DataFooter = function DataFooter(_ref) {
   var _cx;
 
-  var logo = _ref3.logo,
-      source = _ref3.source,
-      copyright = _ref3.copyright,
-      legend = _ref3.legend,
-      _ref3$isSticky = _ref3.isSticky,
-      isSticky = _ref3$isSticky === undefined ? false : _ref3$isSticky;
+  var logo = _ref.logo,
+      source = _ref.source,
+      copyright = _ref.copyright,
+      legend = _ref.legend,
+      _ref$isSticky = _ref.isSticky,
+      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
 
   var target = React.useRef(null);
 
@@ -70,12 +56,13 @@ var DataFooter = function DataFooter(_ref3) {
   var isWidthUp = R.gt(width);
   var isSourced = source && source.label && source.link;
   var isCopyrighted = copyright && copyright.label && copyright.content;
-  var classes = useStyles({ isWidthUp: isWidthUp, isSourced: isSourced });
+  var classes = useStyles();
 
   var _useKeyboardEscapeHan = useKeyboardEscapeHandler(),
       open = _useKeyboardEscapeHan.open,
       setOpen = _useKeyboardEscapeHan.setOpen;
 
+  var typoSize = isWidthUp(T4_BREAKPOINTS.lg) ? 14 : 12;
   if (!isWidthUp(T4_BREAKPOINTS.xs)) return React.createElement(Grid, { ref: target });
 
   return React.createElement(
@@ -107,7 +94,10 @@ var DataFooter = function DataFooter(_ref3) {
         },
         React.createElement(
           Grid,
-          { item: true, className: classes.copyright },
+          {
+            item: true,
+            className: isWidthUp(T4_BREAKPOINTS.sm) && isSourced ? classes.copyright : classes.source
+          },
           isCopyrighted && React.createElement(
             Fragment,
             null,
@@ -137,11 +127,7 @@ var DataFooter = function DataFooter(_ref3) {
               },
               React.createElement(
                 Typography,
-                {
-                  variant: 'body2',
-                  className: classes.typo,
-                  style: { cursor: 'pointer' }
-                },
+                { variant: 'body2', style: { cursor: 'pointer', fontSize: typoSize } },
                 copyright.label
               )
             ),
@@ -157,7 +143,7 @@ var DataFooter = function DataFooter(_ref3) {
           { item: true, className: classes.source },
           React.createElement(
             Typography,
-            { variant: 'body2', className: classes.typo },
+            { variant: 'body2', style: { fontSize: typoSize } },
             React.createElement(
               Link,
               { href: source.link, rel: 'noopener noreferrer', target: '_blank', variant: 'body2' },

package/es/DataHeader/DataHeader.js

@@ -19,11 +19,7 @@ var useStyles = makeStyles(function (theme) {
   return {
     header: {
       alignItems: 'center',
-      display: 'flex',
-      justifyContent: function justifyContent(_ref) {
-        var isWidthLess = _ref.isWidthLess;
-        return isWidthLess(T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between';
-      }
+      display: 'flex'
     },
     container: _extends({
       display: 'flex',
@@ -37,12 +33,7 @@ var useStyles = makeStyles(function (theme) {
       display: 'inline-block',
       width: '100%',
       lineHeight: 1.5
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme), {
-      fontSize: function fontSize(_ref2) {
-        var isWidthLess = _ref2.isWidthLess;
-        return R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
-      }
-    }),
+    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme)),
     wrapperSubtitle: {
       alignItems: 'center',
       display: 'flex',
@@ -53,18 +44,9 @@ var useStyles = makeStyles(function (theme) {
     subtitle: _extends({
       lineHeight: 1.6,
       color: theme.palette.grey[600]
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme), {
-      fontSize: function fontSize(_ref3) {
-        var isWidthLess = _ref3.isWidthLess;
-        return R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-      }
-    }),
+    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme)),
     disclaimer: _extends({
       padding: theme.spacing(0.5),
-      fontSize: function fontSize(_ref4) {
-        var isWidthLess = _ref4.isWidthLess;
-        return R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-      },
       lineHeight: 1.5
     }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
     infoIcon: {
@@ -106,19 +88,19 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref5) {
+var DataHeader = function DataHeader(_ref) {
   var _cx;
 
-  var children = _ref5.children,
-      title = _ref5.title,
-      _ref5$subtitle = _ref5.subtitle,
-      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
-      combinations = _ref5.combinations,
-      disclaimer = _ref5.disclaimer,
-      sideProps = _ref5.sideProps,
-      SideIcon = _ref5.SideIcon,
-      _ref5$isSticky = _ref5.isSticky,
-      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
+  var children = _ref.children,
+      title = _ref.title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === undefined ? [] : _ref$subtitle,
+      combinations = _ref.combinations,
+      disclaimer = _ref.disclaimer,
+      sideProps = _ref.sideProps,
+      SideIcon = _ref.SideIcon,
+      _ref$isSticky = _ref.isSticky,
+      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
 
   var target = React.useRef(null);
 
@@ -127,7 +109,7 @@ var DataHeader = function DataHeader(_ref5) {
 
   var isWidthUp = R.gte(width);
   var isWidthLess = R.lt(width);
-  var classes = useStyles({ isWidthLess: isWidthLess });
+  var classes = useStyles();
 
   var reducedContent = getReducedContent({
     isWidthLess: isWidthLess,
@@ -139,13 +121,21 @@ var DataHeader = function DataHeader(_ref5) {
 
   var theme = useTheme();
   var iconColor = R.path(['mixins', 'dataHeader', 'icon', 'color'], theme);
-
+  var fontSizeTitle = R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
+  var fontSizeSubtitle = R.cond([[R.always(isWidthLess(T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(T4_BREAKPOINTS.sm)), R.always(13)]])(14);
   var subtitleLength = R.length(subtitle);
   var combinationsLength = R.length(combinations);
 
   return React.createElement(
     'div',
-    { className: classes.header, ref: target, 'data-testid': 'data-header' },
+    {
+      className: classes.header,
+      style: {
+        justifyContent: isWidthLess(T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between'
+      },
+      ref: target,
+      'data-testid': 'data-header'
+    },
     React.createElement(
       'div',
       { className: cx(classes.container, (_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
@@ -154,6 +144,7 @@ var DataHeader = function DataHeader(_ref5) {
         {
           variant: 'h1',
           className: classes.title,
+          style: { fontSize: fontSizeTitle },
           'data-testid': 'data-header-title',
           'aria-label': title.label
         },
@@ -174,6 +165,7 @@ var DataHeader = function DataHeader(_ref5) {
             {
               key: 'subtitle-' + index,
               className: classes.subtitle,
+              style: { fontSize: fontSizeSubtitle },
               'data-testid': 'data-header-subtitle',
               'aria-label': sub.header
             },
@@ -221,7 +213,11 @@ var DataHeader = function DataHeader(_ref5) {
       ),
       isWidthUp(T4_BREAKPOINTS.xs3) && disclaimer && React.createElement(
         Typography,
-        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        {
+          'data-testid': 'data-header-disclaimer',
+          className: classes.disclaimer,
+          style: { fontSize: fontSizeSubtitle }
+        },
         disclaimer
       )
     ),

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -44,7 +44,6 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       activePanelId = props.activePanelId,
       Tag = props.Tag,
       testId = props.testId,
-      accessibility = props.accessibility,
       _props$expansionPanel = props.expansionPanelProps,
       expansionPanelProps = _props$expansionPanel === undefined ? {} : _props$expansionPanel,
       _props$labelRenderer = props.labelRenderer,
@@ -64,7 +63,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       _props$simpleSelectio = props.simpleSelectionMode,
       simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
-  var classes = useStyles({ accessibility: accessibility });
+  var classes = useStyles();
   var theme = useTheme();
   var isRtl = getIsRtl(theme);
   var Chip = R.isNil(Tag) ? InternalTag : Tag;
@@ -148,7 +147,6 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
 
 HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   id: PropTypes.string,
-  accessibility: PropTypes.bool,
   activePanelId: PropTypes.string,
   changeSelection: PropTypes.func,
   onChangeActivePanel: PropTypes.func,

package/es/Logo/Logo.js

@@ -11,10 +11,6 @@ var useStyles = makeStyles(function () {
     },
     logo: {
       maxWidth: '100%',
-      maxHeight: function maxHeight(_ref) {
-        var _maxHeight = _ref.maxHeight;
-        return _maxHeight;
-      },
       imageRendering: 'crisp-edges'
     },
     // https://caniuse.com/mdn-css_properties_image-rendering_crisp-edges
@@ -24,17 +20,22 @@ var useStyles = makeStyles(function () {
   };
 });
 
-var Logo = function Logo(_ref2) {
-  var logo = _ref2.logo,
-      _ref2$maxHeight = _ref2.maxHeight,
-      maxHeight = _ref2$maxHeight === undefined ? 150 : _ref2$maxHeight,
-      children = _ref2.children;
+var Logo = function Logo(_ref) {
+  var logo = _ref.logo,
+      _ref$maxHeight = _ref.maxHeight,
+      maxHeight = _ref$maxHeight === undefined ? 150 : _ref$maxHeight,
+      children = _ref.children;
 
-  var classes = useStyles({ maxHeight: maxHeight });
+  var classes = useStyles();
   return React.createElement(
     'div',
     { className: classes.container },
-    React.createElement('img', { className: cx(classes.logo, classes.alternativeBrowserLogo), src: logo, alt: 'logo' }),
+    React.createElement('img', {
+      className: cx(classes.logo, classes.alternativeBrowserLogo),
+      style: { maxHeight: maxHeight },
+      src: logo,
+      alt: 'logo'
+    }),
     children
   );
 };

package/es/ScopeList/Item.js

@@ -169,7 +169,8 @@ var Item = function Item(_ref) {
         onMouseEnter: R.is(Function, changeMouseSelection) ? changeMouseSelection(null, { isUp: true }) : null,
         style: _extends({}, R.evolve(containerStyles, style), {
           left: isRtl && 0,
-          right: R.not(isRtl) && 0
+          right: R.not(isRtl) && 0,
+          outline: accessibility ? undefined : 'none'
         }),
         className: classes.containerArrow,
         tabIndex: 0,

package/es/ScopeList/ScopeList.js

@@ -64,7 +64,7 @@ var ScopeList = function ScopeList(props) {
       setScrollTop = _useState2[1];
 
   var ref = useRef();
-  var classes = useStyles({ accessibility: accessibility });
+  var classes = useStyles();
   var theme = useTheme();
 
   var _useState3 = useState(false),

package/es/ScopeList/styles.js

@@ -27,11 +27,7 @@ export var useStyles = makeStyles(function (theme) {
       margin: 0,
       userSelect: 'none',
       cursor: 'pointer',
-      color: theme.palette.primary.main,
-      outline: function outline(_ref) {
-        var accessibility = _ref.accessibility;
-        return accessibility ? undefined : 'none';
-      }
+      color: theme.palette.primary.main
     },
     listItemHover: {
       '&:hover': {
@@ -126,10 +122,6 @@ export var useStyles = makeStyles(function (theme) {
       color: theme.palette.primary.main,
       height: '100%',
       display: 'flex',
-      outline: function outline(_ref2) {
-        var accessibility = _ref2.accessibility;
-        return accessibility ? undefined : 'none';
-      },
       '&:hover, &:focus': {
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.common.white

package/es/ToggleButton/ToggleButton.js

@@ -24,10 +24,6 @@ var useStyles = makeStyles(function (theme) {
       }
     },
     label: {
-      textTransform: function textTransform(_ref) {
-        var _textTransform = _ref.textTransform;
-        return _textTransform;
-      },
       textAlign: 'left',
       fontSize: '0.9375rem',
       lineHeight: '1.0'
@@ -39,19 +35,19 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-var ToggleButton = function ToggleButton(_ref2) {
+var ToggleButton = function ToggleButton(_ref) {
   var _cx;
 
-  var isOpen = _ref2.isOpen,
-      label = _ref2.label,
-      toggle = _ref2.toggle,
-      testId = _ref2.testId,
-      _ref2$tabindex = _ref2.tabindex,
-      tabindex = _ref2$tabindex === undefined ? 0 : _ref2$tabindex,
-      _ref2$textTransform = _ref2.textTransform,
-      textTransform = _ref2$textTransform === undefined ? 'capitalize' : _ref2$textTransform;
+  var isOpen = _ref.isOpen,
+      label = _ref.label,
+      toggle = _ref.toggle,
+      testId = _ref.testId,
+      _ref$tabindex = _ref.tabindex,
+      tabindex = _ref$tabindex === undefined ? 0 : _ref$tabindex,
+      _ref$textTransform = _ref.textTransform,
+      textTransform = _ref$textTransform === undefined ? 'capitalize' : _ref$textTransform;
 
-  var classes = useStyles({ textTransform: textTransform });
+  var classes = useStyles();
   return React.createElement(
     Button,
     {
@@ -61,6 +57,7 @@ var ToggleButton = function ToggleButton(_ref2) {
       'data-testid': testId,
       classes: { root: classes.root, label: classes.label },
       className: cx((_cx = {}, _cx[classes.selected] = isOpen, _cx)),
+      style: { textTransform: textTransform },
       fullWidth: true,
       variant: 'text',
       onClick: R.is(Function)(toggle) ? toggle : null

package/es/VirtualizedTree/Item.js

@@ -96,7 +96,10 @@ var Item = function Item(_ref) {
       onMouseDown: isDisabled || open ? null : eventsListeners.onMouseDown,
       onMouseEnter: isDisabled || open ? null : eventsListeners.onMouseEnter,
       title: isGreyed ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
-      style: { opacity: isDisabled && isGreyed ? '0.5' : '1' },
+      style: {
+        opacity: isDisabled && isGreyed ? '0.5' : '1',
+        outline: accessibility ? undefined : 'none'
+      },
       primary: React.createElement(
         'div',
         {

package/lib/DataFooter/DataFooter.js

@@ -59,25 +59,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flexGrow: 1
     },
     copyright: {
-      padding: function padding(_ref) {
-        var isWidthUp = _ref.isWidthUp,
-            isSourced = _ref.isSourced;
-
-        if (isWidthUp(_theme.T4_BREAKPOINTS.sm) && isSourced) return 0;
-        return theme.spacing(0, 1, 0, 1);
-      }
+      padding: 0
     },
     source: {
       padding: theme.spacing(0, 1, 0, 1)
     },
-    typo: {
-      fontSize: function fontSize(_ref2) {
-        var isWidthUp = _ref2.isWidthUp;
-
-        if (isWidthUp(_theme.T4_BREAKPOINTS.lg)) return 14;
-        return 12;
-      }
-    },
     logo: {
       height: HEIGHT / 2,
       display: 'flex'
@@ -89,15 +75,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var DataFooter = function DataFooter(_ref3) {
+var DataFooter = function DataFooter(_ref) {
   var _cx;
 
-  var logo = _ref3.logo,
-      source = _ref3.source,
-      copyright = _ref3.copyright,
-      legend = _ref3.legend,
-      _ref3$isSticky = _ref3.isSticky,
-      isSticky = _ref3$isSticky === undefined ? false : _ref3$isSticky;
+  var logo = _ref.logo,
+      source = _ref.source,
+      copyright = _ref.copyright,
+      legend = _ref.legend,
+      _ref$isSticky = _ref.isSticky,
+      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -107,12 +93,13 @@ var DataFooter = function DataFooter(_ref3) {
   var isWidthUp = R.gt(width);
   var isSourced = source && source.label && source.link;
   var isCopyrighted = copyright && copyright.label && copyright.content;
-  var classes = useStyles({ isWidthUp: isWidthUp, isSourced: isSourced });
+  var classes = useStyles();
 
   var _useKeyboardEscapeHan = (0, _useKeybordEscapeHandler2.default)(),
       open = _useKeyboardEscapeHan.open,
       setOpen = _useKeyboardEscapeHan.setOpen;
 
+  var typoSize = isWidthUp(_theme.T4_BREAKPOINTS.lg) ? 14 : 12;
   if (!isWidthUp(_theme.T4_BREAKPOINTS.xs)) return _react2.default.createElement(_Grid2.default, { ref: target });
 
   return _react2.default.createElement(
@@ -144,7 +131,10 @@ var DataFooter = function DataFooter(_ref3) {
         },
         _react2.default.createElement(
           _Grid2.default,
-          { item: true, className: classes.copyright },
+          {
+            item: true,
+            className: isWidthUp(_theme.T4_BREAKPOINTS.sm) && isSourced ? classes.copyright : classes.source
+          },
           isCopyrighted && _react2.default.createElement(
             _react.Fragment,
             null,
@@ -174,11 +164,7 @@ var DataFooter = function DataFooter(_ref3) {
               },
               _react2.default.createElement(
                 _Typography2.default,
-                {
-                  variant: 'body2',
-                  className: classes.typo,
-                  style: { cursor: 'pointer' }
-                },
+                { variant: 'body2', style: { cursor: 'pointer', fontSize: typoSize } },
                 copyright.label
               )
             ),
@@ -194,7 +180,7 @@ var DataFooter = function DataFooter(_ref3) {
           { item: true, className: classes.source },
           _react2.default.createElement(
             _Typography2.default,
-            { variant: 'body2', className: classes.typo },
+            { variant: 'body2', style: { fontSize: typoSize } },
             _react2.default.createElement(
               _Link2.default,
               { href: source.link, rel: 'noopener noreferrer', target: '_blank', variant: 'body2' },

package/lib/DataHeader/DataHeader.js

@@ -58,11 +58,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     header: {
       alignItems: 'center',
-      display: 'flex',
-      justifyContent: function justifyContent(_ref) {
-        var isWidthLess = _ref.isWidthLess;
-        return isWidthLess(_theme.T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between';
-      }
+      display: 'flex'
     },
     container: _extends({
       display: 'flex',
@@ -76,12 +72,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       display: 'inline-block',
       width: '100%',
       lineHeight: 1.5
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme), {
-      fontSize: function fontSize(_ref2) {
-        var isWidthLess = _ref2.isWidthLess;
-        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
-      }
-    }),
+    }, R.pathOr({}, ['mixins', 'dataHeader', 'title'], theme)),
     wrapperSubtitle: {
       alignItems: 'center',
       display: 'flex',
@@ -92,18 +83,9 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     subtitle: _extends({
       lineHeight: 1.6,
       color: theme.palette.grey[600]
-    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme), {
-      fontSize: function fontSize(_ref3) {
-        var isWidthLess = _ref3.isWidthLess;
-        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-      }
-    }),
+    }, R.pathOr({}, ['mixins', 'dataHeader', 'subtitle'], theme)),
     disclaimer: _extends({
       padding: theme.spacing(0.5),
-      fontSize: function fontSize(_ref4) {
-        var isWidthLess = _ref4.isWidthLess;
-        return R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
-      },
       lineHeight: 1.5
     }, R.pathOr({}, ['mixins', 'dataHeader', 'disclaimer'], theme)),
     infoIcon: {
@@ -145,19 +127,19 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var DataHeader = function DataHeader(_ref5) {
+var DataHeader = function DataHeader(_ref) {
   var _cx;
 
-  var children = _ref5.children,
-      title = _ref5.title,
-      _ref5$subtitle = _ref5.subtitle,
-      subtitle = _ref5$subtitle === undefined ? [] : _ref5$subtitle,
-      combinations = _ref5.combinations,
-      disclaimer = _ref5.disclaimer,
-      sideProps = _ref5.sideProps,
-      SideIcon = _ref5.SideIcon,
-      _ref5$isSticky = _ref5.isSticky,
-      isSticky = _ref5$isSticky === undefined ? false : _ref5$isSticky;
+  var children = _ref.children,
+      title = _ref.title,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === undefined ? [] : _ref$subtitle,
+      combinations = _ref.combinations,
+      disclaimer = _ref.disclaimer,
+      sideProps = _ref.sideProps,
+      SideIcon = _ref.SideIcon,
+      _ref$isSticky = _ref.isSticky,
+      isSticky = _ref$isSticky === undefined ? false : _ref$isSticky;
 
   var target = _react2.default.useRef(null);
 
@@ -166,7 +148,7 @@ var DataHeader = function DataHeader(_ref5) {
 
   var isWidthUp = R.gte(width);
   var isWidthLess = R.lt(width);
-  var classes = useStyles({ isWidthLess: isWidthLess });
+  var classes = useStyles();
 
   var reducedContent = (0, _utils.getReducedContent)({
     isWidthLess: isWidthLess,
@@ -178,13 +160,21 @@ var DataHeader = function DataHeader(_ref5) {
 
   var theme = (0, _styles.useTheme)();
   var iconColor = R.path(['mixins', 'dataHeader', 'icon', 'color'], theme);
-
+  var fontSizeTitle = R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(14)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.md2)), R.always(16)], [R.T, R.identity]])(18);
+  var fontSizeSubtitle = R.cond([[R.always(isWidthLess(_theme.T4_BREAKPOINTS.xs3)), R.always(12)], [R.always(isWidthLess(_theme.T4_BREAKPOINTS.sm)), R.always(13)]])(14);
   var subtitleLength = R.length(subtitle);
   var combinationsLength = R.length(combinations);
 
   return _react2.default.createElement(
     'div',
-    { className: classes.header, ref: target, 'data-testid': 'data-header' },
+    {
+      className: classes.header,
+      style: {
+        justifyContent: isWidthLess(_theme.T4_BREAKPOINTS.xs2) ? 'flex-end' : 'space-between'
+      },
+      ref: target,
+      'data-testid': 'data-header'
+    },
     _react2.default.createElement(
       'div',
       { className: (0, _classnames2.default)(classes.container, (_cx = {}, _cx[classes.sticky] = isSticky, _cx)) },
@@ -193,6 +183,7 @@ var DataHeader = function DataHeader(_ref5) {
         {
           variant: 'h1',
           className: classes.title,
+          style: { fontSize: fontSizeTitle },
           'data-testid': 'data-header-title',
           'aria-label': title.label
         },
@@ -213,6 +204,7 @@ var DataHeader = function DataHeader(_ref5) {
             {
               key: 'subtitle-' + index,
               className: classes.subtitle,
+              style: { fontSize: fontSizeSubtitle },
               'data-testid': 'data-header-subtitle',
               'aria-label': sub.header
             },
@@ -260,7 +252,11 @@ var DataHeader = function DataHeader(_ref5) {
       ),
       isWidthUp(_theme.T4_BREAKPOINTS.xs3) && disclaimer && _react2.default.createElement(
         _Typography2.default,
-        { 'data-testid': 'data-header-disclaimer', className: classes.disclaimer },
+        {
+          'data-testid': 'data-header-disclaimer',
+          className: classes.disclaimer,
+          style: { fontSize: fontSizeSubtitle }
+        },
         disclaimer
       )
     ),

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -73,7 +73,6 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       activePanelId = props.activePanelId,
       Tag = props.Tag,
       testId = props.testId,
-      accessibility = props.accessibility,
       _props$expansionPanel = props.expansionPanelProps,
       expansionPanelProps = _props$expansionPanel === undefined ? {} : _props$expansionPanel,
       _props$labelRenderer = props.labelRenderer,
@@ -93,7 +92,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       _props$simpleSelectio = props.simpleSelectionMode,
       simpleSelectionMode = _props$simpleSelectio === undefined ? false : _props$simpleSelectio;
 
-  var classes = (0, _styles.useStyles)({ accessibility: accessibility });
+  var classes = (0, _styles.useStyles)();
   var theme = (0, _core.useTheme)();
   var isRtl = (0, _utils2.getIsRtl)(theme);
   var Chip = R.isNil(Tag) ? _.Tag : Tag;
@@ -177,7 +176,6 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
 
 HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   id: _propTypes2.default.string,
-  accessibility: _propTypes2.default.bool,
   activePanelId: _propTypes2.default.string,
   changeSelection: _propTypes2.default.func,
   onChangeActivePanel: _propTypes2.default.func,