@televet/kibble-ui 0.1.0-beta.8 → 0.1.0

package/build/index.es.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import React__default, { useContext, createElement, createContext as createContext$3, forwardRef as forwardRef$1, Fragment as Fragment$1, useRef, useLayoutEffect, useState, useMemo } from 'react';
+import React__default, { useContext, createElement, createContext as createContext$1, Fragment as Fragment$1, forwardRef, useRef, useLayoutEffect, useState, useMemo } from 'react';
 import 'react-dom';
-import styled$1, { ThemeProvider as ThemeProvider$3 } from 'styled-components';
 
 /*
 
@@ -571,8 +570,8 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-function _extends$6() {
-  _extends$6 = Object.assign || function (target) {
+function _extends$3() {
+  _extends$3 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -586,7 +585,7 @@ function _extends$6() {
     return target;
   };
 
-  return _extends$6.apply(this, arguments);
+  return _extends$3.apply(this, arguments);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -609,7 +608,7 @@ function createCommonjsModule(fn, module) {
  */
 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
 Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t$1=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t$1:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element$1=c;var ForwardRef=n;var Fragment=e;var Lazy=t$1;var Memo=r;var Portal=d;
+function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t$1:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}var AsyncMode=l;var ConcurrentMode=m;var ContextConsumer=k;var ContextProvider=h;var Element=c;var ForwardRef=n;var Fragment=e;var Lazy=t$1;var Memo=r;var Portal=d;
 var Profiler=g;var StrictMode=f;var Suspense=p;var isAsyncMode=function(a){return A(a)||z(a)===l};var isConcurrentMode=A;var isContextConsumer=function(a){return z(a)===k};var isContextProvider=function(a){return z(a)===h};var isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};var isForwardRef=function(a){return z(a)===n};var isFragment=function(a){return z(a)===e};var isLazy=function(a){return z(a)===t$1};
 var isMemo=function(a){return z(a)===r};var isPortal=function(a){return z(a)===d};var isProfiler=function(a){return z(a)===g};var isStrictMode=function(a){return z(a)===f};var isSuspense=function(a){return z(a)===p};
 var isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t$1||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};var typeOf=z;
