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

package/cjs/node_modules/react-select/dist/index-641ee5b8.esm.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var objectSpread2 = require('../../@babel/runtime/helpers/esm/objectSpread2.js');
 var _extends = require('../../@babel/runtime/helpers/esm/extends.js');
-var emotionReact_browser_esm = require('../../@emotion/react/dist/emotion-react.browser.esm.js');
+var emotionReact_esm = require('../../@emotion/react/dist/emotion-react.esm.js');
 var slicedToArray = require('../../@babel/runtime/helpers/esm/slicedToArray.js');
 var objectWithoutProperties = require('../../@babel/runtime/helpers/esm/objectWithoutProperties.js');
 var _typeof = require('../../@babel/runtime/helpers/esm/typeof.js');
@@ -13,7 +13,7 @@ var defineProperty = require('../../@babel/runtime/helpers/esm/defineProperty.js
 require('../../react/index.js');
 require('../../react-dom/index.js');
 var floatingUi_dom = require('../../@floating-ui/dom/dist/floating-ui.dom.mjs.js');
-var useIsomorphicLayoutEffect_browser_esm = require('../../use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js');
+var useIsomorphicLayoutEffect_esm = require('../../use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js');
 var index = require('../../../_virtual/index.js');
 var index$1 = require('../../../_virtual/index4.js');
 
@@ -516,7 +516,7 @@ var MenuPlacer = function MenuPlacer(props) {
     placement = _useState4[0],
     setPlacement = _useState4[1];
   var controlHeight = theme.spacing.controlHeight;
-  useIsomorphicLayoutEffect_browser_esm["default"](function () {
+  useIsomorphicLayoutEffect_esm["default"](function () {
     var menuEl = ref.current;
     if (!menuEl) return;
 
@@ -548,7 +548,7 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'menu', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'menu', {
     menu: true
   }), {
     ref: innerRef
@@ -579,7 +579,7 @@ var MenuList = function MenuList(props) {
     innerProps = props.innerProps,
     innerRef = props.innerRef,
     isMulti = props.isMulti;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'menuList', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'menuList', {
     'menu-list': true,
     'menu-list--is-multi': isMulti
   }), {
@@ -609,7 +609,7 @@ var NoOptionsMessage = function NoOptionsMessage(_ref6) {
     children = _ref6$children === void 0 ? 'No options' : _ref6$children,
     innerProps = _ref6.innerProps,
     restProps = objectWithoutProperties["default"](_ref6, _excluded$3);
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, restProps), {}, {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'noOptionsMessage', {
@@ -622,7 +622,7 @@ var LoadingMessage = function LoadingMessage(_ref7) {
     children = _ref7$children === void 0 ? 'Loading...' : _ref7$children,
     innerProps = _ref7.innerProps,
     restProps = objectWithoutProperties["default"](_ref7, _excluded2$1);
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, restProps), {}, {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, restProps), {}, {
     children: children,
     innerProps: innerProps
   }), 'loadingMessage', {
@@ -681,7 +681,7 @@ var MenuPortal = function MenuPortal(props) {
       });
     }
   }, [controlElement, menuPosition, placement, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.offset, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.left, computedPosition === null || computedPosition === void 0 ? void 0 : computedPosition.rect.width]);
-  useIsomorphicLayoutEffect_browser_esm["default"](function () {
+  useIsomorphicLayoutEffect_esm["default"](function () {
     updateComputedPosition();
   }, [updateComputedPosition]);
   var runAutoUpdate = index.react.exports.useCallback(function () {
@@ -695,7 +695,7 @@ var MenuPortal = function MenuPortal(props) {
       });
     }
   }, [controlElement, updateComputedPosition]);
-  useIsomorphicLayoutEffect_browser_esm["default"](function () {
+  useIsomorphicLayoutEffect_esm["default"](function () {
     runAutoUpdate();
   }, [runAutoUpdate]);
   var setMenuPortalElement = index.react.exports.useCallback(function (menuPortalElement) {
@@ -707,7 +707,7 @@ var MenuPortal = function MenuPortal(props) {
   if (!appendTo && menuPosition !== 'fixed' || !computedPosition) return null;
 
   // same wrapper element whether fixed or portalled
-  var menuWrapper = emotionReact_browser_esm.createElement("div", _extends["default"]({
+  var menuWrapper = emotionReact_esm.createElement("div", _extends["default"]({
     ref: setMenuPortalElement
   }, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, props), {}, {
     offset: computedPosition.offset,
@@ -716,7 +716,7 @@ var MenuPortal = function MenuPortal(props) {
   }), 'menuPortal', {
     'menu-portal': true
   }), innerProps), children);
-  return emotionReact_browser_esm.createElement(PortalPlacementContext.Provider, {
+  return emotionReact_esm.createElement(PortalPlacementContext.Provider, {
     value: portalPlacementContext
   }, appendTo ? /*#__PURE__*/index$1.reactDom.exports.createPortal(menuWrapper, appendTo) : menuWrapper);
 };
@@ -741,7 +741,7 @@ var SelectContainer = function SelectContainer(props) {
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'container', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
   }), innerProps), children);
@@ -773,7 +773,7 @@ var ValueContainer = function ValueContainer(props) {
     innerProps = props.innerProps,
     isMulti = props.isMulti,
     hasValue = props.hasValue;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'valueContainer', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'valueContainer', {
     'value-container': true,
     'value-container--is-multi': isMulti,
     'value-container--has-value': hasValue
@@ -795,7 +795,7 @@ var indicatorsContainerCSS = function indicatorsContainerCSS() {
 var IndicatorsContainer = function IndicatorsContainer(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'indicatorsContainer', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'indicatorsContainer', {
     indicators: true
   }), innerProps), children);
 };
@@ -820,7 +820,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var Svg = function Svg(_ref) {
   var size = _ref.size,
     props = objectWithoutProperties["default"](_ref, _excluded$2);
-  return emotionReact_browser_esm.createElement("svg", _extends["default"]({
+  return emotionReact_esm.createElement("svg", _extends["default"]({
     height: size,
     width: size,
     viewBox: "0 0 20 20",
@@ -830,16 +830,16 @@ var Svg = function Svg(_ref) {
   }, props));
 };
 var CrossIcon = function CrossIcon(props) {
-  return emotionReact_browser_esm.createElement(Svg, _extends["default"]({
+  return emotionReact_esm.createElement(Svg, _extends["default"]({
     size: 20
-  }, props), emotionReact_browser_esm.createElement("path", {
+  }, props), emotionReact_esm.createElement("path", {
     d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
   }));
 };
 var DownChevron = function DownChevron(props) {
-  return emotionReact_browser_esm.createElement(Svg, _extends["default"]({
+  return emotionReact_esm.createElement(Svg, _extends["default"]({
     size: 20
-  }, props), emotionReact_browser_esm.createElement("path", {
+  }, props), emotionReact_esm.createElement("path", {
     d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
   }));
 };
@@ -869,19 +869,19 @@ var dropdownIndicatorCSS = baseCSS;
 var DropdownIndicator = function DropdownIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'dropdownIndicator', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
-  }), innerProps), children || emotionReact_browser_esm.createElement(DownChevron, null));
+  }), innerProps), children || emotionReact_esm.createElement(DownChevron, null));
 };
 var clearIndicatorCSS = baseCSS;
 var ClearIndicator = function ClearIndicator(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'clearIndicator', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
-  }), innerProps), children || emotionReact_browser_esm.createElement(CrossIcon, null));
+  }), innerProps), children || emotionReact_esm.createElement(CrossIcon, null));
 };
 
 // ==============================
@@ -905,7 +905,7 @@ var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4, unstyled) {
 };
 var IndicatorSeparator = function IndicatorSeparator(props) {
   var innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("span", _extends["default"]({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
+  return emotionReact_esm.createElement("span", _extends["default"]({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
     'indicator-separator': true
   })));
 };
@@ -914,7 +914,7 @@ var IndicatorSeparator = function IndicatorSeparator(props) {
 // Loading
 // ==============================
 
-var loadingDotAnimations = emotionReact_browser_esm.keyframes(_templateObject || (_templateObject = taggedTemplateLiteral["default"](["\n  0%, 80%, 100% { opacity: 0; }\n  40% { opacity: 1; }\n"])));
+var loadingDotAnimations = emotionReact_esm.keyframes(_templateObject || (_templateObject = taggedTemplateLiteral["default"](["\n  0%, 80%, 100% { opacity: 0; }\n  40% { opacity: 1; }\n"])));
 var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5, unstyled) {
   var isFocused = _ref5.isFocused,
     size = _ref5.size,
@@ -939,8 +939,8 @@ var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5, unstyled) {
 var LoadingDot = function LoadingDot(_ref6) {
   var delay = _ref6.delay,
     offset = _ref6.offset;
-  return emotionReact_browser_esm.createElement("span", {
-    css: /*#__PURE__*/emotionReact_browser_esm.css({
+  return emotionReact_esm.createElement("span", {
+    css: /*#__PURE__*/emotionReact_esm.css({
       animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
       backgroundColor: 'currentColor',
       borderRadius: '1em',
@@ -958,20 +958,20 @@ var LoadingIndicator = function LoadingIndicator(_ref7) {
     _ref7$size = _ref7.size,
     size = _ref7$size === void 0 ? 4 : _ref7$size,
     restProps = objectWithoutProperties["default"](_ref7, _excluded2);
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, restProps), {}, {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(objectSpread2["default"](objectSpread2["default"]({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,
     size: size
   }), 'loadingIndicator', {
     indicator: true,
     'loading-indicator': true
-  }), innerProps), emotionReact_browser_esm.createElement(LoadingDot, {
+  }), innerProps), emotionReact_esm.createElement(LoadingDot, {
     delay: 0,
     offset: isRtl
-  }), emotionReact_browser_esm.createElement(LoadingDot, {
+  }), emotionReact_esm.createElement(LoadingDot, {
     delay: 160,
     offset: true
-  }), emotionReact_browser_esm.createElement(LoadingDot, {
+  }), emotionReact_esm.createElement(LoadingDot, {
     delay: 320,
     offset: !isRtl
   }));
@@ -1014,7 +1014,7 @@ var Control = function Control(props) {
     innerRef = props.innerRef,
     innerProps = props.innerProps,
     menuIsOpen = props.menuIsOpen;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({
+  return emotionReact_esm.createElement("div", _extends["default"]({
     ref: innerRef
   }, getStyleProps(props, 'control', {
     control: true,
@@ -1046,15 +1046,15 @@ var Group = function Group(props) {
     label = props.label,
     theme = props.theme,
     selectProps = props.selectProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'group', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'group', {
     group: true
-  }), innerProps), emotionReact_browser_esm.createElement(Heading, _extends["default"]({}, headingProps, {
+  }), innerProps), emotionReact_esm.createElement(Heading, _extends["default"]({}, headingProps, {
     selectProps: selectProps,
     theme: theme,
     getStyles: getStyles,
     getClassNames: getClassNames,
     cx: cx
-  }), label), emotionReact_browser_esm.createElement("div", null, children));
+  }), label), emotionReact_esm.createElement("div", null, children));
 };
 var groupHeadingCSS = function groupHeadingCSS(_ref2, unstyled) {
   var _ref2$theme = _ref2.theme,
@@ -1078,7 +1078,7 @@ var GroupHeading = function GroupHeading(props) {
   var _cleanCommonProps = cleanCommonProps(props);
     _cleanCommonProps.data;
     var innerProps = objectWithoutProperties["default"](_cleanCommonProps, _excluded$1);
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'groupHeading', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'groupHeading', {
     'group-heading': true
   }), innerProps));
 };
@@ -1141,11 +1141,11 @@ var Input = function Input(props) {
     isHidden = _cleanCommonProps.isHidden,
     inputClassName = _cleanCommonProps.inputClassName,
     innerProps = objectWithoutProperties["default"](_cleanCommonProps, _excluded);
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'input', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'input', {
     'input-container': true
   }), {
     "data-value": value || ''
-  }), emotionReact_browser_esm.createElement("input", _extends["default"]({
+  }), emotionReact_esm.createElement("input", _extends["default"]({
     className: cx({
       input: true
     }, inputClassName),
@@ -1211,16 +1211,16 @@ var multiValueRemoveCSS = function multiValueRemoveCSS(_ref3, unstyled) {
 var MultiValueGeneric = function MultiValueGeneric(_ref4) {
   var children = _ref4.children,
     innerProps = _ref4.innerProps;
-  return emotionReact_browser_esm.createElement("div", innerProps, children);
+  return emotionReact_esm.createElement("div", innerProps, children);
 };
 var MultiValueContainer = MultiValueGeneric;
 var MultiValueLabel = MultiValueGeneric;
 function MultiValueRemove(_ref5) {
   var children = _ref5.children,
     innerProps = _ref5.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({
+  return emotionReact_esm.createElement("div", _extends["default"]({
     role: "button"
-  }, innerProps), children || emotionReact_browser_esm.createElement(CrossIcon, {
+  }, innerProps), children || emotionReact_esm.createElement(CrossIcon, {
     size: 14
   }));
 }
@@ -1235,20 +1235,20 @@ var MultiValue = function MultiValue(props) {
   var Container = components.Container,
     Label = components.Label,
     Remove = components.Remove;
-  return emotionReact_browser_esm.createElement(Container, {
+  return emotionReact_esm.createElement(Container, {
     data: data,
     innerProps: objectSpread2["default"](objectSpread2["default"]({}, getStyleProps(props, 'multiValue', {
       'multi-value': true,
       'multi-value--is-disabled': isDisabled
     })), innerProps),
     selectProps: selectProps
-  }, emotionReact_browser_esm.createElement(Label, {
+  }, emotionReact_esm.createElement(Label, {
     data: data,
     innerProps: objectSpread2["default"]({}, getStyleProps(props, 'multiValueLabel', {
       'multi-value__label': true
     })),
     selectProps: selectProps
-  }, children), emotionReact_browser_esm.createElement(Remove, {
+  }, children), emotionReact_esm.createElement(Remove, {
     data: data,
     innerProps: objectSpread2["default"](objectSpread2["default"]({}, getStyleProps(props, 'multiValueRemove', {
       'multi-value__remove': true
@@ -1292,7 +1292,7 @@ var Option = function Option(props) {
     isSelected = props.isSelected,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'option', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
@@ -1320,7 +1320,7 @@ var placeholderCSS = function placeholderCSS(_ref, unstyled) {
 var Placeholder = function Placeholder(props) {
   var children = props.children,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'placeholder', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'placeholder', {
     placeholder: true
   }), innerProps), children);
 };
@@ -1348,7 +1348,7 @@ var SingleValue = function SingleValue(props) {
   var children = props.children,
     isDisabled = props.isDisabled,
     innerProps = props.innerProps;
-  return emotionReact_browser_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'singleValue', {
+  return emotionReact_esm.createElement("div", _extends["default"]({}, getStyleProps(props, 'singleValue', {
     'single-value': true,
     'single-value--is-disabled': isDisabled
   }), innerProps), children);

package/cjs/node_modules/react-select/dist/{useCreatable-84008237.esm.js → useCreatable-09aaeb9a.esm.js}

@@ -7,7 +7,7 @@ var toConsumableArray = require('../../@babel/runtime/helpers/esm/toConsumableAr
 var objectWithoutProperties = require('../../@babel/runtime/helpers/esm/objectWithoutProperties.js');
 require('../../react/index.js');
 var index641ee5b8_esm = require('./index-641ee5b8.esm.js');
-var SelectAab027f3_esm = require('./Select-aab027f3.esm.js');
+var SelectEf7c0426_esm = require('./Select-ef7c0426.esm.js');
 var index = require('../../../_virtual/index.js');
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];
@@ -56,9 +56,9 @@ function useCreatable(_ref) {
     propsOnChange = _ref.onChange,
     restSelectProps = objectWithoutProperties["default"](_ref, _excluded);
   var _restSelectProps$getO = restSelectProps.getOptionValue,
-    getOptionValue$1 = _restSelectProps$getO === void 0 ? SelectAab027f3_esm.g : _restSelectProps$getO,
+    getOptionValue$1 = _restSelectProps$getO === void 0 ? SelectEf7c0426_esm.g : _restSelectProps$getO,
     _restSelectProps$getO2 = restSelectProps.getOptionLabel,
-    getOptionLabel$1 = _restSelectProps$getO2 === void 0 ? SelectAab027f3_esm.b : _restSelectProps$getO2,
+    getOptionLabel$1 = _restSelectProps$getO2 === void 0 ? SelectEf7c0426_esm.b : _restSelectProps$getO2,
     inputValue = restSelectProps.inputValue,
     isLoading = restSelectProps.isLoading,
     isMulti = restSelectProps.isMulti,

package/cjs/node_modules/use-isomorphic-layout-effect/dist/{use-isomorphic-layout-effect.browser.esm.js → use-isomorphic-layout-effect.esm.js}

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('../../react/index.js');
 var index$1 = require('../../../_virtual/index.js');
 
-var index = index$1.react.exports.useLayoutEffect ;
+var isClient = typeof document !== 'undefined';
+
+var noop = function noop() {};
+var index = isClient ? index$1.react.exports.useLayoutEffect : noop;
 
 exports["default"] = index;

package/cjs/styles/utils/colors-export.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const 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',
+  'gray-50': '#f4f4f5',
+  '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'
+};
+
+exports.colors = colors;

package/cjs/utils/defaultTheme.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
-var colors = require('../styles/utils/colors.scss.js');
+var colorsExport = require('../styles/utils/colors-export.js');
 var styled = require('styled-components');
 
 const _excluded = ["theme"];
@@ -11,15 +11,38 @@ let _ = t => t,
   _t;
 const defaultTheme = {
   getColor: name => {
-    if (!colors["default"][name]) throw Error(`The color "${name}" is not registered.`);
-    return colors["default"][name];
+    if (!colorsExport.colors[name]) throw Error(`The color "${name}" is not registered.`);
+    return colorsExport.colors[name];
   },
   primaryFontFamily: "'Roboto', sans-serif",
   secondaryFontFamily: "'Overpass', sans-serif",
-  themeProp
+  themeProp,
+  spacing: {
+    baseUnit: 4,
+    controlHeight: 38,
+    menuGutter: 8
+  },
+  colors: {
+    primary: colorsExport.colors['emerald-500'],
+    primary75: colorsExport.colors['emerald-400'],
+    primary50: colorsExport.colors['emerald-300'],
+    primary25: colorsExport.colors['emerald-200'],
+    danger: colorsExport.colors['red-500'],
+    neutral0: colorsExport.colors['white'],
+    neutral5: colorsExport.colors['gray-50'],
+    neutral10: colorsExport.colors['gray-100'],
+    neutral20: colorsExport.colors['gray-300'],
+    neutral30: colorsExport.colors['gray-400'],
+    neutral40: colorsExport.colors['gray-500'],
+    neutral50: colorsExport.colors['gray-600'],
+    neutral60: colorsExport.colors['gray-700'],
+    neutral70: colorsExport.colors['gray-800'],
+    neutral80: colorsExport.colors['gray-900'],
+    neutral90: colorsExport.colors['black']
+  }
 };
 function themeProp(property, darkMode, lightMode, specificity = 2) {
-  const specificityString = Array(specificity).fill("&").join("");
+  const specificityString = Array(specificity).fill('&').join('');
   return styled.css(_t || (_t = _`
     body.dark-theme ${0} {
       ${0}: ${0};

package/esm/components/data/Alert/Alert.js

@@ -37,18 +37,18 @@ const Alert = React.forwardRef(function Alert(_ref, forwardedRef) {
   }
   return React.createElement(Alert$2, _extends({
     ref: forwardedRef,
-    alertMessage: alertMessage,
-    warning: isWarning,
-    error: isError,
-    info: isInfo,
-    align: align,
-    verticalPadding: verticalPadding,
-    horizontalPadding: horizontalPadding,
+    $alertMessage: alertMessage,
+    $warning: isWarning,
+    $error: isError,
+    $info: isInfo,
+    $align: align,
+    $verticalPadding: verticalPadding,
+    $horizontalPadding: horizontalPadding,
     width: width
   }, props), React.createElement(AlertRender, {
     fontSize: fontSize,
     lineHeight: lineHeight,
-    lineClamp: lineClamp
+    $lineClamp: lineClamp
   }, icon, " ", React.createElement("span", null, alertMessage)));
 });
 Alert.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -64,8 +64,6 @@ Alert.propTypes = process.env.NODE_ENV !== "production" ? {
   width: PropTypes.number
 } : {};
 Alert.defaultProps = {
-  warning: false,
-  error: false,
   align: 'left',
   alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',
   lineClamp: 0,

package/esm/components/data/Alert/Alert.styled.js

@@ -8,7 +8,12 @@ let _ = t => t,
   _t4,
   _t5,
   _t6;
-const Alert = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Alert = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   display: flex;
   flex-direction: column;
   padding: ${0};
@@ -23,18 +28,20 @@ const Alert = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
   
   text-align: ${0};
 `), props => {
-  var _props$verticalPaddin, _props$horizontalPadd;
-  const verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
-  const horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
+  var _props$$verticalPaddi, _props$$horizontalPad;
+  const verticalPadding = (_props$$verticalPaddi = props.$verticalPadding) !== null && _props$$verticalPaddi !== void 0 ? _props$$verticalPaddi : 17;
+  const horizontalPadding = (_props$$horizontalPad = props.$horizontalPadding) !== null && _props$$horizontalPad !== void 0 ? _props$$horizontalPad : 30;
   return `${verticalPadding}px ${horizontalPadding}px`;
-}, props => props.width ? `${props.width}px` : '100%', props => props.warning && css(_t2 || (_t2 = _`
+}, props => props.width ? `${props.width}px` : '100%', props => props.$warning && css(_t2 || (_t2 = _`
       ${0}
-    `), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.error && css(_t3 || (_t3 = _`
+    `), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.$error && css(_t3 || (_t3 = _`
       ${0}
-    `), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.info && css(_t4 || (_t4 = _`
+    `), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.$info && css(_t4 || (_t4 = _`
       background: transparent;
     `)), props => props.align === 'center' ? 'center' : 'left');
-const AlertRender = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
+const AlertRender = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t5 || (_t5 = _`
   display: flex;
   align-items: center;
   word-break: break-word;
@@ -52,12 +59,12 @@ const AlertRender = styled.div.attrs(applyDefaultTheme)(_t5 || (_t5 = _`
     padding-left: 5px;
     ${0};
   }
-`), props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.lineClamp ? css(_t6 || (_t6 = _`
+`), props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.$lineClamp ? css(_t6 || (_t6 = _`
             display: -webkit-box;
             -webkit-line-clamp: ${0};
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
-          `), props.lineClamp) : null);
+          `), props.$lineClamp) : null);
 
 export { Alert, AlertRender };

package/esm/components/data/Badge/Badge.js

@@ -33,26 +33,26 @@ const Badge = React.forwardRef(function Badge(_ref, forwardedRef) {
   }
   return React.createElement(Badge$2, _extends({
     ref: forwardedRef,
-    elevated: elevated,
-    hasChildren: Boolean(children)
+    $elevated: elevated,
+    $hasChildren: Boolean(children)
   }, props), children && React.createElement(BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && React.createElement(BadgeLabel, {
-    backgroundColors: backgroundColors,
-    colors: colors,
-    elevated: elevated,
+    $backgroundColors: backgroundColors,
+    $colors: colors,
+    $elevated: elevated,
     fontSize: fontSize,
     fontWeight: fontWeight,
-    lineHeight: lineHeight,
-    active: active,
-    error: error,
-    warning: warning,
-    verticalPadding: verticalPadding,
-    horizontalPadding: horizontalPadding,
+    $lineHeight: lineHeight,
+    $active: active,
+    $error: error,
+    $warning: warning,
+    $elevatedverticalPadding: verticalPadding,
+    $horizontalPadding: horizontalPadding,
     height: height,
     minHeight: minHeight,
     width: width,
-    minWidth: minWidth
+    $minWidth: minWidth
   }, badgeIcon && React.createElement(BadgeIcon, {
-    useGutter: !!badgeContent
+    $useGutter: !!badgeContent
   }, badgeIcon), badgeContent));
 });
 Badge.propTypes = process.env.NODE_ENV !== "production" ? {