@sis-cc/dotstatsuite-visions 11.4.2 → 12.0.0

package/es/Spotlight/Spotlight.js

@@ -2,14 +2,14 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import * as R from 'ramda';
-import ArrowForward from '@material-ui/icons/ArrowForward';
-import { useTheme } from '@material-ui/core/styles';
-import ArrowBack from '@material-ui/icons/ArrowBack';
-import Search from '@material-ui/icons/Search';
-import Paper from '@material-ui/core/Paper';
-import IconButton from '@material-ui/core/IconButton';
-import InputBase from '@material-ui/core/InputBase';
-import Divider from '@material-ui/core/Divider';
+import ArrowForward from '@mui/icons-material/ArrowForward';
+import { useTheme } from '@mui/material/styles';
+import ArrowBack from '@mui/icons-material/ArrowBack';
+import Search from '@mui/icons-material/Search';
+import Paper from '@mui/material/Paper';
+import IconButton from '@mui/material/IconButton';
+import InputBase from '@mui/material/InputBase';
+import Divider from '@mui/material/Divider';
 import { Field } from './Fields';
 import { useStyles } from './useStyles';
 import { useSpotlight } from './useSpotlight';
@@ -60,7 +60,7 @@ var Spotlight = function Spotlight(_ref) {
       { className: classes.root, elevation: 0 },
       React.createElement(
         IconButton,
-        { className: classes.leftIcon, disabled: true, 'aria-label': 'search' },
+        { className: classes.leftIcon, disabled: true, 'aria-label': 'search', size: 'large' },
         React.createElement(Search, null)
       ),
       React.createElement(InputBase, {
@@ -88,7 +88,8 @@ var Spotlight = function Spotlight(_ref) {
         {
           'aria-label': 'Clear',
           onClick: onClearTerm,
-          className: cx(classes.rightIcon, classes.clear)
+          className: cx(classes.rightIcon, classes.clear),
+          size: 'large'
         },
         React.createElement(Cross, null)
       ) : null,
@@ -115,7 +116,8 @@ var Spotlight = function Spotlight(_ref) {
             color: 'primary',
             className: classes.rightIcon,
             'aria-label': 'commit',
-            onClick: onCommitTerm
+            onClick: onCommitTerm,
+            size: 'large'
           },
           isRtl ? React.createElement(ArrowBack, null) : React.createElement(ArrowForward, null)
         )

package/es/Spotlight/index.js

@@ -1,75 +1,75 @@
-/**
- * Spotlight is an input for search something
- *
- * We have many options for design the component as you wish
- * hasClearAll: show cross button for delete your text
- * hasCommit: show arrow button for commit your text (You could press "enter" for commit)
- * withBorder: add padding around the spotlight
- * fullWidth: input take 100% of the width
- *
- * spotlightOptions: show on right side a drop down list where you can add some options
- *
- * open devTool to see actions
- *
- *
- * @memberOf VISIONS
- * @name Spotlight
- * @tag component
- * @api public
- * @props
- * Spotlight.propTypes = {
- *   term: PropTypes.string,
- *   testId: PropTypes.string,
- *   placeholder: PropTypes.string,
- *   defaultSpotlight: PropTypes.shape({
- *     fields: PropTypes.object,
- *     searchLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *     FieldLabelRenderer: PropTypes.func,
- *   }),
- *   action: PropTypes.func,
- *   hasClearAll: PropTypes.bool,
- *   hasCommit: PropTypes.bool,
- *   withBorder: PropTypes.bool,
- *   fullWidth: PropTypes.bool,
- *   classes: PropTypes.object,
- *   className: PropTypes.object,
- * };
- * @theme
- * {
- *   palette: {
- *     button: {
- *       mainOpacity: // background color around the spotlight (withBorder)
- *     },
- *     highlight: {
- *       hl1: // background color around the spotlight on focus. globale override: outerPalette.highlight1
- *     },
- *     primary: {
- *      main: // color of icons on the right. global override: outerPalette.primaryMain
- *      light: // used if hl1 is null. globale override: outerPalette.primaryLight
- *      dark: // used if mainOpacity is null. globale override: outerPalette.primaryDark
- *     },
- *     grey: {
- *       400: // input border
- *     }
- *   },
- *   typography: {
- *     body2: {
- *       // font, color, size of input label
- *     },
- *   },
- *   mixins: {
- *     spotlight: {
- *       focus: {
- *         outlineColor: outerPalette.highlight1
- *         outlineWidth: 1,
- *         outlineStyle: 'auto',
- *       }
- *     },
- *   }
- * }
- * @testId
- * root: [testId]
- * input: [testId]_input
+/**
+ * Spotlight is an input for search something
+ *
+ * We have many options for design the component as you wish
+ * hasClearAll: show cross button for delete your text
+ * hasCommit: show arrow button for commit your text (You could press "enter" for commit)
+ * withBorder: add padding around the spotlight
+ * fullWidth: input take 100% of the width
+ *
+ * spotlightOptions: show on right side a drop down list where you can add some options
+ *
+ * open devTool to see actions
+ *
+ *
+ * @memberOf VISIONS
+ * @name Spotlight
+ * @tag component
+ * @api public
+ * @props
+ * Spotlight.propTypes = {
+ *   term: PropTypes.string,
+ *   testId: PropTypes.string,
+ *   placeholder: PropTypes.string,
+ *   defaultSpotlight: PropTypes.shape({
+ *     fields: PropTypes.object,
+ *     searchLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *     FieldLabelRenderer: PropTypes.func,
+ *   }),
+ *   action: PropTypes.func,
+ *   hasClearAll: PropTypes.bool,
+ *   hasCommit: PropTypes.bool,
+ *   withBorder: PropTypes.bool,
+ *   fullWidth: PropTypes.bool,
+ *   classes: PropTypes.object,
+ *   className: PropTypes.object,
+ * };
+ * @theme
+ * {
+ *   palette: {
+ *     button: {
+ *       mainOpacity: // background color around the spotlight (withBorder)
+ *     },
+ *     highlight: {
+ *       hl1: // background color around the spotlight on focus. globale override: outerPalette.highlight1
+ *     },
+ *     primary: {
+ *      main: // color of icons on the right. global override: outerPalette.primaryMain
+ *      light: // used if hl1 is null. globale override: outerPalette.primaryLight
+ *      dark: // used if mainOpacity is null. globale override: outerPalette.primaryDark
+ *     },
+ *     grey: {
+ *       400: // input border
+ *     }
+ *   },
+ *   typography: {
+ *     body2: {
+ *       // font, color, size of input label
+ *     },
+ *   },
+ *   mixins: {
+ *     spotlight: {
+ *       focus: {
+ *         outlineColor: outerPalette.highlight1
+ *         outlineWidth: 1,
+ *         outlineStyle: 'auto',
+ *       }
+ *     },
+ *   }
+ * }
+ * @testId
+ * root: [testId]
+ * input: [testId]_input
  */
 
 export { default } from './Spotlight';

package/es/Spotlight/useStyles.js

@@ -1,7 +1,7 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import * as R from 'ramda';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 export var useStyles = makeStyles(function (theme) {
   return {

package/es/TableFooter/TableFooter.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
 import Tooltip from '../Tooltip/Tooltip';
 
 var useStyles = makeStyles(function (theme) {
@@ -40,7 +40,6 @@ var TableFooter = function TableFooter(_ref) {
         Tooltip,
         {
           placement: 'top',
-          interactive: true,
           title: React.createElement(
             Typography,
             { variant: 'body2' },

package/es/TableHeader/TableHeader.js

@@ -1,9 +1,9 @@
 import React, { Fragment } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Lens from '@material-ui/icons/Lens';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Lens from '@mui/icons-material/Lens';
 
 var useStyles = makeStyles(function (theme) {
   return {

package/es/TableHtml5/TableHtml5.js

@@ -1,10 +1,10 @@
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
 import React, { useRef, useState, useEffect, useMemo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import Table from '@material-ui/core/Table';
+import Table from '@mui/material/Table';
 import Header from './header';
 import SubHeader from './subHeader';
 import Section from './section';

package/es/TableHtml5/cell.js

@@ -2,9 +2,10 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import Link from '@material-ui/core/Link';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import TableCell from '@mui/material/TableCell';
+import Link from '@mui/material/Link';
 import Flags from './flags';
 import { getIsRtl } from '../utils';
 
@@ -13,7 +14,7 @@ var useStyles = makeStyles(function (theme) {
     cell: {
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'baseline',
       color: theme.palette.grey['A700'],
       '&:hover': {

package/es/TableHtml5/flags.js

@@ -4,9 +4,10 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Tooltip from '@material-ui/core/Tooltip';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import { visuallyHidden } from '@mui/utils';
+import Tooltip from '@mui/material/Tooltip';
 import { Asterisk } from '../';
 import { getValue } from './utils';
 import useKeyboardEscapeHandler from '../hooks/useKeybordEscapeHandler';
@@ -88,7 +89,6 @@ var Flags = function Flags(_ref) {
       title: content,
       placement: 'top',
       open: open,
-      interactive: true,
       onOpen: function onOpen() {
         return setOpen(true);
       },
@@ -115,7 +115,7 @@ var Flags = function Flags(_ref) {
         React.createElement(Asterisk, { className: classes.svg, style: { fontSize: 11 } }),
         React.createElement(
           Typography,
-          { variant: 'srOnly' },
+          { style: visuallyHidden },
           '* ' + labels
         )
       )

package/es/TableHtml5/header.js

@@ -2,10 +2,11 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
 import Flags from './flags';
 import { getIsRtl } from '../utils';
 import { getValue } from './utils';
@@ -18,7 +19,7 @@ var useStyles = makeStyles(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'top',
       '&:focus ': {
         opacity: '.85'

package/es/TableHtml5/section.js

@@ -4,11 +4,12 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
 import SectionHeader from './sectionHeader';
 import Cell from './cell';
 import { getLight, getIsRtl } from '../utils';
@@ -23,7 +24,7 @@ var useStyles = makeStyles(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'top',
       align: 'left'
@@ -38,7 +39,7 @@ var useStyles = makeStyles(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       position: 'sticky',
       zIndex: 1
     },

package/es/TableHtml5/sectionHeader.js

@@ -2,11 +2,12 @@ import React, { Fragment } from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
 import Flags from './flags';
 import { getDark, getIsRtl } from '../utils';
 import { getValue } from './utils';

package/es/TableHtml5/subHeader.js

@@ -2,10 +2,11 @@ import React from 'react';
 import * as R from 'ramda';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
-import TableCell from '@material-ui/core/TableCell';
-import TableRow from '@material-ui/core/TableRow';
+import Typography from '@mui/material/Typography';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
+import TableCell from '@mui/material/TableCell';
+import TableRow from '@mui/material/TableRow';
 import { getLight, getIsRtl } from '../utils';
 import Flags from './flags';
 
@@ -16,7 +17,7 @@ var useStyles = makeStyles(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       color: theme.palette.grey['A700'],
       verticalAlign: 'middle',
       position: 'sticky',
@@ -27,7 +28,7 @@ var useStyles = makeStyles(function (theme) {
       border: 'inherit',
       borderBottom: 'thin solid ' + theme.palette.grey[500],
       borderRight: 'thin solid ' + theme.palette.grey[500],
-      padding: theme.spacing(0.5) + 'px ' + theme.spacing(1) + 'px',
+      padding: theme.spacing(0.5) + ' ' + theme.spacing(1),
       verticalAlign: 'middle',
       textAlign: 'center',
       color: theme.palette.grey['A700']

package/es/TableLayout/Box.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@material-ui/core/Grid';
-import { makeStyles } from '@material-ui/core/styles';
 import cx from 'classnames';
 import { Droppable } from '@hello-pangea/dnd';
+import Typography from '@mui/material/Typography';
+import Grid from '@mui/material/Grid';
+import makeStyles from '@mui/styles/makeStyles';
 import DnDItem from './DnDItem';
+import { visuallyHidden } from '@mui/utils';
 import { getLight, getDark } from '../utils';
 import { BOX } from './constants';
 
@@ -70,7 +71,7 @@ var Box = function Box(_ref2) {
       ),
       React.createElement(
         Typography,
-        { variant: 'srOnly' },
+        { style: visuallyHidden },
         title
       )
     ),

package/es/TableLayout/DnDItem.js

@@ -4,10 +4,10 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import Typography from '@material-ui/core/Typography';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
+import makeStyles from '@mui/styles/makeStyles';
+import Typography from '@mui/material/Typography';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 import { Draggable } from '@hello-pangea/dnd';
 import { getLight, getDark } from '../utils';
 import { BOX, wcagId } from './constants';
@@ -50,11 +50,10 @@ export var useStyles = makeStyles(function (theme) {
     fontSize: theme.typography.fontSize - 2,
     fontWeight: theme.typography.fontWeightBold
   }, _ref.itemButton = {
-    paddingTop: theme.spacing(0.25),
-    paddingBottom: theme.spacing(0.25),
-    paddingRight: 0
+    // paddingTop: theme.spacing(0.25),
+    // paddingBottom: theme.spacing(0.25),
+    // paddingRight: 0,
   }, _ref.select = {
-    padding: theme.spacing(0.5, 4, 0.5, 2),
     backgroundColor: theme.palette.common.white,
     '&:focus': {
       backgroundColor: theme.palette.common.white
@@ -110,7 +109,9 @@ var DnDItem = function DnDItem(_ref2) {
                 return selectItem.onChange(e.target.value);
               },
               classes: { root: classes.select },
-              variant: 'outlined'
+              variant: 'outlined',
+              size: 'small',
+              autoWidth: true
             },
             R.map(function (v) {
               return React.createElement(

package/es/TableLayout/TableLayout.js

@@ -4,16 +4,17 @@ import React, { Fragment, useState, useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import * as R from 'ramda';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import ViewColumn from '@material-ui/icons/ViewColumnOutlined';
-import ViewList from '@material-ui/icons/ViewListOutlined';
-import Reorder from '@material-ui/icons/Reorder';
-import ViewQuilt from '@material-ui/icons/ViewQuiltOutlined';
-import Undo from '@material-ui/icons/Undo';
-import Done from '@material-ui/icons/Done';
-import CheckBoxIcon from '@material-ui/icons/CheckBoxOutlineBlankOutlined';
-import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import ViewColumn from '@mui/icons-material/ViewColumnOutlined';
+import ViewList from '@mui/icons-material/ViewListOutlined';
+import Reorder from '@mui/icons-material/Reorder';
+import ViewQuilt from '@mui/icons-material/ViewQuiltOutlined';
+import Undo from '@mui/icons-material/Undo';
+import Done from '@mui/icons-material/Done';
+import { visuallyHidden } from '@mui/utils';
+import { makeStyles } from '@mui/styles';
+import CheckBoxIcon from '@mui/icons-material/CheckBoxOutlineBlankOutlined';
 import { DragDropContext } from '@hello-pangea/dnd';
 import { withBlank } from '../utils';
 import TablePreview from '../TablePreview';
@@ -267,7 +268,7 @@ var TableLayout = function TableLayout(_ref) {
               ),
               React.createElement(
                 Typography,
-                { variant: 'srOnly' },
+                { style: visuallyHidden },
                 labels.wcagDragExplanation
               )
             ),

package/es/TablePreview/TablePreview.js

@@ -2,10 +2,10 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import * as R from 'ramda';
-import Table from '@material-ui/core/Table';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
-import Lens from '@material-ui/icons/Lens';
+import Table from '@mui/material/Table';
+import TableRow from '@mui/material/TableRow';
+import TableCell from '@mui/material/TableCell';
+import Lens from '@mui/icons-material/Lens';
 import { withBlank } from '../utils';
 import { useStyles } from './styles';
 import { getMaxValuesLength, getEmptyValues, getLabel, valueLabel, maxCount } from './lib';

package/es/TablePreview/lib.js

@@ -1,5 +1,5 @@
 import * as R from 'ramda';
-import Lens from '@material-ui/icons/Lens';
+import Lens from '@mui/icons-material/Lens';
 
 export var valueLabel = 'Xxxx';
 export var maxCount = 3;

package/es/TablePreview/styles.js

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { getLight, getDark } from '../utils';
 
 export var useStyles = makeStyles(function (theme) {

package/es/Tag/Tag.js

@@ -3,8 +3,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 import React from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
-import Typography from '@material-ui/core/Typography';
-import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@mui/material/Typography';
+import makeStyles from '@mui/styles/makeStyles';
 
 var useStyles = makeStyles(function (theme) {
   return {

package/es/Tag/index.js

@@ -1,30 +1,30 @@
-/**
- * Tag takes children for wrapped it into a hightlight
- *
- * @memberOf VISIONS
- * @name Tag
- * @tag component
- * @api public
- * @theme
- * {
- *   palette: {
- *     highlight: {
- *       hl2: // border around the label. globale override: outerPalette.highlight2
- *     },
- *     primary: {
- *       dark: // used if hl2 is null. globale override: outerPalette.primaryDark
- *     }
- *   },
- *   mixins: {
- *     tag: {
- *       root: {
- *         fontSize: 12,
- *         fontFamily: "'PT Sans Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif",
- *         color: outerPalette.textLight,
- *       },
- *     }
- *   }
- * }
+/**
+ * Tag takes children for wrapped it into a hightlight
+ *
+ * @memberOf VISIONS
+ * @name Tag
+ * @tag component
+ * @api public
+ * @theme
+ * {
+ *   palette: {
+ *     highlight: {
+ *       hl2: // border around the label. globale override: outerPalette.highlight2
+ *     },
+ *     primary: {
+ *       dark: // used if hl2 is null. globale override: outerPalette.primaryDark
+ *     }
+ *   },
+ *   mixins: {
+ *     tag: {
+ *       root: {
+ *         fontSize: 12,
+ *         fontFamily: "'PT Sans Narrow', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+ *         color: outerPalette.textLight,
+ *       },
+ *     }
+ *   }
+ * }
  */
 
 export { default } from './Tag';