@widergy/energy-ui 3.172.3 → 3.173.0

package/dist/esm/components/UTSelect/UTSelectFixedBottomOption.stories.js

@@ -0,0 +1,163 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useState } from 'react';
+import { bool, string } from 'prop-types';
+import UTSelect from '.';
+const OPTIONS = [{
+  name: 'Electricidad',
+  value: 'electricity'
+}, {
+  name: 'Gas natural',
+  value: 'gas'
+}, {
+  name: 'Agua potable',
+  value: 'water'
+}, {
+  name: 'Energía solar',
+  value: 'solar'
+}, {
+  name: 'Biomasa',
+  value: 'biomass'
+}];
+const OPTIONS_WITH_CATEGORIES = [{
+  name: 'Residencial bajo',
+  value: 'res-low',
+  category: 'Residencial'
+}, {
+  name: 'Residencial medio',
+  value: 'res-mid',
+  category: 'Residencial'
+}, {
+  name: 'Residencial alto',
+  value: 'res-high',
+  category: 'Residencial'
+}, {
+  name: 'Comercial pequeño',
+  value: 'com-sm',
+  category: 'Comercial'
+}, {
+  name: 'Comercial grande',
+  value: 'com-lg',
+  category: 'Comercial'
+}, {
+  name: 'Industrial liviano',
+  value: 'ind-sm',
+  category: 'Industrial'
+}, {
+  name: 'Industrial pesado',
+  value: 'ind-lg',
+  category: 'Industrial'
+}];
+const LONG_OPTIONS = Array.from({
+  length: 20
+}, (_, i) => ({
+  name: "Opci\xF3n ".concat(i + 1),
+  value: "opt-".concat(i + 1)
+}));
+const wrapperStyle = {
+  maxWidth: '360px',
+  padding: '1rem'
+};
+const SelectWrapper = _ref => {
+  let {
+    multiple,
+    ...props
+  } = _ref;
+  const [value, setValue] = useState(multiple ? [] : null);
+  return /*#__PURE__*/React.createElement("div", {
+    style: wrapperStyle
+  }, /*#__PURE__*/React.createElement(UTSelect, _extends({}, props, {
+    multiple: multiple,
+    onChange: setValue,
+    value: value,
+    version: "V1"
+  })));
+};
+SelectWrapper.propTypes = {
+  multiple: bool,
+  title: string
+};
+export default {
+  component: UTSelect,
+  title: 'Energy-UI/UTSelect/Con opción fija'
+};
+export const ListaLarga = {
+  name: 'Lista larga',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    options: LONG_OPTIONS,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con opción fija al final (lista larga)'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La prop `fixedBottomOption` agrega una opción fija debajo del scroll, siempre visible independientemente del término de búsqueda. Útil para opciones como "Otro motivo".'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const ListaCorta = {
+  name: 'Lista corta',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    options: OPTIONS,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con opción fija al final (lista corta)'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La opción fija también se muestra cuando la lista es corta y no hay scroll. Si el usuario filtra y no hay coincidencias, la opción fija permanece visible.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const ConCategorias = {
+  name: 'Con categorías',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    options: OPTIONS_WITH_CATEGORIES,
+    placeholder: 'Seleccioná una opción',
+    title: 'Con categorías y opción fija'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'La opción fija convive con opciones agrupadas por categoría. El divider y la opción fija siempre quedan por debajo de todos los grupos.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};
+export const SeleccionMultiple = {
+  name: 'Selección múltiple',
+  args: {
+    fixedBottomOption: {
+      name: 'Otro motivo',
+      value: 'other'
+    },
+    multiple: true,
+    options: OPTIONS,
+    placeholder: 'Seleccioná una o más opciones',
+    title: 'Selección múltiple con opción fija'
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Con `multiple={true}` la opción fija se comporta como cualquier otra: se puede seleccionar y deseleccionar de forma independiente. El valor es un array que incluye `fixedBottomOption.value` cuando está marcada.'
+      }
+    }
+  },
+  render: args => /*#__PURE__*/React.createElement(SelectWrapper, args)
+};

