@ntbjs/react-components 2.0.0-rc.11 → 2.0.0-rc.13

package/cjs/components/widgets/Instructions/Instructions.js

@@ -1,217 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var lodash = require('lodash');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var warningCircle = require('../../../icons/warning-circle.svg.js');
-var CompactAutocompleteSelect = require('../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js');
-var TextArea = require('../../inputs/TextArea/TextArea.js');
-var Instructions_styled = require('./Instructions.styled.js');
-var index$1 = require('../../../_virtual/index.js');
-
-const _excluded = ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"];
-const Instructions = index["default"].forwardRef(function Instructions(_ref, forwardedRef) {
-  let {
-      clickToAdd,
-      customAddMessage,
-      selectedOption,
-      loadOptions,
-      readOnly,
-      disabled,
-      hidden,
-      name,
-      lightBackground,
-      autoSelect,
-      subscribeCurrentValue: subscribeCurrentValueProp,
-      onChange: onChangeProp,
-      onFocus: onFocusProp,
-      onBlur: onBlurProp,
-      onUpdateCallback,
-      availableOptions,
-      loadingMessageFunc,
-      placeholder,
-      type,
-      selectType,
-      edit,
-      rows,
-      showMore,
-      showMoreText,
-      showLessText,
-      isExpanded,
-      loadingIcon,
-      successIcon,
-      padding
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const [isHovered, setIsHovered] = index$1.react.exports.useState(false);
-  const [selected, setSelected] = index$1.react.exports.useState({});
-  const [addInstructions, setAddInstructions] = index$1.react.exports.useState(clickToAdd);
-  const [customMessage, setCustomMessage] = index$1.react.exports.useState(customAddMessage);
-  const [background, setBackground] = index$1.react.exports.useState(lightBackground);
-  const [initialHover, setInitialHover] = index$1.react.exports.useState(true);
-  const [currentValue, setCurrentValue] = index$1.react.exports.useState();
-  index$1.react.exports.useEffect(() => {
-    if (lodash.isFunction(subscribeCurrentValueProp)) {
-      subscribeCurrentValueProp(currentValue);
-    }
-  }, [currentValue]);
-  index$1.react.exports.useEffect(() => {
-    handleChange(selected);
-  }, [selected]);
-  index$1.react.exports.useEffect(() => {
-    if (selectedOption) {
-      setCurrentValue(selectedOption.value);
-    }
-  }, [selectedOption]);
-  index$1.react.exports.useEffect(() => {
-    if (addInstructions) {
-      setCurrentValue(customMessage);
-      setInitialHover(true);
-    }
-  }, [addInstructions, handleOnFocus]);
-  const onChange = index$1.react.exports.useCallback(event => {
-    setCurrentValue(event.target.value);
-    if (lodash.isFunction(onChangeProp)) {
-      onChangeProp(event);
-    }
-  }, [onChangeProp]);
-  const onFocus = index$1.react.exports.useCallback(event => {
-    if (autoSelect) {
-      event.target.select();
-    }
-    if (lodash.isFunction(onFocusProp)) {
-      onFocusProp(event);
-    }
-    if (event.target.value === customMessage) {
-      setCurrentValue('');
-    }
-  }, [autoSelect, readOnly, onFocusProp]);
-  const onBlur = index$1.react.exports.useCallback(event => {
-    if (lodash.isFunction(onBlurProp)) {
-      onBlurProp(event);
-    }
-  }, [onBlurProp]);
-  const handleMouseOver = () => {
-    setIsHovered(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-  const handleOnFocus = () => {
-    if (customMessage === currentValue) {
-      setCurrentValue('');
-    }
-  };
-  const handleChange = selected => {
-    if (selected === null) {
-      setSelected({});
-      setAddInstructions(true);
-      setBackground(true);
-      setInitialHover(true);
-      setCustomMessage(customAddMessage);
-    } else {
-      setSelected(selected);
-      setCurrentValue(selected.value);
-      setAddInstructions(false);
-      setBackground(false);
-      setInitialHover(false);
-      onUpdateCallback(selected);
-    }
-  };
-  const sharedSelectProps = {
-    options: loadOptions ? undefined : availableOptions,
-    loadOptions: loadOptions,
-    loadingMessage: loadingMessageFunc,
-    placeholder: placeholder
-  };
-  if (hidden) return null;
-  return index["default"].createElement(Instructions_styled.Instructions, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef,
-    initialHover: initialHover,
-    onMouseDown: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && index["default"].createElement(Instructions_styled.TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, index["default"].createElement(Instructions_styled.SelectContainer, null, index["default"].createElement(CompactAutocompleteSelect["default"], _rollupPluginBabelHelpers["extends"]({
-    type: selectType,
-    value: selectedOption,
-    creatable: false,
-    onChange: handleChange
-  }, sharedSelectProps)))), index["default"].createElement(Instructions_styled.InstructionsArea, {
-    type: type
-  }, index["default"].createElement(TextArea["default"], {
-    noBorder: true,
-    instructionsTextArea: true,
-    type: type,
-    lightBackground: background,
-    readOnly: readOnly,
-    disabled: disabled,
-    name: name,
-    isExpanded: isExpanded,
-    edit: edit,
-    value: currentValue === null ? '' : currentValue,
-    onFocus: onFocus,
-    onChange: onChange,
-    onBlur: onBlur,
-    rows: rows,
-    showMore: showMore,
-    showMoreText: showMoreText,
-    showLessText: showLessText,
-    icon: index["default"].createElement(warningCircle.ReactComponent, null),
-    loadingIcon: loadingIcon,
-    successIcon: successIcon,
-    padding: padding
-  })));
-});
-Instructions.defaultProps = {
-  clickToAdd: false,
-  lightBackground: false,
-  autoSelect: true,
-  hidden: false,
-  edit: false,
-  disabled: false,
-  readOnly: false,
-  type: '',
-  selectType: '',
-  padding: 'medium',
-  onUpdateCallback: () => {}
-};
-Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: index$2["default"].string,
-  placeholder: index$2["default"].string,
-  rows: index$2["default"].oneOfType([index$2["default"].number, index$2["default"].string]),
-  selectedOption: index$2["default"].any,
-  loadOptions: index$2["default"].func,
-  loadingMessageFunc: index$2["default"].func,
-  clickToAdd: index$2["default"].bool,
-  customAddMessage: index$2["default"].string,
-  autoSelect: index$2["default"].bool,
-  readOnly: index$2["default"].bool,
-  disabled: index$2["default"].bool,
-  hidden: index$2["default"].bool,
-  showMore: index$2["default"].bool,
-  showMoreText: index$2["default"].string,
-  showLessText: index$2["default"].string,
-  availableOptions: index$2["default"].arrayOf(index$2["default"].object),
-  lightBackground: index$2["default"].bool,
-  edit: index$2["default"].bool,
-  options: index$2["default"].array,
-  subscribeCurrentValue: index$2["default"].func,
-  onChange: index$2["default"].func,
-  onFocus: index$2["default"].func,
-  onBlur: index$2["default"].func,
-  onUpdateCallback: index$2["default"].func,
-  type: index$2["default"].oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
-  selectType: index$2["default"].oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
-  isExpanded: index$2["default"].func,
-  loadingIcon: index$2["default"].element,
-  successIcon: index$2["default"].element,
-  padding: index$2["default"].oneOf(['', 'small', 'medium', 'large'])
-} : {};
-var Instructions$1 = Instructions;
-
-exports["default"] = Instructions$1;

package/cjs/components/widgets/Instructions/Instructions.styled.js

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const Instructions = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  ${0};
-`), props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
-const TopBarContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
-  position: absolute;
-  display: flex;
-  width: 100%;
-  margin-top: 0;
-  transition: margin-top 120ms;
-  &&.slide-in {
-    margin-top: -24px;
-  }
-  ${0};
-
-  ${0};
-`), props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
-const SelectContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
-  width: 100%;
-  margin: 0 2px;
-`));
-const InstructionsArea = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
-  margin: 2px 2px -2px 2px;
-`));
-
-exports.Instructions = Instructions;
-exports.InstructionsArea = InstructionsArea;
-exports.SelectContainer = SelectContainer;
-exports.TopBarContainer = TopBarContainer;

