@televet/kibble-ui 0.1.0-beta.2 → 0.1.0-beta.21

package/build/index.js

@@ -597,8 +597,8 @@ var createCache = function createCache(options) {
   return cache;
 };
 
-function _extends$6() {
-  _extends$6 = Object.assign || function (target) {
+function _extends$9() {
+  _extends$9 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -612,7 +612,7 @@ function _extends$6() {
     return target;
   };
 
-  return _extends$6.apply(this, arguments);
+  return _extends$9.apply(this, arguments);
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -1437,7 +1437,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$9({}, outerTheme, theme);
 };
 
 var createCacheWithTheme = /* #__PURE__ */weakMemoize(function (outerTheme) {
@@ -4393,11 +4393,11 @@ function useMergeRefs() {
   }, refs);
 }
 
-var _createContext$1 = createContext({
+var _createContext$1$1 = createContext({
   strict: false,
   name: "PortalManagerContext"
 }),
-    PortalManagerContextProvider = _createContext$1[0];
+    PortalManagerContextProvider = _createContext$1$1[0];
 function PortalManager(props) {
   var children = props.children,
       zIndex = props.zIndex;
@@ -4831,8 +4831,8 @@ if (__DEV__) {
   ColorModeProvider.displayName = "ColorModeProvider";
 }
 
-function _extends$5() {
-  _extends$5 = Object.assign || function (target) {
+function _extends$8() {
+  _extends$8 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -4846,7 +4846,7 @@ function _extends$5() {
     return target;
   };
 
-  return _extends$5.apply(this, arguments);
+  return _extends$8.apply(this, arguments);
 }
 
 var tokenToCSSVar = function tokenToCSSVar(scale, value) {
@@ -5255,7 +5255,7 @@ var t = {
     };
   },
   prop: function prop(property, scale, transform) {
-    return _extends$5({
+    return _extends$8({
       property: property,
       scale: scale
     }, scale && {
@@ -6317,7 +6317,7 @@ var systemProps = mergeWith({}, background, border, color, flexbox, layout, filt
 Object.assign({}, space$1, layout, flexbox, grid, position);
 var propNames = [].concat(objectKeys(systemProps), pseudoPropNames);
 
-var styleProps = _extends$5({}, systemProps, pseudoSelectors);
+var styleProps = _extends$8({}, systemProps, pseudoSelectors);
 
 var isStyleProp = function isStyleProp(prop) {
   return prop in styleProps;
@@ -6803,7 +6803,7 @@ function createThemeVars(flatTokens, options) {
   };
 }
 
-function _objectWithoutPropertiesLoose$3(source, excluded) {
+function _objectWithoutPropertiesLoose$6(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -6818,7 +6818,7 @@ function _objectWithoutPropertiesLoose$3(source, excluded) {
   return target;
 }
 
-var _excluded$7 = ["__cssMap", "__cssVars", "__breakpoints"];
+var _excluded$a = ["__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;
@@ -6831,7 +6831,7 @@ function omitVars(rawTheme) {
   rawTheme.__cssMap;
       rawTheme.__cssVars;
       rawTheme.__breakpoints;
-      var cleanTheme = _objectWithoutPropertiesLoose$3(rawTheme, _excluded$7);
+      var cleanTheme = _objectWithoutPropertiesLoose$6(rawTheme, _excluded$a);
 
   return cleanTheme;
 }
@@ -6896,7 +6896,7 @@ function toCSSVar(rawTheme) {
     "--chakra-space-y-reverse": "0"
   };
   Object.assign(theme, {
-    __cssVars: _extends$5({}, defaultCssVars, cssVars),
+    __cssVars: _extends$8({}, defaultCssVars, cssVars),
     __cssMap: cssMap,
     __breakpoints: analyzeBreakpoints(theme.breakpoints)
   });
@@ -7238,7 +7238,7 @@ var createStyled = function createStyled(tag, options) {
     });
 
     Styled.withComponent = function (nextTag, nextOptions) {
-      return createStyled(nextTag, _extends$6({}, options, nextOptions, {
+      return createStyled(nextTag, _extends$9({}, options, nextOptions, {
         shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true)
       })).apply(void 0, styles);
     };
@@ -7256,8 +7256,8 @@ tags.forEach(function (tagName) {
   newStyled[tagName] = newStyled(tagName);
 });
 
-function _extends$4() {
-  _extends$4 = Object.assign || function (target) {
+function _extends$7() {
+  _extends$7 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7271,7 +7271,7 @@ function _extends$4() {
     return target;
   };
 
-  return _extends$4.apply(this, arguments);
+  return _extends$7.apply(this, arguments);
 }
 
 var ThemeProvider = function ThemeProvider(props) {
@@ -7313,10 +7313,12 @@ function useTheme() {
   return theme;
 }
 
-createContext({
+var _createContext$2 = createContext({
   name: "StylesContext",
   errorMessage: "useStyles: `styles` is undefined. Seems you forgot to wrap the components in `<StylesProvider />` "
-});
+}),
+    StylesProvider = _createContext$2[0],
+    useStyles = _createContext$2[1];
 /**
  * Applies styles defined in `theme.styles.global` globally
  * using emotion's `Global` component
@@ -7347,12 +7349,12 @@ function omitThemingProps(props) {
 function useChakra() {
   var colorModeResult = useColorMode();
   var theme = useTheme();
-  return _extends$4({}, colorModeResult, {
+  return _extends$7({}, colorModeResult, {
     theme: theme
   });
 }
 
-function _objectWithoutPropertiesLoose$2(source, excluded) {
+function _objectWithoutPropertiesLoose$5(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -7408,7 +7410,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$5(props, _excluded$1$1);
 
     var styleProps = objectFilter(rest, function (_, prop) {
       return isStyleProp(prop);
@@ -7422,7 +7424,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$5(_ref2, _excluded2);
 
   if (!styledOptions.shouldForwardProp) {
     styledOptions.shouldForwardProp = shouldForwardProp;
@@ -7442,7 +7444,7 @@ function forwardRef(component) {
   return /*#__PURE__*/React__namespace.forwardRef(component);
 }
 
-var _excluded$6 = ["styleConfig"];
+var _excluded$9 = ["styleConfig"];
 function useStyleConfig(themeKey, props, opts) {
   var _styleConfig$defaultP;
 
@@ -7456,7 +7458,7 @@ function useStyleConfig(themeKey, props, opts) {
 
   var _props = props,
       styleConfigProp = _props.styleConfig,
-      rest = _objectWithoutPropertiesLoose$2(_props, _excluded$6);
+      rest = _objectWithoutPropertiesLoose$5(_props, _excluded$9);
 
   var _useChakra = useChakra(),
       theme = _useChakra.theme,
@@ -7499,6 +7501,11 @@ function useStyleConfig(themeKey, props, opts) {
 
   return stylesRef.current;
 }
+function useMultiStyleConfig(themeKey, props) {
+  return useStyleConfig(themeKey, props, {
+    isMultiPart: true
+  });
+}
 
 function factory() {
   var cache = new Map();
@@ -7594,8 +7601,8 @@ var spacing = {
   96: "24rem"
 };
 
-function _extends$3() {
-  _extends$3 = Object.assign || function (target) {
+function _extends$6() {
+  _extends$6 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -7609,7 +7616,7 @@ function _extends$3() {
     return target;
   };
 
-  return _extends$3.apply(this, arguments);
+  return _extends$6.apply(this, arguments);
 }
 
 var largeSizes = {
@@ -7638,7 +7645,7 @@ var container$1 = {
   xl: "1280px"
 };
 
-var sizes$m = _extends$3({}, spacing, largeSizes, {
+var sizes$m = _extends$6({}, spacing, largeSizes, {
   container: container$1
 });
 
@@ -7713,7 +7720,7 @@ function boundAlpha(a) {
  */
 function convertToPercentage(n) {
     if (n <= 1) {
-        return Number(n) * 100 + "%";
+        return "".concat(Number(n) * 100, "%");
     }
     return n;
 }
@@ -8166,12 +8173,12 @@ var CSS_INTEGER = '[-\\+]?\\d+%?';
 // <http://www.w3.org/TR/css3-values/#number-value>
 var CSS_NUMBER = '[-\\+]?\\d*\\.\\d+%?';
 // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
-var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";
+var CSS_UNIT = "(?:".concat(CSS_NUMBER, ")|(?:").concat(CSS_INTEGER, ")");
 // Actual matching.
 // Parentheses and commas are optional, but not required.
 // Whitespace can take the place of commas or opening paren
-var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
-var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
+var PERMISSIVE_MATCH3 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
+var PERMISSIVE_MATCH4 = "[\\s|\\(]+(".concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")[,|\\s]+(").concat(CSS_UNIT, ")\\s*\\)?");
 var matchers = {
     CSS_UNIT: new RegExp(CSS_UNIT),
     rgb: new RegExp('rgb' + PERMISSIVE_MATCH3),
@@ -8397,7 +8404,7 @@ var TinyColor = /** @class */ (function () {
         var h = Math.round(hsv.h * 360);
         var s = Math.round(hsv.s * 100);
         var v = Math.round(hsv.v * 100);
-        return this.a === 1 ? "hsv(" + h + ", " + s + "%, " + v + "%)" : "hsva(" + h + ", " + s + "%, " + v + "%, " + this.roundA + ")";
+        return this.a === 1 ? "hsv(".concat(h, ", ").concat(s, "%, ").concat(v, "%)") : "hsva(".concat(h, ", ").concat(s, "%, ").concat(v, "%, ").concat(this.roundA, ")");
     };
     /**
      * Returns the object as a HSLA object.
@@ -8415,7 +8422,7 @@ var TinyColor = /** @class */ (function () {
         var h = Math.round(hsl.h * 360);
         var s = Math.round(hsl.s * 100);
         var l = Math.round(hsl.l * 100);
-        return this.a === 1 ? "hsl(" + h + ", " + s + "%, " + l + "%)" : "hsla(" + h + ", " + s + "%, " + l + "%, " + this.roundA + ")";
+        return this.a === 1 ? "hsl(".concat(h, ", ").concat(s, "%, ").concat(l, "%)") : "hsla(".concat(h, ", ").concat(s, "%, ").concat(l, "%, ").concat(this.roundA, ")");
     };
     /**
      * Returns the hex value of the color.
@@ -8468,13 +8475,13 @@ var TinyColor = /** @class */ (function () {
         var r = Math.round(this.r);
         var g = Math.round(this.g);
         var b = Math.round(this.b);
-        return this.a === 1 ? "rgb(" + r + ", " + g + ", " + b + ")" : "rgba(" + r + ", " + g + ", " + b + ", " + this.roundA + ")";
+        return this.a === 1 ? "rgb(".concat(r, ", ").concat(g, ", ").concat(b, ")") : "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(this.roundA, ")");
     };
     /**
      * Returns the object as a RGBA object.
      */
     TinyColor.prototype.toPercentageRgb = function () {
-        var fmt = function (x) { return Math.round(bound01(x, 255) * 100) + "%"; };
+        var fmt = function (x) { return "".concat(Math.round(bound01(x, 255) * 100), "%"); };
         return {
             r: fmt(this.r),
             g: fmt(this.g),
@@ -8488,8 +8495,8 @@ var TinyColor = /** @class */ (function () {
     TinyColor.prototype.toPercentageRgbString = function () {
         var rnd = function (x) { return Math.round(bound01(x, 255) * 100); };
         return this.a === 1
-            ? "rgb(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%)"
-            : "rgba(" + rnd(this.r) + "%, " + rnd(this.g) + "%, " + rnd(this.b) + "%, " + this.roundA + ")";
+            ? "rgb(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%)")
+            : "rgba(".concat(rnd(this.r), "%, ").concat(rnd(this.g), "%, ").concat(rnd(this.b), "%, ").concat(this.roundA, ")");
     };
     /**
      * The 'real' name of the color -if there is one.
@@ -9165,8 +9172,8 @@ function orient(options) {
   return orientation === "vertical" ? vertical : horizontal;
 }
 
-function _extends$2() {
-  _extends$2 = Object.assign || function (target) {
+function _extends$5() {
+  _extends$5 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -9180,7 +9187,7 @@ function _extends$2() {
     return target;
   };
 
-  return _extends$2.apply(this, arguments);
+  return _extends$5.apply(this, arguments);
 }
 
 var createBreakpoints = function createBreakpoints(config) {
@@ -9188,7 +9195,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$5({
     base: "0em"
   }, config);
 };
@@ -9962,7 +9969,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$6({
     border: "1px solid",
     borderColor: c === "gray" ? borderColor : "currentColor"
   }, variantGhost(props));
@@ -10345,7 +10352,7 @@ var baseStyleDialogContainer$1 = {
 
 var baseStyleDialog$1 = function baseStyleDialog(props) {
   var isFullHeight = props.isFullHeight;
-  return _extends$3({}, isFullHeight && {
+  return _extends$6({}, isFullHeight && {
     height: "100vh"
   }, {
     zIndex: "modal",
@@ -11080,7 +11087,7 @@ function getSize(size) {
   var fontSize = typography.fontSizes[_fontSize.toString()];
 
   return {
-    field: _extends$3({}, sizeStyle.field, {
+    field: _extends$6({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
       verticalAlign: "top"
     }),
@@ -11114,7 +11121,7 @@ var numberInput = {
 
 var _Input$variants$unsty$1;
 
-var baseStyle$f = _extends$3({}, Input.baseStyle.field, {
+var baseStyle$f = _extends$6({}, Input.baseStyle.field, {
   textAlign: "center"
 });
 
@@ -11236,7 +11243,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$6({}, addStripe && stripeStyle, isIndeterminate ? {
     bgImage: gradient
   } : {
     bgColor: bgColor
@@ -11257,7 +11264,7 @@ var baseStyleTrack$2 = function baseStyleTrack(props) {
 };
 
 var baseStyleFilledTrack$1 = function baseStyleFilledTrack(props) {
-  return _extends$3({
+  return _extends$6({
     transitionProperty: "common",
     transitionDuration: "slow"
   }, filledStyle(props));
@@ -11309,9 +11316,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$6({}, control, {
     borderRadius: "full",
-    _checked: _extends$3({}, control["_checked"], {
+    _checked: _extends$6({}, control["_checked"], {
       _before: {
         content: "\"\"",
         display: "inline-block",
@@ -11374,7 +11381,7 @@ var radio = {
 };
 
 var baseStyleField = function baseStyleField(props) {
-  return _extends$3({}, Input.baseStyle.field, {
+  return _extends$6({}, Input.baseStyle.field, {
     bg: mode("white", "gray.700")(props),
     appearance: "none",
     paddingBottom: "1px",
@@ -11510,7 +11517,7 @@ function thumbOrientation(props) {
 
 var baseStyleContainer$1 = function baseStyleContainer(props) {
   var orientation = props.orientation;
-  return _extends$3({
+  return _extends$6({
     display: "inline-block",
     position: "relative",
     cursor: "pointer",
@@ -11542,7 +11549,7 @@ var baseStyleTrack$1 = function baseStyleTrack(props) {
 };
 
 var baseStyleThumb$1 = function baseStyleThumb(props) {
-  return _extends$3({
+  return _extends$6({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -11828,12 +11835,12 @@ var numericStyles = {
 var variantSimple = function variantSimple(props) {
   var c = props.colorScheme;
   return {
-    th: _extends$3({
+    th: _extends$6({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
-    td: _extends$3({
+    td: _extends$6({
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
@@ -11855,12 +11862,12 @@ var variantSimple = function variantSimple(props) {
 var variantStripe = function variantStripe(props) {
   var c = props.colorScheme;
   return {
-    th: _extends$3({
+    th: _extends$6({
       color: mode("gray.600", "gray.400")(props),
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
-    td: _extends$3({
+    td: _extends$6({
       borderBottom: "1px",
       borderColor: mode(c + ".100", c + ".700")(props)
     }, numericStyles),
@@ -12269,7 +12276,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$6({}, Input.baseStyle.field, {
   paddingY: "8px",
   minHeight: "80px",
   lineHeight: "short",
@@ -12381,7 +12388,7 @@ var borders$1 = {
  * Breakpoints for responsive design
  */
 
-var breakpoints$1 = createBreakpoints({
+var breakpoints = createBreakpoints({
   sm: "30em",
   md: "48em",
   lg: "62em",
@@ -12698,8 +12705,8 @@ var blur$1 = {
   "3xl": "64px"
 };
 
-var foundations = _extends$3({
-  breakpoints: breakpoints$1,
+var foundations = _extends$6({
+  breakpoints: breakpoints,
   zIndices: zIndices$1,
   radii: radii$1,
   blur: blur$1,
@@ -12752,7 +12759,7 @@ var config = {
   initialColorMode: "light",
   cssVarPrefix: "chakra"
 };
-var theme$1 = _extends$3({
+var theme$1 = _extends$6({
   direction: direction
 }, foundations, {
   components: components,
@@ -12760,6 +12767,116 @@ var theme$1 = _extends$3({
   config: config
 });
 
+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);
+}
+
+function _objectWithoutPropertiesLoose$4(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$8 = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
+var fallbackIcon = {
+  path: /*#__PURE__*/React__namespace.createElement("g", {
+    stroke: "currentColor",
+    strokeWidth: "1.5"
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    strokeLinecap: "round",
+    fill: "none",
+    d: "M9,9a3,3,0,1,1,4,2.829,1.5,1.5,0,0,0-1,1.415V14.25"
+  }), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    strokeLinecap: "round",
+    d: "M12,17.25a.375.375,0,1,0,.375.375A.375.375,0,0,0,12,17.25h0"
+  }), /*#__PURE__*/React__namespace.createElement("circle", {
+    fill: "none",
+    strokeMiterlimit: "10",
+    cx: "12",
+    cy: "12",
+    r: "11.25"
+  })),
+  viewBox: "0 0 24 24"
+};
+var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
+  var element = props.as,
+      viewBox = props.viewBox,
+      _props$color = props.color,
+      color = _props$color === void 0 ? "currentColor" : _props$color,
+      _props$focusable = props.focusable,
+      focusable = _props$focusable === void 0 ? false : _props$focusable,
+      children = props.children,
+      className = props.className,
+      __css = props.__css,
+      rest = _objectWithoutPropertiesLoose$4(props, _excluded$8);
+
+  var _className = cx("chakra-icon", className);
+
+  var styles = _extends$4({
+    w: "1em",
+    h: "1em",
+    display: "inline-block",
+    lineHeight: "1em",
+    flexShrink: 0,
+    color: color
+  }, __css);
+
+  var shared = {
+    ref: ref,
+    focusable: focusable,
+    className: _className,
+    __css: styles
+  };
+
+  var _viewBox = viewBox != null ? viewBox : fallbackIcon.viewBox;
+  /**
+   * If you're using an icon library like `react-icons`.
+   * Note: anyone passing the `as` prop, should manage the `viewBox` from the external component
+   */
+
+
+  if (element && typeof element !== "string") {
+    return /*#__PURE__*/React__namespace.createElement(chakra.svg, _extends$4({
+      as: element
+    }, shared, rest));
+  }
+
+  var _path = children != null ? children : fallbackIcon.path;
+
+  return /*#__PURE__*/React__namespace.createElement(chakra.svg, _extends$4({
+    verticalAlign: "middle",
+    viewBox: _viewBox
+  }, shared, rest), _path);
+});
+
+if (__DEV__) {
+  Icon.displayName = "Icon";
+}
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -12786,6 +12903,170 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function _extends$3() {
+  _extends$3 = 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$3.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose$3(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 CheckIcon = function CheckIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement(Icon, _extends$3({
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12,0A12,12,0,1,0,24,12,12.014,12.014,0,0,0,12,0Zm6.927,8.2-6.845,9.289a1.011,1.011,0,0,1-1.43.188L5.764,13.769a1,1,0,1,1,1.25-1.562l4.076,3.261,6.227-8.451A1,1,0,1,1,18.927,8.2Z"
+  }));
+};
+var InfoIcon = function InfoIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement(Icon, _extends$3({
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M12,0A12,12,0,1,0,24,12,12.013,12.013,0,0,0,12,0Zm.25,5a1.5,1.5,0,1,1-1.5,1.5A1.5,1.5,0,0,1,12.25,5ZM14.5,18.5h-4a1,1,0,0,1,0-2h.75a.25.25,0,0,0,.25-.25v-4.5a.25.25,0,0,0-.25-.25H10.5a1,1,0,0,1,0-2h1a2,2,0,0,1,2,2v4.75a.25.25,0,0,0,.25.25h.75a1,1,0,1,1,0,2Z"
+  }));
+};
+var WarningIcon = function WarningIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement(Icon, _extends$3({
+    viewBox: "0 0 24 24"
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z"
+  }));
+};
+
+var _excluded$7 = ["status"];
+var STATUSES = {
+  info: {
+    icon: InfoIcon,
+    colorScheme: "blue"
+  },
+  warning: {
+    icon: WarningIcon,
+    colorScheme: "orange"
+  },
+  success: {
+    icon: CheckIcon,
+    colorScheme: "green"
+  },
+  error: {
+    icon: WarningIcon,
+    colorScheme: "red"
+  }
+};
+
+var _createContext$1 = createContext({
+  name: "AlertContext",
+  errorMessage: "useAlertContext: `context` is undefined. Seems you forgot to wrap alert components in `<Alert />`"
+}),
+    AlertProvider = _createContext$1[0],
+    useAlertContext = _createContext$1[1];
+
+/**
+ * Alert is used to communicate the state or status of a
+ * page, feature or action
+ */
+var Alert = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$colorScheme;
+
+  var _omitThemingProps = omitThemingProps(props),
+      _omitThemingProps$sta = _omitThemingProps.status,
+      status = _omitThemingProps$sta === void 0 ? "info" : _omitThemingProps$sta,
+      rest = _objectWithoutPropertiesLoose$3(_omitThemingProps, _excluded$7);
+
+  var colorScheme = (_props$colorScheme = props.colorScheme) != null ? _props$colorScheme : STATUSES[status].colorScheme;
+  var styles = useMultiStyleConfig("Alert", _extends$3({}, props, {
+    colorScheme: colorScheme
+  }));
+
+  var alertStyles = _extends$3({
+    width: "100%",
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    overflow: "hidden"
+  }, styles.container);
+
+  return /*#__PURE__*/React__namespace.createElement(AlertProvider, {
+    value: {
+      status: status
+    }
+  }, /*#__PURE__*/React__namespace.createElement(StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$3({
+    role: "alert",
+    ref: ref
+  }, rest, {
+    className: cx("chakra-alert", props.className),
+    __css: alertStyles
+  }))));
+});
+var AlertTitle = /*#__PURE__*/forwardRef(function (props, ref) {
+  var styles = useStyles();
+  return /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$3({
+    ref: ref
+  }, props, {
+    className: cx("chakra-alert__title", props.className),
+    __css: styles.title
+  }));
+});
+var AlertDescription = /*#__PURE__*/forwardRef(function (props, ref) {
+  var styles = useStyles();
+
+  var descriptionStyles = _extends$3({
+    display: "inline"
+  }, styles.description);
+
+  return /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$3({
+    ref: ref
+  }, props, {
+    className: cx("chakra-alert__desc", props.className),
+    __css: descriptionStyles
+  }));
+});
+var AlertIcon = function AlertIcon(props) {
+  var _useAlertContext = useAlertContext(),
+      status = _useAlertContext.status;
+
+  var BaseIcon = STATUSES[status].icon;
+  var styles = useStyles();
+  return /*#__PURE__*/React__namespace.createElement(chakra.span, _extends$3({
+    display: "inherit"
+  }, props, {
+    className: cx("chakra-alert__icon", props.className),
+    __css: styles.icon
+  }), /*#__PURE__*/React__namespace.createElement(BaseIcon, {
+    w: "100%",
+    h: "100%"
+  }));
+};
+
 /**
  * Styles to visually hide an element
  * but make it accessible to screen-readers
@@ -12828,8 +13109,8 @@ if (__DEV__) {
   VisuallyHiddenInput.displayName = "VisuallyHiddenInput";
 }
 
-function _extends$1() {
-  _extends$1 = 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];
 
@@ -12843,10 +13124,10 @@ function _extends$1() {
     return target;
   };
 
-  return _extends$1.apply(this, arguments);
+  return _extends$2.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose$1(source, excluded) {
+function _objectWithoutPropertiesLoose$2(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -12861,7 +13142,7 @@ function _objectWithoutPropertiesLoose$1(source, excluded) {
   return target;
 }
 
-var _excluded$5 = ["label", "thickness", "speed", "emptyColor", "className"];
+var _excluded$6 = ["label", "thickness", "speed", "emptyColor", "className"];
 var spin = keyframes({
   "0%": {
     transform: "rotate(0deg)"
@@ -12890,11 +13171,11 @@ var Spinner = /*#__PURE__*/forwardRef(function (props, ref) {
       _omitThemingProps$emp = _omitThemingProps.emptyColor,
       emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp,
       className = _omitThemingProps.className,
-      rest = _objectWithoutPropertiesLoose$1(_omitThemingProps, _excluded$5);
+      rest = _objectWithoutPropertiesLoose$2(_omitThemingProps, _excluded$6);
 
   var _className = cx("chakra-spinner", className);
 
-  var spinnerStyles = _extends$1({
+  var spinnerStyles = _extends$2({
     display: "inline-block",
     borderColor: "currentColor",
     borderStyle: "solid",
@@ -12905,7 +13186,7 @@ var Spinner = /*#__PURE__*/forwardRef(function (props, ref) {
     animation: spin + " " + speed + " linear infinite"
   }, styles);
 
-  return /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$1({
+  return /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$2({
     ref: ref,
     __css: spinnerStyles,
     className: _className
@@ -12916,7 +13197,7 @@ if (__DEV__) {
   Spinner.displayName = "Spinner";
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
+function _objectWithoutPropertiesLoose$1(source, excluded) {
   if (source == null) return {};
   var target = {};
   var sourceKeys = Object.keys(source);
@@ -12931,8 +13212,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-function _extends() {
-  _extends = 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];
 
@@ -12946,7 +13227,7 @@ function _extends() {
     return target;
   };
 
-  return _extends.apply(this, arguments);
+  return _extends$1.apply(this, arguments);
 }
 
 var _excluded$4 = ["size", "colorScheme", "variant", "className", "spacing", "isAttached", "isDisabled"];
@@ -12966,7 +13247,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       spacing = _props$spacing === void 0 ? "0.5rem" : _props$spacing,
       isAttached = props.isAttached,
       isDisabled = props.isDisabled,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$4);
+      rest = _objectWithoutPropertiesLoose$1(props, _excluded$4);
 
   var _className = cx("chakra-button__group", className);
 
@@ -12983,7 +13264,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   };
 
   if (isAttached) {
-    groupStyles = _extends({}, groupStyles, {
+    groupStyles = _extends$1({}, groupStyles, {
       "> *:first-of-type:not(:last-of-type)": {
         borderEndRadius: 0
       },
@@ -12995,7 +13276,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       }
     });
   } else {
-    groupStyles = _extends({}, groupStyles, {
+    groupStyles = _extends$1({}, groupStyles, {
       "& > *:not(style) ~ *:not(style)": {
         marginStart: spacing
       }
@@ -13004,7 +13285,7 @@ var ButtonGroup = /*#__PURE__*/forwardRef(function (props, ref) {
 
   return /*#__PURE__*/React__namespace.createElement(ButtonGroupProvider, {
     value: context
-  }, /*#__PURE__*/React__namespace.createElement(chakra.div, _extends({
+  }, /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$1({
     ref: ref,
     role: "group",
     __css: groupStyles,
@@ -13030,7 +13311,7 @@ var ButtonSpinner = function ButtonSpinner(props) {
   }) : _props$children,
       className = props.className,
       __css = props.__css,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$3);
+      rest = _objectWithoutPropertiesLoose$1(props, _excluded$3);
 
   var _className = cx("chakra-button__spinner", className);
 
@@ -13038,13 +13319,13 @@ var ButtonSpinner = function ButtonSpinner(props) {
   var spinnerStyles = React__namespace.useMemo(function () {
     var _extends2;
 
-    return _extends((_extends2 = {
+    return _extends$1((_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__namespace.createElement(chakra.div, _extends({
+  return /*#__PURE__*/React__namespace.createElement(chakra.div, _extends$1({
     className: _className
   }, rest, {
     __css: spinnerStyles
@@ -13059,7 +13340,7 @@ var _excluded$2 = ["children", "className"];
 var ButtonIcon = function ButtonIcon(props) {
   var children = props.children,
       className = props.className,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$2);
+      rest = _objectWithoutPropertiesLoose$1(props, _excluded$2);
 
   var _children = /*#__PURE__*/React__namespace.isValidElement(children) ? /*#__PURE__*/React__namespace.cloneElement(children, {
     "aria-hidden": true,
@@ -13068,7 +13349,7 @@ var ButtonIcon = function ButtonIcon(props) {
 
   var _className = cx("chakra-button__icon", className);
 
-  return /*#__PURE__*/React__namespace.createElement(chakra.span, _extends({
+  return /*#__PURE__*/React__namespace.createElement(chakra.span, _extends$1({
     display: "inline-flex",
     alignSelf: "center",
     flexShrink: 0
@@ -13100,7 +13381,7 @@ function useButtonType(value) {
 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 styles = useStyleConfig("Button", _extends$1({}, group, props));
 
   var _omitThemingProps = omitThemingProps(props),
       _omitThemingProps$isD = _omitThemingProps.isDisabled,
@@ -13120,7 +13401,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       spinnerPlacement = _omitThemingProps$spi === void 0 ? "start" : _omitThemingProps$spi,
       className = _omitThemingProps.className,
       as = _omitThemingProps.as,
-      rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded$1);
+      rest = _objectWithoutPropertiesLoose$1(_omitThemingProps, _excluded$1);
   /**
    * When button is used within ButtonGroup (i.e. flushed with sibling buttons),
    * it is important to add a `zIndex` on focus.
@@ -13136,7 +13417,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
       zIndex: 1
     });
 
-    return _extends({
+    return _extends$1({
       display: "inline-flex",
       appearance: "none",
       alignItems: "center",
@@ -13162,7 +13443,7 @@ var Button$1 = /*#__PURE__*/forwardRef(function (props, ref) {
     iconSpacing: iconSpacing,
     children: children
   };
-  return /*#__PURE__*/React__namespace.createElement(chakra.button, _extends({
+  return /*#__PURE__*/React__namespace.createElement(chakra.button, _extends$1({
     disabled: isDisabled || isLoading,
     ref: useMergeRefs(ref, _ref),
     as: as,
@@ -13202,13 +13483,13 @@ function ButtonContent(props) {
   }, rightIcon));
 }
 
-var _excluded = ["icon", "children", "isRound", "aria-label"];
+var _excluded$5 = ["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);
+      rest = _objectWithoutPropertiesLoose$1(props, _excluded$5);
   /**
    * Passing the icon as prop or children should work
    */
@@ -13221,7 +13502,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     focusable: false
   }) : null;
 
-  return /*#__PURE__*/React__namespace.createElement(Button$1, _extends({
+  return /*#__PURE__*/React__namespace.createElement(Button$1, _extends$1({
     padding: "0",
     borderRadius: isRound ? "full" : undefined,
     ref: ref,
@@ -13233,6 +13514,89 @@ if (__DEV__) {
   IconButton.displayName = "IconButton";
 }
 
+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 = ["children", "isDisabled", "__css"];
+
+var CloseIcon = function CloseIcon(props) {
+  return /*#__PURE__*/React__namespace.createElement(Icon, _extends({
+    focusable: "false",
+    "aria-hidden": true
+  }, props), /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M.439,21.44a1.5,1.5,0,0,0,2.122,2.121L11.823,14.3a.25.25,0,0,1,.354,0l9.262,9.263a1.5,1.5,0,1,0,2.122-2.121L14.3,12.177a.25.25,0,0,1,0-.354l9.263-9.262A1.5,1.5,0,0,0,21.439.44L12.177,9.7a.25.25,0,0,1-.354,0L2.561.44A1.5,1.5,0,0,0,.439,2.561L9.7,11.823a.25.25,0,0,1,0,.354Z"
+  }));
+};
+
+/**
+ * A button with a close icon.
+ *
+ * It is used to handle the close functionality in feedback and overlay components
+ * like Alerts, Toasts, Drawers and Modals.
+ */
+var CloseButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var styles = useStyleConfig("CloseButton", props);
+
+  var _omitThemingProps = omitThemingProps(props),
+      children = _omitThemingProps.children,
+      isDisabled = _omitThemingProps.isDisabled,
+      __css = _omitThemingProps.__css,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, _excluded);
+
+  var baseStyle = {
+    outline: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  return /*#__PURE__*/React__namespace.createElement(chakra.button, _extends({
+    type: "button",
+    "aria-label": "Close",
+    ref: ref,
+    disabled: isDisabled,
+    __css: _extends({}, baseStyle, styles, __css)
+  }, rest), children || /*#__PURE__*/React__namespace.createElement(CloseIcon, {
+    width: "1em",
+    height: "1em"
+  }));
+});
+
+if (__DEV__) {
+  CloseButton.displayName = "CloseButton";
+}
+
 var ChakraProvider = ChakraProvider$1;
 ChakraProvider.defaultProps = {
   theme: theme$1
@@ -13303,7 +13667,7 @@ function mergeThemeCustomizer(source, override, key, object) {
   return undefined;
 }
 
-var pallette = {
+var baseColors = {
     comet: {
         50: '#F0F1F5',
         100: '#D5D7E2',
@@ -13316,20 +13680,17 @@ var pallette = {
         800: '#2A2D3C',
         900: '#15171E',
     },
-    televet: {
-        100: '#A4DAE4',
-    },
     teal: {
-        50: '#EBF7F9',
-        100: '#C8E9EF',
-        200: '#A4DAE4',
-        300: '#81CCDA',
-        400: '#5DBDD0',
+        50: '#F7FAFC',
+        100: '#EBF9FB',
+        200: '#DCF6FB',
+        300: '#AFE1EC',
+        400: '#78CBDC',
         500: '#39ADC3',
-        600: '#2E8C9E',
-        700: '#236976',
-        800: '#17464F',
-        900: '#0C2327',
+        600: '#3CA0B4',
+        700: '#2E8C9E',
+        800: '#236976',
+        900: '#17464F',
     },
     blue: {
         50: '#E7E9FE',
@@ -13349,7 +13710,7 @@ var pallette = {
         200: '#FEB2B2',
         300: '#FC8181',
         400: '#F56565',
-        500: '#E53E3E',
+        500: '#E01F1F',
         600: '#C53030',
         700: '#9B2C2C',
         800: '#822727',
@@ -13386,7 +13747,7 @@ var pallette = {
         300: '#68D391',
         400: '#48BB78',
         500: '#38A169',
-        600: '#2F855A',
+        600: '#25855A',
         700: '#276749',
         800: '#22543D',
         900: '#1C4532',
@@ -13434,66 +13795,68 @@ var pallette = {
 };
 var semanticTokens = {
     text: {
-        onLight: pallette.comet[700],
-        onLightSubtle: pallette.gray[800],
-        onDark: pallette.white,
-        headline: pallette.blue[700],
+        onLight: baseColors.comet[700],
+        linkOnLight: baseColors.teal[600],
+        onLightSubtle: baseColors.gray[800],
+        onDark: baseColors.white,
+        headline: baseColors.blue[800],
+        placeholder: baseColors.blackAlpha[500],
+        success: baseColors.green[600],
+        warning: baseColors.yellow[600],
+        error: baseColors.red[600],
     },
     background: {
-        light: pallette.gray[300],
-        gray: pallette.gray[50],
-        info: pallette.teal[50],
-        error: pallette.red[50],
-        warning: pallette.orange[50],
-        success: pallette.blue[50],
-    },
-    border: {
-        default: pallette.gray[300],
-        dark: pallette.comet[700],
-        info: pallette.teal[500],
-        error: pallette.red[500],
-        warning: pallette.yellow[500],
-        success: pallette.blue[200],
-    },
-    button: {
-        primaryDefault: pallette.teal[600],
-        primaryHover: pallette.teal[700],
-        primaryActive: pallette.teal[800],
-        secondaryDefault: pallette.gray[300],
-        secondaryHover: pallette.gray[50],
-        secondaryActive: pallette.gray[100],
-        tertiaryDefault: pallette.gray[100],
-        tertiaryHover: pallette.gray[200],
-        tertiaryActive: pallette.gray[200],
-        ghostDefault: pallette.white,
-        ghostHover: pallette.teal[50],
-        ghostActive: pallette.teal[100],
-    },
-    link: {
-        onLight: pallette.teal[600],
+        light: baseColors.gray[300],
+        grayLight: baseColors.gray[50],
+        grayDark: baseColors.gray[300],
+        tealLight: baseColors.teal[50],
+        dark: baseColors.blue[800],
+        table: baseColors.comet[50],
+        overlay: baseColors.blackAlpha[300],
+        info: baseColors.teal[50],
+        error: baseColors.red[50],
+        warning: baseColors.orange[50],
+        success: baseColors.green[50],
     },
     icon: {
-        onLight: pallette.comet[700],
-        onDark: pallette.gray[300],
-        active: pallette.teal[600],
-        success: pallette.blue[400],
-        warning: pallette.yellow[500],
-        error: pallette.red[500],
+        onLight: baseColors.comet[700],
+        onLightSubtle: baseColors.gray[800],
+        onDark: baseColors.white,
+        inactive: baseColors.gray[700],
+        active: baseColors.teal[600],
+        success: baseColors.green[600],
+        warning: baseColors.yellow[600],
+        error: baseColors.red[600],
+    },
+    border: {
+        default: baseColors.gray[200],
+        dark: baseColors.comet[700],
+        focus: baseColors.teal[600],
+        info: baseColors.teal[600],
+        error: baseColors.red[500],
+        warning: baseColors.yellow[500],
+        success: baseColors.green[400],
     },
     divider: {
-        onLight: pallette.gray[300],
+        onLight: baseColors.gray[100],
     },
     status: {
-        open: pallette.blue[300],
-        confirmed: pallette.teal[500],
-        success: pallette.green[400],
-        warning: pallette.yellow[400],
-        action: pallette.orange[400],
-        negative: pallette.red[300],
-        error: pallette.red[500],
+        open: baseColors.blue[300],
+        confirmed: baseColors.teal[500],
+        success: baseColors.green[400],
+        warning: baseColors.yellow[400],
+        action: baseColors.orange[400],
+        negative: baseColors.red[300],
+        error: baseColors.red[500],
+        archived: baseColors.gray[800],
+        closed: baseColors.gray[900],
+    },
+    general: {
+        brand: baseColors.teal[500],
+        error: baseColors.red[500],
     },
 };
-var colors = __assign(__assign({}, pallette), semanticTokens);
+var colors = __assign(__assign({}, baseColors), semanticTokens);
 
 var blur = {
     none: 0,
@@ -13506,14 +13869,6 @@ var blur = {
     '3xl': '64px',
 };
 
-var breakpoints = createBreakpoints({
-    sm: '30em',
-    md: '48em',
-    lg: '62em',
-    xl: '80em',
-    '2xl': '96em',
-});
-
 var borders = {
     none: 0,
     '1px': '1px solid',
@@ -13638,9 +13993,9 @@ var transition = {
 };
 
 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",
+    body: 'LinearSans, Noto Sans, Arial, Helvetica, sans-serif',
+    heading: 'LinearSans, Noto Sans, Arial, Helvetica, sans-serif',
+    mono: 'LinearSans, Noto Sans, Arial, Helvetica, sans-serif',
 };
 
 var fontSizes = {
@@ -13709,7 +14064,6 @@ var zIndices = {
 var theme = extendTheme({
     blur: blur,
     borders: borders,
-    breakpoints: breakpoints,
     colors: colors,
     radii: radii,
     shadows: shadows,
@@ -13721,19 +14075,33 @@ var theme = extendTheme({
     space: space,
     transition: transition,
     zIndices: zIndices,
+    semanticTokens: semanticTokens,
+    config: {
+        initialColorMode: 'light',
+        useSystemColorMode: false,
+    },
 });
 
 var KibbleThemeProvider = function (_a) {
     var children = _a.children;
-    return (React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme },
-        React__default["default"].createElement(ThemeProvider, { theme: theme }, children)));
+    return (React__default["default"].createElement(ChakraProvider, { theme: theme },
+        React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme }, children)));
 };
 
 var Button = function (_a) {
     var children = _a.children;
-    return React__default["default"].createElement(Button$1, null, children);
+    return (React__default["default"].createElement(Button$1, { colorScheme: 'teal', variant: 'outline' }, children));
+};
+
+var Banner = function () {
+    return (React__default["default"].createElement(Alert, { status: "success" },
+        React__default["default"].createElement(AlertIcon, null),
+        React__default["default"].createElement(AlertTitle, { mr: 2 }, "Your design system is too fancy!"),
+        React__default["default"].createElement(AlertDescription, null, "You should consider being less fancy."),
+        React__default["default"].createElement(CloseButton, { position: "absolute", right: "8px", top: "8px" })));
 };
 
+exports.Banner = Banner;
 exports.Button = Button;
 exports.KibbleThemeProvider = KibbleThemeProvider;
 exports.theme = theme;