package/dist/esm/components/UTSelect/index.js

@@ -1 +1,19 @@
-import React from"react";import{string}from"prop-types";import V0 from"./versions/V0";import V1 from"./versions/V1";const UTSelect=_ref=>{let{version:version="V0",...props}=_ref;const Component={V0:V0,V1:V1}[version];return React.createElement(Component,props)};UTSelect.propTypes={version:string};export default UTSelect;
+import React from 'react';
+import { string } from 'prop-types';
+import V0 from './versions/V0';
+import V1 from './versions/V1';
+const UTSelect = _ref => {
+  let {
+    version = 'V0',
+    ...props
+  } = _ref;
+  const Component = {
+    V0,
+    V1
+  }[version];
+  return /*#__PURE__*/React.createElement(Component, props);
+};
+UTSelect.propTypes = {
+  version: string
+};
+export default UTSelect;

package/dist/esm/components/UTSelect/versions/V0/components/Option/index.js

@@ -1 +1,31 @@
-import React,{memo,Fragment}from"react";import{any,bool,objectOf,object,string}from"prop-types";import Checkbox from"@material-ui/core/Checkbox";const Option=_ref=>{let{classes:classes,isMultiple:isMultiple,labelKey:labelKey,optionProps:optionProps,value:value,valueKey:valueKey}=_ref;const OptionIcon=optionProps.icon;return React.createElement(Fragment,null,isMultiple&&React.createElement(Checkbox,{color:"primary",checked:(null==value?void 0:value.indexOf(optionProps[valueKey]))>-1}),OptionIcon?React.createElement("div",{className:classes.labelContainer},React.createElement(OptionIcon,{className:classes.optionIcon}),React.createElement("div",null,optionProps[labelKey])):optionProps[labelKey])};Option.propTypes={classes:objectOf(string),isMultiple:bool,labelKey:string,optionProps:object,value:any,valueKey:string};export default memo(Option);
+import React, { memo, Fragment } from 'react';
+import { any, bool, objectOf, object, string } from 'prop-types';
+import Checkbox from '@material-ui/core/Checkbox';
+const Option = _ref => {
+  let {
+    classes,
+    isMultiple,
+    labelKey,
+    optionProps,
+    value,
+    valueKey
+  } = _ref;
+  const OptionIcon = optionProps.icon;
+  return /*#__PURE__*/React.createElement(Fragment, null, isMultiple && /*#__PURE__*/React.createElement(Checkbox, {
+    color: "primary",
+    checked: (value === null || value === void 0 ? void 0 : value.indexOf(optionProps[valueKey])) > -1
+  }), OptionIcon ? /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, /*#__PURE__*/React.createElement(OptionIcon, {
+    className: classes.optionIcon
+  }), /*#__PURE__*/React.createElement("div", null, optionProps[labelKey])) : optionProps[labelKey]);
+};
+Option.propTypes = {
+  classes: objectOf(string),
+  isMultiple: bool,
+  labelKey: string,
+  optionProps: object,
+  value: any,
+  valueKey: string
+};
+export default /*#__PURE__*/memo(Option);

package/dist/esm/components/UTSelect/versions/V0/constants.js

@@ -1 +1,4 @@
-export const VALUE_KEY="value";export const LABEL_KEY="name";export const MENU_TITLE="Seleccione una opción";export const MENU_TITLE_MULTIPLE="Seleccione una o más opciones";
+export const VALUE_KEY = 'value';
+export const LABEL_KEY = 'name';
+export const MENU_TITLE = 'Seleccione una opción';
+export const MENU_TITLE_MULTIPLE = 'Seleccione una o más opciones';

package/dist/esm/components/UTSelect/versions/V0/index.js