package/cjs/components/widgets/Instructions/widgets/Instructions/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Instructions = require('../../Instructions.js');
-
-
-
-exports["default"] = Instructions["default"];

package/cjs/styles/utils/colors.scss.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styleInject_es = require('../../node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = "/**\n * Colors\n */";
-var importedColors = {"orange-600":"#634e01","orange-500":"#ff9900","orange-400":"#ffcb7e","emerald-600":"#296c58","emerald-500":"#30826a","emerald-400":"#64b49d","emerald-300":"#bfe0d5","emerald-200":"#f3f9f7","gray-900":"#141313","gray-800":"#272727","gray-700":"#323232","gray-600":"#505050","gray-500":"#767676","gray-400":"#b0b6b9","gray-300":"#d9dce0","gray-200":"#eff1f4","gray-100":"#f7f8f9","cercise-500":"#5f1031","cercise-400":"#854962","cercise-300":"#d099b0","cercise-200":"#fecaca","cercise-100":"#f9f3f5","red-600":"#7f1b1b","red-500":"#d83000","red-200":"#fbeae6","brown-500":"#634e01","signal-yellow-500":"#f4e21e","signal-yellow-400":"#fff36c","signal-green-500":"#00bd98","signal-green-400":"#a3ffe0","black":"#202435","white":"#ffffff"};
-styleInject_es["default"](css_248z);
-
-exports["default"] = importedColors;

package/esm/components/widgets/Instructions/Instructions.js

@@ -1,213 +0,0 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import { isFunction } from 'lodash';
-import PropTypes from '../../../node_modules/prop-types/index.js';
-import React from '../../../node_modules/react/index.js';
-import { ReactComponent as SvgWarningCircle } from '../../../icons/warning-circle.svg.js';
-import AutocompleteSelect from '../../inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js';
-import TextArea from '../../inputs/TextArea/TextArea.js';
-import { Instructions as Instructions$2, TopBarContainer, SelectContainer, InstructionsArea } from './Instructions.styled.js';
-import { r as react } from '../../../_virtual/index.js';
-
-const _excluded = ["clickToAdd", "customAddMessage", "selectedOption", "loadOptions", "readOnly", "disabled", "hidden", "name", "lightBackground", "autoSelect", "subscribeCurrentValue", "onChange", "onFocus", "onBlur", "onUpdateCallback", "availableOptions", "loadingMessageFunc", "placeholder", "type", "selectType", "edit", "rows", "showMore", "showMoreText", "showLessText", "isExpanded", "loadingIcon", "successIcon", "padding"];
-const Instructions = React.forwardRef(function Instructions(_ref, forwardedRef) {
-  let {
-      clickToAdd,
-      customAddMessage,
-      selectedOption,
-      loadOptions,
-      readOnly,
-      disabled,
-      hidden,
-      name,
-      lightBackground,
-      autoSelect,
-      subscribeCurrentValue: subscribeCurrentValueProp,
-      onChange: onChangeProp,
-      onFocus: onFocusProp,
-      onBlur: onBlurProp,
-      onUpdateCallback,
-      availableOptions,
-      loadingMessageFunc,
-      placeholder,
-      type,
-      selectType,
-      edit,
-      rows,
-      showMore,
-      showMoreText,
-      showLessText,
-      isExpanded,
-      loadingIcon,
-      successIcon,
-      padding
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const [isHovered, setIsHovered] = react.exports.useState(false);
-  const [selected, setSelected] = react.exports.useState({});
-  const [addInstructions, setAddInstructions] = react.exports.useState(clickToAdd);
-  const [customMessage, setCustomMessage] = react.exports.useState(customAddMessage);
-  const [background, setBackground] = react.exports.useState(lightBackground);
-  const [initialHover, setInitialHover] = react.exports.useState(true);
-  const [currentValue, setCurrentValue] = react.exports.useState();
-  react.exports.useEffect(() => {
-    if (isFunction(subscribeCurrentValueProp)) {
-      subscribeCurrentValueProp(currentValue);
-    }
-  }, [currentValue]);
-  react.exports.useEffect(() => {
-    handleChange(selected);
-  }, [selected]);
-  react.exports.useEffect(() => {
-    if (selectedOption) {
-      setCurrentValue(selectedOption.value);
-    }
-  }, [selectedOption]);
-  react.exports.useEffect(() => {
-    if (addInstructions) {
-      setCurrentValue(customMessage);
-      setInitialHover(true);
-    }
-  }, [addInstructions, handleOnFocus]);
-  const onChange = react.exports.useCallback(event => {
-    setCurrentValue(event.target.value);
-    if (isFunction(onChangeProp)) {
-      onChangeProp(event);
-    }
-  }, [onChangeProp]);
-  const onFocus = react.exports.useCallback(event => {
-    if (autoSelect) {
-      event.target.select();
-    }
-    if (isFunction(onFocusProp)) {
-      onFocusProp(event);
-    }
-    if (event.target.value === customMessage) {
-      setCurrentValue('');
-    }
-  }, [autoSelect, readOnly, onFocusProp]);
-  const onBlur = react.exports.useCallback(event => {
-    if (isFunction(onBlurProp)) {
-      onBlurProp(event);
-    }
-  }, [onBlurProp]);
-  const handleMouseOver = () => {
-    setIsHovered(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-  };
-  const handleOnFocus = () => {
-    if (customMessage === currentValue) {
-      setCurrentValue('');
-    }
-  };
-  const handleChange = selected => {
-    if (selected === null) {
-      setSelected({});
-      setAddInstructions(true);
-      setBackground(true);
-      setInitialHover(true);
-      setCustomMessage(customAddMessage);
-    } else {
-      setSelected(selected);
-      setCurrentValue(selected.value);
-      setAddInstructions(false);
-      setBackground(false);
-      setInitialHover(false);
-      onUpdateCallback(selected);
-    }
-  };
-  const sharedSelectProps = {
-    options: loadOptions ? undefined : availableOptions,
-    loadOptions: loadOptions,
-    loadingMessage: loadingMessageFunc,
-    placeholder: placeholder
-  };
-  if (hidden) return null;
-  return React.createElement(Instructions$2, _extends({
-    ref: forwardedRef,
-    initialHover: initialHover,
-    onMouseDown: handleMouseOver,
-    onMouseLeave: handleMouseLeave
-  }, props), !readOnly && !disabled && React.createElement(TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && !disabled && 'slide-in'
-  }, React.createElement(SelectContainer, null, React.createElement(AutocompleteSelect, _extends({
-    type: selectType,
-    value: selectedOption,
-    creatable: false,
-    onChange: handleChange
-  }, sharedSelectProps)))), React.createElement(InstructionsArea, {
-    type: type
-  }, React.createElement(TextArea, {
-    noBorder: true,
-    instructionsTextArea: true,
-    type: type,
-    lightBackground: background,
-    readOnly: readOnly,
-    disabled: disabled,
-    name: name,
-    isExpanded: isExpanded,
-    edit: edit,
-    value: currentValue === null ? '' : currentValue,
-    onFocus: onFocus,
-    onChange: onChange,
-    onBlur: onBlur,
-    rows: rows,
-    showMore: showMore,
-    showMoreText: showMoreText,
-    showLessText: showLessText,
-    icon: React.createElement(SvgWarningCircle, null),
-    loadingIcon: loadingIcon,
-    successIcon: successIcon,
-    padding: padding
-  })));
-});
-Instructions.defaultProps = {
-  clickToAdd: false,
-  lightBackground: false,
-  autoSelect: true,
-  hidden: false,
-  edit: false,
-  disabled: false,
-  readOnly: false,
-  type: '',
-  selectType: '',
-  padding: 'medium',
-  onUpdateCallback: () => {}
-};
-Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  name: PropTypes.string,
-  placeholder: PropTypes.string,
-  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  selectedOption: PropTypes.any,
-  loadOptions: PropTypes.func,
-  loadingMessageFunc: PropTypes.func,
-  clickToAdd: PropTypes.bool,
-  customAddMessage: PropTypes.string,
-  autoSelect: PropTypes.bool,
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  hidden: PropTypes.bool,
-  showMore: PropTypes.bool,
-  showMoreText: PropTypes.string,
-  showLessText: PropTypes.string,
-  availableOptions: PropTypes.arrayOf(PropTypes.object),
-  lightBackground: PropTypes.bool,
-  edit: PropTypes.bool,
-  options: PropTypes.array,
-  subscribeCurrentValue: PropTypes.func,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  onUpdateCallback: PropTypes.func,
-  type: PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
-  selectType: PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
-  isExpanded: PropTypes.func,
-  loadingIcon: PropTypes.element,
-  successIcon: PropTypes.element,
-  padding: PropTypes.oneOf(['', 'small', 'medium', 'large'])
-} : {};
-var Instructions$1 = Instructions;
-
-export { Instructions$1 as default };

package/esm/components/widgets/Instructions/Instructions.styled.js

@@ -1,36 +0,0 @@
-import styled from 'styled-components';
-import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const Instructions = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  ${0};
-`), props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
-const TopBarContainer = styled.div.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
-  position: absolute;
-  display: flex;
-  width: 100%;
-  margin-top: 0;
-  transition: margin-top 120ms;
-  &&.slide-in {
-    margin-top: -24px;
-  }
-  ${0};
-
-  ${0};
-`), props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')), props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
-const SelectContainer = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
-  width: 100%;
-  margin: 0 2px;
-`));
-const InstructionsArea = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
-  margin: 2px 2px -2px 2px;
-`));
-
-export { Instructions, InstructionsArea, SelectContainer, TopBarContainer };

