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

package/esm/node_modules/react/cjs/react.production.js

@@ -21,6 +21,7 @@ var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
   REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
   REACT_MEMO_TYPE = Symbol.for("react.memo"),
   REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+  REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
   MAYBE_ITERATOR_SYMBOL = Symbol.iterator;
 function getIteratorFn(maybeIterable) {
   if (null === maybeIterable || "object" !== typeof maybeIterable) return null;
@@ -72,28 +73,22 @@ var pureComponentPrototype = (PureComponent.prototype = new ComponentDummy());
 pureComponentPrototype.constructor = PureComponent;
 assign(pureComponentPrototype, Component.prototype);
 pureComponentPrototype.isPureReactComponent = !0;
-var isArrayImpl = Array.isArray,
-  ReactSharedInternals = { H: null, A: null, T: null, S: null, V: null },
+var isArrayImpl = Array.isArray;
+function noop() {}
+var ReactSharedInternals = { H: null, A: null, T: null, S: null },
   hasOwnProperty = Object.prototype.hasOwnProperty;
-function ReactElement(type, key, self, source, owner, props) {
-  self = props.ref;
+function ReactElement(type, key, props) {
+  var refProp = props.ref;
   return {
     $$typeof: REACT_ELEMENT_TYPE,
     type: type,
     key: key,
-    ref: void 0 !== self ? self : null,
+    ref: void 0 !== refProp ? refProp : null,
     props: props
   };
 }
 function cloneAndReplaceKey(oldElement, newKey) {
-  return ReactElement(
-    oldElement.type,
-    newKey,
-    void 0,
-    void 0,
-    void 0,
-    oldElement.props
-  );
+  return ReactElement(oldElement.type, newKey, oldElement.props);
 }
 function isValidElement(object) {
   return (
@@ -117,7 +112,6 @@ function getElementKey(element, index) {
     ? escape("" + element.key)
     : index.toString(36);
 }
-function noop$1() {}
 function resolveThenable(thenable) {
   switch (thenable.status) {
     case "fulfilled":
@@ -127,7 +121,7 @@ function resolveThenable(thenable) {
     default:
       switch (
         ("string" === typeof thenable.status
-          ? thenable.then(noop$1, noop$1)
+          ? thenable.then(noop, noop)
           : ((thenable.status = "pending"),
             thenable.then(
               function (fulfilledValue) {
@@ -288,68 +282,69 @@ function lazyInitializer(payload) {
   throw payload._result;
 }
 var reportGlobalError =
-  "function" === typeof reportError
-    ? reportError
-    : function (error) {
-        if (
-          "object" === typeof window &&
-          "function" === typeof window.ErrorEvent
-        ) {
-          var event = new window.ErrorEvent("error", {
-            bubbles: !0,
-            cancelable: !0,
-            message:
-              "object" === typeof error &&
-              null !== error &&
-              "string" === typeof error.message
-                ? String(error.message)
-                : String(error),
-            error: error
-          });
-          if (!window.dispatchEvent(event)) return;
-        } else if (
-          "object" === typeof process &&
-          "function" === typeof process.emit
-        ) {
-          process.emit("uncaughtException", error);
-          return;
-        }
-        console.error(error);
-      };
-function noop() {}
-react_production.Children = {
-  map: mapChildren,
-  forEach: function (children, forEachFunc, forEachContext) {
-    mapChildren(
-      children,
-      function () {
-        forEachFunc.apply(this, arguments);
-      },
-      forEachContext
-    );
-  },
-  count: function (children) {
-    var n = 0;
-    mapChildren(children, function () {
-      n++;
-    });
-    return n;
-  },
-  toArray: function (children) {
-    return (
-      mapChildren(children, function (child) {
-        return child;
-      }) || []
-    );
-  },
-  only: function (children) {
-    if (!isValidElement(children))
-      throw Error(
-        "React.Children.only expected to receive a single React element child."
+    "function" === typeof reportError
+      ? reportError
+      : function (error) {
+          if (
+            "object" === typeof window &&
+            "function" === typeof window.ErrorEvent
+          ) {
+            var event = new window.ErrorEvent("error", {
+              bubbles: !0,
+              cancelable: !0,
+              message:
+                "object" === typeof error &&
+                null !== error &&
+                "string" === typeof error.message
+                  ? String(error.message)
+                  : String(error),
+              error: error
+            });
+            if (!window.dispatchEvent(event)) return;
+          } else if (
+            "object" === typeof process &&
+            "function" === typeof process.emit
+          ) {
+            process.emit("uncaughtException", error);
+            return;
+          }
+          console.error(error);
+        },
+  Children = {
+    map: mapChildren,
+    forEach: function (children, forEachFunc, forEachContext) {
+      mapChildren(
+        children,
+        function () {
+          forEachFunc.apply(this, arguments);
+        },
+        forEachContext
       );
-    return children;
-  }
-};
+    },
+    count: function (children) {
+      var n = 0;
+      mapChildren(children, function () {
+        n++;
+      });
+      return n;
+    },
+    toArray: function (children) {
+      return (
+        mapChildren(children, function (child) {
+          return child;
+        }) || []
+      );
+    },
+    only: function (children) {
+      if (!isValidElement(children))
+        throw Error(
+          "React.Children.only expected to receive a single React element child."
+        );
+      return children;
+    }
+  };
+react_production.Activity = REACT_ACTIVITY_TYPE;
+react_production.Children = Children;
 react_production.Component = Component;
 react_production.Fragment = REACT_FRAGMENT_TYPE;
 react_production.Profiler = REACT_PROFILER_TYPE;
@@ -369,18 +364,18 @@ react_production.cache = function (fn) {
     return fn.apply(null, arguments);
   };
 };
+react_production.cacheSignal = function () {
+  return null;
+};
 react_production.cloneElement = function (element, config, children) {
   if (null === element || void 0 === element)
     throw Error(
       "The argument must be a React element, but you passed " + element + "."
     );
   var props = assign({}, element.props),
-    key = element.key,
-    owner = void 0;
+    key = element.key;
   if (null != config)
-    for (propName in (void 0 !== config.ref && (owner = void 0),
-    void 0 !== config.key && (key = "" + config.key),
-    config))
+    for (propName in (void 0 !== config.key && (key = "" + config.key), config))
       !hasOwnProperty.call(config, propName) ||
         "key" === propName ||
         "__self" === propName ||
@@ -394,7 +389,7 @@ react_production.cloneElement = function (element, config, children) {
       childArray[i] = arguments[i + 2];
     props.children = childArray;
   }
-  return ReactElement(element.type, key, void 0, void 0, owner, props);
+  return ReactElement(element.type, key, props);
 };
 react_production.createContext = function (defaultValue) {
   defaultValue = {
@@ -434,7 +429,7 @@ react_production.createElement = function (type, config, children) {
     for (propName in ((childrenLength = type.defaultProps), childrenLength))
       void 0 === props[propName] &&
         (props[propName] = childrenLength[propName]);
-  return ReactElement(type, key, void 0, void 0, null, props);
+  return ReactElement(type, key, props);
 };
 react_production.createRef = function () {
   return { current: null };
@@ -473,7 +468,10 @@ react_production.startTransition = function (scope) {
   } catch (error) {
     reportGlobalError(error);
   } finally {
-    ReactSharedInternals.T = prevTransition;
+    null !== prevTransition &&
+      null !== currentTransition.types &&
+      (prevTransition.types = currentTransition.types),
+      (ReactSharedInternals.T = prevTransition);
   }
 };
 react_production.unstable_useCacheRefresh = function () {
@@ -495,13 +493,11 @@ react_production.useDebugValue = function () {};
 react_production.useDeferredValue = function (value, initialValue) {
   return ReactSharedInternals.H.useDeferredValue(value, initialValue);
 };
-react_production.useEffect = function (create, createDeps, update) {
-  var dispatcher = ReactSharedInternals.H;
-  if ("function" === typeof update)
-    throw Error(
-      "useEffect CRUD overload is not enabled in this build of React."
-    );
-  return dispatcher.useEffect(create, createDeps);
+react_production.useEffect = function (create, deps) {
+  return ReactSharedInternals.H.useEffect(create, deps);
+};
+react_production.useEffectEvent = function (callback) {
+  return ReactSharedInternals.H.useEffectEvent(callback);
 };
 react_production.useId = function () {
   return ReactSharedInternals.H.useId();
@@ -544,4 +540,4 @@ react_production.useSyncExternalStore = function (
 react_production.useTransition = function () {
   return ReactSharedInternals.H.useTransition();
 };
-react_production.version = "19.1.0";
+react_production.version = "19.2.0";

package/esm/node_modules/react-dom/cjs/react-dom.development.js

@@ -419,7 +419,7 @@ import { r as react } from '../../../_virtual/index.js';
     reactDom_development.useFormStatus = function () {
       return resolveDispatcher().useHostTransitionStatus();
     };
-    reactDom_development.version = "19.1.0";
+    reactDom_development.version = "19.2.0";
     "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
       "function" ===
         typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

package/esm/node_modules/react-dom/cjs/react-dom.production.js

@@ -210,4 +210,4 @@ reactDom_production.useFormState = function (action, initialState, permalink) {
 reactDom_production.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-reactDom_production.version = "19.1.0";
+reactDom_production.version = "19.2.0";

package/esm/node_modules/react-select/creatable/dist/react-select-creatable.esm.js

@@ -1,9 +1,9 @@
 import _extends from '../../../@babel/runtime/helpers/esm/extends.js';
 import '../../../react/index.js';
-import { S as Select } from '../../dist/Select-aab027f3.esm.js';
+import { S as Select } from '../../dist/Select-ef7c0426.esm.js';
 import { u as useStateManager } from '../../dist/useStateManager-7e1e8489.esm.js';
-import { u as useCreatable } from '../../dist/useCreatable-84008237.esm.js';
-export { u as useCreatable } from '../../dist/useCreatable-84008237.esm.js';
+import { u as useCreatable } from '../../dist/useCreatable-09aaeb9a.esm.js';
+export { u as useCreatable } from '../../dist/useCreatable-09aaeb9a.esm.js';
 import '../../../react-dom/index.js';
 import { r as react } from '../../../../_virtual/index.js';
 

package/esm/node_modules/react-select/dist/{Select-aab027f3.esm.js → Select-ef7c0426.esm.js}

@@ -7,7 +7,7 @@ import _createSuper from '../../@babel/runtime/helpers/esm/createSuper.js';
 import _toConsumableArray from '../../@babel/runtime/helpers/esm/toConsumableArray.js';
 import '../../react/index.js';
 import { z as isTouchCapable, A as isMobileDevice, B as multiValueAsValue, C as singleValueAsValue, D as valueTernary, E as classNames, F as defaultComponents, G as isDocumentElement, H as cleanValue, I as scrollIntoView, J as noop, M as MenuPlacer, r as removeProps, a as clearIndicatorCSS, b as containerCSS, d as css$1, e as dropdownIndicatorCSS, g as groupCSS, f as groupHeadingCSS, i as indicatorsContainerCSS, h as indicatorSeparatorCSS, j as inputCSS, l as loadingIndicatorCSS, k as loadingMessageCSS, m as menuCSS, n as menuListCSS, o as menuPortalCSS, p as multiValueCSS, q as multiValueLabelCSS, t as multiValueRemoveCSS, u as noOptionsMessageCSS, v as optionCSS, w as placeholderCSS, x as css$2, y as valueContainerCSS, K as notNullish, s as supportsPassiveEvents } from './index-641ee5b8.esm.js';
-import { createElement as jsx, css } from '../../@emotion/react/dist/emotion-react.browser.esm.js';
+import { createElement as jsx, css } from '../../@emotion/react/dist/emotion-react.esm.js';
 import memoizeOne from '../../memoize-one/dist/memoize-one.esm.js';
 import _objectWithoutProperties from '../../@babel/runtime/helpers/esm/objectWithoutProperties.js';
 import { r as react } from '../../../_virtual/index.js';
@@ -1180,7 +1180,8 @@ var Select = /*#__PURE__*/function (_Component) {
       prevWasFocused: false,
       inputIsHiddenAfterUpdate: undefined,
       prevProps: undefined,
-      instancePrefix: ''
+      instancePrefix: '',
+      isAppleDevice: false
     };
     _this.blockOptionHover = false;
     _this.isComposing = false;
@@ -1190,7 +1191,6 @@ var Select = /*#__PURE__*/function (_Component) {
     _this.openAfterFocus = false;
     _this.scrollToFocusedOptionOnUpdate = false;
     _this.userIsDragging = void 0;
-    _this.isAppleDevice = isAppleDevice();
     _this.controlRef = null;
     _this.getControlRef = function (ref) {
       _this.controlRef = ref;
@@ -1727,6 +1727,12 @@ var Select = /*#__PURE__*/function (_Component) {
       if (this.props.menuIsOpen && this.state.focusedOption && this.menuListRef && this.focusedOptionRef) {
         scrollIntoView(this.menuListRef, this.focusedOptionRef);
       }
+      if (isAppleDevice()) {
+        // eslint-disable-next-line react/no-did-mount-set-state
+        this.setState({
+          isAppleDevice: true
+        });
+      }
     }
   }, {
     key: "componentDidUpdate",
@@ -2106,7 +2112,7 @@ var Select = /*#__PURE__*/function (_Component) {
         'aria-labelledby': this.props['aria-labelledby'],
         'aria-required': required,
         role: 'combobox',
-        'aria-activedescendant': this.isAppleDevice ? undefined : this.state.focusedOptionId || ''
+        'aria-activedescendant': this.state.isAppleDevice ? undefined : this.state.focusedOptionId || ''
       }, menuIsOpen && {
         'aria-controls': this.getElementId('listbox')
       }), !isSearchable && {
@@ -2355,7 +2361,7 @@ var Select = /*#__PURE__*/function (_Component) {
           onMouseOver: onHover,
           tabIndex: -1,
           role: 'option',
-          'aria-selected': _this4.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
+          'aria-selected': _this4.state.isAppleDevice ? undefined : isSelected // is not supported on Apple devices
         };
 
         return /*#__PURE__*/react.exports.createElement(Option, _extends({}, commonProps, {
@@ -2534,7 +2540,7 @@ var Select = /*#__PURE__*/function (_Component) {
         isFocused: isFocused,
         selectValue: selectValue,
         focusableOptions: focusableOptions,
-        isAppleDevice: this.isAppleDevice
+        isAppleDevice: this.state.isAppleDevice
       }));
     }
   }, {

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

@@ -1,6 +1,6 @@
 import _objectSpread2 from '../../@babel/runtime/helpers/esm/objectSpread2.js';
 import _extends from '../../@babel/runtime/helpers/esm/extends.js';
-import { keyframes, createElement as jsx, css as css$2 } from '../../@emotion/react/dist/emotion-react.browser.esm.js';
+import { keyframes, createElement as jsx, css as css$2 } from '../../@emotion/react/dist/emotion-react.esm.js';
 import _slicedToArray from '../../@babel/runtime/helpers/esm/slicedToArray.js';
 import _objectWithoutProperties from '../../@babel/runtime/helpers/esm/objectWithoutProperties.js';
 import _typeof from '../../@babel/runtime/helpers/esm/typeof.js';
@@ -9,7 +9,7 @@ import _defineProperty from '../../@babel/runtime/helpers/esm/defineProperty.js'
 import '../../react/index.js';
 import '../../react-dom/index.js';
 import { autoUpdate } from '../../@floating-ui/dom/dist/floating-ui.dom.mjs.js';
-import index from '../../use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js';
+import index from '../../use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.esm.js';
 import { r as react } from '../../../_virtual/index.js';
 import { r as reactDom } from '../../../_virtual/index4.js';
 

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

@@ -3,7 +3,7 @@ import _toConsumableArray from '../../@babel/runtime/helpers/esm/toConsumableArr
 import _objectWithoutProperties from '../../@babel/runtime/helpers/esm/objectWithoutProperties.js';
 import '../../react/index.js';
 import { H as cleanValue, D as valueTernary } from './index-641ee5b8.esm.js';
-import { g as getOptionValue$1, b as getOptionLabel$1 } from './Select-aab027f3.esm.js';
+import { g as getOptionValue$1, b as getOptionLabel$1 } from './Select-ef7c0426.esm.js';
 import { r as react } from '../../../_virtual/index.js';
 
 var _excluded = ["allowCreateWhileLoading", "createOptionPosition", "formatCreateLabel", "isValidNewOption", "getNewOptionData", "onCreateOption", "options", "onChange"];

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

@@ -0,0 +1,9 @@
+import '../../react/index.js';
+import { r as react } from '../../../_virtual/index.js';
+
+var isClient = typeof document !== 'undefined';
+
+var noop = function noop() {};
+var index = isClient ? react.exports.useLayoutEffect : noop;
+
+export { index as default };

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

@@ -0,0 +1,37 @@
+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'
+};
+
+export { colors };

package/esm/utils/defaultTheme.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ntbjs/react-components",
-  "version": "2.0.0-rc.11",
+  "version": "2.0.0-rc.13",
   "description": "NTBs common front-end design utilities and React components.",
   "type": "module",
   "exports": {
@@ -56,30 +56,24 @@
   },
   "homepage": "https://bitbucket.org/NTB-NO/react-components/src/master/",
   "engines": {
-    "node": ">=22.0.0",
+    "node": ">=24.0.0",
     "npm": ">=10.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.13.16",
+    "@babel/core": "^7.28.5",
     "@babel/eslint-parser": "^7.13.14",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-react": "^7.13.13",
-    "@chromatic-com/storybook": "^3.2.6",
+    "@chromatic-com/storybook": "^4.1.3",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^19.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-actions": "^8.6.12",
-    "@storybook/addon-docs": "^8.6.12",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-links": "^8.6.12",
-    "@storybook/addon-mdx-gfm": "^8.6.12",
-    "@storybook/addon-themes": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-webpack5": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/addon-docs": "^10.0.8",
+    "@storybook/addon-links": "^10.0.8",
+    "@storybook/addon-themes": "^10.0.8",
+    "@storybook/react-webpack5": "^10.0.8",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.12.0",
@@ -105,23 +99,23 @@
     "rollup-plugin-url": "^3.0.1",
     "sass": "^1.86.3",
     "sass-loader": "^16.0.5",
-    "storybook": "^8.6.12",
+    "storybook": "^10.0.8",
     "url-loader": "^4.1.1"
   },
   "dependencies": {
-    "@floating-ui/react": "^0.26.24",
-    "@restart/hooks": "^0.3.26",
-    "@storybook/theming": "^8.6.12",
+    "@floating-ui/react": "^0.26.28",
+    "@restart/hooks": "^0.6.2",
+    "@storybook/cli": "^10.0.8",
     "@tippyjs/react": "^4.2.6",
     "lodash": "^4.17.21",
     "nanoid": "^3.3.8",
     "polished": "^4.1.3",
     "popper-max-size-modifier": "^0.2.0",
     "react-lazy-load-image-component": "^1.5.1",
-    "react-select": "^5.7.7",
-    "react-select-async-paginate": "^0.7.3",
-    "react-spinners": "^0.13.8",
+    "react-select": "^5.10.2",
+    "react-select-async-paginate": "^0.7.11",
+    "react-spinners": "^0.17.0",
     "resize-observer-polyfill": "^1.5.1",
-    "styled-components": "^5.3.7"
+    "styled-components": "^6.1.19"
   }
 }

package/styles/utils/colors-export.js

@@ -0,0 +1,35 @@
+export 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'
+};