@@ -1 +1,210 @@
-function _extends(){return _extends=Object.assign?Object.assign.bind():function(n){for(var e=1;e<arguments.length;e++){var t=arguments[e];for(var r in t)({}).hasOwnProperty.call(t,r)&&(n[r]=t[r])}return n},_extends.apply(null,arguments)}import clone from"lodash/clone";import FormControl from"@material-ui/core/FormControl";import FormHelperText from"@material-ui/core/FormHelperText";import Grid from"@material-ui/core/Grid";import HelpOutline from"@material-ui/icons/HelpOutline";import InputLabel from"@material-ui/core/InputLabel";import ListSubheader from"@material-ui/core/ListSubheader";import MenuItem from"@material-ui/core/MenuItem";import React,{useEffect,useMemo,Fragment}from"react";import Select from"@material-ui/core/Select";import{arrayOf,bool,node,object,objectOf,shape,string}from"prop-types";import{isEmpty}from"@widergy/web-utils/lib/array";import{shouldShowErrors}from"@widergy/web-utils/lib/form";import UTLabel from"../../../UTLabel";import UTTooltip from"../../../UTTooltip";import WithTheme from"../../../WithTheme";import{fieldType,inputPropTypes,metaPropTypes}from"../../../../types/formTypes";import{mergeClasses}from"../../../../utils/classesUtils";import Option from"./components/Option";import styles from"./styles.module.scss";import stylesJS from"./stylesJS";import{LABEL_KEY,MENU_TITLE,MENU_TITLE_MULTIPLE,VALUE_KEY}from"./constants";import{retrieveStyle,retrieveMuiTheme}from"./theme";import{shouldReset}from"./utils";const UTSelect=_ref=>{let{captionLabel:captionLabel,classNames:classNames,classes:themeClasses,dataTestId:dataTestId,disableFirstOption:disableFirstOption,disabled:disabled,errorDataTestId:errorDataTestId,field:field,iconPlaceholder:IconPlaceholder,input:input,itemDataTestId:itemDataTestId,labelKey:labelKey,labelProps:labelProps,listDataTestId:listDataTestId,menuPlaceholder:menuPlaceholder,meta:meta,options:options,placeholder:placeholder,selectProps:selectProps,tooltip:tooltip,valueKey:valueKey,variant:variant,withAutoReset:withAutoReset,withOrder:withOrder,withoutFirstOption:withoutFirstOption}=_ref;const{multiple:isMultiple,upperTitle:upperTitle}=(null==field?void 0:field.configuration)||{},classes=useMemo(()=>mergeClasses(themeClasses,classNames),[classNames]);useEffect(()=>{withAutoReset&&shouldReset(input.value,options,valueKey,isMultiple)&&input.onChange(null)},[options]);let sortedOptions=[...options];sortedOptions=withOrder?sortedOptions.sort((a,b)=>a.order<b.order?-1:1):sortedOptions;const optionCommonProps={classes:classes,isMultiple:isMultiple,labelKey:labelKey,value:input.value,valueKey:valueKey},SelectInput=React.createElement(Fragment,null,upperTitle&&React.createElement(UTLabel,{className:classes.upperTitle},upperTitle),React.createElement(FormControl,{className:classes.formControl,error:shouldShowErrors(meta),variant:variant},React.createElement(InputLabel,_extends({},labelProps,{disabled:disabled}),IconPlaceholder?React.createElement("div",{className:classes.labelContainer},React.createElement(IconPlaceholder,{className:classes.labelIcon}),React.createElement("div",null,placeholder)):placeholder),React.createElement(Select,_extends({classes:{nativeInput:styles.nativeInput},disabled:disabled,inputProps:{"data-testid":dataTestId},label:"outlined"===variant&&placeholder,MenuProps:{MenuListProps:{"data-testid":listDataTestId}},multiple:isMultiple,name:input.name,onChange:event=>input.onChange(event.target.value),value:isMultiple?isEmpty(input.value)?[]:clone(input.value):input.value},isMultiple?{renderValue:selected=>options.filter(option=>selected.includes(option[valueKey])).map(selection=>selection[labelKey]).join(", ")}:{},selectProps),!withoutFirstOption&&React.createElement(MenuItem,{"data-testid":"".concat(itemDataTestId,".firstOption"),disabled:isMultiple||disableFirstOption,value:""},menuPlaceholder||(isMultiple?MENU_TITLE_MULTIPLE:MENU_TITLE)),sortedOptions.map((option,i)=>isEmpty(option.subOptions)?React.createElement(MenuItem,{"data-testid":"".concat(itemDataTestId,".").concat(i),key:option[valueKey],value:option[valueKey]},React.createElement(Option,_extends({optionProps:option},optionCommonProps))):[React.createElement(ListSubheader,{className:styles.subHeader},option[labelKey]),option.subOptions.map((subOption,index)=>React.createElement(MenuItem,{className:classes.subOption,"data-testid":"".concat(itemDataTestId,".").concat(index),key:subOption[valueKey],value:subOption[valueKey]},React.createElement(Option,_extends({isSuboption:!0,optionProps:subOption},optionCommonProps))))])),captionLabel&&React.createElement(FormHelperText,{classes:{...classes.formHelperText}},captionLabel),shouldShowErrors(meta)&&React.createElement(UTLabel,{className:styles.errorLabel,colorTheme:"error",dataTestId:errorDataTestId,variant:"small"},meta.error)));return React.createElement("div",{className:classes.container},tooltip?React.createElement(Grid,{alignItems:"flex-end",container:!0,spacing:1,style:stylesJS.gridContainer},React.createElement(Grid,{item:!0,xs:!0},SelectInput),React.createElement(Grid,{item:!0,style:stylesJS.icon},React.createElement(UTTooltip,{content:tooltip},React.createElement("span",null,React.createElement(HelpOutline,{className:classes.tooltipIcon}))))):SelectInput)};UTSelect.defaultProps={classNames:{},classes:{},field:{configuration:{multiple:!1}},labelKey:LABEL_KEY,labelProps:{},meta:{},options:[],selectProps:{},valueKey:VALUE_KEY,withAutoReset:!0,withoutFirstOption:!1},UTSelect.propTypes={captionLabel:string,classNames:objectOf(string),classes:shape({container:string,labelContainer:string,formControl:string,formHelperText:objectOf(string),labelIcon:string,optionIcon:string,tooltipIcon:string,upperTitle:string}),dataTestId:string,disableFirstOption:bool,disabled:bool,errorDataTestId:string,field:fieldType,iconPlaceholder:node,input:inputPropTypes,itemDataTestId:string,labelKey:string,labelProps:object,listDataTestId:string,menuPlaceholder:string,meta:metaPropTypes,options:arrayOf(object),placeholder:string,selectProps:object,tooltip:string,valueKey:string,variant:string,withAutoReset:bool,withOrder:bool,withoutFirstOption:bool};export default WithTheme(retrieveStyle,retrieveMuiTheme)(UTSelect);
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import clone from 'lodash/clone';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+import Grid from '@material-ui/core/Grid';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import InputLabel from '@material-ui/core/InputLabel';
+import ListSubheader from '@material-ui/core/ListSubheader';
+import MenuItem from '@material-ui/core/MenuItem';
+import React, { useEffect, useMemo, Fragment } from 'react';
+import Select from '@material-ui/core/Select';
+import { arrayOf, bool, node, object, objectOf, shape, string } from 'prop-types';
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import UTLabel from '../../../UTLabel';
+import UTTooltip from '../../../UTTooltip';
+import WithTheme from '../../../WithTheme';
+import { fieldType, inputPropTypes, metaPropTypes } from '../../../../types/formTypes';
+import { mergeClasses } from '../../../../utils/classesUtils';
+import Option from './components/Option';
+import styles from './styles.module.scss';
+import stylesJS from './stylesJS';
+import { LABEL_KEY, MENU_TITLE, MENU_TITLE_MULTIPLE, VALUE_KEY } from './constants';
+import { retrieveStyle, retrieveMuiTheme } from './theme';
+import { shouldReset } from './utils';
+const UTSelect = _ref => {
+  let {
+    captionLabel,
+    classNames,
+    classes: themeClasses,
+    dataTestId,
+    disableFirstOption,
+    disabled,
+    errorDataTestId,
+    field,
+    iconPlaceholder: IconPlaceholder,
+    input,
+    itemDataTestId,
+    labelKey,
+    labelProps,
+    listDataTestId,
+    menuPlaceholder,
+    meta,
+    options,
+    placeholder,
+    selectProps,
+    tooltip,
+    valueKey,
+    variant,
+    withAutoReset,
+    withOrder,
+    withoutFirstOption
+  } = _ref;
+  const {
+    multiple: isMultiple,
+    upperTitle
+  } = (field === null || field === void 0 ? void 0 : field.configuration) || {};
+  const classes = useMemo(() => mergeClasses(themeClasses, classNames), [classNames]);
+  useEffect(() => {
+    if (withAutoReset && shouldReset(input.value, options, valueKey, isMultiple)) input.onChange(null);
+  }, [options]);
+  const handleChange = event => input.onChange(event.target.value);
+  const handleRenderValue = selected => {
+    const selectedOptions = options.filter(option => selected.includes(option[valueKey]));
+    return selectedOptions.map(selection => selection[labelKey]).join(', ');
+  };
+  let sortedOptions = [...options];
+  sortedOptions = withOrder ? sortedOptions.sort((a, b) => a.order < b.order ? -1 : 1) : sortedOptions;
+  const optionCommonProps = {
+    classes,
+    isMultiple,
+    labelKey,
+    value: input.value,
+    valueKey
+  };
+  const SelectInput = /*#__PURE__*/React.createElement(Fragment, null, upperTitle && /*#__PURE__*/React.createElement(UTLabel, {
+    className: classes.upperTitle
+  }, upperTitle), /*#__PURE__*/React.createElement(FormControl, {
+    className: classes.formControl,
+    error: shouldShowErrors(meta),
+    variant: variant
+  }, /*#__PURE__*/React.createElement(InputLabel, _extends({}, labelProps, {
+    disabled: disabled
+  }), IconPlaceholder ? /*#__PURE__*/React.createElement("div", {
+    className: classes.labelContainer
+  }, /*#__PURE__*/React.createElement(IconPlaceholder, {
+    className: classes.labelIcon
+  }), /*#__PURE__*/React.createElement("div", null, placeholder)) : placeholder), /*#__PURE__*/React.createElement(Select, _extends({
+    classes: {
+      nativeInput: styles.nativeInput
+    },
+    disabled: disabled,
+    inputProps: {
+      'data-testid': dataTestId
+    },
+    label: variant === 'outlined' && placeholder,
+    MenuProps: {
+      MenuListProps: {
+        'data-testid': listDataTestId
+      }
+    },
+    multiple: isMultiple,
+    name: input.name,
+    onChange: handleChange,
+    value: isMultiple ? isEmpty(input.value) ? [] : clone(input.value) : input.value
+  }, isMultiple ? {
+    renderValue: handleRenderValue
+  } : {}, selectProps), !withoutFirstOption && /*#__PURE__*/React.createElement(MenuItem, {
+    "data-testid": "".concat(itemDataTestId, ".firstOption"),
+    disabled: isMultiple || disableFirstOption,
+    value: ""
+  }, menuPlaceholder || (isMultiple ? MENU_TITLE_MULTIPLE : MENU_TITLE)), sortedOptions.map((option, i) => isEmpty(option.subOptions) ? /*#__PURE__*/React.createElement(MenuItem, {
+    "data-testid": "".concat(itemDataTestId, ".").concat(i),
+    key: option[valueKey],
+    value: option[valueKey]
+  }, /*#__PURE__*/React.createElement(Option, _extends({
+    optionProps: option
+  }, optionCommonProps))) : [/*#__PURE__*/React.createElement(ListSubheader, {
+    className: styles.subHeader
+  }, option[labelKey]), option.subOptions.map((subOption, index) => /*#__PURE__*/React.createElement(MenuItem, {
+    className: classes.subOption,
+    "data-testid": "".concat(itemDataTestId, ".").concat(index),
+    key: subOption[valueKey],
+    value: subOption[valueKey]
+  }, /*#__PURE__*/React.createElement(Option, _extends({
+    isSuboption: true,
+    optionProps: subOption
+  }, optionCommonProps))))])), captionLabel && /*#__PURE__*/React.createElement(FormHelperText, {
+    classes: {
+      ...classes.formHelperText
+    }
+  }, captionLabel), shouldShowErrors(meta) && /*#__PURE__*/React.createElement(UTLabel, {
+    className: styles.errorLabel,
+    colorTheme: "error",
+    dataTestId: errorDataTestId,
+    variant: "small"
+  }, meta.error)));
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes.container
+  }, tooltip ? /*#__PURE__*/React.createElement(Grid, {
+    alignItems: "flex-end",
+    container: true,
+    spacing: 1,
+    style: stylesJS.gridContainer
+  }, /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    xs: true
+  }, SelectInput), /*#__PURE__*/React.createElement(Grid, {
+    item: true,
+    style: stylesJS.icon
+  }, /*#__PURE__*/React.createElement(UTTooltip, {
+    content: tooltip
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(HelpOutline, {
+    className: classes.tooltipIcon
+  }))))) : SelectInput);
+};
+UTSelect.defaultProps = {
+  classNames: {},
+  classes: {},
+  field: {
+    configuration: {
+      multiple: false
+    }
+  },
+  labelKey: LABEL_KEY,
+  labelProps: {},
+  meta: {},
+  options: [],
+  selectProps: {},
+  valueKey: VALUE_KEY,
+  withAutoReset: true,
+  withoutFirstOption: false
+};
+UTSelect.propTypes = {
+  captionLabel: string,
+  classNames: objectOf(string),
+  classes: shape({
+    container: string,
+    labelContainer: string,
+    formControl: string,
+    formHelperText: objectOf(string),
+    labelIcon: string,
+    optionIcon: string,
+    tooltipIcon: string,
+    upperTitle: string
+  }),
+  dataTestId: string,
+  disableFirstOption: bool,
+  disabled: bool,
+  errorDataTestId: string,
+  field: fieldType,
+  iconPlaceholder: node,
+  input: inputPropTypes,
+  itemDataTestId: string,
+  labelKey: string,
+  labelProps: object,
+  listDataTestId: string,
+  menuPlaceholder: string,
+  meta: metaPropTypes,
+  options: arrayOf(object),
+  placeholder: string,
+  selectProps: object,
+  tooltip: string,
+  valueKey: string,
+  variant: string,
+  withAutoReset: bool,
+  withOrder: bool,
+  withoutFirstOption: bool
+};
+export default WithTheme(retrieveStyle, retrieveMuiTheme)(UTSelect);

package/dist/esm/components/UTSelect/versions/V0/stylesJS.js

@@ -1 +1,11 @@
-import Colors from"../../../../scss/variables/colors.module.scss";export default{icon:{alignSelf:"baseline",paddingTop:25,color:Colors.lightBlue},gridContainer:{flexWrap:"nowrap"}};
+import Colors from '../../../../scss/variables/colors.module.scss';
+export default {
+  icon: {
+    alignSelf: 'baseline',
+    paddingTop: 25,
+    color: Colors.lightBlue
+  },
+  gridContainer: {
+    flexWrap: 'nowrap'
+  }
+};