package/esm/components/widgets/Instructions/widgets/Instructions/index.js

@@ -1 +0,0 @@
-export { default } from '../../Instructions.js';

package/esm/node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js

@@ -1,6 +0,0 @@
-import '../../react/index.js';
-import { r as react } from '../../../_virtual/index.js';
-
-var index = react.exports.useLayoutEffect ;
-
-export { index as default };

package/esm/styles/utils/colors.scss.js

@@ -1,7 +0,0 @@
-import styleInject from '../../node_modules/style-inject/dist/style-inject.es.js';
-
-var css_248z = "/**\n * Colors\n */";
-var importedColors = {"orange-600":"#634e01","orange-500":"#ff9900","orange-400":"#ffcb7e","emerald-600":"#296c58","emerald-500":"#30826a","emerald-400":"#64b49d","emerald-300":"#bfe0d5","emerald-200":"#f3f9f7","gray-900":"#141313","gray-800":"#272727","gray-700":"#323232","gray-600":"#505050","gray-500":"#767676","gray-400":"#b0b6b9","gray-300":"#d9dce0","gray-200":"#eff1f4","gray-100":"#f7f8f9","cercise-500":"#5f1031","cercise-400":"#854962","cercise-300":"#d099b0","cercise-200":"#fecaca","cercise-100":"#f9f3f5","red-600":"#7f1b1b","red-500":"#d83000","red-200":"#fbeae6","brown-500":"#634e01","signal-yellow-500":"#f4e21e","signal-yellow-400":"#fff36c","signal-green-500":"#00bd98","signal-green-400":"#a3ffe0","black":"#202435","white":"#ffffff"};
-styleInject(css_248z);
-
-export { importedColors as default };