@@ -619,7 +618,7 @@ var reactIs_production_min = {
 	ConcurrentMode: ConcurrentMode,
 	ContextConsumer: ContextConsumer,
 	ContextProvider: ContextProvider,
-	Element: Element$1,
+	Element: Element,
 	ForwardRef: ForwardRef,
 	Fragment: Fragment,
 	Lazy: Lazy,
@@ -1341,7 +1340,7 @@ var serializeStyles = function serializeStyles(args, registered, mergedProps) {
 var isBrowser$4 = typeof document !== 'undefined';
 var hasOwnProperty = {}.hasOwnProperty;
 
-var EmotionCacheContext = /* #__PURE__ */createContext$3( // we're doing this to avoid preconstruct's dead code elimination in this one case
+var EmotionCacheContext = /* #__PURE__ */createContext$1( // we're doing this to avoid preconstruct's dead code elimination in this one case
 // because this module is primarily intended for the browser and node
 // but it's also required in react native and similar environments sometimes
 // and we could have a special build just for that
@@ -1359,7 +1358,7 @@ EmotionCacheContext.Provider;
 
 var withEmotionCache = function withEmotionCache(func) {
   // $FlowFixMe
-  return /*#__PURE__*/forwardRef$1(function (props, ref) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
     // the cache will never be null in the browser
     var cache = useContext(EmotionCacheContext);
     return func(props, cache, ref);
@@ -1390,7 +1389,7 @@ if (!isBrowser$4) {
   };
 }
 
-var ThemeContext = /* #__PURE__ */createContext$3({});
+var ThemeContext = /* #__PURE__ */createContext$1({});
 
 if (process.env.NODE_ENV !== 'production') {
   ThemeContext.displayName = 'EmotionThemeContext';
@@ -1411,7 +1410,7 @@ var getTheme = function getTheme(outerTheme, theme) {
     throw new Error('[ThemeProvider] Please make your theme prop a plain object');
   }
 
-  return _extends$6({}, outerTheme, theme);
+  return _extends$3({}, outerTheme, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -3944,15 +3943,6 @@ function isCssVar(value) {
 } // Empty assertions
 var __DEV__ = process.env.NODE_ENV !== "production";
 process.env.NODE_ENV === "test";
-
-function omit(object, keys) {
-  var result = {};
-  Object.keys(object).forEach(function (key) {
-    if (keys.includes(key)) return;
-    result[key] = object[key];
-  });
-  return result;
-}
 function pick(object, keys) {
   var result = {};
   keys.forEach(function (key) {
@@ -4181,16 +4171,6 @@ function canUseDOM() {
   return !!(typeof window !== "undefined" && window.document && window.document.createElement);
 }
 var isBrowser$2 = canUseDOM();
-var dataAttr = function dataAttr(condition) {
-  return condition ? "" : undefined;
-};
-var cx = function cx() {
-  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
-    classNames[_key] = arguments[_key];
-  }
-
-  return classNames.filter(Boolean).join(" ");
-};
 
 /* eslint-disable no-nested-ternary */
 function runIfFn(valueOrFn) {
@@ -4215,7 +4195,7 @@ function once(fn) {
     return result;
   };
 }
-var noop$2 = function noop() {};
+var noop$1 = function noop() {};
 var warn = once(function (options) {
   return function () {
     var condition = options.condition,
@@ -4274,7 +4254,7 @@ Object.freeze(["base", "sm", "md", "lg", "xl", "2xl"]);
  *
  * @param options create context options
  */
-function createContext$2(options) {
+function createContext(options) {
   if (options === void 0) {
     options = {};
   }
@@ -4318,56 +4298,7 @@ var IdProvider = /*#__PURE__*/React.memo(function (_ref) {
   }, children);
 });
 
-/* eslint-disable react-hooks/exhaustive-deps */
-function assignRef(ref, value) {
-  if (ref == null) return;
-
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-
-  try {
-    // @ts-ignore
-    ref.current = value;
-  } catch (error) {
-    throw new Error("Cannot assign value '" + value + "' to ref '" + ref + "'");
-  }
-}
-/**
- * React hook that merges react refs into a single memoized function
- *
- * @example
- * import React from "react";
- * import { useMergeRefs } from `@chakra-ui/hooks`;
- *
- * const Component = React.forwardRef((props, ref) => {
- *   const internalRef = React.useRef();
- *   return <div {...props} ref={useMergeRefs(internalRef, ref)} />;
- * });
- */
-
-function useMergeRefs() {
-  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
-    refs[_key] = arguments[_key];
-  }
-
-  return React.useMemo(function () {
-    if (refs.every(function (ref) {
-      return ref == null;
-    })) {
-      return null;
-    }
-
-    return function (node) {
-      refs.forEach(function (ref) {
-        if (ref) assignRef(ref, node);
-      });
-    };
-  }, refs);
-}
-
-var _createContext$1 = createContext$2({
+var _createContext$1 = createContext({
   strict: false,
   name: "PortalManagerContext"
 }),
@@ -4386,12 +4317,12 @@ if (__DEV__) {
   PortalManager.displayName = "PortalManager";
 }
 
-createContext$2({
+createContext({
   strict: false,
   name: "PortalContext"
 });
 
-var doc$1 = {
+var doc = {
   body: {
     classList: {
       add: function add() {},
@@ -4430,20 +4361,20 @@ var doc$1 = {
     };
   }
 };
-var ssrDocument$1 = doc$1;
+var ssrDocument = doc;
 
-var noop$1 = function noop() {};
+var noop = function noop() {};
 
-var win$1 = {
-  document: ssrDocument$1,
+var win = {
+  document: ssrDocument,
   navigator: {
     userAgent: ""
   },
   CustomEvent: function CustomEvent() {
     return this;
   },
-  addEventListener: noop$1,
-  removeEventListener: noop$1,
+  addEventListener: noop,
+  removeEventListener: noop,
   getComputedStyle: function getComputedStyle() {
     return {
       getPropertyValue: function getPropertyValue() {
@@ -4454,8 +4385,8 @@ var win$1 = {
   matchMedia: function matchMedia() {
     return {
       matches: false,
-      addListener: noop$1,
-      removeListener: noop$1
+      addListener: noop,
+      removeListener: noop
     };
   },
   requestAnimationFrame: function requestAnimationFrame(callback) {
@@ -4473,30 +4404,63 @@ var win$1 = {
   setTimeout: function setTimeout() {
     return 0;
   },
-  clearTimeout: noop$1,
+  clearTimeout: noop,
   setInterval: function setInterval() {
     return 0;
   },
-  clearInterval: noop$1
+  clearInterval: noop
 };
-var ssrWindow$1 = win$1;
+var ssrWindow = win;
 
-var mockEnv$1 = {
-  window: ssrWindow$1,
-  document: ssrDocument$1
+var mockEnv = {
+  window: ssrWindow,
+  document: ssrDocument
 };
-var defaultEnv$1 = isBrowser$2 ? {
+var defaultEnv = isBrowser$2 ? {
   window: window,
   document: document
-} : mockEnv$1;
-var EnvironmentContext$1 = /*#__PURE__*/createContext$3(defaultEnv$1);
+} : mockEnv;
+var EnvironmentContext = /*#__PURE__*/createContext$1(defaultEnv);
 
 if (__DEV__) {
-  EnvironmentContext$1.displayName = "EnvironmentContext";
+  EnvironmentContext.displayName = "EnvironmentContext";
 }
 
 function useEnvironment() {
-  return useContext(EnvironmentContext$1);
+  return useContext(EnvironmentContext);
+}
+function EnvironmentProvider(props) {
+  var children = props.children,
+      environmentProp = props.environment;
+
+  var _useState = useState(null),
+      node = _useState[0],
+      setNode = _useState[1];
+
+  var context = useMemo(function () {
+    var _ref;
+
+    var doc = node == null ? void 0 : node.ownerDocument;
+    var win = node == null ? void 0 : node.ownerDocument.defaultView;
+    var nodeEnv = doc ? {
+      document: doc,
+      window: win
+    } : undefined;
+    var env = (_ref = environmentProp != null ? environmentProp : nodeEnv) != null ? _ref : defaultEnv;
+    return env;
+  }, [node, environmentProp]);
+  var showEnvGetter = !node && !environmentProp;
+  return /*#__PURE__*/React__default.createElement(EnvironmentContext.Provider, {
+    value: context
+  }, children, showEnvGetter && /*#__PURE__*/React__default.createElement("span", {
+    ref: function ref(el) {
+      if (el) setNode(el);
+    }
+  }));
+}
+
+if (__DEV__) {
+  EnvironmentProvider.displayName = "EnvironmentProvider";
 }
 
 var classNames = {
@@ -4509,8 +4473,8 @@ var classNames = {
  */
 var mockBody = {
   classList: {
-    add: noop$2,
-    remove: noop$2
+    add: noop$1,
+    remove: noop$1
   }
 };
 
@@ -4559,7 +4523,7 @@ function getColorScheme(fallback) {
 
 function addListener(fn) {
   if (!("matchMedia" in window)) {
-    return noop$2;
+    return noop$1;
   }
 
   var mediaQueryList = window.matchMedia(queries.dark);
@@ -4759,8 +4723,8 @@ function ColorModeProvider(props) {
   var context = React.useMemo(function () {
     return {
       colorMode: value != null ? value : colorMode,
-      toggleColorMode: value ? noop$2 : toggleColorMode,
-      setColorMode: value ? noop$2 : setColorMode
+      toggleColorMode: value ? noop$1 : toggleColorMode,
+      setColorMode: value ? noop$1 : setColorMode
     };
   }, [colorMode, setColorMode, toggleColorMode, value]);
   return /*#__PURE__*/React.createElement(ColorModeContext.Provider, {
@@ -4772,8 +4736,8 @@ if (__DEV__) {
   ColorModeProvider.displayName = "ColorModeProvider";
 }
 
-function _extends$5() {
-  _extends$5 = Object.assign || function (target) {
+function _extends$2() {
+  _extends$2 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4787,7 +4751,7 @@ function _extends$5() {
     return target;
   };
 
-  return _extends$5.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
 var tokenToCSSVar = function tokenToCSSVar(scale, value) {
@@ -5196,7 +5160,7 @@ var t = {
     };
   },
   prop: function prop(property, scale, transform) {
-    return _extends$5({
+    return _extends$2({
       property: property,
       scale: scale
     }, scale && {
@@ -5672,7 +5636,7 @@ var ring = {
   ringInset: t.prop("--chakra-ring-inset")
 };
 
-var space$1 = {
+var space = {
   margin: t.spaceT("margin"),
   marginTop: t.spaceT("marginTop"),
   marginBlockStart: t.spaceT("marginBlockStart"),
@@ -5700,29 +5664,29 @@ var space$1 = {
   paddingY: t.space(["paddingTop", "paddingBottom"]),
   paddingBlock: t.space("paddingBlock")
 };
-Object.assign(space$1, {
-  m: space$1.margin,
-  mt: space$1.marginTop,
-  mr: space$1.marginRight,
-  me: space$1.marginInlineEnd,
-  marginEnd: space$1.marginInlineEnd,
-  mb: space$1.marginBottom,
-  ml: space$1.marginLeft,
-  ms: space$1.marginInlineStart,
-  marginStart: space$1.marginInlineStart,
-  mx: space$1.marginX,
-  my: space$1.marginY,
-  p: space$1.padding,
-  pt: space$1.paddingTop,
-  py: space$1.paddingY,
-  px: space$1.paddingX,
-  pb: space$1.paddingBottom,
-  pl: space$1.paddingLeft,
-  ps: space$1.paddingInlineStart,
-  paddingStart: space$1.paddingInlineStart,
-  pr: space$1.paddingRight,
-  pe: space$1.paddingInlineEnd,
-  paddingEnd: space$1.paddingInlineEnd
+Object.assign(space, {
+  m: space.margin,
+  mt: space.marginTop,
+  mr: space.marginRight,
+  me: space.marginInlineEnd,
+  marginEnd: space.marginInlineEnd,
+  mb: space.marginBottom,
+  ml: space.marginLeft,
+  ms: space.marginInlineStart,
+  marginStart: space.marginInlineStart,
+  mx: space.marginX,
+  my: space.marginY,
+  p: space.padding,
+  pt: space.paddingTop,
+  py: space.paddingY,
+  px: space.paddingX,
+  pb: space.paddingBottom,
+  pl: space.paddingLeft,
+  ps: space.paddingInlineStart,
+  paddingStart: space.paddingInlineStart,
+  pr: space.paddingRight,
+  pe: space.paddingInlineEnd,
+  paddingEnd: space.paddingInlineEnd
 });
 /**
  * Types for space related CSS properties
@@ -5755,7 +5719,7 @@ var transform = {
   rotate: t.degreeT("--chakra-rotate")
 };
 
-var transition$2 = {
+var transition$1 = {
   transition: true,
   transitionDelay: true,
   animation: true,
@@ -6254,11 +6218,11 @@ var pseudoSelectors = {
 };
 var pseudoPropNames = objectKeys(pseudoSelectors);
 
-var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space$1, scroll, typography$1, textDecoration, transform, list$1, transition$2);
-Object.assign({}, space$1, layout, flexbox, grid, position);
+var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, scroll, typography$1, textDecoration, transform, list$1, transition$1);
+Object.assign({}, space, layout, flexbox, grid, position);
 var propNames = [].concat(objectKeys(systemProps), pseudoPropNames);
 
-var styleProps = _extends$5({}, systemProps, pseudoSelectors);
+var styleProps = _extends$2({}, systemProps, pseudoSelectors);
 
 var isStyleProp = function isStyleProp(prop) {
   return prop in styleProps;
@@ -6744,7 +6708,7 @@ function createThemeVars(flatTokens, options) {
   };
 }
 
-function _objectWithoutPropertiesLoose$3(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -6759,7 +6723,7 @@ function _objectWithoutPropertiesLoose$3(source, excluded) {
   return target;
 }
 
-var _excluded$7 = ["__cssMap", "__cssVars", "__breakpoints"];
+var _excluded = ["__cssMap", "__cssVars", "__breakpoints"];
 var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 function extractTokens(theme) {
   var _tokens = tokens;
@@ -6772,7 +6736,7 @@ function omitVars(rawTheme) {
   rawTheme.__cssMap;
       rawTheme.__cssVars;
       rawTheme.__breakpoints;
-      var cleanTheme = _objectWithoutPropertiesLoose$3(rawTheme, _excluded$7);
+      var cleanTheme = _objectWithoutPropertiesLoose$1(rawTheme, _excluded);
 
   return cleanTheme;
 }
@@ -6837,183 +6801,13 @@ function toCSSVar(rawTheme) {
     "--chakra-space-y-reverse": "0"
   };
   Object.assign(theme, {
-    __cssVars: _extends$5({}, defaultCssVars, cssVars),
+    __cssVars: _extends$2({}, defaultCssVars, cssVars),
     __cssMap: cssMap,
     __breakpoints: analyzeBreakpoints(theme.breakpoints)
   });
   return theme;
 }
 
-/* global Map:readonly, Set:readonly, ArrayBuffer:readonly */
-
-var hasElementType = typeof Element !== 'undefined';
-var hasMap = typeof Map === 'function';
-var hasSet = typeof Set === 'function';
-var hasArrayBuffer = typeof ArrayBuffer === 'function' && !!ArrayBuffer.isView;
-
-// Note: We **don't** need `envHasBigInt64Array` in fde es6/index.js
-
-function equal(a, b) {
-  // START: fast-deep-equal es6/index.js 3.1.1
-  if (a === b) return true;
-
-  if (a && b && typeof a == 'object' && typeof b == 'object') {
-    if (a.constructor !== b.constructor) return false;
-
-    var length, i, keys;
-    if (Array.isArray(a)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (!equal(a[i], b[i])) return false;
-      return true;
-    }
-
-    // START: Modifications:
-    // 1. Extra `has<Type> &&` helpers in initial condition allow es6 code
-    //    to co-exist with es5.
-    // 2. Replace `for of` with es5 compliant iteration using `for`.
-    //    Basically, take:
-    //
-    //    ```js
-    //    for (i of a.entries())
-    //      if (!b.has(i[0])) return false;
-    //    ```
-    //
-    //    ... and convert to:
-    //
-    //    ```js
-    //    it = a.entries();
-    //    while (!(i = it.next()).done)
-    //      if (!b.has(i.value[0])) return false;
-    //    ```
-    //
-    //    **Note**: `i` access switches to `i.value`.
-    var it;
-    if (hasMap && (a instanceof Map) && (b instanceof Map)) {
-      if (a.size !== b.size) return false;
-      it = a.entries();
-      while (!(i = it.next()).done)
-        if (!b.has(i.value[0])) return false;
-      it = a.entries();
-      while (!(i = it.next()).done)
-        if (!equal(i.value[1], b.get(i.value[0]))) return false;
-      return true;
-    }
-
-    if (hasSet && (a instanceof Set) && (b instanceof Set)) {
-      if (a.size !== b.size) return false;
-      it = a.entries();
-      while (!(i = it.next()).done)
-        if (!b.has(i.value[0])) return false;
-      return true;
-    }
-    // END: Modifications
-
-    if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
-      length = a.length;
-      if (length != b.length) return false;
-      for (i = length; i-- !== 0;)
-        if (a[i] !== b[i]) return false;
-      return true;
-    }
-
-    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
-    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
-    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
-
-    keys = Object.keys(a);
-    length = keys.length;
-    if (length !== Object.keys(b).length) return false;
-
-    for (i = length; i-- !== 0;)
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
-    // END: fast-deep-equal
-
-    // START: react-fast-compare
-    // custom handling for DOM elements
-    if (hasElementType && a instanceof Element) return false;
-
-    // custom handling for React/Preact
-    for (i = length; i-- !== 0;) {
-      if ((keys[i] === '_owner' || keys[i] === '__v' || keys[i] === '__o') && a.$$typeof) {
-        // React-specific: avoid traversing React elements' _owner
-        // Preact-specific: avoid traversing Preact elements' __v and __o
-        //    __v = $_original / $_vnode
-        //    __o = $_owner
-        // These properties contain circular references and are not needed when
-        // comparing the actual elements (and not their owners)
-        // .$$typeof and ._store on just reasonable markers of elements
-
-        continue;
-      }
-
-      // all other properties should be traversed as usual
-      if (!equal(a[keys[i]], b[keys[i]])) return false;
-    }
-    // END: react-fast-compare
-
-    // START: fast-deep-equal
-    return true;
-  }
-
-  return a !== a && b !== b;
-}
-// end fast-deep-equal
-
-var reactFastCompare = function isEqual(a, b) {
-  try {
-    return equal(a, b);
-  } catch (error) {
-    if (((error.message || '').match(/stack|recursion/i))) {
-      // warn on circular references, don't crash
-      // browsers give this different errors name and messages:
-      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
-      // firefox: "InternalError", too much recursion"
-      // edge: "Error", "Out of stack space"
-      console.warn('react-fast-compare cannot handle circular refs');
-      return false;
-    }
-    // some other error. we should definitely know about these
-    throw error;
-  }
-};
-
-/**
- * Creates a named context, provider, and hook.
- *
- * @param options create context options
- */
-function createContext$1(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options = options,
-      _options$strict = _options.strict,
-      strict = _options$strict === void 0 ? true : _options$strict,
-      _options$errorMessage = _options.errorMessage,
-      errorMessage = _options$errorMessage === void 0 ? "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider" : _options$errorMessage,
-      name = _options.name;
-  var Context = /*#__PURE__*/React.createContext(undefined);
-  Context.displayName = name;
-
-  function useContext() {
-    var context = React.useContext(Context);
-
-    if (!context && strict) {
-      var error = new Error(errorMessage);
-      error.name = "ContextError";
-      Error.captureStackTrace == null ? void 0 : Error.captureStackTrace(error, useContext);
-      throw error;
-    }
-
-    return context;
-  }
-
-  return [Context.Provider, useContext, Context];
-}
-
 var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23
 
 var isPropValid = /* #__PURE__ */memoize$1(function (prop) {
@@ -7214,7 +7008,7 @@ var createStyled = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$6({}, options, nextOptions, {
+      return createStyled(nextTag, _extends$3({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -7232,24 +7026,6 @@ tags.forEach(function (tagName) {
   newStyled[tagName] = newStyled(tagName);
 });
 
-function _extends$4() {
-  _extends$4 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$4.apply(this, arguments);
-}
-
 var ThemeProvider$1 = function ThemeProvider(props) {
   var cssVarsRoot = props.cssVarsRoot,
       theme = props.theme,
@@ -7274,17 +7050,8 @@ var CSSVars = function CSSVars(_ref) {
     }
   });
 };
-function useTheme() {
-  var theme = React.useContext(ThemeContext);
-
-  if (!theme) {
-    throw Error("useTheme: `theme` is undefined. Seems you forgot to wrap your app in `<ChakraProvider />` or `<ThemeProvider />`");
-  }
-
-  return theme;
-}
 
-createContext$1({
+createContext({
   name: "StylesContext",
   errorMessage: "useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` "
 });
@@ -7311,19 +7078,7 @@ var GlobalStyle = function GlobalStyle() {
   });
 };
 
-function omitThemingProps(props) {
-  return omit(props, ["styleConfig", "size", "variant", "colorScheme"]);
-}
-
-function useChakra() {
-  var colorModeResult = useColorMode();
-  var theme = useTheme();
-  return _extends$4({}, colorModeResult, {
-    theme: theme
-  });
-}
-
-function _objectWithoutPropertiesLoose$2(source, excluded) {
+function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -7356,7 +7111,7 @@ var shouldForwardProp = function shouldForwardProp(prop) {
   return validHTMLProps.has(prop) || !allPropNames.has(prop);
 };
 
-var _excluded$1$1 = ["theme", "css", "__css", "sx"],
+var _excluded$1 = ["theme", "css", "__css", "sx"],
     _excluded2 = ["baseStyle"];
 
 /**
@@ -7379,7 +7134,7 @@ var toCSSObject = function toCSSObject(_ref) {
         var cssProp = props.css,
         __css = props.__css,
         sx = props.sx,
-        rest = _objectWithoutPropertiesLoose$2(props, _excluded$1$1);
+        rest = _objectWithoutPropertiesLoose(props, _excluded$1);
 
     var styleProps = objectFilter(rest, function (_, prop) {
       return isStyleProp(prop);
@@ -7393,7 +7148,7 @@ var toCSSObject = function toCSSObject(_ref) {
 function styled(component, options) {
   var _ref2 = options != null ? options : {},
       baseStyle = _ref2.baseStyle,
-      styledOptions = _objectWithoutPropertiesLoose$2(_ref2, _excluded2);
+      styledOptions = _objectWithoutPropertiesLoose(_ref2, _excluded2);
 
   if (!styledOptions.shouldForwardProp) {
     styledOptions.shouldForwardProp = shouldForwardProp;
@@ -7405,72 +7160,6 @@ function styled(component, options) {
   return newStyled(component, styledOptions)(styleObject);
 }
 
-/**
- * All credit goes to Chance (Reach UI), Haz (Reakit) and (fluentui)
- * for creating the base type definitions upon which we improved on
- */
-function forwardRef(component) {
-  return /*#__PURE__*/React.forwardRef(component);
-}
-
-var _excluded$6 = ["styleConfig"];
-function useStyleConfig(themeKey, props, opts) {
-  var _styleConfig$defaultP;
-
-  if (props === void 0) {
-    props = {};
-  }
-
-  if (opts === void 0) {
-    opts = {};
-  }
-
-  var _props = props,
-      styleConfigProp = _props.styleConfig,
-      rest = _objectWithoutPropertiesLoose$2(_props, _excluded$6);
-
-  var _useChakra = useChakra(),
-      theme = _useChakra.theme,
-      colorMode = _useChakra.colorMode;
-
-  var themeStyleConfig = memoizedGet(theme, "components." + themeKey);
-  var styleConfig = styleConfigProp || themeStyleConfig;
-  var mergedProps = mergeWith({
-    theme: theme,
-    colorMode: colorMode
-  }, (_styleConfig$defaultP = styleConfig == null ? void 0 : styleConfig.defaultProps) != null ? _styleConfig$defaultP : {}, filterUndefined(omit(rest, ["children"])));
-  /**
-   * Store the computed styles in a `ref` to avoid unneeded re-computation
-   */
-
-  var stylesRef = useRef({});
-
-  if (styleConfig) {
-    var _styleConfig$baseStyl, _styleConfig$variants, _styleConfig$variants2, _styleConfig$sizes$me, _styleConfig$sizes, _opts;
-
-    var baseStyles = runIfFn((_styleConfig$baseStyl = styleConfig.baseStyle) != null ? _styleConfig$baseStyl : {}, mergedProps);
-    var variants = runIfFn((_styleConfig$variants = (_styleConfig$variants2 = styleConfig.variants) == null ? void 0 : _styleConfig$variants2[mergedProps.variant]) != null ? _styleConfig$variants : {}, mergedProps);
-    var sizes = runIfFn((_styleConfig$sizes$me = (_styleConfig$sizes = styleConfig.sizes) == null ? void 0 : _styleConfig$sizes[mergedProps.size]) != null ? _styleConfig$sizes$me : {}, mergedProps);
-    var styles = mergeWith({}, baseStyles, sizes, variants);
-
-    if ((_opts = opts) != null && _opts.isMultiPart && styleConfig.parts) {
-      styleConfig.parts.forEach(function (part) {
-        var _styles$part;
-
-        styles[part] = (_styles$part = styles[part]) != null ? _styles$part : {};
-      });
-    }
-
-    var isStyleEqual = reactFastCompare(stylesRef.current, styles);
-
-    if (!isStyleEqual) {
-      stylesRef.current = styles;
-    }
-  }
-
-  return stylesRef.current;
-}
-
 function factory() {
   var cache = new Map();
   return new Proxy(styled, {
@@ -7497,144 +7186,7 @@ function factory() {
   });
 }
 
-var chakra = factory();
-
-var doc = {
-  body: {
-    classList: {
-      add: function add() {},
-      remove: function remove() {}
-    }
-  },
-  addEventListener: function addEventListener() {},
-  removeEventListener: function removeEventListener() {},
-  activeElement: {
-    blur: function blur() {},
-    nodeName: ""
-  },
-  querySelector: function querySelector() {
-    return null;
-  },
-  querySelectorAll: function querySelectorAll() {
-    return [];
-  },
-  getElementById: function getElementById() {
-    return null;
-  },
-  createEvent: function createEvent() {
-    return {
-      initEvent: function initEvent() {}
-    };
-  },
-  createElement: function createElement() {
-    return {
-      children: [],
-      childNodes: [],
-      style: {},
-      setAttribute: function setAttribute() {},
-      getElementsByTagName: function getElementsByTagName() {
-        return [];
-      }
-    };
-  }
-};
-var ssrDocument = doc;
-
-var noop = function noop() {};
-
-var win = {
-  document: ssrDocument,
-  navigator: {
-    userAgent: ""
-  },
-  CustomEvent: function CustomEvent() {
-    return this;
-  },
-  addEventListener: noop,
-  removeEventListener: noop,
-  getComputedStyle: function getComputedStyle() {
-    return {
-      getPropertyValue: function getPropertyValue() {
-        return "";
-      }
-    };
-  },
-  matchMedia: function matchMedia() {
-    return {
-      matches: false,
-      addListener: noop,
-      removeListener: noop
-    };
-  },
-  requestAnimationFrame: function requestAnimationFrame(callback) {
-    if (typeof setTimeout === "undefined") {
-      callback();
-      return null;
-    }
-
-    return setTimeout(callback, 0);
-  },
-  cancelAnimationFrame: function cancelAnimationFrame(id) {
-    if (typeof setTimeout === "undefined") return;
-    clearTimeout(id);
-  },
-  setTimeout: function setTimeout() {
-    return 0;
-  },
-  clearTimeout: noop,
-  setInterval: function setInterval() {
-    return 0;
-  },
-  clearInterval: noop
-};
-var ssrWindow = win;
-
-var mockEnv = {
-  window: ssrWindow,
-  document: ssrDocument
-};
-var defaultEnv = isBrowser$2 ? {
-  window: window,
-  document: document
-} : mockEnv;
-var EnvironmentContext = /*#__PURE__*/createContext$3(defaultEnv);
-
-if (__DEV__) {
-  EnvironmentContext.displayName = "EnvironmentContext";
-}
-function EnvironmentProvider(props) {
-  var children = props.children,
-      environmentProp = props.environment;
-
-  var _useState = useState(null),
-      node = _useState[0],
-      setNode = _useState[1];
-
-  var context = useMemo(function () {
-    var _ref;
-
-    var doc = node == null ? void 0 : node.ownerDocument;
-    var win = node == null ? void 0 : node.ownerDocument.defaultView;
-    var nodeEnv = doc ? {
-      document: doc,
-      window: win
-    } : undefined;
-    var env = (_ref = environmentProp != null ? environmentProp : nodeEnv) != null ? _ref : defaultEnv;
-    return env;
-  }, [node, environmentProp]);
-  var showEnvGetter = !node && !environmentProp;
-  return /*#__PURE__*/React__default.createElement(EnvironmentContext.Provider, {
-    value: context
-  }, children, showEnvGetter && /*#__PURE__*/React__default.createElement("span", {
-    ref: function ref(el) {
-      if (el) setNode(el);
-    }
-  }));
-}
-
-if (__DEV__) {
-  EnvironmentProvider.displayName = "EnvironmentProvider";
-}
+factory();
 
 /**
  * The global provider that must be added to make all Chakra components
@@ -7702,8 +7254,8 @@ var spacing = {
   96: "24rem"
 };
 
-function _extends$3() {
-  _extends$3 = Object.assign || function (target) {
+function _extends$1() {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7717,7 +7269,7 @@ function _extends$3() {
     return target;
   };
 
-  return _extends$3.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 var largeSizes = {
@@ -7746,7 +7298,7 @@ var container$1 = {
   xl: "1280px"
 };
 
-var sizes$m = _extends$3({}, spacing, largeSizes, {
+var sizes$l = _extends$1({}, spacing, largeSizes, {
   container: container$1
 });
 
@@ -9273,8 +8825,8 @@ function orient(options) {
   return orientation === "vertical" ? vertical : horizontal;
 }
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends() {
+  _extends = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -9288,7 +8840,7 @@ function _extends$2() {
     return target;
   };
 
-  return _extends$2.apply(this, arguments);
+  return _extends.apply(this, arguments);
 }
 
 var createBreakpoints = function createBreakpoints(config) {
@@ -9296,7 +8848,7 @@ var createBreakpoints = function createBreakpoints(config) {
     condition: true,
     message: ["[chakra-ui]: createBreakpoints(...) will be deprecated pretty soon", "simply pass the breakpoints as an object. Remove the createBreakpoint(..) call"].join("")
   });
-  return _extends$2({
+  return _extends({
     base: "0em"
   }, config);
 };
@@ -9900,7 +9452,7 @@ var baseStyle$B = function baseStyle(props) {
 };
 
 function getSize$3(size) {
-  var themeSize = sizes$m[size];
+  var themeSize = sizes$l[size];
   return {
     container: {
       width: size,
@@ -10070,7 +9622,7 @@ var variantGhost = function variantGhost(props) {
 var variantOutline$1 = function variantOutline(props) {
   var c = props.colorScheme;
   var borderColor = mode("gray.200", "whiteAlpha.300")(props);
-  return _extends$3({
+  return _extends$1({
     border: "1px solid",
     borderColor: c === "gray" ? borderColor : "currentColor"
   }, variantGhost(props));
@@ -10447,7 +9999,7 @@ var baseStyleDialogContainer$1 = {
 
 var baseStyleDialog$1 = function baseStyleDialog(props) {
   var isFullHeight = props.isFullHeight;
-  return _extends$3({}, isFullHeight && {
+  return _extends$1({}, isFullHeight && {
     height: "100vh"
   }, {
     zIndex: "modal",
@@ -11182,7 +10734,7 @@ function getSize(size) {
   var fontSize = typography.fontSizes[_fontSize.toString()];
 
   return {
-    field: _extends$3({}, sizeStyle.field, {
+    field: _extends$1({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
       verticalAlign: "top"
     }),
@@ -11216,7 +10768,7 @@ var numberInput = {
 
 var _Input$variants$unsty$1;
 
-var baseStyle$f = _extends$3({}, Input.baseStyle.field, {
+var baseStyle$f = _extends$1({}, Input.baseStyle.field, {
   textAlign: "center"
 });
 
@@ -11338,7 +10890,7 @@ function filledStyle(props) {
   var bgColor = mode(c + ".500", c + ".200")(props);
   var gradient = "linear-gradient(\n    to right,\n    transparent 0%,\n    " + getColor(t, bgColor) + " 50%,\n    transparent 100%\n  )";
   var addStripe = !isIndeterminate && hasStripe;
-  return _extends$3({}, addStripe && stripeStyle, isIndeterminate ? {
+  return _extends$1({}, addStripe && stripeStyle, isIndeterminate ? {
     bgImage: gradient
   } : {
     bgColor: bgColor
@@ -11359,7 +10911,7 @@ var baseStyleTrack$2 = function baseStyleTrack(props) {
 };
 
 var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
-  return _extends$3({
+  return _extends$1({
     transitionProperty: "common",
     transitionDuration: "slow"
   }, filledStyle(props));
@@ -11411,9 +10963,9 @@ var baseStyleControl = function baseStyleControl(props) {
       _Checkbox$baseStyle$c = _Checkbox$baseStyle.control,
       control = _Checkbox$baseStyle$c === void 0 ? {} : _Checkbox$baseStyle$c;
 
-  return _extends$3({}, control, {
+  return _extends$1({}, control, {
     borderRadius: "full",
-    _checked: _extends$3({}, control["_checked"], {
+    _checked: _extends$1({}, control["_checked"], {
       _before: {
         content: "\"\"",
         display: "inline-block",
@@ -11475,7 +11027,7 @@ var radio = {
 };
 
 var baseStyleField = function baseStyleField(props) {
-  return _extends$3({}, Input.baseStyle.field, {
+  return _extends$1({}, Input.baseStyle.field, {
     bg: mode("white", "gray.700")(props),
     appearance: "none",
     paddingBottom: "1px",
@@ -11611,7 +11163,7 @@ function thumbOrientation(props) {
 
 var baseStyleContainer$1 = function baseStyleContainer(props) {
   var orientation = props.orientation;
-  return _extends$3({
+  return _extends$1({
     display: "inline-block",
     position: "relative",
     cursor: "pointer",
@@ -11643,7 +11195,7 @@ var baseStyleTrack$1 = function baseStyleTrack(props) {
 };
 
 var baseStyleThumb$1 = function baseStyleThumb(props) {
-  return _extends$3({
+  return _extends$1({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -11929,12 +11481,12 @@ var numericStyles = {
 var variantSimple = function variantSimple(props) {
   var c = props.colorScheme;
   return {
-    th: _extends$3({
+    th: _extends$1({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
-    td: _extends$3({
+    td: _extends$1({
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
@@ -11956,12 +11508,12 @@ var variantSimple = function variantSimple(props) {
 var variantStripe = function variantStripe(props) {
   var c = props.colorScheme;
   return {
-    th: _extends$3({
+    th: _extends$1({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
-    td: _extends$3({
+    td: _extends$1({
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
@@ -12370,7 +11922,7 @@ var tag = {
 
 var _Input$variants$unsty, _Input$sizes$xs$field, _Input$sizes$sm$field, _Input$sizes$md$field, _Input$sizes$lg$field;
 
-var baseStyle$1 = _extends$3({}, Input.baseStyle.field, {
+var baseStyle$1 = _extends$1({}, Input.baseStyle.field, {
   paddingY: "8px",
   minHeight: "80px",
   lineHeight: "short",
@@ -12395,7 +11947,7 @@ var variants = {
   },
   unstyled: (_Input$variants$unsty = Input.variants.unstyled.field) != null ? _Input$variants$unsty : {}
 };
-var sizes$l = {
+var sizes = {
   xs: (_Input$sizes$xs$field = Input.sizes.xs.field) != null ? _Input$sizes$xs$field : {},
   sm: (_Input$sizes$sm$field = Input.sizes.sm.field) != null ? _Input$sizes$sm$field : {},
   md: (_Input$sizes$md$field = Input.sizes.md.field) != null ? _Input$sizes$md$field : {},
@@ -12407,7 +11959,7 @@ var defaultProps = {
 };
 var textarea = {
   baseStyle: baseStyle$1,
-  sizes: sizes$l,
+  sizes: sizes,
   variants: variants,
   defaultProps: defaultProps
 };
@@ -12470,7 +12022,7 @@ var components = /*#__PURE__*/Object.freeze({
   Tooltip: tooltip
 });
 
-var borders$1 = {
+var borders = {
   none: 0,
   "1px": "1px solid",
   "2px": "2px solid",
@@ -12482,7 +12034,7 @@ var borders$1 = {
  * Breakpoints for responsive design
  */
 
-var breakpoints$1 = createBreakpoints({
+var breakpoints = createBreakpoints({
   sm: "30em",
   md: "48em",
   lg: "62em",
@@ -12719,7 +12271,7 @@ var colors$1 = {
   }
 };
 
-var radii$1 = {
+var radii = {
   none: "0",
   sm: "0.125rem",
   base: "0.25rem",
@@ -12731,7 +12283,7 @@ var radii$1 = {
   full: "9999px"
 };
 
-var shadows$1 = {
+var shadows = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
   base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
@@ -12745,19 +12297,19 @@ var shadows$1 = {
   "dark-lg": "rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px"
 };
 
-var transitionProperty$1 = {
+var transitionProperty = {
   common: "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform",
   colors: "background-color, border-color, color, fill, stroke",
   dimensions: "width, height",
   position: "left, right, top, bottom",
   background: "background-color, background-image, background-position"
 };
-var transitionTimingFunction$1 = {
+var transitionTimingFunction = {
   "ease-in": "cubic-bezier(0.4, 0, 1, 1)",
   "ease-out": "cubic-bezier(0, 0, 0.2, 1)",
   "ease-in-out": "cubic-bezier(0.4, 0, 0.2, 1)"
 };
-var transitionDuration$1 = {
+var transitionDuration = {
   "ultra-fast": "50ms",
   faster: "100ms",
   fast: "150ms",
@@ -12766,13 +12318,13 @@ var transitionDuration$1 = {
   slower: "400ms",
   "ultra-slow": "500ms"
 };
-var transition$1 = {
-  property: transitionProperty$1,
-  easing: transitionTimingFunction$1,
-  duration: transitionDuration$1
+var transition = {
+  property: transitionProperty,
+  easing: transitionTimingFunction,
+  duration: transitionDuration
 };
 
-var zIndices$1 = {
+var zIndices = {
   hide: -1,
   auto: "auto",
   base: 0,
@@ -12788,7 +12340,7 @@ var zIndices$1 = {
   tooltip: 1800
 };
 
-var blur$1 = {
+var blur = {
   none: 0,
   sm: "4px",
   base: "8px",
@@ -12799,18 +12351,18 @@ var blur$1 = {
   "3xl": "64px"
 };
 
-var foundations = _extends$3({
-  breakpoints: breakpoints$1,
-  zIndices: zIndices$1,
-  radii: radii$1,
-  blur: blur$1,
+var foundations = _extends$1({
+  breakpoints: breakpoints,
+  zIndices: zIndices,
+  radii: radii,
+  blur: blur,
   colors: colors$1
 }, typography, {
-  sizes: sizes$m,
-  shadows: shadows$1,
+  sizes: sizes$l,
+  shadows: shadows,
   space: spacing,
-  borders: borders$1,
-  transition: transition$1
+  borders: borders,
+  transition: transition
 });
 
 var styles = {
@@ -12853,7 +12405,7 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme$1 = _extends$3({
+var theme$1 = _extends$1({
   direction: direction
 }, foundations, {
   components: components,
@@ -12861,519 +12413,6 @@ var theme$1 = _extends$3({
   config: config
 });
 
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-
-/**
- * Creates a named context, provider, and hook.
- *
- * @param options create context options
- */
-function createContext(options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  var _options = options,
-      _options$strict = _options.strict,
-      strict = _options$strict === void 0 ? true : _options$strict,
-      _options$errorMessage = _options.errorMessage,
-      errorMessage = _options$errorMessage === void 0 ? "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider" : _options$errorMessage,
-      name = _options.name;
-  var Context = /*#__PURE__*/React.createContext(undefined);
-  Context.displayName = name;
-
-  function useContext() {
-    var context = React.useContext(Context);
-
-    if (!context && strict) {
-      var error = new Error(errorMessage);
-      error.name = "ContextError";
-      Error.captureStackTrace == null ? void 0 : Error.captureStackTrace(error, useContext);
-      throw error;
-    }
-
-    return context;
-  }
-
-  return [Context.Provider, useContext, Context];
-}
-
-/**
- * Styles to visually hide an element
- * but make it accessible to screen-readers
- */
-var visuallyHiddenStyle = {
-  border: "0px",
-  clip: "rect(0px, 0px, 0px, 0px)",
-  height: "1px",
-  width: "1px",
-  margin: "-1px",
-  padding: "0px",
-  overflow: "hidden",
-  whiteSpace: "nowrap",
-  position: "absolute"
-};
-/**
- * Visually hidden component used to hide
- * elements on screen
- */
-
-var VisuallyHidden = chakra("span", {
-  baseStyle: visuallyHiddenStyle
-});
-
-if (__DEV__) {
-  VisuallyHidden.displayName = "VisuallyHidden";
-}
-/**
- * Visually hidden input component for designing
- * custom input components using the html `input`
- * as a proxy
- */
-
-
-var VisuallyHiddenInput = chakra("input", {
-  baseStyle: visuallyHiddenStyle
-});
-
-if (__DEV__) {
-  VisuallyHiddenInput.displayName = "VisuallyHiddenInput";
-}
-
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$1(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-var _excluded$5 = ["label", "thickness", "speed", "emptyColor", "className"];
-var spin = keyframes({
-  "0%": {
-    transform: "rotate(0deg)"
-  },
-  "100%": {
-    transform: "rotate(360deg)"
-  }
-});
-
-/**
- * Spinner is used to indicate the loading state of a page or a component,
- * It renders a `div` by default.
- *
- * @see Docs https://chakra-ui.com/spinner
- */
-var Spinner = /*#__PURE__*/forwardRef(function (props, ref) {
-  var styles = useStyleConfig("Spinner", props);
-
-  var _omitThemingProps = omitThemingProps(props),
-      _omitThemingProps$lab = _omitThemingProps.label,
-      label = _omitThemingProps$lab === void 0 ? "Loading..." : _omitThemingProps$lab,
-      _omitThemingProps$thi = _omitThemingProps.thickness,
-      thickness = _omitThemingProps$thi === void 0 ? "2px" : _omitThemingProps$thi,
-      _omitThemingProps$spe = _omitThemingProps.speed,
-      speed = _omitThemingProps$spe === void 0 ? "0.45s" : _omitThemingProps$spe,
-      _omitThemingProps$emp = _omitThemingProps.emptyColor,
-      emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp,
-      className = _omitThemingProps.className,
-      rest = _objectWithoutPropertiesLoose$1(_omitThemingProps, _excluded$5);
-
-  var _className = cx("chakra-spinner", className);
-
-  var spinnerStyles = _extends$1({
-    display: "inline-block",
-    borderColor: "currentColor",
-    borderStyle: "solid",
-    borderRadius: "99999px",
-    borderWidth: thickness,
-    borderBottomColor: emptyColor,
-    borderLeftColor: emptyColor,
-    animation: spin + " " + speed + " linear infinite"
-  }, styles);
-
-  return /*#__PURE__*/React.createElement(chakra.div, _extends$1({
-    ref: ref,
-    __css: spinnerStyles,
-    className: _className
-  }, rest), label && /*#__PURE__*/React.createElement(VisuallyHidden, null, label));
-});
-
-if (__DEV__) {
-  Spinner.displayName = "Spinner";
-}
-
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-var _excluded$4 = ["size", "colorScheme", "variant", "className", "spacing", "isAttached", "isDisabled"];
-
-var _createContext = createContext({
-  strict: false,
-  name: "ButtonGroupContext"
-}),
-    ButtonGroupProvider = _createContext[0],
-    useButtonGroup = _createContext[1];
-var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
-  var size = props.size,
-      colorScheme = props.colorScheme,
-      variant = props.variant,
-      className = props.className,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
-      isAttached = props.isAttached,
-      isDisabled = props.isDisabled,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
-
-  var _className = cx("chakra-button__group", className);
-
-  var context = React.useMemo(function () {
-    return {
-      size: size,
-      colorScheme: colorScheme,
-      variant: variant,
-      isDisabled: isDisabled
-    };
-  }, [size, colorScheme, variant, isDisabled]);
-  var groupStyles = {
-    display: "inline-flex"
-  };
-
-  if (isAttached) {
-    groupStyles = _extends({}, groupStyles, {
-      "> *:first-of-type:not(:last-of-type)": {
-        borderEndRadius: 0
-      },
-      "> *:not(:first-of-type):not(:last-of-type)": {
-        borderRadius: 0
-      },
-      "> *:not(:first-of-type):last-of-type": {
-        borderStartRadius: 0
-      }
-    });
-  } else {
-    groupStyles = _extends({}, groupStyles, {
-      "& > *:not(style) ~ *:not(style)": {
-        marginStart: spacing
-      }
-    });
-  }
-
-  return /*#__PURE__*/React.createElement(ButtonGroupProvider, {
-    value: context
-  }, /*#__PURE__*/React.createElement(chakra.div, _extends({
-    ref: ref,
-    role: "group",
-    __css: groupStyles,
-    className: _className
-  }, rest)));
-});
-
-if (__DEV__) {
-  ButtonGroup.displayName = "ButtonGroup";
-}
-
-var _excluded$3 = ["label", "placement", "spacing", "children", "className", "__css"];
-var ButtonSpinner = function ButtonSpinner(props) {
-  var label = props.label,
-      placement = props.placement,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
-      _props$children = props.children,
-      children = _props$children === void 0 ? /*#__PURE__*/React.createElement(Spinner, {
-    color: "currentColor",
-    width: "1em",
-    height: "1em"
-  }) : _props$children,
-      className = props.className,
-      __css = props.__css,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$3);
-
-  var _className = cx("chakra-button__spinner", className);
-
-  var marginProp = placement === "start" ? "marginEnd" : "marginStart";
-  var spinnerStyles = React.useMemo(function () {
-    var _extends2;
-
-    return _extends((_extends2 = {
-      display: "flex",
-      alignItems: "center",
-      position: label ? "relative" : "absolute"
-    }, _extends2[marginProp] = label ? spacing : 0, _extends2.fontSize = "1em", _extends2.lineHeight = "normal", _extends2), __css);
-  }, [__css, label, marginProp, spacing]);
-  return /*#__PURE__*/React.createElement(chakra.div, _extends({
-    className: _className
-  }, rest, {
-    __css: spinnerStyles
-  }), children);
-};
-
-if (__DEV__) {
-  ButtonSpinner.displayName = "ButtonSpinner";
-}
-
-var _excluded$2 = ["children", "className"];
-var ButtonIcon = function ButtonIcon(props) {
-  var children = props.children,
-      className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
-
-  var _children = /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
-    "aria-hidden": true,
-    focusable: false
-  }) : children;
-
-  var _className = cx("chakra-button__icon", className);
-
-  return /*#__PURE__*/React.createElement(chakra.span, _extends({
-    display: "inline-flex",
-    alignSelf: "center",
-    flexShrink: 0
-  }, rest, {
-    className: _className
-  }), _children);
-};
-
-if (__DEV__) {
-  ButtonIcon.displayName = "ButtonIcon";
-}
-
-function useButtonType(value) {
-  var _React$useState = React.useState(!value),
-      isButton = _React$useState[0],
-      setIsButton = _React$useState[1];
-
-  var refCallback = React.useCallback(function (node) {
-    if (!node) return;
-    setIsButton(node.tagName === "BUTTON");
-  }, []);
-  var type = isButton ? "button" : undefined;
-  return {
-    ref: refCallback,
-    type: type
-  };
-}
-
-var _excluded$1 = ["isDisabled", "isLoading", "isActive", "isFullWidth", "children", "leftIcon", "rightIcon", "loadingText", "iconSpacing", "type", "spinner", "spinnerPlacement", "className", "as"];
-var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
-  var group = useButtonGroup();
-  var styles = useStyleConfig("Button", _extends({}, group, props));
-
-  var _omitThemingProps = omitThemingProps(props),
-      _omitThemingProps$isD = _omitThemingProps.isDisabled,
-      isDisabled = _omitThemingProps$isD === void 0 ? group == null ? void 0 : group.isDisabled : _omitThemingProps$isD,
-      isLoading = _omitThemingProps.isLoading,
-      isActive = _omitThemingProps.isActive,
-      isFullWidth = _omitThemingProps.isFullWidth,
-      children = _omitThemingProps.children,
-      leftIcon = _omitThemingProps.leftIcon,
-      rightIcon = _omitThemingProps.rightIcon,
-      loadingText = _omitThemingProps.loadingText,
-      _omitThemingProps$ico = _omitThemingProps.iconSpacing,
-      iconSpacing = _omitThemingProps$ico === void 0 ? "0.5rem" : _omitThemingProps$ico,
-      type = _omitThemingProps.type,
-      spinner = _omitThemingProps.spinner,
-      _omitThemingProps$spi = _omitThemingProps.spinnerPlacement,
-      spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi,
-      className = _omitThemingProps.className,
-      as = _omitThemingProps.as,
-      rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$1);
-  /**
-   * When button is used within ButtonGroup (i.e flushed with sibling buttons),
-   * it is important to add a `zIndex` on focus.
-   *
-   * So let's read the component styles and then add `zIndex` to it.
-   */
-
-
-  var buttonStyles = React.useMemo(function () {
-    var _styles$_focus;
-
-    var _focus = mergeWith({}, (_styles$_focus = styles == null ? void 0 : styles["_focus"]) != null ? _styles$_focus : {}, {
-      zIndex: 1
-    });
-
-    return _extends({
-      display: "inline-flex",
-      appearance: "none",
-      alignItems: "center",
-      justifyContent: "center",
-      userSelect: "none",
-      position: "relative",
-      whiteSpace: "nowrap",
-      verticalAlign: "middle",
-      outline: "none",
-      width: isFullWidth ? "100%" : "auto"
-    }, styles, !!group && {
-      _focus: _focus
-    });
-  }, [styles, group, isFullWidth]);
-
-  var _useButtonType = useButtonType(as),
-      _ref = _useButtonType.ref,
-      defaultType = _useButtonType.type;
-
-  var contentProps = {
-    rightIcon: rightIcon,
-    leftIcon: leftIcon,
-    iconSpacing: iconSpacing,
-    children: children
-  };
-  return /*#__PURE__*/React.createElement(chakra.button, _extends({
-    disabled: isDisabled || isLoading,
-    ref: useMergeRefs(ref, _ref),
-    as: as,
-    type: type != null ? type : defaultType,
-    "data-active": dataAttr(isActive),
-    "data-loading": dataAttr(isLoading),
-    __css: buttonStyles,
-    className: cx("chakra-button", className)
-  }, rest), isLoading && spinnerPlacement === "start" && /*#__PURE__*/React.createElement(ButtonSpinner, {
-    className: "chakra-button__spinner--start",
-    label: loadingText,
-    placement: "start",
-    spacing: iconSpacing
-  }, spinner), isLoading ? loadingText || /*#__PURE__*/React.createElement(chakra.span, {
-    opacity: 0
-  }, /*#__PURE__*/React.createElement(ButtonContent, contentProps)) : /*#__PURE__*/React.createElement(ButtonContent, contentProps), isLoading && spinnerPlacement === "end" && /*#__PURE__*/React.createElement(ButtonSpinner, {
-    className: "chakra-button__spinner--end",
-    label: loadingText,
-    placement: "end",
-    spacing: iconSpacing
-  }, spinner));
-});
-
-if (__DEV__) {
-  Button$1.displayName = "Button";
-}
-
-function ButtonContent(props) {
-  var leftIcon = props.leftIcon,
-      rightIcon = props.rightIcon,
-      children = props.children,
-      iconSpacing = props.iconSpacing;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, leftIcon && /*#__PURE__*/React.createElement(ButtonIcon, {
-    marginEnd: iconSpacing
-  }, leftIcon), children, rightIcon && /*#__PURE__*/React.createElement(ButtonIcon, {
-    marginStart: iconSpacing
-  }, rightIcon));
-}
-
-var _excluded = ["icon", "children", "isRound", "aria-label"];
-var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
-  var icon = props.icon,
-      children = props.children,
-      isRound = props.isRound,
-      ariaLabel = props["aria-label"],
-      rest = _objectWithoutPropertiesLoose(props, _excluded);
-  /**
-   * Passing the icon as prop or children should work
-   */
-
-
-  var element = icon || children;
-
-  var _children = /*#__PURE__*/React.isValidElement(element) ? /*#__PURE__*/React.cloneElement(element, {
-    "aria-hidden": true,
-    focusable: false
-  }) : null;
-
-  return /*#__PURE__*/React.createElement(Button$1, _extends({
-    padding: "0",
-    borderRadius: isRound ? "full" : undefined,
-    ref: ref,
-    "aria-label": ariaLabel
-  }, rest), _children);
-});
-
-if (__DEV__) {
-  IconButton.displayName = "IconButton";
-}
-
 var ChakraProvider = ChakraProvider$1;
 ChakraProvider.defaultProps = {
   theme: theme$1
@@ -13457,9 +12496,6 @@ var pallette = {
         800: '#2A2D3C',
         900: '#15171E',
     },
-    televet: {
-        100: '#A4DAE4',
-    },
     teal: {
         50: '#EBF7F9',
         100: '#C8E9EF',
@@ -13634,253 +12670,23 @@ var semanticTokens = {
         error: pallette.red[500],
     },
 };
-var colors = __assign(__assign({}, pallette), semanticTokens);
-
-var blur = {
-    none: 0,
-    sm: '4px',
-    base: '8px',
-    md: '12px',
-    lg: '16px',
-    xl: '24px',
-    '2xl': '40px',
-    '3xl': '64px',
-};
-
-var breakpoints = createBreakpoints({
-    sm: '30em',
-    md: '48em',
-    lg: '62em',
-    xl: '80em',
-    '2xl': '96em',
-});
-
-var borders = {
-    none: 0,
-    '1px': '1px solid',
-    '2px': '2px solid',
-    '4px': '4px solid',
-    '8px': '8px solid',
-};
-
-var radii = {
-    none: '0',
-    sm: '0.125rem',
-    base: '0.25rem',
-    md: '0.375rem',
-    lg: '0.5rem',
-    xl: '0.75rem',
-    '2xl': '1rem',
-    '3xl': '1.5rem',
-    full: '9999px',
-};
-
-var shadows = {
-    xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
-    sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-    md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-    lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-    xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-    '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-    outline: '0 0 0 3px rgba(66, 153, 225, 0.6)',
-    inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
-    none: 'none',
-    'dark-lg': 'rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 5px 10px, rgba(0, 0, 0, 0.4) 0px 15px 40px',
-};
-
-var space = {
-    px: '1px',
-    0.5: '0.125rem',
-    1: '0.25rem',
-    1.5: '0.375rem',
-    2: '0.5rem',
-    2.5: '0.625rem',
-    3: '0.75rem',
-    3.5: '0.875rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem',
-    7: '1.75rem',
-    8: '2rem',
-    9: '2.25rem',
-    10: '2.5rem',
-    12: '3rem',
-    14: '3.5rem',
-    16: '4rem',
-    20: '5rem',
-    24: '6rem',
-    28: '7rem',
-    32: '8rem',
-    36: '9rem',
-    40: '10rem',
-    44: '11rem',
-    48: '12rem',
-    52: '13rem',
-    56: '14rem',
-    60: '15rem',
-    64: '16rem',
-    72: '18rem',
-    80: '20rem',
-    96: '24rem',
-};
-
-var sizes = {
-    max: 'max-content',
-    min: 'min-content',
-    full: '100%',
-    '3xs': '14rem',
-    '2xs': '16rem',
-    xs: '20rem',
-    sm: '24rem',
-    md: '28rem',
-    lg: '32rem',
-    xl: '36rem',
-    '2xl': '42rem',
-    '3xl': '48rem',
-    '4xl': '56rem',
-    '5xl': '64rem',
-    '6xl': '72rem',
-    '7xl': '80rem',
-    '8xl': '90rem',
-    container: {
-        sm: '640px',
-        md: '768px',
-        lg: '1024px',
-        xl: '1280px',
-    },
+var colors = {
+    pallette: pallette,
+    semanticTokens: semanticTokens,
 };
 
-var transitionProperty = {
-    common: 'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-    colors: 'background-color, border-color, color, fill, stroke',
-    dimensions: 'width, height',
-    position: 'left, right, top, bottom',
-    background: 'background-color, background-image, background-position',
-};
-var transitionTimingFunction = {
-    'ease-in': 'cubic-bezier(0.4, 0, 1, 1)',
-    'ease-out': 'cubic-bezier(0, 0, 0.2, 1)',
-    'ease-in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-};
-var transitionDuration = {
-    'ultra-fast': '50ms',
-    faster: '100ms',
-    fast: '150ms',
-    normal: '200ms',
-    slow: '300ms',
-    slower: '400ms',
-    'ultra-slow': '500ms',
-};
-var transition = {
-    property: transitionProperty,
-    easing: transitionTimingFunction,
-    duration: transitionDuration,
-};
-
-var fonts = {
-    heading: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
-    body: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"",
-    mono: "SFMono-Regular,Menlo,Monaco,Consolas,\"Liberation Mono\",\"Courier New\",monospace",
-};
-
-var fontSizes = {
-    xs: '0.75rem',
-    sm: '0.875rem',
-    md: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '3.75rem',
-    '7xl': '4.5rem',
-    '8xl': '6rem',
-    '9xl': '8rem',
-};
-
-var fontWeights = {
-    hairline: 100,
-    thin: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900,
-};
-
-var lineHeights = {
-    normal: 'normal',
-    none: 1,
-    shorter: 1.25,
-    short: 1.375,
-    base: 1.5,
-    tall: 1.625,
-    taller: '2',
-    '3': '.75rem',
-    '4': '1rem',
-    '5': '1.25rem',
-    '6': '1.5rem',
-    '7': '1.75rem',
-    '8': '2rem',
-    '9': '2.25rem',
-    '10': '2.5rem',
-};
-
-var zIndices = {
-    hide: -1,
-    auto: 'auto',
-    base: 0,
-    docked: 10,
-    dropdown: 1000,
-    sticky: 1100,
-    banner: 1200,
-    overlay: 1300,
-    modal: 1400,
-    popover: 1500,
-    skipLink: 1600,
-    toast: 1700,
-    tooltip: 1800,
-};
-
-// @ts-ignore
+// theme/index.js
+// import { ThemeTypings } from '@chakra-ui/react';
 var theme = extendTheme({
-    blur: blur,
-    borders: borders,
-    breakpoints: breakpoints,
-    colors: colors,
-    radii: radii,
-    shadows: shadows,
-    sizes: sizes,
-    fonts: fonts,
-    fontSizes: fontSizes,
-    fontWeights: fontWeights,
-    lineHeights: lineHeights,
-    space: space,
-    transition: transition,
-    zIndices: zIndices,
+    colors: colors.pallette,
+    semanticTokens: colors.semanticTokens,
 });
 
 var ThemeProvider = function (_a) {
     var children = _a.children;
-    return (React__default.createElement(ThemeProvider$3, { theme: theme },
-        React__default.createElement(ThemeProvider$1, { theme: theme },
-            children,
-            React__default.createElement(Wrapper, null, "hello"),
-            React__default.createElement(Button$1, { color: 'background.error' }, "Button"))));
-};
-var Wrapper = styled$1.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n"], ["\n  background-color: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.colors.blackAlpha[100];
-});
-var templateObject_1;
-
-var Button = function (props) {
-    return React__default.createElement(Button$1, __assign({}, props));
+    return (React__default.createElement(ThemeProvider$2, { theme: theme },
+        React__default.createElement(ThemeProvider$1, { theme: theme }, children)));
 };
 
-export { Button, ThemeProvider, theme };
+export { ThemeProvider, theme };
 //# sourceMappingURL=index.es.js.map