package/styles/config.scss

@@ -1,37 +0,0 @@
-/**
- * Colors
- */
-$colors: (
-  'orange-600': #634e01,
-  'orange-500': #ff9900,
-  'orange-400': #ffcb7e,
-  'emerald-600': #296c58,
-  'emerald-500': #30826a,
-  'emerald-400': #64b49d,
-  'emerald-300': #bfe0d5,
-  'emerald-200': #f3f9f7,
-  'gray-900': #141313,
-  'gray-800': #272727,
-  'gray-700': #323232,
-  'gray-600': #505050,
-  'gray-500': #767676,
-  'gray-400': #b0b6b9,
-  'gray-300': #d9dce0,
-  'gray-200': #eff1f4,
-  'gray-100': #f7f8f9,
-  'cercise-500': #5f1031,
-  'cercise-400': #854962,
-  'cercise-300': #d099b0,
-  'cercise-200': #fecaca,
-  'cercise-100': #f9f3f5,
-  'red-600': #7f1b1b,
-  'red-500': #d83000,
-  'red-200': #fbeae6,
-  'brown-500': #634e01,
-  'signal-yellow-500': #f4e21e,
-  'signal-yellow-400': #fff36c,
-  'signal-green-500': #00bd98,
-  'signal-green-400': #a3ffe0,
-  'black': #202435,
-  'white': #ffffff
-);