@chakra-ui/theme - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+# [1.0.0-next.5](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/theme@1.0.0-next.4...@chakra-ui/theme@1.0.0-next.5) (2020-07-15)
+
+### Bug Fixes
+
+- tabs align prop didnt do anything
+  ([8e56b1b](https://github.com/chakra-ui/chakra-ui/commit/8e56b1b8427bd49a91c67ca3c1da792e76ef005c))
+
+### Features
+
+- add popover transition
+  ([73d8c4f](https://github.com/chakra-ui/chakra-ui/commit/73d8c4fc9c676c95232cd259f59cce7d38eff94b))
+- add transition for modal
+  ([dda931b](https://github.com/chakra-ui/chakra-ui/commit/dda931bea7444c3f83392eebf1c34dd571a0dbbc))
+- add transition tokens
+  ([40c8b30](https://github.com/chakra-ui/chakra-ui/commit/40c8b30f0f0219a1ed673db97c4032e721f38e53))
+- add transition tokens
+  ([5e190fa](https://github.com/chakra-ui/chakra-ui/commit/5e190fa70b41f6e0e063d3d68f0dd32adff754eb))
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # [1.0.0-next.4](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/theme@0.0.3...@chakra-ui/theme@1.0.0-next.4) (2020-07-01)
@@ -8,0 +31,0 @@

dist/cjs/components/accordion.js

@@ -5,35 +5,40 @@ "use strict";
 exports["default"] = void 0;
-var Accordion = {
-  baseStyle: {
-    Item: {
-      borderTopWidth: "1px",
-      borderColor: "inherit",
-      _last: {
-        borderBottomWidth: "1px"
-      }
+var register = {
+  parts: ["container", "item", "button", "panel"]
+};
+var baseStyle = {
+  item: {
+    borderTopWidth: "1px",
+    borderColor: "inherit",
+    _last: {
+      borderBottomWidth: "1px"
+    }
+  },
+  button: {
+    fontSize: "1rem",
+    _focus: {
+      boxShadow: "outline"
     },
-    Button: {
-      fontSize: "1rem",
-      _focus: {
-        boxShadow: "outline"
-      },
-      _hover: {
-        bg: "blackAlpha.50"
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      },
-      paddingX: 4,
-      paddingY: 2
+    _hover: {
+      bg: "blackAlpha.50"
     },
-    Panel: {
-      paddingTop: 2,
-      paddingX: 4,
-      paddingBottom: 5
-    }
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed"
+    },
+    paddingX: 4,
+    paddingY: 2
+  },
+  panel: {
+    paddingTop: 2,
+    paddingX: 4,
+    paddingBottom: 5
   }
 };
-var _default = Accordion;
+var accordion = {
+  register: register,
+  baseStyle: baseStyle
+};
+var _default = accordion;
 exports["default"] = _default;
 //# sourceMappingURL=accordion.js.map

dist/cjs/components/alert.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.AlertVariants = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
-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 register = {
+  parts: ["container", "title", "icon"],
+  variants: ["subtle", "left-accent", "top-accent", "solid"]
+};
+var baseStyle = {
+  container: {
+    paddingX: 4,
+    paddingY: 3
+  },
+  title: {
+    fontWeight: "bold",
+    lineHeight: "normal"
+  },
+  icon: {
+    marginRight: 3,
+    width: 5,
+    height: 5
+  }
+};
 
-function subtle(props) {
+function getBg(props) {
   var t = props.theme,
       c = props.colorScheme;
-  var light = (0, _themeTools.getColor)(t, c + ".100", c);
-  var dark = (0, _themeTools.ink)(c + ".200", "lowest")(t);
-  var bg = (0, _themeTools.mode)(light, dark)(props);
-  return {
-    Root: {
-      bg: bg
-    },
-    Icon: {
-      color: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
-    }
-  };
+  var lightBg = (0, _themeTools.getColor)(t, c + ".100", c);
+  var darkBg = (0, _themeTools.ink)(c + ".200", "lowest")(t);
+  return (0, _themeTools.mode)(lightBg, darkBg)(props);
 }
 
-function leftAccent(props) {
-  var c = props.colorScheme;
-  var subtleStyle = subtle(props);
-  return {
-    Root: _extends({
-      paddingLeft: 3,
-      borderLeft: "4px solid",
-      borderColor: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
-    }, subtleStyle.Root),
-    Icon: {
-      color: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
-    }
-  };
-}
-
-function topAccent(props) {
-  var c = props.colorScheme;
-  var subtleStyle = subtle(props);
-  return {
-    Root: _extends({
-      paddingTop: 2,
-      borderTop: "4px solid",
-      borderColor: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
-    }, subtleStyle.Root),
-    Icon: {
-      color: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
-    }
-  };
-}
-
-function solid(props) {
-  var c = props.colorScheme;
-  return {
-    Root: {
-      bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
-      color: (0, _themeTools.mode)("white", "gray.900")(props)
-    }
-  };
-}
-
-var Alert = {
-  defaultProps: {
-    variant: "subtle"
+var variants = {
+  subtle: function subtle(props) {
+    var c = props.colorScheme;
+    return {
+      container: {
+        bg: getBg(props)
+      },
+      icon: {
+        color: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
+      }
+    };
   },
-  baseStyle: {
-    Root: {
-      paddingX: 4,
-      paddingY: 3
-    },
-    Icon: {
-      marginRight: 3,
-      boxSize: 5
-    }
+  "left-accent": function leftAccent(props) {
+    var c = props.colorScheme;
+    return {
+      container: {
+        paddingLeft: 3,
+        borderLeft: "4px solid",
+        borderColor: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+        bg: getBg(props)
+      },
+      icon: {
+        color: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
+      }
+    };
   },
-  variants: {
-    solid: solid,
-    subtle: subtle,
-    "left-accent": leftAccent,
-    "top-accent": topAccent
+  "top-accent": function topAccent(props) {
+    var c = props.colorScheme;
+    return {
+      container: {
+        paddingTop: 2,
+        borderTop: "4px solid",
+        borderColor: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+        bg: getBg(props)
+      },
+      icon: {
+        color: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
+      }
+    };
+  },
+  solid: function solid(props) {
+    var c = props.colorScheme;
+    return {
+      container: {
+        bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+        color: (0, _themeTools.mode)("white", "gray.900")(props)
+      }
+    };
   }
 };
-var AlertVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  "left-accent": "left-accent",
-  "top-accent": "top-accent"
+var defaultProps = {
+  variant: "subtle"
 };
-exports.AlertVariants = AlertVariants;
-var _default = Alert;
+var alert = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  variants: variants
+};
+var _default = alert;
 exports["default"] = _default;
 //# sourceMappingURL=alert.js.map

dist/cjs/components/avatar.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.AvatarSizes = void 0;
+exports["default"] = void 0;
 
+var _themeTools = require("@chakra-ui/theme-tools");
+
 var _sizes = _interopRequireDefault(require("../foundations/sizes"));
 
-var _themeTools = require("@chakra-ui/theme-tools");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -14,80 +14,74 @@
 
-function getSize(size) {
-  var themeSize = _sizes["default"][size];
-  var styles = {
-    width: size,
-    height: size,
-    fontSize: "calc(" + (themeSize != null ? themeSize : size) + " / 2.5)"
-  };
+var register = {
+  parts: ["container", "excessLabel", "badge", "label"],
+  sizes: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"]
+};
 
-  if (size !== "100%") {
-    styles.lineHeight = themeSize != null ? themeSize : size;
-  }
-
-  return {
-    Root: styles,
-    ExcessLabel: styles
-  };
-}
-
-function getRootStyle(props) {
+var baseStyle = function baseStyle(props) {
   var name = props.name,
-      t = props.theme;
+      theme = props.theme;
   var bg = name ? (0, _themeTools.randomColor)({
     string: name
   }) : "gray.400";
-  var isBgDark = (0, _themeTools.isDark)(bg)(t);
-  var color = name ? isBgDark ? "white" : "gray.800" : "white";
+  var color = name ? (0, _themeTools.isDark)(bg)(theme) ? "white" : "gray.800" : "white";
   var borderColor = (0, _themeTools.mode)("white", "gray.800")(props);
   return {
-    bg: bg,
-    color: color,
-    borderColor: borderColor
+    badge: {
+      transform: "translate(25%, 25%)",
+      borderRadius: "full",
+      border: "0.2em solid",
+      borderColor: (0, _themeTools.mode)("white", "gray.800")(props)
+    },
+    excessLabel: {
+      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.400")(props)
+    },
+    container: {
+      bg: bg,
+      color: color,
+      borderColor: borderColor,
+      verticalAlign: "top"
+    }
   };
+};
+
+var sizes = {
+  "2xs": getSize("4"),
+  xs: getSize("6"),
+  sm: getSize("8"),
+  md: getSize("12"),
+  lg: getSize("16"),
+  xl: getSize("24"),
+  "2xl": getSize("32"),
+  full: getSize("100%")
+};
+
+function getSize(size) {
+  var themeSize = _sizes["default"][size];
+  var styles = {
+    width: size,
+    height: size
+  };
+  return {
+    container: _extends({
+      fontSize: "calc(" + (themeSize != null ? themeSize : size) + " / 2.5)"
+    }, styles),
+    excessLabel: styles,
+    label: {
+      fontSize: "calc(" + (themeSize != null ? themeSize : size) + " / 2.5)",
+      lineHeight: size !== "100%" ? themeSize != null ? themeSize : size : undefined
+    }
+  };
 }
 
-var Avatar = {
-  defaultProps: {
-    size: "md"
-  },
-  baseStyle: function baseStyle(props) {
-    return {
-      Root: _extends({
-        verticalAlign: "top"
-      }, getRootStyle(props)),
-      Badge: {
-        transform: "translate(25%, 25%)",
-        borderRadius: "full",
-        border: "0.2em solid",
-        borderColor: (0, _themeTools.mode)("white", "gray.800")(props)
-      },
-      ExcessLabel: {
-        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.400")(props)
-      }
-    };
-  },
-  sizes: {
-    "2xs": getSize("4"),
-    xs: getSize("6"),
-    sm: getSize("8"),
-    md: getSize("12"),
-    lg: getSize("16"),
-    xl: getSize("24"),
-    "2xl": getSize("32"),
-    full: getSize("100%")
-  }
+var defaultProps = {
+  size: "md"
 };
-var AvatarSizes = {
-  "2xs": "2xs",
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-  "2xl": "2xl",
-  full: "full"
+var avatar = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes
 };
-exports.AvatarSizes = AvatarSizes;
-var _default = Avatar;
+var _default = avatar;
 exports["default"] = _default;
 //# sourceMappingURL=avatar.js.map

dist/cjs/components/badge.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.BadgeVariants = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
-function solid(props) {
-  var c = props.colorScheme,
-      theme = props.theme;
-  var dark = (0, _themeTools.transparentize)(c + ".500", 0.6)(theme);
-  return {
-    bg: (0, _themeTools.mode)(c + ".500", dark)(props),
-    color: (0, _themeTools.mode)("white", "whiteAlpha.800")(props)
-  };
-}
-
-function subtle(props) {
-  var c = props.colorScheme,
-      theme = props.theme;
-  var darkBg = (0, _themeTools.ink)(c + ".200", "lowest")(theme);
-  return {
-    bg: (0, _themeTools.mode)(c + ".100", darkBg)(props),
-    color: (0, _themeTools.mode)(c + ".800", c + ".200")(props)
-  };
-}
-
-function outline(props) {
-  var c = props.colorScheme,
-      theme = props.theme;
-  var dark = (0, _themeTools.transparentize)(c + ".200", 0.8)(theme);
-  var light = (0, _themeTools.getColor)(theme, c + ".500");
-  var color = (0, _themeTools.mode)(light, dark)(props);
-  return {
-    color: color,
-    boxShadow: "inset 0 0 0px 1px " + color
-  };
-}
-
-var Badge = {
-  defaultProps: {
-    variant: "subtle",
-    colorScheme: "gray"
-  },
-  baseStyle: {
+var register = {
+  parts: ["container"],
+  variants: ["solid", "subtle", "outline"]
+};
+var baseStyle = {
+  container: {
     paddingX: 1,
@@ -51,17 +19,53 @@ textTransform: "uppercase",
     fontWeight: "bold"
+  }
+};
+var variants = {
+  solid: function solid(props) {
+    var c = props.colorScheme,
+        theme = props.theme;
+    var dark = (0, _themeTools.transparentize)(c + ".500", 0.6)(theme);
+    return {
+      container: {
+        bg: (0, _themeTools.mode)(c + ".500", dark)(props),
+        color: (0, _themeTools.mode)("white", "whiteAlpha.800")(props)
+      }
+    };
   },
-  variants: {
-    solid: solid,
-    outline: outline,
-    subtle: subtle
+  subtle: function subtle(props) {
+    var c = props.colorScheme,
+        theme = props.theme;
+    var darkBg = (0, _themeTools.ink)(c + ".200", "lowest")(theme);
+    return {
+      container: {
+        bg: (0, _themeTools.mode)(c + ".100", darkBg)(props),
+        color: (0, _themeTools.mode)(c + ".800", c + ".200")(props)
+      }
+    };
+  },
+  outline: function outline(props) {
+    var c = props.colorScheme,
+        theme = props.theme;
+    var darkColor = (0, _themeTools.transparentize)(c + ".200", 0.8)(theme);
+    var lightColor = (0, _themeTools.getColor)(theme, c + ".500");
+    var color = (0, _themeTools.mode)(lightColor, darkColor)(props);
+    return {
+      container: {
+        color: color,
+        boxShadow: "inset 0 0 0px 1px " + color
+      }
+    };
   }
 };
-var BadgeVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  outline: "outline"
+var defaultProps = {
+  variant: "subtle",
+  colorScheme: "gray"
 };
-exports.BadgeVariants = BadgeVariants;
+var Badge = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  variants: variants
+};
 var _default = Badge;
 exports["default"] = _default;
 //# sourceMappingURL=badge.js.map

dist/cjs/components/button.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.ButtonVariants = exports.ButtonSizes = void 0;
+exports["default"] = void 0;
 
@@ -10,28 +10,60 @@ var _themeTools = require("@chakra-ui/theme-tools");
 
-var grayGhost = function grayGhost(props) {
-  return {
-    color: (0, _themeTools.mode)("inherit", "whiteAlpha.900")(props),
-    _hover: {
-      bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.200")(props)
+var register = {
+  parts: ["container", "icon", "spinner"],
+  sizes: ["sm", "md", "lg", "xs"],
+  variants: ["solid", "outline", "ghost", "unstyled"]
+};
+var baseStyle = {
+  spinner: {
+    fontSize: "1em",
+    lineHeight: "normal"
+  },
+  container: {
+    lineHeight: "1.2",
+    borderRadius: "md",
+    fontWeight: "semibold",
+    _focus: {
+      boxShadow: "outline"
     },
-    _active: {
-      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      boxShadow: "none"
     }
-  };
+  }
 };
+/**
+ * Variants Style
+ */
 
+function grayGhost(props) {
+  return {
+    container: {
+      color: (0, _themeTools.mode)("inherit", "whiteAlpha.900")(props),
+      _hover: {
+        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.200")(props)
+      },
+      _active: {
+        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
+      }
+    }
+  };
+}
+
 function ghost(props) {
   var c = props.colorScheme,
-      t = props.theme;
+      theme = props.theme;
   if (c === "gray") return grayGhost(props);
-  var darkHover = (0, _themeTools.transparentize)(c + ".200", 0.12)(t);
-  var darkActive = (0, _themeTools.transparentize)(c + ".200", 0.24)(t);
+  var darkHover = (0, _themeTools.transparentize)(c + ".200", 0.12)(theme);
+  var darkActive = (0, _themeTools.transparentize)(c + ".200", 0.24)(theme);
   return {
-    color: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
-    bg: "transparent",
-    _hover: {
-      bg: (0, _themeTools.mode)(c + ".50", darkHover)(props)
-    },
-    _active: {
-      bg: (0, _themeTools.mode)(c + ".100", darkActive)(props)
+    container: {
+      color: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+      bg: "transparent",
+      _hover: {
+        bg: (0, _themeTools.mode)(c + ".50", darkHover)(props)
+      },
+      _active: {
+        bg: (0, _themeTools.mode)(c + ".100", darkActive)(props)
+      }
     }
@@ -44,6 +76,8 @@ };
   var borderColor = (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props);
-  return _extends({
-    border: "1px solid",
-    borderColor: c === "gray" ? borderColor : "currentColor"
-  }, ghost(props));
+  return {
+    container: _extends({
+      border: "1px solid",
+      borderColor: c === "gray" ? borderColor : "currentColor"
+    }, ghost(props).container)
+  };
 }
@@ -53,8 +87,10 @@
   return {
-    bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.200")(props),
-    _hover: {
-      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
-    },
-    _active: {
-      bg: (0, _themeTools.mode)("gray.300", "whiteAlpha.400")(props)
+    container: {
+      bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.200")(props),
+      _hover: {
+        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
+      },
+      _active: {
+        bg: (0, _themeTools.mode)("gray.300", "whiteAlpha.400")(props)
+      }
     }
@@ -68,9 +104,11 @@ };
   return {
-    bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
-    color: (0, _themeTools.mode)("white", "gray.800")(props),
-    _hover: {
-      bg: (0, _themeTools.mode)(c + ".600", c + ".300")(props)
-    },
-    _active: {
-      bg: (0, _themeTools.mode)(c + ".700", c + ".400")(props)
+    container: {
+      bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+      color: (0, _themeTools.mode)("white", "gray.800")(props),
+      _hover: {
+        bg: (0, _themeTools.mode)(c + ".600", c + ".300")(props)
+      },
+      _active: {
+        bg: (0, _themeTools.mode)(c + ".700", c + ".400")(props)
+      }
     }
@@ -83,11 +121,13 @@ };
   return {
-    padding: 0,
-    height: "auto",
-    lineHeight: "normal",
-    color: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
-    _hover: {
-      textDecoration: "underline"
-    },
-    _active: {
-      color: (0, _themeTools.mode)(c + ".700", c + ".500")(props)
+    container: {
+      padding: 0,
+      height: "auto",
+      lineHeight: "normal",
+      color: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+      _hover: {
+        textDecoration: "underline"
+      },
+      _active: {
+        color: (0, _themeTools.mode)(c + ".700", c + ".500")(props)
+      }
     }
@@ -97,57 +137,57 @@ };
 
+var unstyled = {
+  container: {
+    bg: "none",
+    border: 0,
+    color: "inherit",
+    display: "inline",
+    font: "inherit",
+    lineHeight: "inherit",
+    margin: 0,
+    padding: 0
+  }
+};
 var sizes = {
   lg: {
-    height: 12,
-    minWidth: 12,
-    fontSize: "lg",
-    paddingX: 6
+    container: {
+      height: 12,
+      minWidth: 12,
+      fontSize: "lg",
+      paddingX: 6
+    }
   },
   md: {
-    height: 10,
-    minWidth: 10,
-    fontSize: "md",
-    paddingX: 4
+    container: {
+      height: 10,
+      minWidth: 10,
+      fontSize: "md",
+      paddingX: 4
+    }
   },
   sm: {
-    height: 8,
-    minWidth: 8,
-    fontSize: "sm",
-    paddingX: 3
+    container: {
+      height: 8,
+      minWidth: 8,
+      fontSize: "sm",
+      paddingX: 3
+    }
   },
   xs: {
-    height: 6,
-    minWidth: 6,
-    fontSize: "xs",
-    paddingX: 2
+    container: {
+      height: 6,
+      minWidth: 6,
+      fontSize: "xs",
+      paddingX: 2
+    }
   }
 };
-var unstyled = {
-  bg: "none",
-  border: 0,
-  color: "inherit",
-  display: "inline",
-  font: "inherit",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0
+var defaultProps = {
+  variant: "solid",
+  size: "md",
+  colorScheme: "gray"
 };
 var Button = {
-  defaultProps: {
-    variant: "solid",
-    size: "md",
-    colorScheme: "gray"
-  },
-  baseStyle: {
-    lineHeight: "1.2",
-    borderRadius: "md",
-    fontWeight: "semibold",
-    _focus: {
-      boxShadow: "outline"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      boxShadow: "none"
-    }
-  },
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
   sizes: sizes,
@@ -162,17 +202,4 @@ variants: {
 };
-var ButtonSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-  xs: "xs"
-};
-exports.ButtonSizes = ButtonSizes;
-var ButtonVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  outline: "outline"
-};
-exports.ButtonVariants = ButtonVariants;
 var _default = Button;
 exports["default"] = _default;
 //# sourceMappingURL=button.js.map

dist/cjs/components/checkbox.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.CheckboxSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
-function checked(props) {
-  var c = props.colorScheme;
-  return {
-    bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
-    borderColor: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
-    color: (0, _themeTools.mode)("white", "gray.900")(props),
-    _hover: {
-      bg: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
-      borderColor: (0, _themeTools.mode)(c + ".600", c + ".300")(props)
-    },
-    _disabled: {
-      borderColor: (0, _themeTools.mode)("gray.200", "transparent")(props),
-      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props),
-      color: (0, _themeTools.mode)("gray.500", "whiteAlpha.500")(props)
-    }
-  };
-}
+var register = {
+  parts: ["control", "label", "description", "icon"],
+  sizes: ["sm", "md", "lg"]
+};
 
@@ -29,4 +16,5 @@ var baseStyle = function baseStyle(props) {
   return {
-    Control: {
-      transition: "box-shadow 250ms",
+    control: {
+      width: "100%",
+      transition: "box-shadow 250ms, background-color 250ms",
       border: "2px solid",
@@ -36,3 +24,16 @@ borderRadius: "sm",
       color: "white",
-      _checked: checked(props),
+      _checked: {
+        bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+        borderColor: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
+        color: (0, _themeTools.mode)("white", "gray.900")(props),
+        _hover: {
+          bg: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
+          borderColor: (0, _themeTools.mode)(c + ".600", c + ".300")(props)
+        },
+        _disabled: {
+          borderColor: (0, _themeTools.mode)("gray.200", "transparent")(props),
+          bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props),
+          color: (0, _themeTools.mode)("gray.500", "whiteAlpha.500")(props)
+        }
+      },
       _indeterminate: {
@@ -54,6 +55,10 @@ bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props),
     },
-    Label: {
+    label: {
+      userSelect: "none",
       _disabled: {
         opacity: 0.4
       }
+    },
+    icon: {
+      fontSize: "0.625rem"
     }
@@ -65,7 +70,7 @@ };
   sm: {
-    Control: {
+    control: {
       height: 3,
       width: 3
     },
-    Label: {
+    label: {
       fontSize: "sm"
@@ -75,7 +80,7 @@ }
   md: {
-    Control: {
+    control: {
       width: 4,
       height: 4
     },
-    Label: {
+    label: {
       fontSize: "md"
@@ -85,7 +90,7 @@ }
   lg: {
-    Control: {
+    control: {
       width: 5,
       height: 5
     },
-    Label: {
+    label: {
       fontSize: "lg"
@@ -95,18 +100,14 @@ }
 };
-var Checkbox = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+};
+var checkbox = {
+  register: register,
+  defaultProps: defaultProps,
   baseStyle: baseStyle,
   sizes: sizes
 };
-var CheckboxSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md"
-};
-exports.CheckboxSizes = CheckboxSizes;
-var _default = Checkbox;
+var _default = checkbox;
 exports["default"] = _default;
 //# sourceMappingURL=checkbox.js.map

dist/cjs/components/close-button.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.CloseButtonSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
-var CloseButton = {
-  defaultProps: {
-    size: "md"
-  },
-  baseStyle: function baseStyle(props) {
-    return {
+var register = {
+  parts: ["icon", "container"],
+  sizes: ["sm", "md", "lg"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    icon: {},
+    container: {
       borderRadius: "md",
@@ -30,18 +33,31 @@ transition: "all 0.2s",
       }
-    };
-  },
-  sizes: {
-    lg: {
+    }
+  };
+};
+
+var sizes = {
+  lg: {
+    container: {
       width: "40px",
-      height: "40px",
+      height: "40px"
+    },
+    icon: {
       fontSize: "16px"
+    }
+  },
+  md: {
+    container: {
+      width: "32px",
+      height: "32px"
     },
-    md: {
-      width: "32px",
-      height: "32px",
+    icon: {
       fontSize: "12px"
+    }
+  },
+  sm: {
+    container: {
+      width: "24px",
+      height: "24px"
     },
-    sm: {
-      width: "24px",
-      height: "24px",
+    icon: {
       fontSize: "10px"
@@ -51,10 +67,13 @@ }
 };
-var CloseButtonSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md"
+var defaultProps = {
+  size: "md"
 };
-exports.CloseButtonSizes = CloseButtonSizes;
-var _default = CloseButton;
+var closeButton = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes
+};
+var _default = closeButton;
 exports["default"] = _default;
 //# sourceMappingURL=close-button.js.map

dist/cjs/components/code.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.CodeVariants = void 0;
+exports["default"] = void 0;
 
-var _badge = _interopRequireWildcard(require("./badge"));
+var _badge = _interopRequireDefault(require("./badge"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var Code = {
-  defaultProps: _badge["default"].defaultProps,
-  baseStyle: {
+var register = {
+  parts: ["container"],
+  variants: _badge["default"].register.variants
+};
+var baseStyle = {
+  container: {
     fontFamily: "mono",
@@ -19,9 +20,14 @@ fontSize: "sm",
     borderRadius: "sm"
-  },
-  variants: _badge["default"].variants
+  }
 };
-var CodeVariants = _badge.BadgeVariants;
-exports.CodeVariants = CodeVariants;
-var _default = Code;
+var variants = _badge["default"].variants;
+var defaultProps = _badge["default"].defaultProps;
+var code = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  variants: variants
+};
+var _default = code;
 exports["default"] = _default;
 //# sourceMappingURL=code.js.map

dist/cjs/components/editable.js

@@ -8,32 +8,29 @@ "use strict";
 
-var base = {
-  fontSize: "inherit",
-  fontWeight: "inherit",
-  textAlign: "inherit",
-  bg: "transparent",
-  transition: "all 0.2s",
+var register = {
+  parts: ["container", "preview", "input"]
+};
+var previewStyle = {
   borderRadius: "md",
-  paddingX: "3px",
-  marginX: "-3px"
+  paddingY: "3px",
+  transition: "all 0.2s"
 };
-var Editable = {
-  baseStyle: {
-    Preview: _extends({}, base, {
-      cursor: "text",
-      display: "inline-block"
-    }),
-    Input: _extends({}, base, {
-      outline: 0,
-      width: "full",
-      _focus: {
-        boxShadow: "outline"
-      },
-      _placeholder: {
-        opacity: 0.6
-      }
-    })
-  }
+var baseStyle = {
+  container: {},
+  preview: previewStyle,
+  input: _extends({}, previewStyle, {
+    width: "full",
+    _focus: {
+      boxShadow: "outline"
+    },
+    _placeholder: {
+      opacity: 0.6
+    }
+  })
 };
-var _default = Editable;
+var editable = {
+  register: register,
+  baseStyle: baseStyle
+};
+var _default = editable;
 exports["default"] = _default;
 //# sourceMappingURL=editable.js.map

dist/cjs/components/form.js

@@ -8,40 +8,47 @@ "use strict";
 
-var Form = {
-  baseStyle: function baseStyle(props) {
-    return {
-      Label: {
-        fontSize: "md",
-        marginRight: 3,
-        marginBottom: 2,
-        fontWeight: "medium",
-        transition: "all 0.2s",
-        opacity: 1,
-        _disabled: {
-          opacity: 0.4
-        }
-      },
-      ErrorText: {
-        color: (0, _themeTools.mode)("red.500", "red.300")(props),
-        marginTop: 2,
-        fontSize: "sm"
-      },
-      RequiredIndicator: {
-        marginLeft: 1,
-        color: (0, _themeTools.mode)("red.500", "red.300")(props)
-      },
-      HelperText: {
-        marginTop: 2,
-        color: (0, _themeTools.mode)("gray.500", "whiteAlpha.600")(props),
-        lineHeight: "normal",
-        fontSize: "sm"
-      },
-      ErrorIcon: {
-        marginRight: "0.5em",
-        color: (0, _themeTools.mode)("red.500", "red.300")(props)
+var register = {
+  parts: ["label", "errorText", "requiredIndicator", "helperText", "errorIcon"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    label: {
+      fontSize: "md",
+      marginRight: 3,
+      marginBottom: 2,
+      fontWeight: "medium",
+      transition: "all 0.2s",
+      opacity: 1,
+      _disabled: {
+        opacity: 0.4
       }
-    };
-  }
+    },
+    errorText: {
+      color: (0, _themeTools.mode)("red.500", "red.300")(props),
+      marginTop: 2,
+      fontSize: "sm"
+    },
+    requiredIndicator: {
+      marginLeft: 1,
+      color: (0, _themeTools.mode)("red.500", "red.300")(props)
+    },
+    helperText: {
+      marginTop: 2,
+      color: (0, _themeTools.mode)("gray.500", "whiteAlpha.600")(props),
+      lineHeight: "normal",
+      fontSize: "sm"
+    },
+    errorIcon: {
+      marginRight: "0.5em",
+      color: (0, _themeTools.mode)("red.500", "red.300")(props)
+    }
+  };
 };
-var _default = Form;
+
+var form = {
+  register: register,
+  baseStyle: baseStyle
+};
+var _default = form;
 exports["default"] = _default;
 //# sourceMappingURL=form.js.map

dist/cjs/components/heading.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.HeadingSizes = void 0;
-var Heading = {
-  defaultProps: {
-    size: "xl"
-  },
-  baseStyle: {
+exports["default"] = void 0;
+var register = {
+  parts: ["heading"],
+  sizes: ["2xl", "xl", "lg", "md", "sm", "xs"]
+};
+var baseStyle = {
+  heading: {
     fontFamily: "heading",
     lineHeight: "shorter",
     fontWeight: "bold"
+  }
+};
+var sizes = {
+  "2xl": {
+    heading: {
+      fontSize: ["4xl", null, "5xl"]
+    }
   },
-  sizes: {
-    "2xl": {
-      fontSize: ["4xl", null, "5xl"]
-    },
-    xl: {
+  xl: {
+    heading: {
       fontSize: ["3xl", null, "4xl"]
-    },
-    lg: {
+    }
+  },
+  lg: {
+    heading: {
       fontSize: ["xl", null, "2xl"]
-    },
-    md: {
+    }
+  },
+  md: {
+    heading: {
       fontSize: "xl"
-    },
-    sm: {
+    }
+  },
+  sm: {
+    heading: {
       fontSize: "md"
-    },
-    xs: {
+    }
+  },
+  xs: {
+    heading: {
       fontSize: "sm"
@@ -35,13 +48,13 @@ }
 };
-var HeadingSizes = {
-  "2xl": "2xl",
-  xl: "xl",
-  lg: "lg",
-  md: "md",
-  sm: "sm",
-  xs: "xs"
+var defaultProps = {
+  size: "xl"
 };
-exports.HeadingSizes = HeadingSizes;
-var _default = Heading;
+var heading = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes
+};
+var _default = heading;
 exports["default"] = _default;
 //# sourceMappingURL=heading.js.map

dist/cjs/components/index.js

@@ -22,14 +22,10 @@ "use strict";
 
-var _divider = _interopRequireDefault(require("./divider"));
-
 var _modal = _interopRequireDefault(require("./modal"));
 
+var _drawer = _interopRequireDefault(require("./drawer"));
+
 var _heading = _interopRequireDefault(require("./heading"));
 
-var _icon = _interopRequireDefault(require("./icon"));
-
 var _input = _interopRequireDefault(require("./input"));
 
-var _inputAddon = _interopRequireDefault(require("./input-addon"));
-
 var _link = _interopRequireDefault(require("./link"));
@@ -75,2 +71,6 @@
 
+var _breadcumb = _interopRequireDefault(require("./breadcumb"));
+
+var _skipLink = _interopRequireDefault(require("./skip-link"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -82,3 +82,3 @@
   Heading: _heading["default"],
-  Icon: _icon["default"],
+  Breadcrumb: _breadcumb["default"],
   Alert: _alert["default"],
@@ -89,4 +89,4 @@ Badge: _badge["default"],
   Code: _code["default"],
-  Divider: _divider["default"],
   Spinner: _spinner["default"],
+  Drawer: _drawer["default"],
   Menu: _menu["default"],
@@ -97,3 +97,2 @@ Tabs: _tabs["default"],
   Input: _input["default"],
-  InputAddon: _inputAddon["default"],
   Tooltip: _tooltip["default"],
@@ -115,5 +114,6 @@ CloseButton: _closeButton["default"],
   Stat: _stat["default"],
-  Skeleton: _skeleton["default"]
+  Skeleton: _skeleton["default"],
+  SkipLink: _skipLink["default"]
 };
 exports["default"] = _default;
 //# sourceMappingURL=index.js.map

dist/cjs/components/input.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.InputVariants = exports.InputSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
-function getDefaults(props) {
-  var fc = props.focusBorderColor,
-      ec = props.errorBorderColor;
-  return {
-    focusBorderColor: fc || (0, _themeTools.mode)("blue.500", "blue.300")(props),
-    errorBorderColor: ec || (0, _themeTools.mode)("red.500", "red.300")(props)
-  };
-}
-
-function outline(props) {
-  var theme = props.theme;
-
-  var _getDefaults = getDefaults(props),
-      fc = _getDefaults.focusBorderColor,
-      ec = _getDefaults.errorBorderColor;
-
-  return {
-    border: "1px solid",
-    borderColor: (0, _themeTools.mode)("inherit", "whiteAlpha.50")(props),
-    bg: (0, _themeTools.mode)("white", "whiteAlpha.100")(props),
-    _hover: {
-      borderColor: (0, _themeTools.mode)("gray.300", "whiteAlpha.200")(props)
-    },
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed"
-    },
-    _focus: {
-      zIndex: 1,
-      borderColor: (0, _themeTools.getColor)(theme, fc),
-      boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, fc)
-    },
-    _invalid: {
-      borderColor: (0, _themeTools.getColor)(theme, ec),
-      boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, ec)
-    }
-  };
-}
-
-function filled(props) {
-  var theme = props.theme;
-
-  var _getDefaults2 = getDefaults(props),
-      fc = _getDefaults2.focusBorderColor,
-      ec = _getDefaults2.errorBorderColor;
-
-  return {
-    border: "2px solid",
-    borderColor: "transparent",
-    bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.50")(props),
-    _hover: {
-      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.100")(props)
-    },
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed"
-    },
-    _focus: {
-      zIndex: 1,
-      bg: "transparent",
-      borderColor: (0, _themeTools.getColor)(theme, fc)
-    },
-    _invalid: {
-      borderColor: (0, _themeTools.getColor)(theme, ec)
-    }
-  };
-}
-
-function flushed(props) {
-  var theme = props.theme;
-
-  var _getDefaults3 = getDefaults(props),
-      fc = _getDefaults3.focusBorderColor,
-      ec = _getDefaults3.errorBorderColor;
-
-  return {
-    borderBottom: "2px solid",
-    borderColor: "inherit",
-    borderRadius: 0,
-    paddingX: 0,
-    bg: "transparent",
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all"
-    },
-    _focus: {
-      zIndex: 1,
-      borderColor: (0, _themeTools.getColor)(theme, fc)
-    },
-    _invalid: {
-      borderColor: (0, _themeTools.getColor)(theme, ec)
-    }
-  };
-}
-
-var unstyled = {
-  bg: "transparent",
-  paddingX: 0,
-  height: "auto"
+var register = {
+  parts: ["field", "addon"],
+  sizes: ["sm", "md", "lg"],
+  variants: ["outline", "flushed", "filled", "unstyled"]
 };
-var sizes = {
+var baseStyle = {
+  field: {
+    width: "100%",
+    outline: 0,
+    position: "relative",
+    appearance: "none",
+    transition: "all 0.2s"
+  }
+};
+var commonSizeStyle = {
   lg: {
@@ -139,37 +45,166 @@ fontSize: "lg",
 };
-var Input = {
-  defaultProps: {
-    size: "md",
-    variant: "outline"
+var sizes = {
+  lg: {
+    field: commonSizeStyle.lg,
+    addon: commonSizeStyle.lg
   },
-  baseStyle: {
-    width: "100%",
-    outline: 0,
-    position: "relative",
-    appearance: "none",
-    transition: "all 0.2s"
+  md: {
+    field: commonSizeStyle.md,
+    addon: commonSizeStyle.md
   },
-  sizes: sizes,
-  variants: {
-    outline: outline,
-    filled: filled,
-    flushed: flushed,
-    unstyled: unstyled
+  sm: {
+    field: commonSizeStyle.sm,
+    addon: commonSizeStyle.sm
   }
 };
-var InputSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+var variants = {
+  outline: function outline(props) {
+    var theme = props.theme;
+
+    var _getDefaults = getDefaults(props),
+        fc = _getDefaults.focusBorderColor,
+        ec = _getDefaults.errorBorderColor;
+
+    return {
+      field: {
+        border: "1px solid",
+        borderColor: (0, _themeTools.mode)("inherit", "whiteAlpha.50")(props),
+        bg: (0, _themeTools.mode)("white", "whiteAlpha.100")(props),
+        _hover: {
+          borderColor: (0, _themeTools.mode)("gray.300", "whiteAlpha.200")(props)
+        },
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all"
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed"
+        },
+        _focus: {
+          zIndex: 1,
+          borderColor: (0, _themeTools.getColor)(theme, fc),
+          boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, fc)
+        },
+        _invalid: {
+          borderColor: (0, _themeTools.getColor)(theme, ec),
+          boxShadow: "0 0 0 1px " + (0, _themeTools.getColor)(theme, ec)
+        }
+      },
+      addon: {
+        border: "1px solid",
+        borderColor: (0, _themeTools.mode)("inherit", "whiteAlpha.50")(props),
+        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.300")(props)
+      }
+    };
+  },
+  filled: function filled(props) {
+    var theme = props.theme;
+
+    var _getDefaults2 = getDefaults(props),
+        fc = _getDefaults2.focusBorderColor,
+        ec = _getDefaults2.errorBorderColor;
+
+    return {
+      field: {
+        border: "2px solid",
+        borderColor: "transparent",
+        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.50")(props),
+        _hover: {
+          bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.100")(props)
+        },
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all"
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed"
+        },
+        _focus: {
+          zIndex: 1,
+          bg: "transparent",
+          borderColor: (0, _themeTools.getColor)(theme, fc)
+        },
+        _invalid: {
+          borderColor: (0, _themeTools.getColor)(theme, ec)
+        }
+      },
+      addon: {
+        border: "2px solid",
+        borderColor: "transparent",
+        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.50")(props)
+      }
+    };
+  },
+  flushed: function flushed(props) {
+    var theme = props.theme;
+
+    var _getDefaults3 = getDefaults(props),
+        fc = _getDefaults3.focusBorderColor,
+        ec = _getDefaults3.errorBorderColor;
+
+    return {
+      field: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
+        borderRadius: 0,
+        paddingX: 0,
+        bg: "transparent",
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all"
+        },
+        _focus: {
+          zIndex: 1,
+          borderColor: (0, _themeTools.getColor)(theme, fc)
+        },
+        _invalid: {
+          borderColor: (0, _themeTools.getColor)(theme, ec)
+        }
+      },
+      addon: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
+        borderRadius: 0,
+        paddingX: 0,
+        bg: "transparent"
+      }
+    };
+  },
+  unstyled: {
+    field: {
+      bg: "transparent",
+      paddingX: 0,
+      height: "auto"
+    },
+    addon: {
+      bg: "transparent",
+      paddingX: 0,
+      height: "auto"
+    }
+  }
 };
-exports.InputSizes = InputSizes;
-var InputVariants = {
-  outline: "outline",
-  filled: "filled",
-  flushed: "flushed",
-  unstyled: "unstyled"
+var defaultProps = {
+  size: "md",
+  variant: "outline"
 };
-exports.InputVariants = InputVariants;
-var _default = Input;
+var input = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes,
+  variants: variants
+};
+var _default = input;
 exports["default"] = _default;
+
+function getDefaults(props) {
+  var fc = props.focusBorderColor,
+      ec = props.errorBorderColor;
+  return {
+    focusBorderColor: fc || (0, _themeTools.mode)("blue.500", "blue.300")(props),
+    errorBorderColor: ec || (0, _themeTools.mode)("red.500", "red.300")(props)
+  };
+}
 //# sourceMappingURL=input.js.map

dist/cjs/components/kbd.js

@@ -8,5 +8,9 @@ "use strict";
 
-var Kbd = {
-  baseStyle: function baseStyle(props) {
-    return {
+var register = {
+  parts: ["kbd"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    kbd: {
       bg: (0, _themeTools.mode)("gray.100", "whiteAlpha")(props),
@@ -21,7 +25,12 @@ borderRadius: "md",
       whiteSpace: "nowrap"
-    };
-  }
+    }
+  };
 };
-var _default = Kbd;
+
+var kbd = {
+  register: register,
+  baseStyle: baseStyle
+};
+var _default = kbd;
 exports["default"] = _default;
 //# sourceMappingURL=kbd.js.map

dist/cjs/components/link.js

@@ -5,4 +5,7 @@ "use strict";
 exports["default"] = void 0;
-var Link = {
-  baseStyle: {
+var register = {
+  parts: ["link"]
+};
+var baseStyle = {
+  link: {
     transition: "all 0.15s ease-out",
@@ -26,4 +29,8 @@ cursor: "pointer",
 };
-var _default = Link;
+var link = {
+  register: register,
+  baseStyle: baseStyle
+};
+var _default = link;
 exports["default"] = _default;
 //# sourceMappingURL=link.js.map

dist/cjs/components/menu.js

@@ -8,42 +8,44 @@ "use strict";
 
-var _button = _interopRequireDefault(require("./button"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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 menulist = function menulist(props) {
-  return {
-    bg: (0, _themeTools.mode)("#fff", "gray.700")(props),
-    boxShadow: (0, _themeTools.mode)("sm", "dark-lg")(props),
-    color: "inherit",
-    outline: 0,
-    minWidth: "3xs",
-    paddingY: "2",
-    zIndex: "1",
-    borderRadius: "md",
-    borderWidth: "1px"
-  };
+var register = {
+  parts: ["menuList", "menuItem", "menuButton", "groupTitle", "menuDivider", "icon", "command"]
 };
 
-var menuitem = function menuitem(props) {
+var baseStyle = function baseStyle(props) {
   return {
-    width: "100%",
-    outline: 0,
-    textDecoration: "none",
-    paddingY: "0.4rem",
-    paddingX: "0.8rem",
-    transition: "background 50ms ease-in 0s",
-    _focus: {
-      bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.100")(props)
+    menuList: {
+      bg: (0, _themeTools.mode)("#fff", "gray.700")(props),
+      boxShadow: (0, _themeTools.mode)("sm", "dark-lg")(props),
+      color: "inherit",
+      minWidth: "3xs",
+      paddingY: "2",
+      zIndex: 1,
+      borderRadius: "md",
+      borderWidth: "1px"
     },
-    _active: {
-      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.200")(props)
+    menuItem: {
+      paddingY: "0.4rem",
+      paddingX: "0.8rem",
+      transition: "background 50ms ease-in 0s",
+      _focus: {
+        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.100")(props)
+      },
+      _active: {
+        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.200")(props)
+      },
+      _expanded: {
+        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.100")(props)
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
     },
-    _expanded: {
-      bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.100")(props)
+    groupTitle: {
+      marginX: 4,
+      marginY: 2,
+      fontWeight: "semibold",
+      fontSize: "sm"
     },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed"
+    command: {
+      opacity: 0.6
     }
@@ -53,22 +55,8 @@ };
 
-var Menu = {
-  defaultProps: _button["default"].defaultProps,
-  baseStyle: function baseStyle(props) {
-    return {
-      MenuButton: _button["default"].baseStyle,
-      MenuList: menulist(props),
-      MenuItem: menuitem(props),
-      MenuGroupTitle: {
-        marginX: 4,
-        marginY: 2,
-        fontWeight: "semibold",
-        fontSize: "sm"
-      }
-    };
-  },
-  variants: _extends({}, (0, _themeTools.copy)(_button["default"].variants, "MenuButton")),
-  sizes: _extends({}, (0, _themeTools.copy)(_button["default"].sizes, "MenuButton"))
+var menu = {
+  register: register,
+  baseStyle: baseStyle
 };
-var _default = Menu;
+var _default = menu;
 exports["default"] = _default;
 //# sourceMappingURL=menu.js.map

dist/cjs/components/modal.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.ModalSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
+var register = {
+  parts: ["overlay", "content", "header", "body", "footer"],
+  sizes: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"]
+};
+
+var baseStyle = function baseStyle(props) {
+  var isCentered = props.isCentered,
+      scrollBehavior = props.scrollBehavior;
+  return {
+    overlay: {
+      bg: "blackAlpha.600",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: isCentered ? "center" : "flex-start",
+      overflow: scrollBehavior === "inside" ? "hidden" : "auto"
+    },
+    content: {
+      borderRadius: "md",
+      bg: (0, _themeTools.mode)("white", "gray.700")(props),
+      color: "inherit",
+      marginY: "3.75rem",
+      maxHeight: scrollBehavior === "inside" ? "calc(100vh - 7.5rem)" : undefined,
+      boxShadow: (0, _themeTools.mode)("lg", "dark-lg")(props)
+    },
+    header: {
+      paddingX: 6,
+      paddingY: 4,
+      fontSize: "xl",
+      fontWeight: "semibold"
+    },
+    body: {
+      paddingX: 6,
+      paddingY: 2,
+      flex: 1,
+      overflow: scrollBehavior === "inside" ? "auto" : undefined
+    },
+    footer: {
+      paddingX: 6,
+      paddingY: 4
+    }
+  };
+};
 /**
@@ -12,73 +54,108 @@ * Since the `maxWidth` prop references theme.sizes internally,
  */
-var getSize = function getSize(value) {
+
+
+function getSize(value) {
   return {
-    Content: {
+    content: {
       maxWidth: value
     }
   };
+}
+
+var sizes = {
+  xs: getSize("xs"),
+  sm: getSize("sm"),
+  md: getSize("md"),
+  lg: getSize("lg"),
+  xl: getSize("xl"),
+  "2xl": getSize("2xl"),
+  "3xl": getSize("3xl"),
+  "4xl": getSize("4xl"),
+  "5xl": getSize("5xl"),
+  "6xl": getSize("6xl"),
+  full: getSize("full")
 };
-
-var Modal = {
-  defaultProps: {
-    size: "md"
+var defaultProps = {
+  size: "md"
+};
+var transition = {
+  overlay: {
+    timeout: {
+      enter: 150,
+      exit: 100
+    },
+    enter: {
+      transition: {
+        easing: "cubic-bezier(0,0,.2,1)",
+        duration: "150ms",
+        property: "opacity"
+      },
+      from: {
+        opacity: 0.01
+      },
+      to: {
+        opacity: 1
+      }
+    },
+    exit: {
+      transition: {
+        easing: "cubic-bezier(.4,0,1,1)",
+        duration: "100ms",
+        property: "opacity"
+      },
+      from: {
+        opacity: 1
+      },
+      to: {
+        opacity: 0.01
+      }
+    }
   },
-  baseStyle: function baseStyle(props) {
-    return {
-      Overlay: {
-        bg: "blackAlpha.600"
+  content: {
+    addAppearStyles: true,
+    timeout: {
+      enter: 150,
+      exit: 100
+    },
+    enter: {
+      transition: {
+        easing: "cubic-bezier(0,0,.2,1)",
+        duration: "150ms",
+        property: "opacity, transform"
       },
-      Content: {
-        borderRadius: "md",
-        bg: (0, _themeTools.mode)("white", "gray.700")(props),
-        color: "inherit",
-        marginY: "3.75rem",
-        maxHeight: props.scrollBehavior === "inside" ? "calc(100vh - 7.5rem)" : undefined,
-        boxShadow: (0, _themeTools.mode)("lg", "dark-lg")(props)
+      from: {
+        opacity: 0.01,
+        transform: "scale(0.97)"
       },
-      Header: {
-        paddingX: 6,
-        paddingY: 4,
-        fontSize: "xl",
-        fontWeight: "semibold"
+      to: {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    },
+    exit: {
+      transition: {
+        easing: "cubic-bezier(.4,0,1,1)",
+        duration: "100ms",
+        property: "opacity, transform"
       },
-      Body: {
-        paddingX: 6,
-        paddingY: 2
+      from: {
+        opacity: 1,
+        transform: "scale(1)"
       },
-      Footer: {
-        paddingX: 6,
-        paddingY: 4
+      to: {
+        opacity: 0.01,
+        transform: "scale(0.97)"
       }
-    };
-  },
-  sizes: {
-    xs: getSize("xs"),
-    sm: getSize("sm"),
-    md: getSize("md"),
-    lg: getSize("lg"),
-    xl: getSize("xl"),
-    "2xl": getSize("2xl"),
-    "3xl": getSize("3xl"),
-    "4xl": getSize("4xl"),
-    "5xl": getSize("5xl"),
-    "6xl": getSize("6xl"),
-    full: getSize("full")
+    }
   }
 };
-var ModalSizes = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-  "2xl": "2xl",
-  "3xl": "3xl",
-  "4xl": "4xl",
-  "5xl": "5xl",
-  "6xl": "6xl",
-  full: "full"
+var modal = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes,
+  transition: transition
 };
-exports.ModalSizes = ModalSizes;
-var _default = Modal;
+var _default = modal;
 exports["default"] = _default;
 //# sourceMappingURL=modal.js.map

dist/cjs/components/number-input.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.NumberInputSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
+var _input = _interopRequireDefault(require("./input"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var register = {
+  parts: ["field", "stepper", "stepperGroup"],
+  sizes: _input["default"].register.sizes,
+  variants: _input["default"].register.variants
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    field: _input["default"].baseStyle.field,
+    stepperGroup: {
+      width: "24px"
+    },
+    stepper: {
+      borderLeft: "1px solid",
+      borderColor: (0, _themeTools.mode)("inherit", "whiteAlpha.300")(props),
+      color: (0, _themeTools.mode)("inherit", "whiteAlpha.800")(props),
+      _active: {
+        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    }
+  };
+};
+
+var sizes = {
+  sm: getSizeStyle("sm"),
+  md: getSizeStyle("md"),
+  lg: getSizeStyle("lg")
+};
+
 function getSizeStyle(size) {
+  var inputPartsStyle = _input["default"].sizes[size];
+  var inputStyle = typeof inputPartsStyle !== "function" ? inputPartsStyle == null ? void 0 : inputPartsStyle.field : {};
+  var radius = {
+    lg: "md",
+    md: "md",
+    sm: "sm"
+  };
   return {
-    Stepper: {
+    field: inputStyle,
+    stepper: {
       fontSize: size === "lg" ? "14px" : "10px",
       _first: {
-        borderTopRightRadius: size === "lg" ? 3 : 1
+        borderTopRightRadius: radius[size]
       },
       _last: {
-        borderBottomRightRadius: size === "lg" ? 3 : 1,
+        borderBottomRightRadius: radius[size],
         marginTop: "-1px",
@@ -24,43 +69,42 @@ borderTopWidth: 1
 
-var NumberInput = {
-  defaultProps: {
-    size: "md"
+var variants = {
+  outline: function outline(props) {
+    return {
+      field: getVariantStyle("outline", props)
+    };
   },
-  baseStyle: function baseStyle(props) {
+  filled: function filled(props) {
     return {
-      StepperGroup: {
-        width: "24px",
-        margin: "1px",
-        position: "absolute",
-        right: "0px",
-        height: "calc(100% - 2px)"
-      },
-      Stepper: {
-        borderLeft: "1px solid",
-        borderColor: (0, _themeTools.mode)("inherit", "whiteAlpha.300")(props),
-        color: (0, _themeTools.mode)("inherit", "whiteAlpha.800")(props),
-        _active: {
-          bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
-        },
-        _disabled: {
-          opacity: 0.4,
-          cursor: "not-allowed"
-        }
-      }
+      field: getVariantStyle("filled", props)
     };
   },
-  sizes: {
-    sm: getSizeStyle("sm"),
-    md: getSizeStyle("md"),
-    lg: getSizeStyle("lg")
+  flushed: function flushed(props) {
+    return {
+      field: getVariantStyle("flushed", props)
+    };
+  },
+  unstyled: function unstyled(props) {
+    return {
+      field: getVariantStyle("unstyled", props)
+    };
   }
 };
-var NumberInputSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+
+function getVariantStyle(variant, props) {
+  var _partsStyle$field;
+
+  var partsStyle = (0, _themeTools.runIfFn)(_input["default"].variants[variant], props);
+  return (_partsStyle$field = partsStyle == null ? void 0 : partsStyle.field) != null ? _partsStyle$field : {};
+}
+
+var defaultProps = _input["default"].defaultProps;
+var numberInput = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes,
+  variants: variants
 };
-exports.NumberInputSizes = NumberInputSizes;
-var _default = NumberInput;
+var _default = numberInput;
 exports["default"] = _default;
 //# sourceMappingURL=number-input.js.map

dist/cjs/components/pin-input.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.PinInputVariants = exports.PinInputSizes = void 0;
+exports["default"] = void 0;
 
-var _input = _interopRequireWildcard(require("./input"));
+var _input = _interopRequireDefault(require("./input"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var PinInput = {
-  defaultProps: _input["default"].defaultProps,
-  baseStyle: _input["default"].baseStyle,
-  variants: _input["default"].variants,
-  sizes: {
-    lg: {
+var register = {
+  parts: ["field"],
+  sizes: _input["default"].register.sizes,
+  variants: _input["default"].register.variants
+};
+var baseStyle = _input["default"].baseStyle;
+var variants = _input["default"].variants;
+var sizes = {
+  lg: {
+    field: {
       fontSize: "lg",
@@ -22,4 +24,6 @@ width: 12,
       borderRadius: "md"
-    },
-    md: {
+    }
+  },
+  md: {
+    field: {
       fontSize: "md",
@@ -29,4 +33,6 @@ width: 10,
       borderRadius: "md"
-    },
-    sm: {
+    }
+  },
+  sm: {
+    field: {
       fontSize: "sm",
@@ -39,12 +45,12 @@ width: 8,
 };
-var PinInputSizes = {
-  lg: "lg",
-  md: "md",
-  sm: "sm"
+var defaultProps = _input["default"].defaultProps;
+var pinInput = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  variants: variants,
+  sizes: sizes
 };
-exports.PinInputSizes = PinInputSizes;
-var PinInputVariants = _input.InputVariants;
-exports.PinInputVariants = PinInputVariants;
-var _default = PinInput;
+var _default = pinInput;
 exports["default"] = _default;
 //# sourceMappingURL=pin-input.js.map

dist/cjs/components/popover.js

@@ -8,38 +8,49 @@ "use strict";
 
-var Popover = {
-  baseStyle: function baseStyle(props) {
-    return {
-      Content: {
-        bg: (0, _themeTools.mode)("white", "gray.700")(props),
-        border: "1px solid",
-        borderColor: "inherit",
-        borderRadius: "md",
-        boxShadow: "sm",
-        width: "100%",
-        maxWidth: "xs",
-        zIndex: "1",
-        _focus: {
-          outline: 0,
-          boxShadow: "outline"
-        }
-      },
-      Header: {
-        paddingX: 3,
-        paddingY: 2,
-        borderBottomWidth: "1px"
-      },
-      Body: {
-        paddingX: 3,
-        paddingY: 2
-      },
-      Footer: {
-        paddingX: 3,
-        paddingY: 2,
-        borderTopWidth: "1px"
+var register = {
+  parts: ["content", "header", "body", "footer"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    content: {
+      bg: (0, _themeTools.mode)("white", "gray.700")(props),
+      border: "1px solid",
+      borderColor: "inherit",
+      borderRadius: "md",
+      boxShadow: "sm",
+      width: "100%",
+      maxWidth: "xs",
+      zIndex: "1",
+      _focus: {
+        outline: 0,
+        boxShadow: "outline"
       }
-    };
-  }
+    },
+    header: {
+      paddingX: 3,
+      paddingY: 2,
+      borderBottomWidth: "1px"
+    },
+    body: {
+      paddingX: 3,
+      paddingY: 2
+    },
+    footer: {
+      paddingX: 3,
+      paddingY: 2,
+      borderTopWidth: "1px"
+    }
+  };
 };
-var _default = Popover;
+
+var transition = {
+  content: _themeTools.scaleFade
+};
+var popover = {
+  register: register,
+  baseStyle: baseStyle,
+  transition: transition
+};
+var _default = popover;
 exports["default"] = _default;
 //# sourceMappingURL=popover.js.map

dist/cjs/components/progress.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.ProgressSizes = void 0;
+exports["default"] = void 0;
 
@@ -10,16 +10,41 @@ var _themeTools = require("@chakra-ui/theme-tools");
 
-var getProgressBg = function getProgressBg(props) {
+var register = {
+  parts: ["track", "filledTrack", "label"],
+  sizes: ["xs", "sm", "md", "lg"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    label: {
+      lineHeight: "1",
+      fontSize: "0.25em",
+      fontWeight: "bold",
+      color: "white"
+    },
+    track: {
+      bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.300")(props)
+    },
+    filledTrack: _extends({
+      transition: "all 0.3s"
+    }, getFilledTrackStyle(props))
+  };
+};
+
+function getFilledTrackStyle(props) {
   var c = props.colorScheme,
       t = props.theme,
-      isIndeterminate = props.isIndeterminate;
+      isIndeterminate = props.isIndeterminate,
+      hasStripe = props.hasStripe;
+  var stripeStyle = (0, _themeTools.mode)((0, _themeTools.generateStripe)(), (0, _themeTools.generateStripe)("1rem", "rgba(0,0,0,0.1)"))(props);
   var bg = (0, _themeTools.mode)(c + ".500", c + ".200")(props);
   var gradient = "linear-gradient(\n    to right,\n    transparent 0%,\n    " + (0, _themeTools.getColor)(t, bg) + " 50%,\n    transparent 100%\n  )";
-  return {
+  var shouldAddStripe = !isIndeterminate && hasStripe;
+  return _extends({}, shouldAddStripe && stripeStyle, {
     bg: isIndeterminate ? gradient : bg
-  };
-};
+  });
+}
 
 var sizes = {
   xs: {
-    Track: {
+    track: {
       height: "0.25rem"
@@ -29,3 +54,3 @@ }
   sm: {
-    Track: {
+    track: {
       height: "0.5rem"
@@ -35,3 +60,3 @@ }
   md: {
-    Track: {
+    track: {
       height: "0.75rem"
@@ -41,3 +66,3 @@ }
   lg: {
-    Track: {
+    track: {
       height: "1rem"
@@ -47,33 +72,14 @@ }
 };
-var Progress = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
-  baseStyle: function baseStyle(props) {
-    return {
-      Label: {
-        lineHeight: "1",
-        fontSize: "0.25em"
-      },
-      Track: {
-        bg: (0, _themeTools.mode)("gray.100", "whiteAlpha.300")(props)
-      },
-      Indicator: _extends({
-        height: "100%",
-        transition: "all 0.3s"
-      }, getProgressBg(props))
-    };
-  },
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+};
+var progress = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
   sizes: sizes
 };
-var ProgressSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-  xs: "xs"
-};
-exports.ProgressSizes = ProgressSizes;
-var _default = Progress;
+var _default = progress;
 exports["default"] = _default;
 //# sourceMappingURL=progress.js.map

dist/cjs/components/radio.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.RadioSizes = void 0;
+exports["default"] = void 0;
 
-var _checkbox = _interopRequireWildcard(require("./checkbox"));
+var _themeTools = require("@chakra-ui/theme-tools");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _checkbox = _interopRequireDefault(require("./checkbox"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 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 _baseStyle = _checkbox["default"].baseStyle;
-var Radio = {
-  defaultProps: _checkbox["default"].defaultProps,
-  baseStyle: function baseStyle(props) {
-    return {
-      Control: _extends({}, _baseStyle(props).Control, {
-        borderRadius: "full",
-        _checked: _extends({}, _baseStyle(props).Control["_checked"], {
-          _before: {
-            content: "\"\"",
-            display: "inline-block",
-            position: "relative",
-            width: "50%",
-            height: "50%",
-            borderRadius: "50%",
-            bg: "currentColor"
-          }
-        })
-      }),
-      Label: _baseStyle(props).Label
-    };
-  },
-  sizes: _extends({}, _checkbox["default"].sizes, {
-    sm: {
-      Control: {
-        width: 3,
-        height: 3
-      }
+var register = {
+  parts: ["control", "label"],
+  sizes: _checkbox["default"].register.sizes
+};
+
+var baseStyle = function baseStyle(props) {
+  var _runIfFn = (0, _themeTools.runIfFn)(_checkbox["default"].baseStyle, props),
+      label = _runIfFn.label,
+      control = _runIfFn.control;
+
+  return {
+    label: label,
+    control: _extends({}, control, {
+      borderRadius: "full",
+      _checked: _extends({}, control == null ? void 0 : control["_checked"], {
+        _before: {
+          content: "\"\"",
+          display: "inline-block",
+          position: "relative",
+          width: "50%",
+          height: "50%",
+          borderRadius: "50%",
+          bg: "currentColor"
+        }
+      })
+    })
+  };
+};
+
+var sizes = _extends({}, _checkbox["default"].sizes, {
+  sm: {
+    control: {
+      width: 3,
+      height: 3
     }
-  })
+  }
+});
+
+var defaultProps = _checkbox["default"].defaultProps;
+var radio = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes
 };
-var RadioSizes = _checkbox.CheckboxSizes;
-exports.RadioSizes = RadioSizes;
-var _default = Radio;
+var _default = radio;
 exports["default"] = _default;
 //# sourceMappingURL=radio.js.map

dist/cjs/components/select.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.SelectVariants = exports.SelectSizes = void 0;
+exports["default"] = void 0;
 
-var _input = _interopRequireWildcard(require("./input"));
+var _input = _interopRequireDefault(require("./input"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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 Select = _extends({}, _input["default"], {
-  baseStyle: _extends({}, _input["default"].baseStyle, {
+var register = {
+  parts: ["field", "icon"],
+  sizes: _input["default"].register.sizes,
+  variants: _input["default"].register.variants
+};
+var baseStyle = {
+  field: _extends({}, _input["default"].baseStyle.field, {
     appearance: "none",
@@ -20,11 +23,23 @@ paddingRight: "2rem",
     lineHeight: "normal"
-  })
-});
-
-var SelectSizes = _input.InputSizes;
-exports.SelectSizes = SelectSizes;
-var SelectVariants = _input.InputVariants;
-exports.SelectVariants = SelectVariants;
-var _default = Select;
+  }),
+  icon: {
+    color: "currentColor",
+    fontSize: "1.25rem",
+    _disabled: {
+      opacity: 0.5
+    }
+  }
+};
+var sizes = _input["default"].sizes;
+var variants = _input["default"].variants;
+var defaultProps = _input["default"].defaultProps;
+var select = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes,
+  variants: variants
+};
+var _default = select;
 exports["default"] = _default;
 //# sourceMappingURL=select.js.map

dist/cjs/components/skeleton.js

 "use strict";
 
 exports.__esModule = true;
-exports.baseStyle = baseStyle;
-exports["default"] = exports.frame = void 0;
+exports.frame = frame;
+exports["default"] = void 0;
 
@@ -11,21 +11,7 @@ var _system = require("@chakra-ui/system");
 
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  from {\n    border-color: ", ";\n    background: ", ";\n  }\n  to {\n    border-color: ", ";\n    background: ", ";\n  }\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-var frame = function frame(start, end) {
-  return (0, _system.keyframes)(_templateObject(), start, start, end, end);
+var register = {
+  parts: ["skeleton"]
 };
 
-exports.frame = frame;
-
-function baseStyle(props) {
+var baseStyle = function baseStyle(props) {
   var _props$startColor = props.startColor,
@@ -40,15 +26,31 @@ startColor = _props$startColor === void 0 ? (0, _themeTools.mode)("gray.100", "gray.800")(props) : _props$startColor,
   return {
-    opacity: 0.7,
-    borderRadius: "2px",
-    borderColor: start,
-    background: end,
-    animation: speed + "s linear infinite alternate " + frame(start, end)
+    skeleton: {
+      opacity: 0.7,
+      borderRadius: "2px",
+      borderColor: start,
+      background: end,
+      animation: speed + "s linear infinite alternate " + frame(start, end)
+    }
   };
-}
+};
 
-var Skeleton = {
+var skeleton = {
+  register: register,
   baseStyle: baseStyle
 };
-var _default = Skeleton;
+var _default = skeleton;
 exports["default"] = _default;
+
+function frame(startColor, endColor) {
+  return (0, _system.keyframes)({
+    from: {
+      borderColor: startColor,
+      background: startColor
+    },
+    to: {
+      borderColor: endColor,
+      background: endColor
+    }
+  });
+}
 //# sourceMappingURL=skeleton.js.map

dist/cjs/components/slider.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.SliderSizes = void 0;
+exports["default"] = void 0;
 
@@ -10,129 +10,133 @@ var _themeTools = require("@chakra-ui/theme-tools");
 
-var Slider = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
-  sizes: {
-    lg: function lg(props) {
-      return {
-        Thumb: {
-          width: "16px",
-          height: "16px"
-        },
-        Track: (0, _themeTools.orient)({
-          orientation: props.orientation,
-          horizontal: {
-            height: "4px"
-          },
-          vertical: {
-            width: "4px"
-          }
-        })
-      };
+var register = {
+  parts: ["container", "thumb", "track", "filledTrack"],
+  sizes: ["sm", "md", "lg"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    container: _extends({
+      _disabled: {
+        opacity: 0.6,
+        cursor: "default",
+        pointerEvents: "none"
+      }
+    }, (0, _themeTools.orient)({
+      orientation: props.orientation,
+      vertical: {
+        height: "100%"
+      },
+      horizontal: {
+        width: "100%"
+      }
+    })),
+    track: {
+      borderRadius: "sm",
+      bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.200")(props),
+      _disabled: {
+        bg: (0, _themeTools.mode)("gray.300", "whiteAlpha.300")(props)
+      }
     },
-    md: function md(props) {
-      return {
-        Thumb: {
-          width: "14px",
-          height: "14px"
-        },
-        Track: (0, _themeTools.orient)({
-          orientation: props.orientation,
-          horizontal: {
-            height: "4px"
-          },
-          vertical: {
-            width: "4px"
-          }
-        })
-      };
-    },
-    sm: function sm(props) {
-      return {
-        Thumb: {
-          width: "10px",
-          height: "10px"
-        },
-        Track: (0, _themeTools.orient)({
-          orientation: props.orientation,
-          horizontal: {
-            height: "2px"
-          },
-          vertical: {
-            width: "2px"
-          }
-        })
-      };
+    thumb: _extends({
+      zIndex: 1,
+      borderRadius: "full",
+      bg: "white",
+      boxShadow: "sm",
+      border: "1px solid",
+      borderColor: "transparent",
+      transition: "transform 0.2s",
+      _focus: {
+        boxShadow: "outline"
+      },
+      _disabled: {
+        bg: "gray.300"
+      }
+    }, (0, _themeTools.orient)({
+      orientation: props.orientation,
+      vertical: {
+        left: "50%",
+        transform: "translateX(-50%)",
+        _active: {
+          transform: "translateX(-50%) scale(1.15)"
+        }
+      },
+      horizontal: {
+        top: "50%",
+        transform: "translateY(-50%)",
+        _active: {
+          transform: "translateY(-50%) scale(1.15)"
+        }
+      }
+    })),
+    filledTrack: {
+      bg: (0, _themeTools.mode)(props.colorScheme + ".500", props.colorScheme + ".200")(props)
     }
-  },
-  baseStyle: function baseStyle(props) {
+  };
+};
+
+var sizes = {
+  lg: function lg(props) {
     return {
-      Root: _extends({
-        _disabled: {
-          opacity: 0.6,
-          cursor: "default",
-          pointerEvents: "none"
-        }
-      }, (0, _themeTools.orient)({
+      thumb: {
+        width: "16px",
+        height: "16px"
+      },
+      track: (0, _themeTools.orient)({
         orientation: props.orientation,
+        horizontal: {
+          height: "4px"
+        },
         vertical: {
-          height: "100%"
-        },
-        horizontal: {
-          width: "100%"
+          width: "4px"
         }
-      })),
-      Track: {
-        borderRadius: "sm",
-        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.200")(props),
-        _disabled: {
-          bg: (0, _themeTools.mode)("gray.300", "whiteAlpha.300")(props)
-        }
+      })
+    };
+  },
+  md: function md(props) {
+    return {
+      thumb: {
+        width: "14px",
+        height: "14px"
       },
-      Thumb: _extends({
-        zIndex: 1,
-        borderRadius: "full",
-        bg: "white",
-        boxShadow: "sm",
-        border: "1px solid",
-        borderColor: "transparent",
-        transition: "transform 0.2s",
-        _focus: {
-          boxShadow: "outline"
+      track: (0, _themeTools.orient)({
+        orientation: props.orientation,
+        horizontal: {
+          height: "4px"
         },
-        _disabled: {
-          bg: "gray.300"
+        vertical: {
+          width: "4px"
         }
-      }, (0, _themeTools.orient)({
+      })
+    };
+  },
+  sm: function sm(props) {
+    return {
+      thumb: {
+        width: "10px",
+        height: "10px"
+      },
+      track: (0, _themeTools.orient)({
         orientation: props.orientation,
+        horizontal: {
+          height: "2px"
+        },
         vertical: {
-          left: "50%",
-          transform: "translateX(-50%)",
-          _active: {
-            transform: "translateX(-50%) scale(1.15)"
-          }
-        },
-        horizontal: {
-          top: "50%",
-          transform: "translateY(-50%)",
-          _active: {
-            transform: "translateY(-50%) scale(1.15)"
-          }
+          width: "2px"
         }
-      })),
-      FilledTrack: {
-        bg: (0, _themeTools.mode)(props.colorScheme + ".500", props.colorScheme + ".200")(props)
-      }
+      })
     };
   }
 };
-var SliderSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md"
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
 };
-exports.SliderSizes = SliderSizes;
-var _default = Slider;
+var slider = {
+  register: register,
+  defaultProps: defaultProps,
+  sizes: sizes,
+  baseStyle: baseStyle
+};
+var _default = slider;
 exports["default"] = _default;
 //# sourceMappingURL=slider.js.map

dist/cjs/components/spinner.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.SpinnerSizes = void 0;
-var Spinner = {
-  defaultProps: {
-    size: "md"
-  },
-  sizes: {
-    xs: {
+exports["default"] = void 0;
+var register = {
+  parts: ["spinner"],
+  sizes: ["xs", "sm", "md", "lg", "xl"]
+};
+var sizes = {
+  xs: {
+    spinner: {
       width: "0.75rem",
       height: "0.75rem"
-    },
-    sm: {
+    }
+  },
+  sm: {
+    spinner: {
       width: "1rem",
       height: "1rem"
-    },
-    md: {
+    }
+  },
+  md: {
+    spinner: {
       width: "1.5rem",
       height: "1.5rem"
-    },
-    lg: {
+    }
+  },
+  lg: {
+    spinner: {
       width: "2rem",
       height: "2rem"
-    },
-    xl: {
+    }
+  },
+  xl: {
+    spinner: {
       width: "3rem",
@@ -32,12 +41,12 @@ height: "3rem"
 };
-var SpinnerSizes = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl"
+var defaultProps = {
+  size: "md"
 };
-exports.SpinnerSizes = SpinnerSizes;
-var _default = Spinner;
+var spinner = {
+  register: register,
+  defaultProps: defaultProps,
+  sizes: sizes
+};
+var _default = spinner;
 exports["default"] = _default;
 //# sourceMappingURL=spinner.js.map

dist/cjs/components/stat.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.StatSizes = void 0;
-var Stat = {
-  defaultProps: {
-    size: "md"
+exports["default"] = void 0;
+var register = {
+  parts: ["label", "helpText", "number", "container", "icon"],
+  sizes: ["sm", "md", "lg"]
+};
+var baseStyle = {
+  container: {
+    flex: "1",
+    paddingRight: 4
   },
-  baseStyle: {
-    Label: {
-      fontWeight: "medium"
+  label: {
+    fontWeight: "medium"
+  },
+  helpText: {
+    opacity: 0.8,
+    marginBottom: 2
+  },
+  number: {
+    verticalAlign: "baseline",
+    fontWeight: "semibold"
+  },
+  icon: {
+    marginRight: 1,
+    width: "14px",
+    height: "14px",
+    verticalAlign: "middle"
+  }
+};
+var sizes = {
+  md: {
+    label: {
+      fontSize: "sm"
     },
-    HelpText: {
-      opacity: 0.8,
-      marginBottom: 2
+    helpText: {
+      fontSize: "sm"
     },
-    Number: {
-      verticalAlign: "baseline",
-      fontWeight: "semibold"
+    number: {
+      fontSize: "2xl"
     }
-  },
-
-  /**
-   * Only one size specified but you can add more,
-   * and style each part.
-   */
-  sizes: {
-    md: {
-      Label: {
-        fontSize: "sm"
-      },
-      HelpText: {
-        fontSize: "sm"
-      },
-      Number: {
-        fontSize: "2xl"
-      }
-    }
   }
 };
-var StatSizes = {
-  md: "md"
+var defaultProps = {
+  size: "md"
 };
-exports.StatSizes = StatSizes;
-var _default = Stat;
+var stat = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes
+};
+var _default = stat;
 exports["default"] = _default;
 //# sourceMappingURL=stat.js.map

dist/cjs/components/switch.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.SwitchSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
+var register = {
+  parts: ["track", "thumb"],
+  sizes: ["sm", "md", "lg"]
+};
+
+var baseStyle = function baseStyle(props) {
+  var c = props.colorScheme;
+  return {
+    track: {
+      borderRadius: "full",
+      padding: "2px",
+      transition: "all 120ms",
+      bg: (0, _themeTools.mode)("gray.300", "whiteAlpha.400")(props),
+      _focus: {
+        boxShadow: "outline"
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      },
+      _checked: {
+        bg: (0, _themeTools.mode)(c + ".500", c + ".200")(props)
+      }
+    },
+    thumb: {
+      bg: "white",
+      transition: "transform 250ms",
+      borderRadius: "full",
+      transform: "translateX(0)"
+    }
+  };
+};
+
 var sizes = {
   sm: {
-    Track: {
+    track: {
       width: "1.375rem",
       height: "0.75rem"
     },
-    Thumb: {
+    thumb: {
       width: "0.75rem",
@@ -23,7 +56,7 @@ height: "0.75rem",
   md: {
-    Track: {
+    track: {
       width: "1.875rem",
       height: "1rem"
     },
-    Thumb: {
+    thumb: {
       width: "1rem",
@@ -37,7 +70,7 @@ height: "1rem",
   lg: {
-    Track: {
+    track: {
       width: "2.875rem",
       height: "1.5rem"
     },
-    Thumb: {
+    thumb: {
       width: "1.5rem",
@@ -51,43 +84,15 @@ height: "1.5rem",
 };
-var Switch = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
-  baseStyle: function baseStyle(props) {
-    return {
-      Track: {
-        borderRadius: "full",
-        padding: "2px",
-        transition: "all 120ms",
-        bg: (0, _themeTools.mode)("gray.300", "whiteAlpha.400")(props),
-        _focus: {
-          boxShadow: "outline"
-        },
-        _disabled: {
-          opacity: 0.4,
-          cursor: "not-allowed"
-        },
-        _checked: {
-          bg: (0, _themeTools.mode)(props.colorScheme + ".500", props.colorScheme + ".200")(props)
-        }
-      },
-      Thumb: {
-        bg: "white",
-        transition: "transform 250ms",
-        borderRadius: "full",
-        transform: "translateX(0)"
-      }
-    };
-  },
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+}; // can't use the `switch` here since it's a reserved keyword
+
+var _switch = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
   sizes: sizes
 };
-var SwitchSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
-};
-exports.SwitchSizes = SwitchSizes;
-var _default = Switch;
+var _default = _switch;
 exports["default"] = _default;
 //# sourceMappingURL=switch.js.map

dist/cjs/components/tabs.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.TabVariants = exports.TabSizes = void 0;
+exports["default"] = void 0;
 
 var _themeTools = require("@chakra-ui/theme-tools");
 
-function line(props) {
-  var c = props.colorScheme;
-  return {
-    TabList: {
-      borderBottom: "2px solid",
-      borderColor: "inherit"
-    },
-    Tab: {
-      borderBottom: "2px solid",
-      borderColor: "transparent",
-      marginBottom: "-2px",
-      _selected: {
-        color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
-        borderColor: "currentColor"
-      },
-      _active: {
-        bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      }
-    }
-  };
-}
+var register = {
+  parts: ["tablist", "tab", "tabpanel", "indicator"],
+  sizes: ["sm", "md", "lg"],
+  variants: ["line", "enclosed", "soft-rounded", "enclosed-colored", "solid-rounded", "unstyled"]
+};
+var alignments = {
+  end: "flex-end",
+  center: "center",
+  start: "flex-start"
+};
 
-function enclosed(props) {
-  var c = props.colorScheme;
+var baseStyle = function baseStyle(props) {
+  var _props$align = props.align,
+      align = _props$align === void 0 ? "start" : _props$align,
+      isFitted = props.isFitted;
   return {
-    Tab: {
-      borderTopRadius: "md",
-      border: "1px solid",
-      borderColor: "transparent",
-      marginBottom: "-1px",
-      _selected: {
-        color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
-        borderColor: "inherit",
-        borderBottomColor: (0, _themeTools.mode)("white", "gray.800")(props)
-      }
-    },
-    TabList: {
-      marginBottom: "-1px",
-      borderBottom: "1px solid",
-      borderColor: "inherit"
-    }
-  };
-}
-
-function enclosedColored(props) {
-  var c = props.colorScheme;
-  return {
-    Tab: {
-      border: "1px solid",
-      borderColor: "inherit",
-      bg: (0, _themeTools.mode)("gray.50", "whiteAlpha.50")(props),
-      marginBottom: "-1px",
-      _notLast: {
-        mr: "-1px"
-      },
-      _selected: {
-        bg: (0, _themeTools.mode)("#fff", "gray.800")(props),
-        color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
-        borderColor: "inherit",
-        borderTopColor: "currentColor",
-        borderBottomColor: "transparent"
-      }
-    },
-    TabList: {
-      marginBottom: "-1px",
-      borderBottom: "1px solid",
-      borderColor: "inherit"
-    }
-  };
-}
-
-function softRounded(props) {
-  var c = props.colorScheme,
-      theme = props.theme;
-  return {
-    Tab: {
-      borderRadius: "full",
-      fontWeight: "semibold",
-      color: "gray.600",
-      _selected: {
-        color: (0, _themeTools.getColor)(theme, c + ".700"),
-        bg: (0, _themeTools.getColor)(theme, c + ".100")
-      }
-    },
-    TabList: {}
-  };
-}
-
-function solidRounded(props) {
-  var c = props.colorScheme;
-  return {
-    Tab: {
-      borderRadius: "full",
-      fontWeight: "semibold",
-      color: (0, _themeTools.mode)("gray.600", "inherit")(props),
-      _selected: {
-        color: (0, _themeTools.mode)("#fff", "gray.800")(props),
-        bg: (0, _themeTools.mode)(c + ".600", c + ".300")(props)
-      }
-    },
-    TabList: {}
-  };
-}
-
-var Tabs = {
-  defaultProps: {
-    size: "md",
-    variant: "line",
-    colorScheme: "blue"
-  },
-  baseStyle: {
-    Tab: {
+    tab: {
+      flex: isFitted ? 1 : undefined,
       transition: "all 0.2s",
@@ -130,56 +32,153 @@ _focus: {
     },
-    TabList: {},
-    TabPanel: {
+    tablist: {
+      justifyContent: alignments[align]
+    },
+    tabpanel: {
       padding: 4
     }
+  };
+};
+
+var sizes = {
+  sm: {
+    tab: {
+      paddingY: "0.25rem",
+      paddingX: "1rem",
+      fontSize: "0.85rem"
+    }
   },
-  sizes: {
-    sm: {
-      Tab: {
-        paddingY: "0.25rem",
-        paddingX: "1rem",
-        fontSize: "0.85rem"
+  md: {
+    tab: {
+      fontSize: "1rem",
+      paddingY: "0.5rem",
+      paddingX: "1rem"
+    }
+  },
+  lg: {
+    tab: {
+      fontSize: "1.15rem",
+      paddingY: "0.75rem",
+      paddingX: "1rem"
+    }
+  }
+};
+var variants = {
+  line: function line(props) {
+    var c = props.colorScheme;
+    return {
+      tablist: {
+        borderBottom: "2px solid",
+        borderColor: "inherit"
+      },
+      tab: {
+        borderBottom: "2px solid",
+        borderColor: "transparent",
+        marginBottom: "-2px",
+        _selected: {
+          color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
+          borderColor: "currentColor"
+        },
+        _active: {
+          bg: (0, _themeTools.mode)("gray.200", "whiteAlpha.300")(props)
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed"
+        }
       }
-    },
-    md: {
-      Tab: {
-        fontSize: "1rem",
-        paddingY: "0.5rem",
-        paddingX: "1rem"
+    };
+  },
+  enclosed: function enclosed(props) {
+    var c = props.colorScheme;
+    return {
+      tab: {
+        borderTopRadius: "md",
+        border: "1px solid",
+        borderColor: "transparent",
+        marginBottom: "-1px",
+        _selected: {
+          color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
+          borderColor: "inherit",
+          borderBottomColor: (0, _themeTools.mode)("white", "gray.800")(props)
+        }
+      },
+      tablist: {
+        marginBottom: "-1px",
+        borderBottom: "1px solid",
+        borderColor: "inherit"
       }
-    },
-    lg: {
-      Tab: {
-        fontSize: "1.15rem",
-        paddingY: "0.75rem",
-        paddingX: "1rem"
+    };
+  },
+  "enclosed-colored": function enclosedColored(props) {
+    var c = props.colorScheme;
+    return {
+      tab: {
+        border: "1px solid",
+        borderColor: "inherit",
+        bg: (0, _themeTools.mode)("gray.50", "whiteAlpha.50")(props),
+        marginBottom: "-1px",
+        _notLast: {
+          mr: "-1px"
+        },
+        _selected: {
+          bg: (0, _themeTools.mode)("#fff", "gray.800")(props),
+          color: (0, _themeTools.mode)(c + ".600", c + ".300")(props),
+          borderColor: "inherit",
+          borderTopColor: "currentColor",
+          borderBottomColor: "transparent"
+        }
+      },
+      tablist: {
+        marginBottom: "-1px",
+        borderBottom: "1px solid",
+        borderColor: "inherit"
       }
-    }
+    };
   },
-  variants: {
-    line: line,
-    enclosed: enclosed,
-    "soft-rounded": softRounded,
-    "enclosed-colored": enclosedColored,
-    "solid-rounded": solidRounded,
-    unstyled: {}
-  }
+  "soft-rounded": function softRounded(props) {
+    var c = props.colorScheme,
+        theme = props.theme;
+    return {
+      tab: {
+        borderRadius: "full",
+        fontWeight: "semibold",
+        color: "gray.600",
+        _selected: {
+          color: (0, _themeTools.getColor)(theme, c + ".700"),
+          bg: (0, _themeTools.getColor)(theme, c + ".100")
+        }
+      },
+      tablist: {}
+    };
+  },
+  "solid-rounded": function solidRounded(props) {
+    var c = props.colorScheme;
+    return {
+      tab: {
+        borderRadius: "full",
+        fontWeight: "semibold",
+        color: (0, _themeTools.mode)("gray.600", "inherit")(props),
+        _selected: {
+          color: (0, _themeTools.mode)("#fff", "gray.800")(props),
+          bg: (0, _themeTools.mode)(c + ".600", c + ".300")(props)
+        }
+      }
+    };
+  },
+  unstyled: {}
 };
-var TabSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+var defaultProps = {
+  size: "md",
+  variant: "line",
+  colorScheme: "blue"
 };
-exports.TabSizes = TabSizes;
-var TabVariants = {
-  line: "line",
-  enclosed: "enclosed",
-  "soft-rounded": "soft-rounded",
-  "enclosed-colored": "enclosed-colored",
-  "solid-rounded": "solid-rounded",
-  unstyled: "unstyled"
+var tabs = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes,
+  variants: variants
 };
-exports.TabVariants = TabVariants;
-var _default = Tabs;
+var _default = tabs;
 exports["default"] = _default;
 //# sourceMappingURL=tabs.js.map

dist/cjs/components/tag.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.TagVariants = exports.TagSizes = void 0;
+exports["default"] = void 0;
 
-var _badge = _interopRequireWildcard(require("./badge"));
+var _badge = _interopRequireDefault(require("./badge"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var Tag = {
-  defaultProps: {
-    size: "lg",
-    variant: "subtle",
-    colorScheme: "gray"
-  },
-  baseStyle: {
+var register = {
+  parts: ["container", "label", "closeButton"],
+  sizes: ["sm", "md", "lg"],
+  variants: _badge["default"].register.variants
+};
+var baseStyle = {
+  container: {
     outline: 0,
@@ -24,4 +22,30 @@ _focus: {
   },
-  sizes: {
-    sm: {
+  label: {
+    lineHeight: 1.2
+  },
+  closeButton: {
+    fontSize: "1em",
+    width: "1.25rem",
+    height: "1.25rem",
+    borderRadius: "sm",
+    marginLeft: "0.375rem",
+    opacity: 0.5,
+    _disabled: {
+      opacity: 0.4
+    },
+    _focus: {
+      boxShadow: "outline",
+      bg: "rgba(0, 0, 0, 0.14)"
+    },
+    _hover: {
+      opacity: 0.8
+    },
+    _active: {
+      opacity: 1
+    }
+  }
+};
+var sizes = {
+  sm: {
+    container: {
       minHeight: "1.25rem",
@@ -32,4 +56,6 @@ minWidth: "1.25rem",
       borderRadius: "sm"
-    },
-    md: {
+    }
+  },
+  md: {
+    container: {
       minHeight: "1.5rem",
@@ -40,4 +66,6 @@ minWidth: "1.5rem",
       paddingX: 2
-    },
-    lg: {
+    }
+  },
+  lg: {
+    container: {
       minHeight: 8,
@@ -49,15 +77,19 @@ minWidth: 8,
     }
-  },
-  variants: _badge["default"].variants
+  }
 };
-var TagSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+var variants = _badge["default"].variants;
+var defaultProps = {
+  size: "lg",
+  variant: "subtle",
+  colorScheme: "gray"
 };
-exports.TagSizes = TagSizes;
-var TagVariants = _badge.BadgeVariants;
-exports.TagVariants = TagVariants;
-var _default = Tag;
+var tag = {
+  register: register,
+  defaultProps: defaultProps,
+  baseStyle: baseStyle,
+  sizes: sizes,
+  variants: variants
+};
+var _default = tag;
 exports["default"] = _default;
 //# sourceMappingURL=tag.js.map

dist/cjs/components/textarea.js

 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.TextareaSizes = exports.TextareaVariants = void 0;
+exports["default"] = void 0;
 
-var _input = _interopRequireWildcard(require("./input"));
+var _input = _interopRequireDefault(require("./input"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 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 Textarea = _extends({}, _input["default"], {
-  baseStyle: _extends({}, _input["default"].baseStyle, {
+var register = {
+  parts: ["field"],
+  variants: _input["default"].register.variants,
+  sizes: _input["default"].register.sizes
+};
+var baseStyle = {
+  field: _extends({}, _input["default"].baseStyle.field, {
     paddingY: "8px",
@@ -20,10 +23,11 @@ minHeight: "80px",
   })
+};
+
+var textarea = _extends({}, _input["default"], {
+  register: register,
+  baseStyle: baseStyle
 });
 
-var TextareaVariants = _input.InputVariants;
-exports.TextareaVariants = TextareaVariants;
-var TextareaSizes = _input.InputSizes;
-exports.TextareaSizes = TextareaSizes;
-var _default = Textarea;
+var _default = textarea;
 exports["default"] = _default;
 //# sourceMappingURL=textarea.js.map

dist/cjs/components/tooltip.js

@@ -8,5 +8,9 @@ "use strict";
 
-var Tooltip = {
-  baseStyle: function baseStyle(props) {
-    return {
+var register = {
+  parts: ["arrow", "container"]
+};
+
+var baseStyle = function baseStyle(props) {
+  return {
+    container: {
       paddingX: "8px",
@@ -22,7 +26,43 @@ paddingY: "2px",
       maxWidth: "320px"
-    };
+    }
+  };
+};
+
+var transition = {
+  container: {
+    timeout: 120,
+    transition: {
+      easing: "ease-in-out",
+      duration: "120ms",
+      property: "common"
+    },
+    enter: {
+      from: {
+        opacity: 0.01,
+        transform: "scale(0.9)"
+      },
+      to: {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    },
+    exit: {
+      from: {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      to: {
+        opacity: 0.01,
+        transform: "scale(0.9)"
+      }
+    }
   }
 };
-var _default = Tooltip;
+var tooltip = {
+  register: register,
+  baseStyle: baseStyle,
+  transition: transition
+};
+var _default = tooltip;
 exports["default"] = _default;
 //# sourceMappingURL=tooltip.js.map

dist/cjs/foundations/colors.js

@@ -8,4 +8,4 @@ "use strict";
   current: "currentColor",
-  black: "#000",
-  white: "#fff",
+  black: "#000000",
+  white: "#FFFFFF",
   whiteAlpha: {
@@ -48,12 +48,12 @@ 50: "rgba(255, 255, 255, 0.04)",
   red: {
-    50: "#fff5f5",
-    100: "#fed7d7",
-    200: "#feb2b2",
-    300: "#fc8181",
-    400: "#f56565",
-    500: "#e53e3e",
-    600: "#c53030",
-    700: "#9b2c2c",
+    50: "#FFF5F5",
+    100: "#FED7D7",
+    200: "#FEB2B2",
+    300: "#FC8181",
+    400: "#F56565",
+    500: "#E53E3E",
+    600: "#C53030",
+    700: "#9B2C2C",
     800: "#822727",
-    900: "#63171b"
+    900: "#63171B"
   },
@@ -73,10 +73,10 @@ orange: {
   yellow: {
-    50: "#fffff0",
-    100: "#fefcbf",
-    200: "#faf089",
-    300: "#f6e05e",
-    400: "#ecc94b",
-    500: "#d69e2e",
-    600: "#b7791f",
-    700: "#975a16",
+    50: "#FFFFF0",
+    100: "#FEFCBF",
+    200: "#FAF089",
+    300: "#F6E05E",
+    400: "#ECC94B",
+    500: "#D69E2E",
+    600: "#B7791F",
+    700: "#975A16",
     800: "#744210",
@@ -86,11 +86,11 @@ 900: "#5F370E"
   green: {
-    50: "#f0fff4",
-    100: "#c6f6d5",
-    200: "#9ae6b4",
-    300: "#68d391",
-    400: "#48bb78",
-    500: "#38a169",
-    600: "#2f855a",
+    50: "#F0FFF4",
+    100: "#C6F6D5",
+    200: "#9AE6B4",
+    300: "#68D391",
+    400: "#48BB78",
+    500: "#38A169",
+    600: "#2F855A",
     700: "#276749",
-    800: "#22543d",
+    800: "#22543D",
     900: "#1C4532"
@@ -111,12 +111,12 @@ },
   blue: {
-    50: "#ebf8ff",
-    100: "#ceedff",
-    200: "#90cdf4",
-    300: "#63b3ed",
-    400: "#4299e1",
-    500: "#3182ce",
-    600: "#2a69ac",
-    700: "#1e4e8c",
-    800: "#153e75",
-    900: "#1a365d"
+    50: "#EBF8FF",
+    100: "#CEEDFF",
+    200: "#90CDF4",
+    300: "#63B3ED",
+    400: "#4299E1",
+    500: "#3182CE",
+    600: "#2A69AC",
+    700: "#1E4E8C",
+    800: "#153E75",
+    900: "#1A365D"
   },
@@ -136,22 +136,22 @@ cyan: {
   purple: {
-    50: "#faf5ff",
-    100: "#e9d8fd",
-    200: "#d6bcfa",
-    300: "#b794f4",
-    400: "#9f7aea",
-    500: "#805ad5",
-    600: "#6b46c1",
-    700: "#553c9a",
-    800: "#44337a",
+    50: "#FAF5FF",
+    100: "#E9D8FD",
+    200: "#D6BCFA",
+    300: "#B794F4",
+    400: "#9F7AEA",
+    500: "#805AD5",
+    600: "#6B46C1",
+    700: "#553C9A",
+    800: "#44337A",
     900: "#322659"
   },
   pink: {
-    50: "#fff5f7",
-    100: "#fed7e2",
-    200: "#fbb6ce",
-    300: "#f687b3",
-    400: "#ed64a6",
-    500: "#d53f8c",
-    600: "#b83280",
-    700: "#97266d",
+    50: "#FFF5F7",
+    100: "#FED7E2",
+    200: "#FBB6CE",
+    300: "#F687B3",
+    400: "#ED64A6",
+    500: "#D53F8C",
+    600: "#B83280",
+    700: "#97266D",
     800: "#702459",
@@ -197,36 +197,36 @@ 900: "#521B41"
   whatsapp: {
-    50: "#e2f7f4",
-    100: "#c3f0e9",
-    200: "#a0e7dc",
-    300: "#76dccd",
-    400: "#43cfba",
+    50: "#E2F7F4",
+    100: "#C3F0E9",
+    200: "#A0E7DC",
+    300: "#76DCCD",
+    400: "#43CFBA",
     500: "#00BFA5",
-    600: "#00ac92",
+    600: "#00AC92",
     700: "#009780",
-    800: "#007d6a",
-    900: "#005a4c"
+    800: "#007D6A",
+    900: "#005A4C"
   },
   twitter: {
-    50: "#e5f4fd",
-    100: "#c8e9fb",
-    200: "#a8dcfa",
-    300: "#83cdf7",
-    400: "#57bbf5",
+    50: "#E5F4FD",
+    100: "#C8E9FB",
+    200: "#A8DCFA",
+    300: "#83CDF7",
+    400: "#57BBF5",
     500: "#1DA1F2",
-    600: "#1a94da",
-    700: "#1681bf",
-    800: "#136b9e",
-    900: "#0d4d71"
+    600: "#1A94DA",
+    700: "#1681BF",
+    800: "#136B9E",
+    900: "#0D4D71"
   },
   telegram: {
-    50: "#e3f2f9",
-    100: "#c5e4f3",
-    200: "#a2d4ec",
-    300: "#7ac1e4",
-    400: "#47a9da",
+    50: "#E3F2F9",
+    100: "#C5E4F3",
+    200: "#A2D4EC",
+    300: "#7AC1E4",
+    400: "#47A9DA",
     500: "#0088CC",
-    600: "#007ab8",
-    700: "#006ba1",
+    600: "#007AB8",
+    700: "#006BA1",
     800: "#005885",
-    900: "#003f5e"
+    900: "#003F5E"
   }
@@ -233,0 +233,0 @@ };

dist/cjs/foundations/index.js

@@ -22,2 +22,4 @@ "use strict";
 
+var _transition = _interopRequireDefault(require("./transition"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -42,3 +44,4 @@
   space: space,
-  borders: _borders["default"]
+  borders: _borders["default"],
+  transition: _transition["default"]
 });
@@ -45,0 +48,0 @@

dist/esm/components/accordion.js

@@ -1,33 +0,38 @@
-var Accordion = {
-  baseStyle: {
-    Item: {
-      borderTopWidth: "1px",
-      borderColor: "inherit",
-      _last: {
-        borderBottomWidth: "1px"
-      }
+var register = {
+  parts: ["container", "item", "button", "panel"]
+};
+var baseStyle = {
+  item: {
+    borderTopWidth: "1px",
+    borderColor: "inherit",
+    _last: {
+      borderBottomWidth: "1px"
+    }
+  },
+  button: {
+    fontSize: "1rem",
+    _focus: {
+      boxShadow: "outline"
     },
-    Button: {
-      fontSize: "1rem",
-      _focus: {
-        boxShadow: "outline"
-      },
-      _hover: {
-        bg: "blackAlpha.50"
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      },
-      paddingX: 4,
-      paddingY: 2
+    _hover: {
+      bg: "blackAlpha.50"
     },
-    Panel: {
-      paddingTop: 2,
-      paddingX: 4,
-      paddingBottom: 5
-    }
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed"
+    },
+    paddingX: 4,
+    paddingY: 2
+  },
+  panel: {
+    paddingTop: 2,
+    paddingX: 4,
+    paddingBottom: 5
   }
 };
-export default Accordion;
+var accordion = {
+  register,
+  baseStyle
+};
+export default accordion;
 //# sourceMappingURL=accordion.js.map

dist/esm/components/alert.js

@@ -1,6 +0,23 @@
-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); }
+import { getColor, ink, mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["container", "title", "icon"],
+  variants: ["subtle", "left-accent", "top-accent", "solid"]
+};
+var baseStyle = {
+  container: {
+    paddingX: 4,
+    paddingY: 3
+  },
+  title: {
+    fontWeight: "bold",
+    lineHeight: "normal"
+  },
+  icon: {
+    marginRight: 3,
+    width: 5,
+    height: 5
+  }
+};
 
-import { mode, getColor, ink } from "@chakra-ui/theme-tools";
-
-function subtle(props) {
+function getBg(props) {
   var {
@@ -10,89 +27,75 @@ theme: t,
   } = props;
-  var light = getColor(t, c + ".100", c);
-  var dark = ink(c + ".200", "lowest")(t);
-  var bg = mode(light, dark)(props);
-  return {
-    Root: {
-      bg
-    },
-    Icon: {
-      color: mode(c + ".500", c + ".200")(props)
-    }
-  };
+  var lightBg = getColor(t, c + ".100", c);
+  var darkBg = ink(c + ".200", "lowest")(t);
+  return mode(lightBg, darkBg)(props);
 }
 
-function leftAccent(props) {
-  var {
-    colorScheme: c
-  } = props;
-  var subtleStyle = subtle(props);
-  return {
-    Root: _extends({
-      paddingLeft: 3,
-      borderLeft: "4px solid",
-      borderColor: mode(c + ".500", c + ".200")(props)
-    }, subtleStyle.Root),
-    Icon: {
-      color: mode(c + ".500", c + ".200")(props)
-    }
-  };
-}
-
-function topAccent(props) {
-  var {
-    colorScheme: c
-  } = props;
-  var subtleStyle = subtle(props);
-  return {
-    Root: _extends({
-      paddingTop: 2,
-      borderTop: "4px solid",
-      borderColor: mode(c + ".500", c + ".200")(props)
-    }, subtleStyle.Root),
-    Icon: {
-      color: mode(c + ".500", c + ".200")(props)
-    }
-  };
-}
-
-function solid(props) {
-  var {
-    colorScheme: c
-  } = props;
-  return {
-    Root: {
-      bg: mode(c + ".500", c + ".200")(props),
-      color: mode("white", "gray.900")(props)
-    }
-  };
-}
-
-var Alert = {
-  defaultProps: {
-    variant: "subtle"
+var variants = {
+  subtle: function subtle(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      container: {
+        bg: getBg(props)
+      },
+      icon: {
+        color: mode(c + ".500", c + ".200")(props)
+      }
+    };
   },
-  baseStyle: {
-    Root: {
-      paddingX: 4,
-      paddingY: 3
-    },
-    Icon: {
-      marginRight: 3,
-      boxSize: 5
-    }
+  "left-accent": function leftAccent(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      container: {
+        paddingLeft: 3,
+        borderLeft: "4px solid",
+        borderColor: mode(c + ".500", c + ".200")(props),
+        bg: getBg(props)
+      },
+      icon: {
+        color: mode(c + ".500", c + ".200")(props)
+      }
+    };
   },
-  variants: {
-    solid: solid,
-    subtle: subtle,
-    "left-accent": leftAccent,
-    "top-accent": topAccent
+  "top-accent": function topAccent(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      container: {
+        paddingTop: 2,
+        borderTop: "4px solid",
+        borderColor: mode(c + ".500", c + ".200")(props),
+        bg: getBg(props)
+      },
+      icon: {
+        color: mode(c + ".500", c + ".200")(props)
+      }
+    };
+  },
+  solid: function solid(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      container: {
+        bg: mode(c + ".500", c + ".200")(props),
+        color: mode("white", "gray.900")(props)
+      }
+    };
   }
 };
-export var AlertVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  "left-accent": "left-accent",
-  "top-accent": "top-accent"
+var defaultProps = {
+  variant: "subtle"
 };
-export default Alert;
+var alert = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants
+};
+export default alert;
 //# sourceMappingURL=alert.js.map

dist/esm/components/avatar.js

 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); }
 
-import sizes from "../foundations/sizes";
-import { randomColor, isDark, mode } from "@chakra-ui/theme-tools";
+import { isDark, mode, randomColor } from "@chakra-ui/theme-tools";
+import themeSizes from "../foundations/sizes";
+var register = {
+  parts: ["container", "excessLabel", "badge", "label"],
+  sizes: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"]
+};
 
-function getSize(size) {
-  var themeSize = sizes[size];
-  var styles = {
-    width: size,
-    height: size,
-    fontSize: "calc(" + (themeSize != null ? themeSize : size) + " / 2.5)"
-  };
-
-  if (size !== "100%") {
-    styles.lineHeight = themeSize != null ? themeSize : size;
-  }
-
-  return {
-    Root: styles,
-    ExcessLabel: styles
-  };
-}
-
-function getRootStyle(props) {
+var baseStyle = function baseStyle(props) {
   var {
     name,
-    theme: t
+    theme
   } = props;
@@ -32,21 +18,6 @@ var bg = name ? randomColor({
   }) : "gray.400";
-  var isBgDark = isDark(bg)(t);
-  var color = name ? isBgDark ? "white" : "gray.800" : "white";
+  var color = name ? isDark(bg)(theme) ? "white" : "gray.800" : "white";
   var borderColor = mode("white", "gray.800")(props);
   return {
-    bg,
-    color,
-    borderColor
-  };
-}
-
-var Avatar = {
-  defaultProps: {
-    size: "md"
-  },
-  baseStyle: props => ({
-    Root: _extends({
-      verticalAlign: "top"
-    }, getRootStyle(props)),
-    Badge: {
+    badge: {
       transform: "translate(25%, 25%)",
@@ -57,28 +28,53 @@ borderRadius: "full",
     },
-    ExcessLabel: {
+    excessLabel: {
       bg: mode("gray.200", "whiteAlpha.400")(props)
+    },
+    container: {
+      bg,
+      color,
+      borderColor,
+      verticalAlign: "top"
     }
-  }),
-  sizes: {
-    "2xs": getSize("4"),
-    xs: getSize("6"),
-    sm: getSize("8"),
-    md: getSize("12"),
-    lg: getSize("16"),
-    xl: getSize("24"),
-    "2xl": getSize("32"),
-    full: getSize("100%")
-  }
+  };
 };
-export var AvatarSizes = {
-  "2xs": "2xs",
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-  "2xl": "2xl",
-  full: "full"
+
+var sizes = {
+  "2xs": getSize("4"),
+  xs: getSize("6"),
+  sm: getSize("8"),
+  md: getSize("12"),
+  lg: getSize("16"),
+  xl: getSize("24"),
+  "2xl": getSize("32"),
+  full: getSize("100%")
 };
-export default Avatar;
+
+function getSize(size) {
+  var themeSize = themeSizes[size];
+  var styles = {
+    width: size,
+    height: size
+  };
+  return {
+    container: _extends({
+      fontSize: "calc(" + (themeSize != null ? themeSize : size) + " / 2.5)"
+    }, styles),
+    excessLabel: styles,
+    label: {
+      fontSize: "calc(" + (themeSize != null ? themeSize : size) + " / 2.5)",
+      lineHeight: size !== "100%" ? themeSize != null ? themeSize : size : undefined
+    }
+  };
+}
+
+var defaultProps = {
+  size: "md"
+};
+var avatar = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes
+};
+export default avatar;
 //# sourceMappingURL=avatar.js.map

dist/esm/components/badge.js

@@ -1,47 +0,8 @@
-import { mode, getColor, ink, transparentize } from "@chakra-ui/theme-tools";
-
-function solid(props) {
-  var {
-    colorScheme: c,
-    theme
-  } = props;
-  var dark = transparentize(c + ".500", 0.6)(theme);
-  return {
-    bg: mode(c + ".500", dark)(props),
-    color: mode("white", "whiteAlpha.800")(props)
-  };
-}
-
-function subtle(props) {
-  var {
-    colorScheme: c,
-    theme
-  } = props;
-  var darkBg = ink(c + ".200", "lowest")(theme);
-  return {
-    bg: mode(c + ".100", darkBg)(props),
-    color: mode(c + ".800", c + ".200")(props)
-  };
-}
-
-function outline(props) {
-  var {
-    colorScheme: c,
-    theme
-  } = props;
-  var dark = transparentize(c + ".200", 0.8)(theme);
-  var light = getColor(theme, c + ".500");
-  var color = mode(light, dark)(props);
-  return {
-    color,
-    boxShadow: "inset 0 0 0px 1px " + color
-  };
-}
-
-var Badge = {
-  defaultProps: {
-    variant: "subtle",
-    colorScheme: "gray"
-  },
-  baseStyle: {
+import { getColor, ink, mode, transparentize } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["container"],
+  variants: ["solid", "subtle", "outline"]
+};
+var baseStyle = {
+  container: {
     paddingX: 1,
@@ -52,15 +13,61 @@ textTransform: "uppercase",
     fontWeight: "bold"
+  }
+};
+var variants = {
+  solid(props) {
+    var {
+      colorScheme: c,
+      theme
+    } = props;
+    var dark = transparentize(c + ".500", 0.6)(theme);
+    return {
+      container: {
+        bg: mode(c + ".500", dark)(props),
+        color: mode("white", "whiteAlpha.800")(props)
+      }
+    };
   },
-  variants: {
-    solid,
-    outline,
-    subtle
+
+  subtle(props) {
+    var {
+      colorScheme: c,
+      theme
+    } = props;
+    var darkBg = ink(c + ".200", "lowest")(theme);
+    return {
+      container: {
+        bg: mode(c + ".100", darkBg)(props),
+        color: mode(c + ".800", c + ".200")(props)
+      }
+    };
+  },
+
+  outline(props) {
+    var {
+      colorScheme: c,
+      theme
+    } = props;
+    var darkColor = transparentize(c + ".200", 0.8)(theme);
+    var lightColor = getColor(theme, c + ".500");
+    var color = mode(lightColor, darkColor)(props);
+    return {
+      container: {
+        color,
+        boxShadow: "inset 0 0 0px 1px " + color
+      }
+    };
   }
+
 };
-export var BadgeVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  outline: "outline"
+var defaultProps = {
+  variant: "subtle",
+  colorScheme: "gray"
 };
+var Badge = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants
+};
 export default Badge;
 //# sourceMappingURL=badge.js.map

dist/esm/components/button.js

 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); }
 
 import { mode, transparentize } from "@chakra-ui/theme-tools";
-
-var grayGhost = props => ({
-  color: mode("inherit", "whiteAlpha.900")(props),
-  _hover: {
-    bg: mode("gray.100", "whiteAlpha.200")(props)
+var register = {
+  parts: ["container", "icon", "spinner"],
+  sizes: ["sm", "md", "lg", "xs"],
+  variants: ["solid", "outline", "ghost", "unstyled"]
+};
+var baseStyle = {
+  spinner: {
+    fontSize: "1em",
+    lineHeight: "normal"
   },
-  _active: {
-    bg: mode("gray.200", "whiteAlpha.300")(props)
+  container: {
+    lineHeight: "1.2",
+    borderRadius: "md",
+    fontWeight: "semibold",
+    _focus: {
+      boxShadow: "outline"
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      boxShadow: "none"
+    }
   }
-});
+};
+/**
+ * Variants Style
+ */
 
+function grayGhost(props) {
+  return {
+    container: {
+      color: mode("inherit", "whiteAlpha.900")(props),
+      _hover: {
+        bg: mode("gray.100", "whiteAlpha.200")(props)
+      },
+      _active: {
+        bg: mode("gray.200", "whiteAlpha.300")(props)
+      }
+    }
+  };
+}
+
 function ghost(props) {
   var {
     colorScheme: c,
-    theme: t
+    theme
   } = props;
   if (c === "gray") return grayGhost(props);
-  var darkHover = transparentize(c + ".200", 0.12)(t);
-  var darkActive = transparentize(c + ".200", 0.24)(t);
+  var darkHover = transparentize(c + ".200", 0.12)(theme);
+  var darkActive = transparentize(c + ".200", 0.24)(theme);
   return {
-    color: mode(c + ".500", c + ".200")(props),
-    bg: "transparent",
-    _hover: {
-      bg: mode(c + ".50", darkHover)(props)
-    },
-    _active: {
-      bg: mode(c + ".100", darkActive)(props)
+    container: {
+      color: mode(c + ".500", c + ".200")(props),
+      bg: "transparent",
+      _hover: {
+        bg: mode(c + ".50", darkHover)(props)
+      },
+      _active: {
+        bg: mode(c + ".100", darkActive)(props)
+      }
     }
@@ -40,6 +73,8 @@ };
   var borderColor = mode("gray.200", "whiteAlpha.300")(props);
-  return _extends({
-    border: "1px solid",
-    borderColor: c === "gray" ? borderColor : "currentColor"
-  }, ghost(props));
+  return {
+    container: _extends({
+      border: "1px solid",
+      borderColor: c === "gray" ? borderColor : "currentColor"
+    }, ghost(props).container)
+  };
 }
@@ -49,8 +84,10 @@
   return {
-    bg: mode("gray.100", "whiteAlpha.200")(props),
-    _hover: {
-      bg: mode("gray.200", "whiteAlpha.300")(props)
-    },
-    _active: {
-      bg: mode("gray.300", "whiteAlpha.400")(props)
+    container: {
+      bg: mode("gray.100", "whiteAlpha.200")(props),
+      _hover: {
+        bg: mode("gray.200", "whiteAlpha.300")(props)
+      },
+      _active: {
+        bg: mode("gray.300", "whiteAlpha.400")(props)
+      }
     }
@@ -66,9 +103,11 @@ };
   return {
-    bg: mode(c + ".500", c + ".200")(props),
-    color: mode("white", "gray.800")(props),
-    _hover: {
-      bg: mode(c + ".600", c + ".300")(props)
-    },
-    _active: {
-      bg: mode(c + ".700", c + ".400")(props)
+    container: {
+      bg: mode(c + ".500", c + ".200")(props),
+      color: mode("white", "gray.800")(props),
+      _hover: {
+        bg: mode(c + ".600", c + ".300")(props)
+      },
+      _active: {
+        bg: mode(c + ".700", c + ".400")(props)
+      }
     }
@@ -83,11 +122,13 @@ };
   return {
-    padding: 0,
-    height: "auto",
-    lineHeight: "normal",
-    color: mode(c + ".500", c + ".200")(props),
-    _hover: {
-      textDecoration: "underline"
-    },
-    _active: {
-      color: mode(c + ".700", c + ".500")(props)
+    container: {
+      padding: 0,
+      height: "auto",
+      lineHeight: "normal",
+      color: mode(c + ".500", c + ".200")(props),
+      _hover: {
+        textDecoration: "underline"
+      },
+      _active: {
+        color: mode(c + ".700", c + ".500")(props)
+      }
     }
@@ -97,57 +138,57 @@ };
 
+var unstyled = {
+  container: {
+    bg: "none",
+    border: 0,
+    color: "inherit",
+    display: "inline",
+    font: "inherit",
+    lineHeight: "inherit",
+    margin: 0,
+    padding: 0
+  }
+};
 var sizes = {
   lg: {
-    height: 12,
-    minWidth: 12,
-    fontSize: "lg",
-    paddingX: 6
+    container: {
+      height: 12,
+      minWidth: 12,
+      fontSize: "lg",
+      paddingX: 6
+    }
   },
   md: {
-    height: 10,
-    minWidth: 10,
-    fontSize: "md",
-    paddingX: 4
+    container: {
+      height: 10,
+      minWidth: 10,
+      fontSize: "md",
+      paddingX: 4
+    }
   },
   sm: {
-    height: 8,
-    minWidth: 8,
-    fontSize: "sm",
-    paddingX: 3
+    container: {
+      height: 8,
+      minWidth: 8,
+      fontSize: "sm",
+      paddingX: 3
+    }
   },
   xs: {
-    height: 6,
-    minWidth: 6,
-    fontSize: "xs",
-    paddingX: 2
+    container: {
+      height: 6,
+      minWidth: 6,
+      fontSize: "xs",
+      paddingX: 2
+    }
   }
 };
-var unstyled = {
-  bg: "none",
-  border: 0,
-  color: "inherit",
-  display: "inline",
-  font: "inherit",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0
+var defaultProps = {
+  variant: "solid",
+  size: "md",
+  colorScheme: "gray"
 };
 var Button = {
-  defaultProps: {
-    variant: "solid",
-    size: "md",
-    colorScheme: "gray"
-  },
-  baseStyle: {
-    lineHeight: "1.2",
-    borderRadius: "md",
-    fontWeight: "semibold",
-    _focus: {
-      boxShadow: "outline"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      boxShadow: "none"
-    }
-  },
+  register,
+  defaultProps,
+  baseStyle,
   sizes,
@@ -162,14 +203,3 @@ variants: {
 };
-export var ButtonSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-  xs: "xs"
-};
-export var ButtonVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  outline: "outline"
-};
 export default Button;
 //# sourceMappingURL=button.js.map

dist/esm/components/checkbox.js

 import { mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["control", "label", "description", "icon"],
+  sizes: ["sm", "md", "lg"]
+};
 
-function checked(props) {
-  var {
-    colorScheme: c
-  } = props;
-  return {
-    bg: mode(c + ".500", c + ".200")(props),
-    borderColor: mode(c + ".500", c + ".200")(props),
-    color: mode("white", "gray.900")(props),
-    _hover: {
-      bg: mode(c + ".600", c + ".300")(props),
-      borderColor: mode(c + ".600", c + ".300")(props)
-    },
-    _disabled: {
-      borderColor: mode("gray.200", "transparent")(props),
-      bg: mode("gray.200", "whiteAlpha.300")(props),
-      color: mode("gray.500", "whiteAlpha.500")(props)
-    }
-  };
-}
-
 var baseStyle = props => {
@@ -28,4 +12,5 @@ var {
   return {
-    Control: {
-      transition: "box-shadow 250ms",
+    control: {
+      width: "100%",
+      transition: "box-shadow 250ms, background-color 250ms",
       border: "2px solid",
@@ -35,3 +20,16 @@ borderRadius: "sm",
       color: "white",
-      _checked: checked(props),
+      _checked: {
+        bg: mode(c + ".500", c + ".200")(props),
+        borderColor: mode(c + ".500", c + ".200")(props),
+        color: mode("white", "gray.900")(props),
+        _hover: {
+          bg: mode(c + ".600", c + ".300")(props),
+          borderColor: mode(c + ".600", c + ".300")(props)
+        },
+        _disabled: {
+          borderColor: mode("gray.200", "transparent")(props),
+          bg: mode("gray.200", "whiteAlpha.300")(props),
+          color: mode("gray.500", "whiteAlpha.500")(props)
+        }
+      },
       _indeterminate: {
@@ -53,6 +51,10 @@ bg: mode(c + ".500", c + ".200")(props),
     },
-    Label: {
+    label: {
+      userSelect: "none",
       _disabled: {
         opacity: 0.4
       }
+    },
+    icon: {
+      fontSize: "0.625rem"
     }
@@ -64,7 +66,7 @@ };
   sm: {
-    Control: {
+    control: {
       height: 3,
       width: 3
     },
-    Label: {
+    label: {
       fontSize: "sm"
@@ -74,7 +76,7 @@ }
   md: {
-    Control: {
+    control: {
       width: 4,
       height: 4
     },
-    Label: {
+    label: {
       fontSize: "md"
@@ -84,7 +86,7 @@ }
   lg: {
-    Control: {
+    control: {
       width: 5,
       height: 5
     },
-    Label: {
+    label: {
       fontSize: "lg"
@@ -94,16 +96,13 @@ }
 };
-var Checkbox = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+};
+var checkbox = {
+  register,
+  defaultProps,
   baseStyle,
   sizes
 };
-export var CheckboxSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md"
-};
-export default Checkbox;
+export default checkbox;
 //# sourceMappingURL=checkbox.js.map

dist/esm/components/close-button.js

 import { mode } from "@chakra-ui/theme-tools";
-var CloseButton = {
-  defaultProps: {
-    size: "md"
-  },
-  baseStyle: props => ({
-    borderRadius: "md",
-    transition: "all 0.2s",
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      boxShadow: "none"
-    },
-    _hover: {
-      bg: mode("blackAlpha.100", "whiteAlpha.100")(props)
-    },
-    _active: {
-      bg: mode("blackAlpha.200", "whiteAlpha.200")(props)
-    },
-    _focus: {
-      boxShadow: "outline"
+var register = {
+  parts: ["icon", "container"],
+  sizes: ["sm", "md", "lg"]
+};
+
+var baseStyle = props => {
+  return {
+    icon: {},
+    container: {
+      borderRadius: "md",
+      transition: "all 0.2s",
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed",
+        boxShadow: "none"
+      },
+      _hover: {
+        bg: mode("blackAlpha.100", "whiteAlpha.100")(props)
+      },
+      _active: {
+        bg: mode("blackAlpha.200", "whiteAlpha.200")(props)
+      },
+      _focus: {
+        boxShadow: "outline"
+      }
     }
-  }),
-  sizes: {
-    lg: {
+  };
+};
+
+var sizes = {
+  lg: {
+    container: {
       width: "40px",
-      height: "40px",
+      height: "40px"
+    },
+    icon: {
       fontSize: "16px"
+    }
+  },
+  md: {
+    container: {
+      width: "32px",
+      height: "32px"
     },
-    md: {
-      width: "32px",
-      height: "32px",
+    icon: {
       fontSize: "12px"
+    }
+  },
+  sm: {
+    container: {
+      width: "24px",
+      height: "24px"
     },
-    sm: {
-      width: "24px",
-      height: "24px",
+    icon: {
       fontSize: "10px"
@@ -42,8 +60,12 @@ }
 };
-export var CloseButtonSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md"
+var defaultProps = {
+  size: "md"
 };
-export default CloseButton;
+var closeButton = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes
+};
+export default closeButton;
 //# sourceMappingURL=close-button.js.map

dist/esm/components/code.js

@@ -1,5 +0,8 @@
-import Badge, { BadgeVariants } from "./badge";
-var Code = {
-  defaultProps: Badge.defaultProps,
-  baseStyle: {
+import badge from "./badge";
+var register = {
+  parts: ["container"],
+  variants: badge.register.variants
+};
+var baseStyle = {
+  container: {
     fontFamily: "mono",
@@ -9,7 +12,13 @@ fontSize: "sm",
     borderRadius: "sm"
-  },
-  variants: Badge.variants
+  }
 };
-export var CodeVariants = BadgeVariants;
-export default Code;
+var variants = badge.variants;
+var defaultProps = badge.defaultProps;
+var code = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants
+};
+export default code;
 //# sourceMappingURL=code.js.map

dist/esm/components/editable.js

 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 base = {
-  fontSize: "inherit",
-  fontWeight: "inherit",
-  textAlign: "inherit",
-  bg: "transparent",
-  transition: "all 0.2s",
+var register = {
+  parts: ["container", "preview", "input"]
+};
+var previewStyle = {
   borderRadius: "md",
-  paddingX: "3px",
-  marginX: "-3px"
+  paddingY: "3px",
+  transition: "all 0.2s"
 };
-var Editable = {
-  baseStyle: {
-    Preview: _extends({}, base, {
-      cursor: "text",
-      display: "inline-block"
-    }),
-    Input: _extends({}, base, {
-      outline: 0,
-      width: "full",
-      _focus: {
-        boxShadow: "outline"
-      },
-      _placeholder: {
-        opacity: 0.6
-      }
-    })
-  }
+var baseStyle = {
+  container: {},
+  preview: previewStyle,
+  input: _extends({}, previewStyle, {
+    width: "full",
+    _focus: {
+      boxShadow: "outline"
+    },
+    _placeholder: {
+      opacity: 0.6
+    }
+  })
 };
-export default Editable;
+var editable = {
+  register,
+  baseStyle
+};
+export default editable;
 //# sourceMappingURL=editable.js.map

dist/esm/components/form.js

 import { mode } from "@chakra-ui/theme-tools";
-var Form = {
-  baseStyle: props => ({
-    Label: {
+var register = {
+  parts: ["label", "errorText", "requiredIndicator", "helperText", "errorIcon"]
+};
+
+var baseStyle = props => {
+  return {
+    label: {
       fontSize: "md",
@@ -15,3 +19,3 @@ marginRight: 3,
     },
-    ErrorText: {
+    errorText: {
       color: mode("red.500", "red.300")(props),
@@ -21,7 +25,7 @@ marginTop: 2,
     },
-    RequiredIndicator: {
+    requiredIndicator: {
       marginLeft: 1,
       color: mode("red.500", "red.300")(props)
     },
-    HelperText: {
+    helperText: {
       marginTop: 2,
@@ -32,9 +36,14 @@ color: mode("gray.500", "whiteAlpha.600")(props),
     },
-    ErrorIcon: {
+    errorIcon: {
       marginRight: "0.5em",
       color: mode("red.500", "red.300")(props)
     }
-  })
+  };
 };
-export default Form;
+
+var form = {
+  register,
+  baseStyle
+};
+export default form;
 //# sourceMappingURL=form.js.map

dist/esm/components/heading.js

@@ -1,27 +0,40 @@
-var Heading = {
-  defaultProps: {
-    size: "xl"
-  },
-  baseStyle: {
+var register = {
+  parts: ["heading"],
+  sizes: ["2xl", "xl", "lg", "md", "sm", "xs"]
+};
+var baseStyle = {
+  heading: {
     fontFamily: "heading",
     lineHeight: "shorter",
     fontWeight: "bold"
+  }
+};
+var sizes = {
+  "2xl": {
+    heading: {
+      fontSize: ["4xl", null, "5xl"]
+    }
   },
-  sizes: {
-    "2xl": {
-      fontSize: ["4xl", null, "5xl"]
-    },
-    xl: {
+  xl: {
+    heading: {
       fontSize: ["3xl", null, "4xl"]
-    },
-    lg: {
+    }
+  },
+  lg: {
+    heading: {
       fontSize: ["xl", null, "2xl"]
-    },
-    md: {
+    }
+  },
+  md: {
+    heading: {
       fontSize: "xl"
-    },
-    sm: {
+    }
+  },
+  sm: {
+    heading: {
       fontSize: "md"
-    },
-    xs: {
+    }
+  },
+  xs: {
+    heading: {
       fontSize: "sm"
@@ -31,11 +44,12 @@ }
 };
-export var HeadingSizes = {
-  "2xl": "2xl",
-  xl: "xl",
-  lg: "lg",
-  md: "md",
-  sm: "sm",
-  xs: "xs"
+var defaultProps = {
+  size: "xl"
 };
-export default Heading;
+var heading = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes
+};
+export default heading;
 //# sourceMappingURL=heading.js.map

dist/esm/components/index.js

@@ -9,8 +9,6 @@ import Accordion from "./accordion";
 import Code from "./code";
-import Divider from "./divider";
 import Modal from "./modal";
+import Drawer from "./drawer";
 import Heading from "./heading";
-import Icon from "./icon";
 import Input from "./input";
-import InputAddon from "./input-addon";
 import Link from "./link";
@@ -36,2 +34,4 @@ import Menu from "./menu";
 import Skeleton from "./skeleton";
+import Breadcrumb from "./breadcumb";
+import SkipLink from "./skip-link";
 export default {
@@ -41,3 +41,3 @@ Accordion,
   Heading,
-  Icon,
+  Breadcrumb,
   Alert,
@@ -48,4 +48,4 @@ Badge,
   Code,
-  Divider,
   Spinner,
+  Drawer,
   Menu,
@@ -56,3 +56,2 @@ Tabs,
   Input,
-  InputAddon,
   Tooltip,
@@ -74,4 +73,5 @@ CloseButton,
   Stat,
-  Skeleton
+  Skeleton,
+  SkipLink
 };
 //# sourceMappingURL=index.js.map

dist/esm/components/input.js

@@ -1,117 +0,17 @@
-import { mode, getColor } from "@chakra-ui/theme-tools";
-
-function getDefaults(props) {
-  var {
-    focusBorderColor: fc,
-    errorBorderColor: ec
-  } = props;
-  return {
-    focusBorderColor: fc || mode("blue.500", "blue.300")(props),
-    errorBorderColor: ec || mode("red.500", "red.300")(props)
-  };
-}
-
-function outline(props) {
-  var {
-    theme
-  } = props;
-  var {
-    focusBorderColor: fc,
-    errorBorderColor: ec
-  } = getDefaults(props);
-  return {
-    border: "1px solid",
-    borderColor: mode("inherit", "whiteAlpha.50")(props),
-    bg: mode("white", "whiteAlpha.100")(props),
-    _hover: {
-      borderColor: mode("gray.300", "whiteAlpha.200")(props)
-    },
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed"
-    },
-    _focus: {
-      zIndex: 1,
-      borderColor: getColor(theme, fc),
-      boxShadow: "0 0 0 1px " + getColor(theme, fc)
-    },
-    _invalid: {
-      borderColor: getColor(theme, ec),
-      boxShadow: "0 0 0 1px " + getColor(theme, ec)
-    }
-  };
-}
-
-function filled(props) {
-  var {
-    theme
-  } = props;
-  var {
-    focusBorderColor: fc,
-    errorBorderColor: ec
-  } = getDefaults(props);
-  return {
-    border: "2px solid",
-    borderColor: "transparent",
-    bg: mode("gray.100", "whiteAlpha.50")(props),
-    _hover: {
-      bg: mode("gray.200", "whiteAlpha.100")(props)
-    },
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all"
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed"
-    },
-    _focus: {
-      zIndex: 1,
-      bg: "transparent",
-      borderColor: getColor(theme, fc)
-    },
-    _invalid: {
-      borderColor: getColor(theme, ec)
-    }
-  };
-}
-
-function flushed(props) {
-  var {
-    theme
-  } = props;
-  var {
-    focusBorderColor: fc,
-    errorBorderColor: ec
-  } = getDefaults(props);
-  return {
-    borderBottom: "2px solid",
-    borderColor: "inherit",
-    borderRadius: 0,
-    paddingX: 0,
-    bg: "transparent",
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all"
-    },
-    _focus: {
-      zIndex: 1,
-      borderColor: getColor(theme, fc)
-    },
-    _invalid: {
-      borderColor: getColor(theme, ec)
-    }
-  };
-}
-
-var unstyled = {
-  bg: "transparent",
-  paddingX: 0,
-  height: "auto"
+import { getColor, mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["field", "addon"],
+  sizes: ["sm", "md", "lg"],
+  variants: ["outline", "flushed", "filled", "unstyled"]
 };
-var sizes = {
+var baseStyle = {
+  field: {
+    width: "100%",
+    outline: 0,
+    position: "relative",
+    appearance: "none",
+    transition: "all 0.2s"
+  }
+};
+var commonSizeStyle = {
   lg: {
@@ -139,34 +39,173 @@ fontSize: "lg",
 };
-var Input = {
-  defaultProps: {
-    size: "md",
-    variant: "outline"
+var sizes = {
+  lg: {
+    field: commonSizeStyle.lg,
+    addon: commonSizeStyle.lg
   },
-  baseStyle: {
-    width: "100%",
-    outline: 0,
-    position: "relative",
-    appearance: "none",
-    transition: "all 0.2s"
+  md: {
+    field: commonSizeStyle.md,
+    addon: commonSizeStyle.md
   },
-  sizes,
-  variants: {
-    outline,
-    filled,
-    flushed,
-    unstyled
+  sm: {
+    field: commonSizeStyle.sm,
+    addon: commonSizeStyle.sm
   }
 };
-export var InputSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+var variants = {
+  outline(props) {
+    var {
+      theme
+    } = props;
+    var {
+      focusBorderColor: fc,
+      errorBorderColor: ec
+    } = getDefaults(props);
+    return {
+      field: {
+        border: "1px solid",
+        borderColor: mode("inherit", "whiteAlpha.50")(props),
+        bg: mode("white", "whiteAlpha.100")(props),
+        _hover: {
+          borderColor: mode("gray.300", "whiteAlpha.200")(props)
+        },
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all"
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed"
+        },
+        _focus: {
+          zIndex: 1,
+          borderColor: getColor(theme, fc),
+          boxShadow: "0 0 0 1px " + getColor(theme, fc)
+        },
+        _invalid: {
+          borderColor: getColor(theme, ec),
+          boxShadow: "0 0 0 1px " + getColor(theme, ec)
+        }
+      },
+      addon: {
+        border: "1px solid",
+        borderColor: mode("inherit", "whiteAlpha.50")(props),
+        bg: mode("gray.100", "whiteAlpha.300")(props)
+      }
+    };
+  },
+
+  filled(props) {
+    var {
+      theme
+    } = props;
+    var {
+      focusBorderColor: fc,
+      errorBorderColor: ec
+    } = getDefaults(props);
+    return {
+      field: {
+        border: "2px solid",
+        borderColor: "transparent",
+        bg: mode("gray.100", "whiteAlpha.50")(props),
+        _hover: {
+          bg: mode("gray.200", "whiteAlpha.100")(props)
+        },
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all"
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed"
+        },
+        _focus: {
+          zIndex: 1,
+          bg: "transparent",
+          borderColor: getColor(theme, fc)
+        },
+        _invalid: {
+          borderColor: getColor(theme, ec)
+        }
+      },
+      addon: {
+        border: "2px solid",
+        borderColor: "transparent",
+        bg: mode("gray.100", "whiteAlpha.50")(props)
+      }
+    };
+  },
+
+  flushed(props) {
+    var {
+      theme
+    } = props;
+    var {
+      focusBorderColor: fc,
+      errorBorderColor: ec
+    } = getDefaults(props);
+    return {
+      field: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
+        borderRadius: 0,
+        paddingX: 0,
+        bg: "transparent",
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all"
+        },
+        _focus: {
+          zIndex: 1,
+          borderColor: getColor(theme, fc)
+        },
+        _invalid: {
+          borderColor: getColor(theme, ec)
+        }
+      },
+      addon: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
+        borderRadius: 0,
+        paddingX: 0,
+        bg: "transparent"
+      }
+    };
+  },
+
+  unstyled: {
+    field: {
+      bg: "transparent",
+      paddingX: 0,
+      height: "auto"
+    },
+    addon: {
+      bg: "transparent",
+      paddingX: 0,
+      height: "auto"
+    }
+  }
 };
-export var InputVariants = {
-  outline: "outline",
-  filled: "filled",
-  flushed: "flushed",
-  unstyled: "unstyled"
+var defaultProps = {
+  size: "md",
+  variant: "outline"
 };
-export default Input;
+var input = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants
+};
+export default input;
+
+function getDefaults(props) {
+  var {
+    focusBorderColor: fc,
+    errorBorderColor: ec
+  } = props;
+  return {
+    focusBorderColor: fc || mode("blue.500", "blue.300")(props),
+    errorBorderColor: ec || mode("red.500", "red.300")(props)
+  };
+}
 //# sourceMappingURL=input.js.map

dist/esm/components/kbd.js

 import { mode } from "@chakra-ui/theme-tools";
-var Kbd = {
-  baseStyle: props => ({
-    bg: mode("gray.100", "whiteAlpha")(props),
-    borderRadius: "md",
-    borderWidth: "1px",
-    borderBottomWidth: "3px",
-    fontSize: "0.8em",
-    fontWeight: "bold",
-    lineHeight: "normal",
-    px: "0.4em",
-    whiteSpace: "nowrap"
-  })
+var register = {
+  parts: ["kbd"]
 };
-export default Kbd;
+
+var baseStyle = props => {
+  return {
+    kbd: {
+      bg: mode("gray.100", "whiteAlpha")(props),
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderBottomWidth: "3px",
+      fontSize: "0.8em",
+      fontWeight: "bold",
+      lineHeight: "normal",
+      px: "0.4em",
+      whiteSpace: "nowrap"
+    }
+  };
+};
+
+var kbd = {
+  register,
+  baseStyle
+};
+export default kbd;
 //# sourceMappingURL=kbd.js.map

dist/esm/components/link.js

@@ -1,3 +0,6 @@
-var Link = {
-  baseStyle: {
+var register = {
+  parts: ["link"]
+};
+var baseStyle = {
+  link: {
     transition: "all 0.15s ease-out",
@@ -21,3 +24,7 @@ cursor: "pointer",
 };
-export default Link;
+var link = {
+  register,
+  baseStyle
+};
+export default link;
 //# sourceMappingURL=link.js.map

dist/esm/components/menu.js

@@ -1,47 +0,37 @@
-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); }
+import { mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["menuList", "menuItem", "menuButton", "groupTitle", "menuDivider", "icon", "command"]
+};
 
-import { mode, copy } from "@chakra-ui/theme-tools";
-import Button from "./button";
-
-var menulist = props => ({
-  bg: mode("#fff", "gray.700")(props),
-  boxShadow: mode("sm", "dark-lg")(props),
-  color: "inherit",
-  outline: 0,
-  minWidth: "3xs",
-  paddingY: "2",
-  zIndex: "1",
-  borderRadius: "md",
-  borderWidth: "1px"
-});
-
-var menuitem = props => ({
-  width: "100%",
-  outline: 0,
-  textDecoration: "none",
-  paddingY: "0.4rem",
-  paddingX: "0.8rem",
-  transition: "background 50ms ease-in 0s",
-  _focus: {
-    bg: mode("gray.100", "whiteAlpha.100")(props)
-  },
-  _active: {
-    bg: mode("gray.200", "whiteAlpha.200")(props)
-  },
-  _expanded: {
-    bg: mode("gray.100", "whiteAlpha.100")(props)
-  },
-  _disabled: {
-    opacity: 0.4,
-    cursor: "not-allowed"
-  }
-});
-
-var Menu = {
-  defaultProps: Button.defaultProps,
-  baseStyle: props => ({
-    MenuButton: Button.baseStyle,
-    MenuList: menulist(props),
-    MenuItem: menuitem(props),
-    MenuGroupTitle: {
+var baseStyle = props => {
+  return {
+    menuList: {
+      bg: mode("#fff", "gray.700")(props),
+      boxShadow: mode("sm", "dark-lg")(props),
+      color: "inherit",
+      minWidth: "3xs",
+      paddingY: "2",
+      zIndex: 1,
+      borderRadius: "md",
+      borderWidth: "1px"
+    },
+    menuItem: {
+      paddingY: "0.4rem",
+      paddingX: "0.8rem",
+      transition: "background 50ms ease-in 0s",
+      _focus: {
+        bg: mode("gray.100", "whiteAlpha.100")(props)
+      },
+      _active: {
+        bg: mode("gray.200", "whiteAlpha.200")(props)
+      },
+      _expanded: {
+        bg: mode("gray.100", "whiteAlpha.100")(props)
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    },
+    groupTitle: {
       marginX: 4,
@@ -51,8 +41,14 @@ marginY: 2,
       fontSize: "sm"
+    },
+    command: {
+      opacity: 0.6
     }
-  }),
-  variants: _extends({}, copy(Button.variants, "MenuButton")),
-  sizes: _extends({}, copy(Button.sizes, "MenuButton"))
+  };
 };
-export default Menu;
+
+var menu = {
+  register,
+  baseStyle
+};
+export default menu;
 //# sourceMappingURL=menu.js.map

dist/esm/components/modal.js

 import { mode } from "@chakra-ui/theme-tools";
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
+var register = {
+  parts: ["overlay", "content", "header", "body", "footer"],
+  sizes: ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"]
+};
 
-var getSize = value => ({
-  Content: {
-    maxWidth: value
-  }
-});
-
-var Modal = {
-  defaultProps: {
-    size: "md"
-  },
-  baseStyle: props => ({
-    Overlay: {
-      bg: "blackAlpha.600"
+var baseStyle = props => {
+  var {
+    isCentered,
+    scrollBehavior
+  } = props;
+  return {
+    overlay: {
+      bg: "blackAlpha.600",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: isCentered ? "center" : "flex-start",
+      overflow: scrollBehavior === "inside" ? "hidden" : "auto"
     },
-    Content: {
+    content: {
       borderRadius: "md",
@@ -26,6 +25,6 @@ bg: mode("white", "gray.700")(props),
       marginY: "3.75rem",
-      maxHeight: props.scrollBehavior === "inside" ? "calc(100vh - 7.5rem)" : undefined,
+      maxHeight: scrollBehavior === "inside" ? "calc(100vh - 7.5rem)" : undefined,
       boxShadow: mode("lg", "dark-lg")(props)
     },
-    Header: {
+    header: {
       paddingX: 6,
@@ -36,39 +35,123 @@ paddingY: 4,
     },
-    Body: {
+    body: {
       paddingX: 6,
-      paddingY: 2
+      paddingY: 2,
+      flex: 1,
+      overflow: scrollBehavior === "inside" ? "auto" : undefined
     },
-    Footer: {
+    footer: {
       paddingX: 6,
       paddingY: 4
     }
-  }),
-  sizes: {
-    xs: getSize("xs"),
-    sm: getSize("sm"),
-    md: getSize("md"),
-    lg: getSize("lg"),
-    xl: getSize("xl"),
-    "2xl": getSize("2xl"),
-    "3xl": getSize("3xl"),
-    "4xl": getSize("4xl"),
-    "5xl": getSize("5xl"),
-    "6xl": getSize("6xl"),
-    full: getSize("full")
+  };
+};
+/**
+ * Since the `maxWidth` prop references theme.sizes internally,
+ * we can leverage that to size our modals.
+ */
+
+
+function getSize(value) {
+  return {
+    content: {
+      maxWidth: value
+    }
+  };
+}
+
+var sizes = {
+  xs: getSize("xs"),
+  sm: getSize("sm"),
+  md: getSize("md"),
+  lg: getSize("lg"),
+  xl: getSize("xl"),
+  "2xl": getSize("2xl"),
+  "3xl": getSize("3xl"),
+  "4xl": getSize("4xl"),
+  "5xl": getSize("5xl"),
+  "6xl": getSize("6xl"),
+  full: getSize("full")
+};
+var defaultProps = {
+  size: "md"
+};
+var transition = {
+  overlay: {
+    timeout: {
+      enter: 150,
+      exit: 100
+    },
+    enter: {
+      transition: {
+        easing: "cubic-bezier(0,0,.2,1)",
+        duration: "150ms",
+        property: "opacity"
+      },
+      from: {
+        opacity: 0.01
+      },
+      to: {
+        opacity: 1
+      }
+    },
+    exit: {
+      transition: {
+        easing: "cubic-bezier(.4,0,1,1)",
+        duration: "100ms",
+        property: "opacity"
+      },
+      from: {
+        opacity: 1
+      },
+      to: {
+        opacity: 0.01
+      }
+    }
+  },
+  content: {
+    addAppearStyles: true,
+    timeout: {
+      enter: 150,
+      exit: 100
+    },
+    enter: {
+      transition: {
+        easing: "cubic-bezier(0,0,.2,1)",
+        duration: "150ms",
+        property: "opacity, transform"
+      },
+      from: {
+        opacity: 0.01,
+        transform: "scale(0.97)"
+      },
+      to: {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    },
+    exit: {
+      transition: {
+        easing: "cubic-bezier(.4,0,1,1)",
+        duration: "100ms",
+        property: "opacity, transform"
+      },
+      from: {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      to: {
+        opacity: 0.01,
+        transform: "scale(0.97)"
+      }
+    }
   }
 };
-export var ModalSizes = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-  "2xl": "2xl",
-  "3xl": "3xl",
-  "4xl": "4xl",
-  "5xl": "5xl",
-  "6xl": "6xl",
-  full: "full"
+var modal = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  transition
 };
-export default Modal;
+export default modal;
 //# sourceMappingURL=modal.js.map

dist/esm/components/number-input.js

@@ -1,12 +0,53 @@
-import { mode } from "@chakra-ui/theme-tools";
+import { mode, runIfFn } from "@chakra-ui/theme-tools";
+import input from "./input";
+var register = {
+  parts: ["field", "stepper", "stepperGroup"],
+  sizes: input.register.sizes,
+  variants: input.register.variants
+};
 
+var baseStyle = props => {
+  return {
+    field: input.baseStyle.field,
+    stepperGroup: {
+      width: "24px"
+    },
+    stepper: {
+      borderLeft: "1px solid",
+      borderColor: mode("inherit", "whiteAlpha.300")(props),
+      color: mode("inherit", "whiteAlpha.800")(props),
+      _active: {
+        bg: mode("gray.200", "whiteAlpha.300")(props)
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      }
+    }
+  };
+};
+
+var sizes = {
+  sm: getSizeStyle("sm"),
+  md: getSizeStyle("md"),
+  lg: getSizeStyle("lg")
+};
+
 function getSizeStyle(size) {
+  var inputPartsStyle = input.sizes[size];
+  var inputStyle = typeof inputPartsStyle !== "function" ? inputPartsStyle == null ? void 0 : inputPartsStyle.field : {};
+  var radius = {
+    lg: "md",
+    md: "md",
+    sm: "sm"
+  };
   return {
-    Stepper: {
+    field: inputStyle,
+    stepper: {
       fontSize: size === "lg" ? "14px" : "10px",
       _first: {
-        borderTopRightRadius: size === "lg" ? 3 : 1
+        borderTopRightRadius: radius[size]
       },
       _last: {
-        borderBottomRightRadius: size === "lg" ? 3 : 1,
+        borderBottomRightRadius: radius[size],
         marginTop: "-1px",
@@ -19,39 +60,33 @@ borderTopWidth: 1
 
-var NumberInput = {
-  defaultProps: {
-    size: "md"
-  },
-  baseStyle: props => ({
-    StepperGroup: {
-      width: "24px",
-      margin: "1px",
-      position: "absolute",
-      right: "0px",
-      height: "calc(100% - 2px)"
-    },
-    Stepper: {
-      borderLeft: "1px solid",
-      borderColor: mode("inherit", "whiteAlpha.300")(props),
-      color: mode("inherit", "whiteAlpha.800")(props),
-      _active: {
-        bg: mode("gray.200", "whiteAlpha.300")(props)
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      }
-    }
+var variants = {
+  outline: props => ({
+    field: getVariantStyle("outline", props)
   }),
-  sizes: {
-    sm: getSizeStyle("sm"),
-    md: getSizeStyle("md"),
-    lg: getSizeStyle("lg")
-  }
+  filled: props => ({
+    field: getVariantStyle("filled", props)
+  }),
+  flushed: props => ({
+    field: getVariantStyle("flushed", props)
+  }),
+  unstyled: props => ({
+    field: getVariantStyle("unstyled", props)
+  })
 };
-export var NumberInputSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+
+function getVariantStyle(variant, props) {
+  var _partsStyle$field;
+
+  var partsStyle = runIfFn(input.variants[variant], props);
+  return (_partsStyle$field = partsStyle == null ? void 0 : partsStyle.field) != null ? _partsStyle$field : {};
+}
+
+var defaultProps = input.defaultProps;
+var numberInput = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants
 };
-export default NumberInput;
+export default numberInput;
 //# sourceMappingURL=number-input.js.map

dist/esm/components/pin-input.js

@@ -1,8 +0,12 @@
-import Input, { InputVariants } from "./input";
-var PinInput = {
-  defaultProps: Input.defaultProps,
-  baseStyle: Input.baseStyle,
-  variants: Input.variants,
-  sizes: {
-    lg: {
+import input from "./input";
+var register = {
+  parts: ["field"],
+  sizes: input.register.sizes,
+  variants: input.register.variants
+};
+var baseStyle = input.baseStyle;
+var variants = input.variants;
+var sizes = {
+  lg: {
+    field: {
       fontSize: "lg",
@@ -12,4 +16,6 @@ width: 12,
       borderRadius: "md"
-    },
-    md: {
+    }
+  },
+  md: {
+    field: {
       fontSize: "md",
@@ -19,4 +25,6 @@ width: 10,
       borderRadius: "md"
-    },
-    sm: {
+    }
+  },
+  sm: {
+    field: {
       fontSize: "sm",
@@ -29,9 +37,11 @@ width: 8,
 };
-export var PinInputSizes = {
-  lg: "lg",
-  md: "md",
-  sm: "sm"
+var defaultProps = input.defaultProps;
+var pinInput = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants,
+  sizes
 };
-export var PinInputVariants = InputVariants;
-export default PinInput;
+export default pinInput;
 //# sourceMappingURL=pin-input.js.map

dist/esm/components/popover.js

@@ -1,5 +0,9 @@
-import { mode } from "@chakra-ui/theme-tools";
-var Popover = {
-  baseStyle: props => ({
-    Content: {
+import { mode, scaleFade } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["content", "header", "body", "footer"]
+};
+
+var baseStyle = props => {
+  return {
+    content: {
       bg: mode("white", "gray.700")(props),
@@ -18,3 +22,3 @@ border: "1px solid",
     },
-    Header: {
+    header: {
       paddingX: 3,
@@ -24,7 +28,7 @@ paddingY: 2,
     },
-    Body: {
+    body: {
       paddingX: 3,
       paddingY: 2
     },
-    Footer: {
+    footer: {
       paddingX: 3,
@@ -34,5 +38,14 @@ paddingY: 2,
     }
-  })
+  };
 };
-export default Popover;
+
+var transition = {
+  content: scaleFade
+};
+var popover = {
+  register,
+  baseStyle,
+  transition
+};
+export default popover;
 //# sourceMappingURL=popover.js.map

dist/esm/components/progress.js

 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); }
 
-import { mode, getColor } from "@chakra-ui/theme-tools";
+import { generateStripe, getColor, mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["track", "filledTrack", "label"],
+  sizes: ["xs", "sm", "md", "lg"]
+};
 
-var getProgressBg = props => {
+var baseStyle = props => {
+  return {
+    label: {
+      lineHeight: "1",
+      fontSize: "0.25em",
+      fontWeight: "bold",
+      color: "white"
+    },
+    track: {
+      bg: mode("gray.100", "whiteAlpha.300")(props)
+    },
+    filledTrack: _extends({
+      transition: "all 0.3s"
+    }, getFilledTrackStyle(props))
+  };
+};
+
+function getFilledTrackStyle(props) {
   var {
     colorScheme: c,
     theme: t,
-    isIndeterminate
+    isIndeterminate,
+    hasStripe
   } = props;
+  var stripeStyle = mode(generateStripe(), generateStripe("1rem", "rgba(0,0,0,0.1)"))(props);
   var bg = mode(c + ".500", c + ".200")(props);
   var gradient = "linear-gradient(\n    to right,\n    transparent 0%,\n    " + getColor(t, bg) + " 50%,\n    transparent 100%\n  )";
-  return {
+  var shouldAddStripe = !isIndeterminate && hasStripe;
+  return _extends({}, shouldAddStripe && stripeStyle, {
     bg: isIndeterminate ? gradient : bg
-  };
-};
+  });
+}
 
 var sizes = {
   xs: {
-    Track: {
+    track: {
       height: "0.25rem"
@@ -25,3 +49,3 @@ }
   sm: {
-    Track: {
+    track: {
       height: "0.5rem"
@@ -31,3 +55,3 @@ }
   md: {
-    Track: {
+    track: {
       height: "0.75rem"
@@ -37,3 +61,3 @@ }
   lg: {
-    Track: {
+    track: {
       height: "1rem"
@@ -43,29 +67,13 @@ }
 };
-var Progress = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
-  baseStyle: props => ({
-    Label: {
-      lineHeight: "1",
-      fontSize: "0.25em"
-    },
-    Track: {
-      bg: mode("gray.100", "whiteAlpha.300")(props)
-    },
-    Indicator: _extends({
-      height: "100%",
-      transition: "all 0.3s"
-    }, getProgressBg(props))
-  }),
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+};
+var progress = {
+  register,
+  defaultProps,
+  baseStyle,
   sizes
 };
-export var ProgressSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-  xs: "xs"
-};
-export default Progress;
+export default progress;
 //# sourceMappingURL=progress.js.map

dist/esm/components/radio.js

 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); }
 
-import Checkbox, { CheckboxSizes } from "./checkbox";
-var _baseStyle = Checkbox.baseStyle;
-var Radio = {
-  defaultProps: Checkbox.defaultProps,
-  baseStyle: props => ({
-    Control: _extends({}, _baseStyle(props).Control, {
+import { runIfFn } from "@chakra-ui/theme-tools";
+import checkbox from "./checkbox";
+var register = {
+  parts: ["control", "label"],
+  sizes: checkbox.register.sizes
+};
+
+var baseStyle = props => {
+  var {
+    label,
+    control
+  } = runIfFn(checkbox.baseStyle, props);
+  return {
+    label,
+    control: _extends({}, control, {
       borderRadius: "full",
-      _checked: _extends({}, _baseStyle(props).Control["_checked"], {
+      _checked: _extends({}, control == null ? void 0 : control["_checked"], {
         _before: {
@@ -21,16 +30,23 @@ content: "\"\"",
       })
-    }),
-    Label: _baseStyle(props).Label
-  }),
-  sizes: _extends({}, Checkbox.sizes, {
-    sm: {
-      Control: {
-        width: 3,
-        height: 3
-      }
+    })
+  };
+};
+
+var sizes = _extends({}, checkbox.sizes, {
+  sm: {
+    control: {
+      width: 3,
+      height: 3
     }
-  })
+  }
+});
+
+var defaultProps = checkbox.defaultProps;
+var radio = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes
 };
-export var RadioSizes = CheckboxSizes;
-export default Radio;
+export default radio;
 //# sourceMappingURL=radio.js.map

dist/esm/components/select.js

 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); }
 
-import Input, { InputVariants, InputSizes } from "./input";
-
-var Select = _extends({}, Input, {
-  baseStyle: _extends({}, Input.baseStyle, {
+import input from "./input";
+var register = {
+  parts: ["field", "icon"],
+  sizes: input.register.sizes,
+  variants: input.register.variants
+};
+var baseStyle = {
+  field: _extends({}, input.baseStyle.field, {
     appearance: "none",
@@ -11,8 +15,22 @@ paddingRight: "2rem",
     lineHeight: "normal"
-  })
-});
-
-export var SelectSizes = InputSizes;
-export var SelectVariants = InputVariants;
-export default Select;
+  }),
+  icon: {
+    color: "currentColor",
+    fontSize: "1.25rem",
+    _disabled: {
+      opacity: 0.5
+    }
+  }
+};
+var sizes = input.sizes;
+var variants = input.variants;
+var defaultProps = input.defaultProps;
+var select = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants
+};
+export default select;
 //# sourceMappingURL=select.js.map

dist/esm/components/skeleton.js

@@ -1,17 +0,8 @@
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n  from {\n    border-color: ", ";\n    background: ", ";\n  }\n  to {\n    border-color: ", ";\n    background: ", ";\n  }\n"]);
+import { keyframes } from "@chakra-ui/system";
+import { getColor, mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["skeleton"]
+};
 
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
-
-import { keyframes } from "@chakra-ui/system";
-import { mode, getColor } from "@chakra-ui/theme-tools";
-export var frame = (start, end) => keyframes(_templateObject(), start, start, end, end);
-export function baseStyle(props) {
+var baseStyle = props => {
   var {
@@ -26,13 +17,29 @@ startColor = mode("gray.100", "gray.800")(props),
   return {
-    opacity: 0.7,
-    borderRadius: "2px",
-    borderColor: start,
-    background: end,
-    animation: speed + "s linear infinite alternate " + frame(start, end)
+    skeleton: {
+      opacity: 0.7,
+      borderRadius: "2px",
+      borderColor: start,
+      background: end,
+      animation: speed + "s linear infinite alternate " + frame(start, end)
+    }
   };
+};
+
+var skeleton = {
+  register,
+  baseStyle
+};
+export default skeleton;
+export function frame(startColor, endColor) {
+  return keyframes({
+    from: {
+      borderColor: startColor,
+      background: startColor
+    },
+    to: {
+      borderColor: endColor,
+      background: endColor
+    }
+  });
 }
-var Skeleton = {
-  baseStyle: baseStyle
-};
-export default Skeleton;
 //# sourceMappingURL=skeleton.js.map

dist/esm/components/slider.js

 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); }
 
 import { mode, orient } from "@chakra-ui/theme-tools";
-var Slider = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
-  sizes: {
-    lg: props => ({
-      Thumb: {
-        width: "16px",
-        height: "16px"
-      },
-      Track: orient({
-        orientation: props.orientation,
-        horizontal: {
-          height: "4px"
-        },
-        vertical: {
-          width: "4px"
-        }
-      })
-    }),
-    md: props => ({
-      Thumb: {
-        width: "14px",
-        height: "14px"
-      },
-      Track: orient({
-        orientation: props.orientation,
-        horizontal: {
-          height: "4px"
-        },
-        vertical: {
-          width: "4px"
-        }
-      })
-    }),
-    sm: props => ({
-      Thumb: {
-        width: "10px",
-        height: "10px"
-      },
-      Track: orient({
-        orientation: props.orientation,
-        horizontal: {
-          height: "2px"
-        },
-        vertical: {
-          width: "2px"
-        }
-      })
-    })
-  },
-  baseStyle: props => ({
-    Root: _extends({
+var register = {
+  parts: ["container", "thumb", "track", "filledTrack"],
+  sizes: ["sm", "md", "lg"]
+};
+
+var baseStyle = props => {
+  return {
+    container: _extends({
       _disabled: {
@@ -72,3 +26,3 @@ opacity: 0.6,
     })),
-    Track: {
+    track: {
       borderRadius: "sm",
@@ -80,3 +34,3 @@ bg: mode("gray.200", "whiteAlpha.200")(props),
     },
-    Thumb: _extends({
+    thumb: _extends({
       zIndex: 1,
@@ -112,13 +66,72 @@ borderRadius: "full",
     })),
-    FilledTrack: {
+    filledTrack: {
       bg: mode(props.colorScheme + ".500", props.colorScheme + ".200")(props)
     }
-  })
+  };
 };
-export var SliderSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md"
+
+var sizes = {
+  lg: function lg(props) {
+    return {
+      thumb: {
+        width: "16px",
+        height: "16px"
+      },
+      track: orient({
+        orientation: props.orientation,
+        horizontal: {
+          height: "4px"
+        },
+        vertical: {
+          width: "4px"
+        }
+      })
+    };
+  },
+  md: function md(props) {
+    return {
+      thumb: {
+        width: "14px",
+        height: "14px"
+      },
+      track: orient({
+        orientation: props.orientation,
+        horizontal: {
+          height: "4px"
+        },
+        vertical: {
+          width: "4px"
+        }
+      })
+    };
+  },
+  sm: function sm(props) {
+    return {
+      thumb: {
+        width: "10px",
+        height: "10px"
+      },
+      track: orient({
+        orientation: props.orientation,
+        horizontal: {
+          height: "2px"
+        },
+        vertical: {
+          width: "2px"
+        }
+      })
+    };
+  }
 };
-export default Slider;
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+};
+var slider = {
+  register,
+  defaultProps,
+  sizes,
+  baseStyle
+};
+export default slider;
 //# sourceMappingURL=slider.js.map

dist/esm/components/spinner.js

@@ -1,23 +0,32 @@
-var Spinner = {
-  defaultProps: {
-    size: "md"
-  },
-  sizes: {
-    xs: {
+var register = {
+  parts: ["spinner"],
+  sizes: ["xs", "sm", "md", "lg", "xl"]
+};
+var sizes = {
+  xs: {
+    spinner: {
       width: "0.75rem",
       height: "0.75rem"
-    },
-    sm: {
+    }
+  },
+  sm: {
+    spinner: {
       width: "1rem",
       height: "1rem"
-    },
-    md: {
+    }
+  },
+  md: {
+    spinner: {
       width: "1.5rem",
       height: "1.5rem"
-    },
-    lg: {
+    }
+  },
+  lg: {
+    spinner: {
       width: "2rem",
       height: "2rem"
-    },
-    xl: {
+    }
+  },
+  xl: {
+    spinner: {
       width: "3rem",
@@ -28,10 +37,11 @@ height: "3rem"
 };
-export var SpinnerSizes = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl"
+var defaultProps = {
+  size: "md"
 };
-export default Spinner;
+var spinner = {
+  register,
+  defaultProps,
+  sizes
+};
+export default spinner;
 //# sourceMappingURL=spinner.js.map

dist/esm/components/stat.js

@@ -1,41 +0,51 @@
-var Stat = {
-  defaultProps: {
-    size: "md"
+var register = {
+  parts: ["label", "helpText", "number", "container", "icon"],
+  sizes: ["sm", "md", "lg"]
+};
+var baseStyle = {
+  container: {
+    flex: "1",
+    paddingRight: 4
   },
-  baseStyle: {
-    Label: {
-      fontWeight: "medium"
+  label: {
+    fontWeight: "medium"
+  },
+  helpText: {
+    opacity: 0.8,
+    marginBottom: 2
+  },
+  number: {
+    verticalAlign: "baseline",
+    fontWeight: "semibold"
+  },
+  icon: {
+    marginRight: 1,
+    width: "14px",
+    height: "14px",
+    verticalAlign: "middle"
+  }
+};
+var sizes = {
+  md: {
+    label: {
+      fontSize: "sm"
     },
-    HelpText: {
-      opacity: 0.8,
-      marginBottom: 2
+    helpText: {
+      fontSize: "sm"
     },
-    Number: {
-      verticalAlign: "baseline",
-      fontWeight: "semibold"
+    number: {
+      fontSize: "2xl"
     }
-  },
-
-  /**
-   * Only one size specified but you can add more,
-   * and style each part.
-   */
-  sizes: {
-    md: {
-      Label: {
-        fontSize: "sm"
-      },
-      HelpText: {
-        fontSize: "sm"
-      },
-      Number: {
-        fontSize: "2xl"
-      }
-    }
   }
 };
-export var StatSizes = {
-  md: "md"
+var defaultProps = {
+  size: "md"
 };
-export default Stat;
+var stat = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes
+};
+export default stat;
 //# sourceMappingURL=stat.js.map

dist/esm/components/switch.js

 import { mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["track", "thumb"],
+  sizes: ["sm", "md", "lg"]
+};
+
+var baseStyle = props => {
+  var {
+    colorScheme: c
+  } = props;
+  return {
+    track: {
+      borderRadius: "full",
+      padding: "2px",
+      transition: "all 120ms",
+      bg: mode("gray.300", "whiteAlpha.400")(props),
+      _focus: {
+        boxShadow: "outline"
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed"
+      },
+      _checked: {
+        bg: mode(c + ".500", c + ".200")(props)
+      }
+    },
+    thumb: {
+      bg: "white",
+      transition: "transform 250ms",
+      borderRadius: "full",
+      transform: "translateX(0)"
+    }
+  };
+};
+
 var sizes = {
   sm: {
-    Track: {
+    track: {
       width: "1.375rem",
       height: "0.75rem"
     },
-    Thumb: {
+    thumb: {
       width: "0.75rem",
@@ -17,7 +52,7 @@ height: "0.75rem",
   md: {
-    Track: {
+    track: {
       width: "1.875rem",
       height: "1rem"
     },
-    Thumb: {
+    thumb: {
       width: "1rem",
@@ -31,7 +66,7 @@ height: "1rem",
   lg: {
-    Track: {
+    track: {
       width: "2.875rem",
       height: "1.5rem"
     },
-    Thumb: {
+    thumb: {
       width: "1.5rem",
@@ -45,39 +80,14 @@ height: "1.5rem",
 };
-var Switch = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue"
-  },
-  baseStyle: props => ({
-    Track: {
-      borderRadius: "full",
-      padding: "2px",
-      transition: "all 120ms",
-      bg: mode("gray.300", "whiteAlpha.400")(props),
-      _focus: {
-        boxShadow: "outline"
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      },
-      _checked: {
-        bg: mode(props.colorScheme + ".500", props.colorScheme + ".200")(props)
-      }
-    },
-    Thumb: {
-      bg: "white",
-      transition: "transform 250ms",
-      borderRadius: "full",
-      transform: "translateX(0)"
-    }
-  }),
+var defaultProps = {
+  size: "md",
+  colorScheme: "blue"
+}; // can't use the `switch` here since it's a reserved keyword
+
+var _switch = {
+  register,
+  defaultProps,
+  baseStyle,
   sizes
 };
-export var SwitchSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
-};
-export default Switch;
+export default _switch;
 //# sourceMappingURL=switch.js.map

dist/esm/components/tabs.js

@@ -1,129 +0,21 @@
-import { mode, getColor } from "@chakra-ui/theme-tools";
+import { getColor, mode } from "@chakra-ui/theme-tools";
+var register = {
+  parts: ["tablist", "tab", "tabpanel", "indicator"],
+  sizes: ["sm", "md", "lg"],
+  variants: ["line", "enclosed", "soft-rounded", "enclosed-colored", "solid-rounded", "unstyled"]
+};
+var alignments = {
+  end: "flex-end",
+  center: "center",
+  start: "flex-start"
+};
 
-function line(props) {
+var baseStyle = props => {
   var {
-    colorScheme: c
+    align = "start",
+    isFitted
   } = props;
   return {
-    TabList: {
-      borderBottom: "2px solid",
-      borderColor: "inherit"
-    },
-    Tab: {
-      borderBottom: "2px solid",
-      borderColor: "transparent",
-      marginBottom: "-2px",
-      _selected: {
-        color: mode(c + ".600", c + ".300")(props),
-        borderColor: "currentColor"
-      },
-      _active: {
-        bg: mode("gray.200", "whiteAlpha.300")(props)
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed"
-      }
-    }
-  };
-}
-
-function enclosed(props) {
-  var {
-    colorScheme: c
-  } = props;
-  return {
-    Tab: {
-      borderTopRadius: "md",
-      border: "1px solid",
-      borderColor: "transparent",
-      marginBottom: "-1px",
-      _selected: {
-        color: mode(c + ".600", c + ".300")(props),
-        borderColor: "inherit",
-        borderBottomColor: mode("white", "gray.800")(props)
-      }
-    },
-    TabList: {
-      marginBottom: "-1px",
-      borderBottom: "1px solid",
-      borderColor: "inherit"
-    }
-  };
-}
-
-function enclosedColored(props) {
-  var {
-    colorScheme: c
-  } = props;
-  return {
-    Tab: {
-      border: "1px solid",
-      borderColor: "inherit",
-      bg: mode("gray.50", "whiteAlpha.50")(props),
-      marginBottom: "-1px",
-      _notLast: {
-        mr: "-1px"
-      },
-      _selected: {
-        bg: mode("#fff", "gray.800")(props),
-        color: mode(c + ".600", c + ".300")(props),
-        borderColor: "inherit",
-        borderTopColor: "currentColor",
-        borderBottomColor: "transparent"
-      }
-    },
-    TabList: {
-      marginBottom: "-1px",
-      borderBottom: "1px solid",
-      borderColor: "inherit"
-    }
-  };
-}
-
-function softRounded(props) {
-  var {
-    colorScheme: c,
-    theme
-  } = props;
-  return {
-    Tab: {
-      borderRadius: "full",
-      fontWeight: "semibold",
-      color: "gray.600",
-      _selected: {
-        color: getColor(theme, c + ".700"),
-        bg: getColor(theme, c + ".100")
-      }
-    },
-    TabList: {}
-  };
-}
-
-function solidRounded(props) {
-  var {
-    colorScheme: c
-  } = props;
-  return {
-    Tab: {
-      borderRadius: "full",
-      fontWeight: "semibold",
-      color: mode("gray.600", "inherit")(props),
-      _selected: {
-        color: mode("#fff", "gray.800")(props),
-        bg: mode(c + ".600", c + ".300")(props)
-      }
-    },
-    TabList: {}
-  };
-}
-
-var Tabs = {
-  defaultProps: {
-    size: "md",
-    variant: "line",
-    colorScheme: "blue"
-  },
-  baseStyle: {
-    Tab: {
+    tab: {
+      flex: isFitted ? 1 : undefined,
       transition: "all 0.2s",
@@ -135,53 +27,162 @@ _focus: {
     },
-    TabList: {},
-    TabPanel: {
+    tablist: {
+      justifyContent: alignments[align]
+    },
+    tabpanel: {
       padding: 4
     }
+  };
+};
+
+var sizes = {
+  sm: {
+    tab: {
+      paddingY: "0.25rem",
+      paddingX: "1rem",
+      fontSize: "0.85rem"
+    }
   },
-  sizes: {
-    sm: {
-      Tab: {
-        paddingY: "0.25rem",
-        paddingX: "1rem",
-        fontSize: "0.85rem"
+  md: {
+    tab: {
+      fontSize: "1rem",
+      paddingY: "0.5rem",
+      paddingX: "1rem"
+    }
+  },
+  lg: {
+    tab: {
+      fontSize: "1.15rem",
+      paddingY: "0.75rem",
+      paddingX: "1rem"
+    }
+  }
+};
+var variants = {
+  line: function line(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      tablist: {
+        borderBottom: "2px solid",
+        borderColor: "inherit"
+      },
+      tab: {
+        borderBottom: "2px solid",
+        borderColor: "transparent",
+        marginBottom: "-2px",
+        _selected: {
+          color: mode(c + ".600", c + ".300")(props),
+          borderColor: "currentColor"
+        },
+        _active: {
+          bg: mode("gray.200", "whiteAlpha.300")(props)
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed"
+        }
       }
-    },
-    md: {
-      Tab: {
-        fontSize: "1rem",
-        paddingY: "0.5rem",
-        paddingX: "1rem"
+    };
+  },
+  enclosed: function enclosed(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      tab: {
+        borderTopRadius: "md",
+        border: "1px solid",
+        borderColor: "transparent",
+        marginBottom: "-1px",
+        _selected: {
+          color: mode(c + ".600", c + ".300")(props),
+          borderColor: "inherit",
+          borderBottomColor: mode("white", "gray.800")(props)
+        }
+      },
+      tablist: {
+        marginBottom: "-1px",
+        borderBottom: "1px solid",
+        borderColor: "inherit"
       }
-    },
-    lg: {
-      Tab: {
-        fontSize: "1.15rem",
-        paddingY: "0.75rem",
-        paddingX: "1rem"
+    };
+  },
+  "enclosed-colored": function enclosedColored(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      tab: {
+        border: "1px solid",
+        borderColor: "inherit",
+        bg: mode("gray.50", "whiteAlpha.50")(props),
+        marginBottom: "-1px",
+        _notLast: {
+          mr: "-1px"
+        },
+        _selected: {
+          bg: mode("#fff", "gray.800")(props),
+          color: mode(c + ".600", c + ".300")(props),
+          borderColor: "inherit",
+          borderTopColor: "currentColor",
+          borderBottomColor: "transparent"
+        }
+      },
+      tablist: {
+        marginBottom: "-1px",
+        borderBottom: "1px solid",
+        borderColor: "inherit"
       }
-    }
+    };
   },
-  variants: {
-    line: line,
-    enclosed: enclosed,
-    "soft-rounded": softRounded,
-    "enclosed-colored": enclosedColored,
-    "solid-rounded": solidRounded,
-    unstyled: {}
-  }
+  "soft-rounded": function softRounded(props) {
+    var {
+      colorScheme: c,
+      theme
+    } = props;
+    return {
+      tab: {
+        borderRadius: "full",
+        fontWeight: "semibold",
+        color: "gray.600",
+        _selected: {
+          color: getColor(theme, c + ".700"),
+          bg: getColor(theme, c + ".100")
+        }
+      },
+      tablist: {}
+    };
+  },
+  "solid-rounded": function solidRounded(props) {
+    var {
+      colorScheme: c
+    } = props;
+    return {
+      tab: {
+        borderRadius: "full",
+        fontWeight: "semibold",
+        color: mode("gray.600", "inherit")(props),
+        _selected: {
+          color: mode("#fff", "gray.800")(props),
+          bg: mode(c + ".600", c + ".300")(props)
+        }
+      }
+    };
+  },
+  unstyled: {}
 };
-export var TabSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+var defaultProps = {
+  size: "md",
+  variant: "line",
+  colorScheme: "blue"
 };
-export var TabVariants = {
-  line: "line",
-  enclosed: "enclosed",
-  "soft-rounded": "soft-rounded",
-  "enclosed-colored": "enclosed-colored",
-  "solid-rounded": "solid-rounded",
-  unstyled: "unstyled"
+var tabs = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants
 };
-export default Tabs;
+export default tabs;
 //# sourceMappingURL=tabs.js.map

dist/esm/components/tag.js

@@ -1,9 +0,9 @@
-import Badge, { BadgeVariants } from "./badge";
-var Tag = {
-  defaultProps: {
-    size: "lg",
-    variant: "subtle",
-    colorScheme: "gray"
-  },
-  baseStyle: {
+import badge from "./badge";
+var register = {
+  parts: ["container", "label", "closeButton"],
+  sizes: ["sm", "md", "lg"],
+  variants: badge.register.variants
+};
+var baseStyle = {
+  container: {
     outline: 0,
@@ -14,4 +14,30 @@ _focus: {
   },
-  sizes: {
-    sm: {
+  label: {
+    lineHeight: 1.2
+  },
+  closeButton: {
+    fontSize: "1em",
+    width: "1.25rem",
+    height: "1.25rem",
+    borderRadius: "sm",
+    marginLeft: "0.375rem",
+    opacity: 0.5,
+    _disabled: {
+      opacity: 0.4
+    },
+    _focus: {
+      boxShadow: "outline",
+      bg: "rgba(0, 0, 0, 0.14)"
+    },
+    _hover: {
+      opacity: 0.8
+    },
+    _active: {
+      opacity: 1
+    }
+  }
+};
+var sizes = {
+  sm: {
+    container: {
       minHeight: "1.25rem",
@@ -22,4 +48,6 @@ minWidth: "1.25rem",
       borderRadius: "sm"
-    },
-    md: {
+    }
+  },
+  md: {
+    container: {
       minHeight: "1.5rem",
@@ -30,4 +58,6 @@ minWidth: "1.5rem",
       paddingX: 2
-    },
-    lg: {
+    }
+  },
+  lg: {
+    container: {
       minHeight: 8,
@@ -39,12 +69,18 @@ minWidth: 8,
     }
-  },
-  variants: Badge.variants
+  }
 };
-export var TagSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg"
+var variants = badge.variants;
+var defaultProps = {
+  size: "lg",
+  variant: "subtle",
+  colorScheme: "gray"
 };
-export var TagVariants = BadgeVariants;
-export default Tag;
+var tag = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants
+};
+export default tag;
 //# sourceMappingURL=tag.js.map

dist/esm/components/textarea.js

 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); }
 
-import Input, { InputSizes, InputVariants } from "./input";
-
-var Textarea = _extends({}, Input, {
-  baseStyle: _extends({}, Input.baseStyle, {
+import input from "./input";
+var register = {
+  parts: ["field"],
+  variants: input.register.variants,
+  sizes: input.register.sizes
+};
+var baseStyle = {
+  field: _extends({}, input.baseStyle.field, {
     paddingY: "8px",
@@ -11,7 +15,10 @@ minHeight: "80px",
   })
+};
+
+var textarea = _extends({}, input, {
+  register,
+  baseStyle
 });
 
-export var TextareaVariants = InputVariants;
-export var TextareaSizes = InputSizes;
-export default Textarea;
+export default textarea;
 //# sourceMappingURL=textarea.js.map

dist/esm/components/tooltip.js

 import { mode } from "@chakra-ui/theme-tools";
-var Tooltip = {
-  baseStyle: props => ({
-    paddingX: "8px",
-    paddingY: "2px",
-    bg: mode("gray.700", "gray.300")(props),
-    color: mode("whiteAlpha.900", "gray.900")(props),
-    borderRadius: "sm",
-    fontWeight: "medium",
-    pointerEvents: "none",
-    fontSize: "sm",
-    boxShadow: "md",
-    maxWidth: "320px"
-  })
+var register = {
+  parts: ["arrow", "container"]
 };
-export default Tooltip;
+
+var baseStyle = props => {
+  return {
+    container: {
+      paddingX: "8px",
+      paddingY: "2px",
+      bg: mode("gray.700", "gray.300")(props),
+      color: mode("whiteAlpha.900", "gray.900")(props),
+      borderRadius: "sm",
+      fontWeight: "medium",
+      pointerEvents: "none",
+      fontSize: "sm",
+      boxShadow: "md",
+      maxWidth: "320px"
+    }
+  };
+};
+
+var transition = {
+  container: {
+    timeout: 120,
+    transition: {
+      easing: "ease-in-out",
+      duration: "120ms",
+      property: "common"
+    },
+    enter: {
+      from: {
+        opacity: 0.01,
+        transform: "scale(0.9)"
+      },
+      to: {
+        opacity: 1,
+        transform: "scale(1)"
+      }
+    },
+    exit: {
+      from: {
+        opacity: 1,
+        transform: "scale(1)"
+      },
+      to: {
+        opacity: 0.01,
+        transform: "scale(0.9)"
+      }
+    }
+  }
+};
+var tooltip = {
+  register,
+  baseStyle,
+  transition
+};
+export default tooltip;
 //# sourceMappingURL=tooltip.js.map

dist/esm/foundations/colors.js

 var colors = {
   transparent: "transparent",
   current: "currentColor",
-  black: "#000",
-  white: "#fff",
+  black: "#000000",
+  white: "#FFFFFF",
   whiteAlpha: {
@@ -43,12 +43,12 @@ 50: "rgba(255, 255, 255, 0.04)",
   red: {
-    50: "#fff5f5",
-    100: "#fed7d7",
-    200: "#feb2b2",
-    300: "#fc8181",
-    400: "#f56565",
-    500: "#e53e3e",
-    600: "#c53030",
-    700: "#9b2c2c",
+    50: "#FFF5F5",
+    100: "#FED7D7",
+    200: "#FEB2B2",
+    300: "#FC8181",
+    400: "#F56565",
+    500: "#E53E3E",
+    600: "#C53030",
+    700: "#9B2C2C",
     800: "#822727",
-    900: "#63171b"
+    900: "#63171B"
   },
@@ -68,10 +68,10 @@ orange: {
   yellow: {
-    50: "#fffff0",
-    100: "#fefcbf",
-    200: "#faf089",
-    300: "#f6e05e",
-    400: "#ecc94b",
-    500: "#d69e2e",
-    600: "#b7791f",
-    700: "#975a16",
+    50: "#FFFFF0",
+    100: "#FEFCBF",
+    200: "#FAF089",
+    300: "#F6E05E",
+    400: "#ECC94B",
+    500: "#D69E2E",
+    600: "#B7791F",
+    700: "#975A16",
     800: "#744210",
@@ -81,11 +81,11 @@ 900: "#5F370E"
   green: {
-    50: "#f0fff4",
-    100: "#c6f6d5",
-    200: "#9ae6b4",
-    300: "#68d391",
-    400: "#48bb78",
-    500: "#38a169",
-    600: "#2f855a",
+    50: "#F0FFF4",
+    100: "#C6F6D5",
+    200: "#9AE6B4",
+    300: "#68D391",
+    400: "#48BB78",
+    500: "#38A169",
+    600: "#2F855A",
     700: "#276749",
-    800: "#22543d",
+    800: "#22543D",
     900: "#1C4532"
@@ -106,12 +106,12 @@ },
   blue: {
-    50: "#ebf8ff",
-    100: "#ceedff",
-    200: "#90cdf4",
-    300: "#63b3ed",
-    400: "#4299e1",
-    500: "#3182ce",
-    600: "#2a69ac",
-    700: "#1e4e8c",
-    800: "#153e75",
-    900: "#1a365d"
+    50: "#EBF8FF",
+    100: "#CEEDFF",
+    200: "#90CDF4",
+    300: "#63B3ED",
+    400: "#4299E1",
+    500: "#3182CE",
+    600: "#2A69AC",
+    700: "#1E4E8C",
+    800: "#153E75",
+    900: "#1A365D"
   },
@@ -131,22 +131,22 @@ cyan: {
   purple: {
-    50: "#faf5ff",
-    100: "#e9d8fd",
-    200: "#d6bcfa",
-    300: "#b794f4",
-    400: "#9f7aea",
-    500: "#805ad5",
-    600: "#6b46c1",
-    700: "#553c9a",
-    800: "#44337a",
+    50: "#FAF5FF",
+    100: "#E9D8FD",
+    200: "#D6BCFA",
+    300: "#B794F4",
+    400: "#9F7AEA",
+    500: "#805AD5",
+    600: "#6B46C1",
+    700: "#553C9A",
+    800: "#44337A",
     900: "#322659"
   },
   pink: {
-    50: "#fff5f7",
-    100: "#fed7e2",
-    200: "#fbb6ce",
-    300: "#f687b3",
-    400: "#ed64a6",
-    500: "#d53f8c",
-    600: "#b83280",
-    700: "#97266d",
+    50: "#FFF5F7",
+    100: "#FED7E2",
+    200: "#FBB6CE",
+    300: "#F687B3",
+    400: "#ED64A6",
+    500: "#D53F8C",
+    600: "#B83280",
+    700: "#97266D",
     800: "#702459",
@@ -192,36 +192,36 @@ 900: "#521B41"
   whatsapp: {
-    50: "#e2f7f4",
-    100: "#c3f0e9",
-    200: "#a0e7dc",
-    300: "#76dccd",
-    400: "#43cfba",
+    50: "#E2F7F4",
+    100: "#C3F0E9",
+    200: "#A0E7DC",
+    300: "#76DCCD",
+    400: "#43CFBA",
     500: "#00BFA5",
-    600: "#00ac92",
+    600: "#00AC92",
     700: "#009780",
-    800: "#007d6a",
-    900: "#005a4c"
+    800: "#007D6A",
+    900: "#005A4C"
   },
   twitter: {
-    50: "#e5f4fd",
-    100: "#c8e9fb",
-    200: "#a8dcfa",
-    300: "#83cdf7",
-    400: "#57bbf5",
+    50: "#E5F4FD",
+    100: "#C8E9FB",
+    200: "#A8DCFA",
+    300: "#83CDF7",
+    400: "#57BBF5",
     500: "#1DA1F2",
-    600: "#1a94da",
-    700: "#1681bf",
-    800: "#136b9e",
-    900: "#0d4d71"
+    600: "#1A94DA",
+    700: "#1681BF",
+    800: "#136B9E",
+    900: "#0D4D71"
   },
   telegram: {
-    50: "#e3f2f9",
-    100: "#c5e4f3",
-    200: "#a2d4ec",
-    300: "#7ac1e4",
-    400: "#47a9da",
+    50: "#E3F2F9",
+    100: "#C5E4F3",
+    200: "#A2D4EC",
+    300: "#7AC1E4",
+    400: "#47A9DA",
     500: "#0088CC",
-    600: "#007ab8",
-    700: "#006ba1",
+    600: "#007AB8",
+    700: "#006BA1",
     800: "#005885",
-    900: "#003f5e"
+    900: "#003F5E"
   }
@@ -228,0 +228,0 @@ };

dist/esm/foundations/index.js

@@ -11,2 +11,3 @@ 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); }
 import borders from "./borders";
+import transition from "./transition";
 var space = baseSizes;
@@ -23,3 +24,4 @@
   space,
-  borders
+  borders,
+  transition
 });
@@ -26,0 +28,0 @@

dist/types/components/accordion.d.ts

@@ -1,4 +0,189 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Accordion: ComponentTheme;
-export default Accordion;
+declare const accordion: {
+    register: {
+        readonly parts: readonly ["container", "item", "button", "panel"];
+    };
+    baseStyle: {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        item?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        button?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        panel?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+};
+export default accordion;
 //# sourceMappingURL=accordion.d.ts.map

dist/types/components/alert.d.ts

@@ -1,10 +0,154 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Alert: ComponentTheme;
-export declare const AlertVariants: {
-    solid: string;
-    subtle: string;
-    "left-accent": string;
-    "top-accent": string;
+import { DefaultProps, Variants } from "@chakra-ui/theme-tools";
+declare const alert: {
+    register: {
+        readonly parts: readonly ["container", "title", "icon"];
+        readonly variants: readonly ["subtle", "left-accent", "top-accent", "solid"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["container", "title", "icon"];
+        readonly variants: readonly ["subtle", "left-accent", "top-accent", "solid"];
+    }>;
+    baseStyle: {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        title?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    variants: Variants<{
+        readonly parts: readonly ["container", "title", "icon"];
+        readonly variants: readonly ["subtle", "left-accent", "top-accent", "solid"];
+    }>;
 };
-export default Alert;
+export default alert;
 //# sourceMappingURL=alert.d.ts.map

dist/types/components/avatar.d.ts

@@ -1,17 +0,199 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare type AvatarProps = {
-    name?: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const avatar: {
+    register: {
+        readonly parts: readonly ["container", "excessLabel", "badge", "label"];
+        readonly sizes: readonly ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["container", "excessLabel", "badge", "label"];
+        readonly sizes: readonly ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"];
+    }>;
+    baseStyle: (props: any) => {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        excessLabel?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        badge?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["container", "excessLabel", "badge", "label"];
+        readonly sizes: readonly ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"];
+    }>;
 };
-declare const Avatar: ComponentTheme<AvatarProps>;
-export declare const AvatarSizes: {
-    "2xs": string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    full: string;
-};
-export default Avatar;
+export default avatar;
 //# sourceMappingURL=avatar.d.ts.map

dist/types/components/badge.d.ts

@@ -1,9 +0,64 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Badge: ComponentTheme;
-export declare const BadgeVariants: {
-    solid: string;
-    subtle: string;
-    outline: string;
+import { DefaultProps, Variants } from "@chakra-ui/theme-tools";
+declare const Badge: {
+    register: {
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
+    baseStyle: {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    variants: Variants<{
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
 };
 export default Badge;
 //# sourceMappingURL=badge.d.ts.map

dist/types/components/button.d.ts

@@ -1,15 +0,257 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Button: ComponentTheme;
-export declare const ButtonSizes: {
-    lg: string;
-    sm: string;
-    md: string;
-    xs: string;
+import { DefaultProps, Props, Sizes } from "@chakra-ui/theme-tools";
+declare function ghost(props: Props): {
+    container: {
+        color: any;
+        _hover: {
+            bg: any;
+        };
+        _active: {
+            bg: any;
+        };
+    };
+} | {
+    container: {
+        color: any;
+        bg: string;
+        _hover: {
+            bg: any;
+        };
+        _active: {
+            bg: any;
+        };
+    };
 };
-export declare const ButtonVariants: {
-    solid: string;
-    subtle: string;
-    outline: string;
+declare function outline(props: Props): {
+    container: {
+        color: any;
+        _hover: {
+            bg: any;
+        };
+        _active: {
+            bg: any;
+        };
+        border: string;
+        borderColor: any;
+    } | {
+        color: any;
+        bg: string;
+        _hover: {
+            bg: any;
+        };
+        _active: {
+            bg: any;
+        };
+        border: string;
+        borderColor: any;
+    };
 };
+declare function solid(props: Props): {
+    container: {
+        bg: any;
+        _hover: {
+            bg: any;
+        };
+        _active: {
+            bg: any;
+        };
+    };
+} | {
+    container: {
+        bg: any;
+        color: any;
+        _hover: {
+            bg: any;
+        };
+        _active: {
+            bg: any;
+        };
+    };
+};
+declare function link(props: Props): {
+    container: {
+        padding: number;
+        height: string;
+        lineHeight: string;
+        color: any;
+        _hover: {
+            textDecoration: string;
+        };
+        _active: {
+            color: any;
+        };
+    };
+};
+declare const Button: {
+    register: {
+        readonly parts: readonly ["container", "icon", "spinner"];
+        readonly sizes: readonly ["sm", "md", "lg", "xs"];
+        readonly variants: readonly ["solid", "outline", "ghost", "unstyled"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["container", "icon", "spinner"];
+        readonly sizes: readonly ["sm", "md", "lg", "xs"];
+        readonly variants: readonly ["solid", "outline", "ghost", "unstyled"];
+    }>;
+    baseStyle: {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        spinner?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["container", "icon", "spinner"];
+        readonly sizes: readonly ["sm", "md", "lg", "xs"];
+        readonly variants: readonly ["solid", "outline", "ghost", "unstyled"];
+    }>;
+    variants: {
+        unstyled: {
+            container: {
+                bg: string;
+                border: number;
+                color: string;
+                display: string;
+                font: string;
+                lineHeight: string;
+                margin: number;
+                padding: number;
+            };
+        };
+        solid: typeof solid;
+        ghost: typeof ghost;
+        link: typeof link;
+        outline: typeof outline;
+    };
+};
 export default Button;
 //# sourceMappingURL=button.d.ts.map

dist/types/components/checkbox.d.ts

@@ -1,9 +0,199 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Checkbox: ComponentTheme;
-export declare const CheckboxSizes: {
-    lg: string;
-    sm: string;
-    md: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const checkbox: {
+    register: {
+        readonly parts: readonly ["control", "label", "description", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["control", "label", "description", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    baseStyle: (props: any) => {
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        control?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        description?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["control", "label", "description", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
 };
-export default Checkbox;
+export default checkbox;
 //# sourceMappingURL=checkbox.d.ts.map

dist/types/components/close-button.d.ts

@@ -1,9 +0,109 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const CloseButton: ComponentTheme;
-export declare const CloseButtonSizes: {
-    lg: string;
-    sm: string;
-    md: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const closeButton: {
+    register: {
+        readonly parts: readonly ["icon", "container"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["icon", "container"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    baseStyle: (props: any) => {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["icon", "container"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
 };
-export default CloseButton;
+export default closeButton;
 //# sourceMappingURL=close-button.d.ts.map

dist/types/components/code.d.ts

@@ -1,9 +0,63 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Code: ComponentTheme;
-export declare const CodeVariants: {
-    solid: string;
-    subtle: string;
-    outline: string;
+declare const code: {
+    register: {
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    };
+    defaultProps: import("@chakra-ui/theme-tools").DefaultProps<{
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
+    baseStyle: {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    variants: import("@chakra-ui/theme-tools").Variants<{
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
 };
-export default Code;
+export default code;
 //# sourceMappingURL=code.d.ts.map

dist/types/components/editable.d.ts

@@ -1,4 +0,144 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Editable: ComponentTheme;
-export default Editable;
+declare const editable: {
+    register: {
+        readonly parts: readonly ["container", "preview", "input"];
+    };
+    baseStyle: {
+        container?: import("@chakra-ui/system").SystemCSSProperties | import("@chakra-ui/system").CSSPseudoStyles | import("@chakra-ui/system").CSSSelectorStyles | import("@chakra-ui/system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+        } | undefined;
+        preview?: import("@chakra-ui/system").SystemCSSProperties | import("@chakra-ui/system").CSSPseudoStyles | import("@chakra-ui/system").CSSSelectorStyles | import("@chakra-ui/system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+        } | undefined;
+        input?: import("@chakra-ui/system").SystemCSSProperties | import("@chakra-ui/system").CSSPseudoStyles | import("@chakra-ui/system").CSSSelectorStyles | import("@chakra-ui/system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+};
+export default editable;
 //# sourceMappingURL=editable.d.ts.map

dist/types/components/form.d.ts

@@ -1,4 +0,234 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Form: ComponentTheme;
-export default Form;
+declare const form: {
+    register: {
+        readonly parts: readonly ["label", "errorText", "requiredIndicator", "helperText", "errorIcon"];
+    };
+    baseStyle: (props: any) => {
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        errorText?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        requiredIndicator?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        helperText?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        errorIcon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+};
+export default form;
 //# sourceMappingURL=form.d.ts.map

dist/types/components/heading.d.ts

@@ -1,12 +0,64 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Heading: ComponentTheme;
-export declare const HeadingSizes: {
-    "2xl": string;
-    xl: string;
-    lg: string;
-    md: string;
-    sm: string;
-    xs: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const heading: {
+    register: {
+        readonly parts: readonly ["heading"];
+        readonly sizes: readonly ["2xl", "xl", "lg", "md", "sm", "xs"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["heading"];
+        readonly sizes: readonly ["2xl", "xl", "lg", "md", "sm", "xs"];
+    }>;
+    baseStyle: {
+        heading?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["heading"];
+        readonly sizes: readonly ["2xl", "xl", "lg", "md", "sm", "xs"];
+    }>;
 };
-export default Heading;
+export default heading;
 //# sourceMappingURL=heading.d.ts.map

dist/types/components/input.d.ts

@@ -1,20 +0,117 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-export interface InputProps {
-    focusBorderColor?: string;
-    errorBorderColor?: string;
-}
-export declare type InputTheme = ComponentTheme<InputProps>;
-declare const Input: InputTheme;
-export declare const InputSizes: {
-    sm: string;
-    md: string;
-    lg: string;
+import { DefaultProps, Sizes, Variants } from "@chakra-ui/theme-tools";
+declare const input: {
+    register: {
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    baseStyle: {
+        field?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        addon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    variants: Variants<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
 };
-export declare const InputVariants: {
-    outline: string;
-    filled: string;
-    flushed: string;
-    unstyled: string;
-};
-export default Input;
+export default input;
 //# sourceMappingURL=input.d.ts.map

dist/types/components/kbd.d.ts

@@ -1,4 +0,54 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Kbd: ComponentTheme;
-export default Kbd;
+declare const kbd: {
+    register: {
+        readonly parts: readonly ["kbd"];
+    };
+    baseStyle: (props: any) => {
+        kbd?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+};
+export default kbd;
 //# sourceMappingURL=kbd.d.ts.map

dist/types/components/link.d.ts

@@ -1,4 +0,54 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Link: ComponentTheme;
-export default Link;
+declare const link: {
+    register: {
+        readonly parts: readonly ["link"];
+    };
+    baseStyle: {
+        link?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+};
+export default link;
 //# sourceMappingURL=link.d.ts.map

dist/types/components/menu.d.ts

@@ -1,4 +0,324 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Menu: ComponentTheme;
-export default Menu;
+declare const menu: {
+    register: {
+        readonly parts: readonly ["menuList", "menuItem", "menuButton", "groupTitle", "menuDivider", "icon", "command"];
+    };
+    baseStyle: (props: any) => {
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        menuList?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        menuItem?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        menuButton?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        groupTitle?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        menuDivider?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        command?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+};
+export default menu;
 //# sourceMappingURL=menu.d.ts.map

dist/types/components/modal.d.ts

@@ -1,20 +0,251 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-export interface Props {
-    scrollBehavior?: "inside" | "outside";
-}
-declare const Modal: ComponentTheme<Props>;
-export declare const ModalSizes: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    "2xl": string;
-    "3xl": string;
-    "4xl": string;
-    "5xl": string;
-    "6xl": string;
-    full: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const modal: {
+    register: {
+        readonly parts: readonly ["overlay", "content", "header", "body", "footer"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["overlay", "content", "header", "body", "footer"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"];
+    }>;
+    baseStyle: (props: any) => {
+        content?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        overlay?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        header?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        body?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        footer?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["overlay", "content", "header", "body", "footer"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "full"];
+    }>;
+    transition: {
+        content?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        overlay?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        header?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        body?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        footer?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+    };
 };
-export default Modal;
+export default modal;
 //# sourceMappingURL=modal.d.ts.map

dist/types/components/number-input.d.ts

@@ -1,9 +0,162 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const NumberInput: ComponentTheme;
-export declare const NumberInputSizes: {
-    sm: string;
-    md: string;
-    lg: string;
+import { Sizes, Variants } from "@chakra-ui/theme-tools";
+declare const numberInput: {
+    register: {
+        readonly parts: readonly ["field", "stepper", "stepperGroup"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    };
+    defaultProps: import("@chakra-ui/theme-tools").DefaultProps<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    baseStyle: (props: any) => {
+        field?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        stepper?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        stepperGroup?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["field", "stepper", "stepperGroup"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    variants: Variants<{
+        readonly parts: readonly ["field", "stepper", "stepperGroup"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
 };
-export default NumberInput;
+export default numberInput;
 //# sourceMappingURL=number-input.d.ts.map

dist/types/components/pin-input.d.ts

@@ -1,16 +0,117 @@
-import { InputProps } from "./input";
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const PinInput: ComponentTheme<InputProps>;
-export declare const PinInputSizes: {
-    lg: string;
-    md: string;
-    sm: string;
+import { Sizes } from "@chakra-ui/theme-tools";
+declare const pinInput: {
+    register: {
+        readonly parts: readonly ["field"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    };
+    defaultProps: import("@chakra-ui/theme-tools").DefaultProps<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    baseStyle: {
+        field?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        addon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    variants: import("@chakra-ui/theme-tools").Variants<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    sizes: Sizes<{
+        readonly parts: readonly ["field"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
 };
-export declare const PinInputVariants: {
-    outline: string;
-    filled: string;
-    flushed: string;
-    unstyled: string;
-};
-export default PinInput;
+export default pinInput;
 //# sourceMappingURL=pin-input.d.ts.map

dist/types/components/popover.d.ts

@@ -1,4 +0,195 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Popover: ComponentTheme;
-export default Popover;
+declare const popover: {
+    register: {
+        readonly parts: readonly ["content", "header", "body", "footer"];
+    };
+    baseStyle: (props: any) => {
+        content?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        header?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        body?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        footer?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    transition: {
+        content?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        header?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        body?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        footer?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+    };
+};
+export default popover;
 //# sourceMappingURL=popover.d.ts.map

dist/types/components/progress.d.ts

@@ -1,13 +0,154 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare type ProgressTheme = ComponentTheme<{
-    isIndeterminate?: boolean;
-}>;
-declare const Progress: ProgressTheme;
-export declare const ProgressSizes: {
-    lg: string;
-    sm: string;
-    md: string;
-    xs: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const progress: {
+    register: {
+        readonly parts: readonly ["track", "filledTrack", "label"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["track", "filledTrack", "label"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg"];
+    }>;
+    baseStyle: (props: any) => {
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        track?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        filledTrack?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["track", "filledTrack", "label"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg"];
+    }>;
 };
-export default Progress;
+export default progress;
 //# sourceMappingURL=progress.d.ts.map

dist/types/components/radio.d.ts

@@ -1,9 +0,109 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Radio: ComponentTheme;
-export declare const RadioSizes: {
-    lg: string;
-    sm: string;
-    md: string;
+import { Sizes } from "@chakra-ui/theme-tools";
+declare const radio: {
+    register: {
+        readonly parts: readonly ["control", "label"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    defaultProps: import("@chakra-ui/theme-tools").DefaultProps<{
+        readonly parts: readonly ["control", "label", "description", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    baseStyle: (props: any) => {
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        control?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["control", "label"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
 };
-export default Radio;
+export default radio;
 //# sourceMappingURL=radio.d.ts.map

dist/types/components/select.d.ts

@@ -1,16 +0,116 @@
-import { InputProps } from "./input";
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Select: ComponentTheme<InputProps>;
-export declare const SelectSizes: {
-    sm: string;
-    md: string;
-    lg: string;
+declare const select: {
+    register: {
+        readonly parts: readonly ["field", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    };
+    defaultProps: import("@chakra-ui/theme-tools").DefaultProps<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    baseStyle: {
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        field?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: import("@chakra-ui/theme-tools").Sizes<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    variants: import("@chakra-ui/theme-tools").Variants<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
 };
-export declare const SelectVariants: {
-    outline: string;
-    filled: string;
-    flushed: string;
-    unstyled: string;
-};
-export default Select;
+export default select;
 //# sourceMappingURL=select.d.ts.map

dist/types/components/skeleton.d.ts

@@ -1,19 +0,55 @@
-import { ComponentTheme, Props } from "@chakra-ui/theme-tools";
-export interface SkeletonProps {
-    startColor?: string;
-    endColor?: string;
-    speed?: number;
-    duration?: number;
-}
-export declare const frame: (start: string, end: string) => import("@emotion/serialize").Keyframes;
-declare type CustomProps = Props & SkeletonProps;
-export declare function baseStyle(props: CustomProps): {
-    opacity: number;
-    borderRadius: string;
-    borderColor: any;
-    background: any;
-    animation: string;
+declare const skeleton: {
+    register: {
+        readonly parts: readonly ["skeleton"];
+    };
+    baseStyle: (props: any) => {
+        skeleton?: import("@chakra-ui/system").SystemCSSProperties | import("@chakra-ui/system").CSSPseudoStyles | import("@chakra-ui/system").CSSSelectorStyles | import("@chakra-ui/system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
 };
-declare const Skeleton: ComponentTheme<SkeletonProps>;
-export default Skeleton;
+export default skeleton;
+export declare function frame(startColor: string, endColor: string): import("@emotion/serialize").Keyframes;
 //# sourceMappingURL=skeleton.d.ts.map

dist/types/components/slider.d.ts

@@ -1,9 +0,199 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Slider: ComponentTheme;
-export declare const SliderSizes: {
-    lg: string;
-    sm: string;
-    md: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const slider: {
+    register: {
+        readonly parts: readonly ["container", "thumb", "track", "filledTrack"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["container", "thumb", "track", "filledTrack"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    sizes: Sizes<{
+        readonly parts: readonly ["container", "thumb", "track", "filledTrack"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    baseStyle: (props: any) => {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        thumb?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        track?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        filledTrack?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
 };
-export default Slider;
+export default slider;
 //# sourceMappingURL=slider.d.ts.map

dist/types/components/spinner.d.ts

@@ -1,11 +0,17 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Spinner: ComponentTheme;
-export declare const SpinnerSizes: {
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const spinner: {
+    register: {
+        readonly parts: readonly ["spinner"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg", "xl"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["spinner"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg", "xl"];
+    }>;
+    sizes: Sizes<{
+        readonly parts: readonly ["spinner"];
+        readonly sizes: readonly ["xs", "sm", "md", "lg", "xl"];
+    }>;
 };
-export default Spinner;
+export default spinner;
 //# sourceMappingURL=spinner.d.ts.map

dist/types/components/stat.d.ts

@@ -1,7 +0,244 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Stat: ComponentTheme;
-export declare const StatSizes: {
-    md: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const stat: {
+    register: {
+        readonly parts: readonly ["label", "helpText", "number", "container", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["label", "helpText", "number", "container", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    baseStyle: {
+        number?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        icon?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        helpText?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["label", "helpText", "number", "container", "icon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
 };
-export default Stat;
+export default stat;
 //# sourceMappingURL=stat.d.ts.map

dist/types/components/switch.d.ts

@@ -1,9 +0,109 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Switch: ComponentTheme;
-export declare const SwitchSizes: {
-    sm: string;
-    md: string;
-    lg: string;
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools";
+declare const _switch: {
+    register: {
+        readonly parts: readonly ["track", "thumb"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["track", "thumb"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
+    baseStyle: (props: any) => {
+        thumb?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        track?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["track", "thumb"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    }>;
 };
-export default Switch;
+export default _switch;
 //# sourceMappingURL=switch.d.ts.map

dist/types/components/tabs.d.ts

@@ -1,17 +0,207 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Tabs: ComponentTheme;
-export declare const TabSizes: {
-    sm: string;
-    md: string;
-    lg: string;
+import { DefaultProps, Sizes, Variants } from "@chakra-ui/theme-tools";
+declare const tabs: {
+    register: {
+        readonly parts: readonly ["tablist", "tab", "tabpanel", "indicator"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["line", "enclosed", "soft-rounded", "enclosed-colored", "solid-rounded", "unstyled"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["tablist", "tab", "tabpanel", "indicator"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["line", "enclosed", "soft-rounded", "enclosed-colored", "solid-rounded", "unstyled"];
+    }>;
+    baseStyle: (props: any) => {
+        tablist?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        tab?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        tabpanel?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        indicator?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["tablist", "tab", "tabpanel", "indicator"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["line", "enclosed", "soft-rounded", "enclosed-colored", "solid-rounded", "unstyled"];
+    }>;
+    variants: Variants<{
+        readonly parts: readonly ["tablist", "tab", "tabpanel", "indicator"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["line", "enclosed", "soft-rounded", "enclosed-colored", "solid-rounded", "unstyled"];
+    }>;
 };
-export declare const TabVariants: {
-    line: string;
-    enclosed: string;
-    "soft-rounded": string;
-    "enclosed-colored": string;
-    "solid-rounded": string;
-    unstyled: string;
-};
-export default Tabs;
+export default tabs;
 //# sourceMappingURL=tabs.d.ts.map

dist/types/components/tag.d.ts

@@ -1,14 +0,161 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Tag: ComponentTheme;
-export declare const TagSizes: {
-    sm: string;
-    md: string;
-    lg: string;
+import { Sizes, DefaultProps } from "@chakra-ui/theme-tools";
+declare const tag: {
+    register: {
+        readonly parts: readonly ["container", "label", "closeButton"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    };
+    defaultProps: DefaultProps<{
+        readonly parts: readonly ["container", "label", "closeButton"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
+    baseStyle: {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        label?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        closeButton?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    sizes: Sizes<{
+        readonly parts: readonly ["container", "label", "closeButton"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
+    variants: import("@chakra-ui/theme-tools").Variants<{
+        readonly parts: readonly ["container"];
+        readonly variants: readonly ["solid", "subtle", "outline"];
+    }>;
 };
-export declare const TagVariants: {
-    solid: string;
-    subtle: string;
-    outline: string;
-};
-export default Tag;
+export default tag;
 //# sourceMappingURL=tag.d.ts.map

dist/types/components/textarea.d.ts

@@ -1,15 +0,71 @@
-import { InputTheme } from "./input";
-declare const Textarea: InputTheme;
-export declare const TextareaVariants: {
-    outline: string;
-    filled: string;
-    flushed: string;
-    unstyled: string;
+declare const textarea: {
+    register: {
+        readonly parts: readonly ["field"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+    };
+    baseStyle: {
+        field?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    defaultProps: import("@chakra-ui/theme-tools").DefaultProps<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    sizes: import("@chakra-ui/theme-tools").Sizes<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
+    variants: import("@chakra-ui/theme-tools").Variants<{
+        readonly parts: readonly ["field", "addon"];
+        readonly sizes: readonly ["sm", "md", "lg"];
+        readonly variants: readonly ["outline", "flushed", "filled", "unstyled"];
+    }>;
 };
-export declare const TextareaSizes: {
-    sm: string;
-    md: string;
-    lg: string;
-};
-export default Textarea;
+export default textarea;
 //# sourceMappingURL=textarea.d.ts.map

dist/types/components/tooltip.d.ts

@@ -1,4 +0,103 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools";
-declare const Tooltip: ComponentTheme;
-export default Tooltip;
+declare const tooltip: {
+    register: {
+        readonly parts: readonly ["arrow", "container"];
+    };
+    baseStyle: (props: any) => {
+        container?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+        arrow?: import("@chakra-ui/styled-system").SystemCSSProperties | import("@chakra-ui/styled-system").CSSPseudoStyles | import("@chakra-ui/styled-system").CSSSelectorStyles | import("@chakra-ui/styled-system").ApplyPropStyles | {
+            _hover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _active?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _highlighted?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusWithin?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _focusVisible?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _disabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _readOnly?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _before?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _after?: (import("@chakra-ui/styled-system").SystemCSSProperties & {
+                content?: string | undefined;
+            }) | undefined;
+            _empty?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _expanded?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _checked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _grabbed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _pressed?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _invalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _valid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _loading?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selected?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _hidden?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _autofill?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _even?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _odd?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _first?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _last?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notFirst?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _notLast?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _visited?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _activeLink?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _indeterminate?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupHover?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupFocus?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupActive?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupDisabled?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupInvalid?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _groupChecked?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _placeholder?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _fullScreen?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+            _selection?: import("@chakra-ui/styled-system").SystemCSSProperties | undefined;
+        } | undefined;
+    };
+    transition: {
+        container?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+        arrow?: import("@chakra-ui/theme-tools").TransitionConfig | undefined;
+    };
+};
+export default tooltip;
 //# sourceMappingURL=tooltip.d.ts.map

dist/types/foundations/index.d.ts

@@ -80,2 +80,25 @@ declare const theme: {
     };
+    transition: {
+        property: {
+            common: string;
+            colors: string;
+            dimensions: string;
+            position: string;
+            background: string;
+        };
+        timingFunction: {
+            "ease-in": string;
+            "ease-out": string;
+            "ease-in-out": string;
+        };
+        duration: {
+            "ultra-fast": string;
+            faster: string;
+            fast: string;
+            normal: string;
+            slow: string;
+            slower: string;
+            "ultra-slow": string;
+        };
+    };
     letterSpacings: {
@@ -82,0 +105,0 @@ tighter: string;

package.json

 {
   "name": "@chakra-ui/theme",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "The default theme for chakra components",
@@ -48,11 +48,11 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/theme-tools": "^1.0.0-next.4"
+    "@chakra-ui/theme-tools": "^1.0.0-next.5"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">0.8"
+    "@chakra-ui/system": "^1.0.0-next.4"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.4"
+    "@chakra-ui/system": "^1.0.0-next.5"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

src/components/accordion.ts

@@ -1,35 +0,35 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle } from "@chakra-ui/theme-tools"
 
-const Accordion: ComponentTheme = {
-  baseStyle: {
-    Item: {
-      borderTopWidth: "1px",
-      borderColor: "inherit",
-      _last: {
-        borderBottomWidth: "1px",
-      },
+const register = {
+  parts: ["container", "item", "button", "panel"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  item: {
+    borderTopWidth: "1px",
+    borderColor: "inherit",
+    _last: {
+      borderBottomWidth: "1px",
     },
-    Button: {
-      fontSize: "1rem",
-      _focus: {
-        boxShadow: "outline",
-      },
-      _hover: {
-        bg: "blackAlpha.50",
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed",
-      },
-      paddingX: 4,
-      paddingY: 2,
-    },
-    Panel: {
-      paddingTop: 2,
-      paddingX: 4,
-      paddingBottom: 5,
-    },
   },
+  button: {
+    fontSize: "1rem",
+    _focus: { boxShadow: "outline" },
+    _hover: { bg: "blackAlpha.50" },
+    _disabled: { opacity: 0.4, cursor: "not-allowed" },
+    paddingX: 4,
+    paddingY: 2,
+  },
+  panel: {
+    paddingTop: 2,
+    paddingX: 4,
+    paddingBottom: 5,
+  },
 }
 
-export default Accordion
+const accordion = {
+  register,
+  baseStyle,
+}
+
+export default accordion

src/components/alert.ts

 import {
-  Props,
-  ComponentTheme,
-  mode,
+  BaseStyle,
+  DefaultProps,
   getColor,
   ink,
+  mode,
+  Variants,
 } from "@chakra-ui/theme-tools"
 
-function subtle(props: Props) {
-  const { theme: t, colorScheme: c } = props
+const register = {
+  parts: ["container", "title", "icon"],
+  variants: ["subtle", "left-accent", "top-accent", "solid"],
+} as const
 
-  const light = getColor(t, `${c}.100`, c)
-  const dark = ink(`${c}.200`, "lowest")(t)
-
-  const bg = mode(light, dark)(props)
-
-  return {
-    Root: { bg },
-    Icon: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
-    },
-  }
+const baseStyle: BaseStyle<typeof register> = {
+  container: {
+    paddingX: 4,
+    paddingY: 3,
+  },
+  title: {
+    fontWeight: "bold",
+    lineHeight: "normal",
+  },
+  icon: {
+    marginRight: 3,
+    width: 5,
+    height: 5,
+  },
 }
 
-function leftAccent(props: Props) {
-  const { colorScheme: c } = props
-  const subtleStyle = subtle(props)
-  return {
-    Root: {
-      paddingLeft: 3,
-      borderLeft: "4px solid",
-      borderColor: mode(`${c}.500`, `${c}.200`)(props),
-      ...subtleStyle.Root,
-    },
-    Icon: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
-    },
-  }
+function getBg(props: any) {
+  const { theme: t, colorScheme: c } = props
+  const lightBg = getColor(t, `${c}.100`, c)
+  const darkBg = ink(`${c}.200`, "lowest")(t)
+  return mode(lightBg, darkBg)(props)
 }
 
-function topAccent(props: Props) {
-  const { colorScheme: c } = props
-  const subtleStyle = subtle(props)
-  return {
-    Root: {
-      paddingTop: 2,
-      borderTop: "4px solid",
-      borderColor: mode(`${c}.500`, `${c}.200`)(props),
-      ...subtleStyle.Root,
-    },
-    Icon: {
-      color: mode(`${c}.500`, `${c}.200`)(props),
-    },
-  }
-}
+const variants: Variants<typeof register> = {
+  subtle: function (props) {
+    const { colorScheme: c } = props
+    return {
+      container: { bg: getBg(props) },
+      icon: { color: mode(`${c}.500`, `${c}.200`)(props) },
+    }
+  },
 
-function solid(props: Props) {
-  const { colorScheme: c } = props
-  return {
-    Root: {
-      bg: mode(`${c}.500`, `${c}.200`)(props),
-      color: mode(`white`, `gray.900`)(props),
-    },
-  }
-}
+  "left-accent": function (props) {
+    const { colorScheme: c } = props
+    return {
+      container: {
+        paddingLeft: 3,
+        borderLeft: "4px solid",
+        borderColor: mode(`${c}.500`, `${c}.200`)(props),
+        bg: getBg(props),
+      },
+      icon: {
+        color: mode(`${c}.500`, `${c}.200`)(props),
+      },
+    }
+  },
 
-const Alert: ComponentTheme = {
-  defaultProps: {
-    variant: "subtle",
+  "top-accent": function (props) {
+    const { colorScheme: c } = props
+    return {
+      container: {
+        paddingTop: 2,
+        borderTop: "4px solid",
+        borderColor: mode(`${c}.500`, `${c}.200`)(props),
+        bg: getBg(props),
+      },
+      icon: {
+        color: mode(`${c}.500`, `${c}.200`)(props),
+      },
+    }
   },
-  baseStyle: {
-    Root: {
-      paddingX: 4,
-      paddingY: 3,
-    },
-    Icon: {
-      marginRight: 3,
-      boxSize: 5,
-    },
+
+  solid: function (props) {
+    const { colorScheme: c } = props
+    return {
+      container: {
+        bg: mode(`${c}.500`, `${c}.200`)(props),
+        color: mode(`white`, `gray.900`)(props),
+      },
+    }
   },
-  variants: {
-    solid: solid,
-    subtle: subtle,
-    "left-accent": leftAccent,
-    "top-accent": topAccent,
-  },
 }
 
-export const AlertVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  "left-accent": "left-accent",
-  "top-accent": "top-accent",
+const defaultProps: DefaultProps<typeof register> = {
+  variant: "subtle",
 }
 
-export default Alert
+const alert = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants,
+}
+
+export default alert

src/components/avatar.ts

@@ -1,58 +0,24 @@
-import sizes from "../foundations/sizes"
 import {
-  randomColor,
+  BaseStyle,
+  DefaultProps,
   isDark,
-  ComponentTheme,
   mode,
-  Props,
+  randomColor,
+  Sizes,
 } from "@chakra-ui/theme-tools"
-import { SystemProps } from "@chakra-ui/system"
+import themeSizes from "../foundations/sizes"
 
-function getSize(size: string) {
-  const themeSize = sizes[size as keyof typeof sizes]
+const register = {
+  parts: ["container", "excessLabel", "badge", "label"],
+  sizes: ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "full"],
+} as const
 
-  const styles: SystemProps = {
-    width: size,
-    height: size,
-    fontSize: `calc(${themeSize ?? size} / 2.5)`,
-  }
-
-  if (size !== "100%") {
-    styles.lineHeight = themeSize ?? size
-  }
-
-  return {
-    Root: styles,
-    ExcessLabel: styles,
-  }
-}
-
-function getRootStyle(props: Props & { name?: string }) {
-  const { name, theme: t } = props
-
+const baseStyle: BaseStyle<typeof register> = function (props) {
+  const { name, theme } = props
   const bg = name ? randomColor({ string: name }) : "gray.400"
-  const isBgDark = isDark(bg)(t)
-
-  const color = name ? (isBgDark ? "white" : "gray.800") : "white"
+  const color = name ? (isDark(bg)(theme) ? "white" : "gray.800") : "white"
   const borderColor = mode("white", "gray.800")(props)
 
   return {
-    bg,
-    color,
-    borderColor,
-  }
-}
-
-type AvatarProps = { name?: string }
-
-const Avatar: ComponentTheme<AvatarProps> = {
-  defaultProps: {
-    size: "md",
-  },
-  baseStyle: (props) => ({
-    Root: {
-      verticalAlign: "top",
-      ...getRootStyle(props),
-    },
-    Badge: {
+    badge: {
       transform: "translate(25%, 25%)",
@@ -63,29 +29,52 @@ borderRadius: "full",
     },
-    ExcessLabel: {
+    excessLabel: {
       bg: mode("gray.200", "whiteAlpha.400")(props),
     },
-  }),
-  sizes: {
-    "2xs": getSize("4"),
-    xs: getSize("6"),
-    sm: getSize("8"),
-    md: getSize("12"),
-    lg: getSize("16"),
-    xl: getSize("24"),
-    "2xl": getSize("32"),
-    full: getSize("100%"),
-  },
+    container: {
+      bg,
+      color,
+      borderColor,
+      verticalAlign: "top",
+    },
+  }
 }
 
-export const AvatarSizes = {
-  "2xs": "2xs",
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-  "2xl": "2xl",
-  full: "full",
+const sizes: Sizes<typeof register> = {
+  "2xs": getSize("4"),
+  xs: getSize("6"),
+  sm: getSize("8"),
+  md: getSize("12"),
+  lg: getSize("16"),
+  xl: getSize("24"),
+  "2xl": getSize("32"),
+  full: getSize("100%"),
 }
 
-export default Avatar
+function getSize(size: string) {
+  const themeSize = themeSizes[size as keyof typeof sizes]
+  const styles = { width: size, height: size }
+  return {
+    container: {
+      fontSize: `calc(${themeSize ?? size} / 2.5)`,
+      ...styles,
+    },
+    excessLabel: styles,
+    label: {
+      fontSize: `calc(${themeSize ?? size} / 2.5)`,
+      lineHeight: size !== "100%" ? themeSize ?? size : undefined,
+    },
+  }
+}
+
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+}
+
+const avatar = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+}
+
+export default avatar

src/components/badge.ts

 import {
-  ComponentTheme,
+  BaseStyle,
+  DefaultProps,
+  getColor,
+  ink,
   mode,
   Props,
-  getColor,
-  ink,
   transparentize,
+  Variants,
 } from "@chakra-ui/theme-tools"
 
-function solid(props: Props) {
-  const { colorScheme: c, theme } = props
-  const dark = transparentize(`${c}.500`, 0.6)(theme)
+const register = {
+  parts: ["container"],
+  variants: ["solid", "subtle", "outline"],
+} as const
 
-  return {
-    bg: mode(`${c}.500`, dark)(props),
-    color: mode(`white`, `whiteAlpha.800`)(props),
-  }
-}
-
-function subtle(props: Props) {
-  const { colorScheme: c, theme } = props
-  const darkBg = ink(`${c}.200`, "lowest")(theme)
-
-  return {
-    bg: mode(`${c}.100`, darkBg)(props),
-    color: mode(`${c}.800`, `${c}.200`)(props),
-  }
-}
-
-function outline(props: Props) {
-  const { colorScheme: c, theme } = props
-
-  const dark = transparentize(`${c}.200`, 0.8)(theme)
-  const light = getColor(theme, `${c}.500`)
-
-  const color = mode(light, dark)(props)
-
-  return {
-    color,
-    boxShadow: `inset 0 0 0px 1px ` + color,
-  }
-}
-
-const Badge: ComponentTheme = {
-  defaultProps: {
-    variant: "subtle",
-    colorScheme: "gray",
-  },
-  baseStyle: {
+const baseStyle: BaseStyle<typeof register> = {
+  container: {
     paddingX: 1,
@@ -56,15 +25,54 @@ textTransform: "uppercase",
   },
-  variants: {
-    solid,
-    outline,
-    subtle,
+}
+
+const variants: Variants<typeof register> = {
+  solid(props) {
+    const { colorScheme: c, theme } = props
+    const dark = transparentize(`${c}.500`, 0.6)(theme)
+    return {
+      container: {
+        bg: mode(`${c}.500`, dark)(props),
+        color: mode(`white`, `whiteAlpha.800`)(props),
+      },
+    }
   },
+
+  subtle(props) {
+    const { colorScheme: c, theme } = props
+    const darkBg = ink(`${c}.200`, "lowest")(theme)
+    return {
+      container: {
+        bg: mode(`${c}.100`, darkBg)(props),
+        color: mode(`${c}.800`, `${c}.200`)(props),
+      },
+    }
+  },
+
+  outline(props: Props) {
+    const { colorScheme: c, theme } = props
+    const darkColor = transparentize(`${c}.200`, 0.8)(theme)
+    const lightColor = getColor(theme, `${c}.500`)
+    const color = mode(lightColor, darkColor)(props)
+
+    return {
+      container: {
+        color,
+        boxShadow: `inset 0 0 0px 1px ${color}`,
+      },
+    }
+  },
 }
 
-export const BadgeVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  outline: "outline",
+const defaultProps: DefaultProps<typeof register> = {
+  variant: "subtle",
+  colorScheme: "gray",
 }
 
+const Badge = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants,
+}
+
 export default Badge

src/components/button.ts

 import {
+  BaseStyle,
+  DefaultProps,
+  mode,
   Props,
-  mode,
-  ComponentTheme,
+  Sizes,
   transparentize,
 } from "@chakra-ui/theme-tools"
 
-const grayGhost = (props: Props) => ({
-  color: mode(`inherit`, `whiteAlpha.900`)(props),
-  _hover: {
-    bg: mode(`gray.100`, `whiteAlpha.200`)(props),
+const register = {
+  parts: ["container", "icon", "spinner"],
+  sizes: ["sm", "md", "lg", "xs"],
+  variants: ["solid", "outline", "ghost", "unstyled"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  spinner: {
+    fontSize: "1em",
+    lineHeight: "normal",
   },
-  _active: {
-    bg: mode(`gray.200`, `whiteAlpha.300`)(props),
+  container: {
+    lineHeight: "1.2",
+    borderRadius: "md",
+    fontWeight: "semibold",
+    _focus: {
+      boxShadow: "outline",
+    },
+    _disabled: {
+      opacity: 0.4,
+      cursor: "not-allowed",
+      boxShadow: "none",
+    },
   },
-})
+}
 
+/**
+ * Variants Style
+ */
+
+function grayGhost(props: Props) {
+  return {
+    container: {
+      color: mode(`inherit`, `whiteAlpha.900`)(props),
+      _hover: {
+        bg: mode(`gray.100`, `whiteAlpha.200`)(props),
+      },
+      _active: {
+        bg: mode(`gray.200`, `whiteAlpha.300`)(props),
+      },
+    },
+  }
+}
+
 function ghost(props: Props) {
-  const { colorScheme: c, theme: t } = props
+  const { colorScheme: c, theme } = props
   if (c === "gray") return grayGhost(props)
 
-  const darkHover = transparentize(`${c}.200`, 0.12)(t)
-  const darkActive = transparentize(`${c}.200`, 0.24)(t)
+  const darkHover = transparentize(`${c}.200`, 0.12)(theme)
+  const darkActive = transparentize(`${c}.200`, 0.24)(theme)
 
   return {
-    color: mode(`${c}.500`, `${c}.200`)(props),
-    bg: "transparent",
-    _hover: {
-      bg: mode(`${c}.50`, darkHover)(props),
+    container: {
+      color: mode(`${c}.500`, `${c}.200`)(props),
+      bg: "transparent",
+      _hover: {
+        bg: mode(`${c}.50`, darkHover)(props),
+      },
+      _active: {
+        bg: mode(`${c}.100`, darkActive)(props),
+      },
     },
-    _active: {
-      bg: mode(`${c}.100`, darkActive)(props),
-    },
   }
@@ -42,5 +80,7 @@ }
   return {
-    border: "1px solid",
-    borderColor: c === "gray" ? borderColor : "currentColor",
-    ...ghost(props),
+    container: {
+      border: "1px solid",
+      borderColor: c === "gray" ? borderColor : "currentColor",
+      ...ghost(props).container,
+    },
   }
@@ -51,9 +91,11 @@ }
   return {
-    bg: mode(`gray.100`, `whiteAlpha.200`)(props),
-    _hover: {
-      bg: mode(`gray.200`, `whiteAlpha.300`)(props),
+    container: {
+      bg: mode(`gray.100`, `whiteAlpha.200`)(props),
+      _hover: {
+        bg: mode(`gray.200`, `whiteAlpha.300`)(props),
+      },
+      _active: {
+        bg: mode(`gray.300`, `whiteAlpha.400`)(props),
+      },
     },
-    _active: {
-      bg: mode(`gray.300`, `whiteAlpha.400`)(props),
-    },
   }
@@ -68,6 +110,8 @@ }
   return {
-    bg: mode(`${c}.500`, `${c}.200`)(props),
-    color: mode(`white`, `gray.800`)(props),
-    _hover: { bg: mode(`${c}.600`, `${c}.300`)(props) },
-    _active: { bg: mode(`${c}.700`, `${c}.400`)(props) },
+    container: {
+      bg: mode(`${c}.500`, `${c}.200`)(props),
+      color: mode(`white`, `gray.800`)(props),
+      _hover: { bg: mode(`${c}.600`, `${c}.300`)(props) },
+      _active: { bg: mode(`${c}.700`, `${c}.400`)(props) },
+    },
   }
@@ -79,72 +123,75 @@ }
   return {
-    padding: 0,
-    height: "auto",
-    lineHeight: "normal",
-    color: mode(`${c}.500`, `${c}.200`)(props),
-    _hover: {
-      textDecoration: "underline",
+    container: {
+      padding: 0,
+      height: "auto",
+      lineHeight: "normal",
+      color: mode(`${c}.500`, `${c}.200`)(props),
+      _hover: {
+        textDecoration: "underline",
+      },
+      _active: {
+        color: mode(`${c}.700`, `${c}.500`)(props),
+      },
     },
-    _active: {
-      color: mode(`${c}.700`, `${c}.500`)(props),
-    },
   }
 }
 
-const sizes = {
+const unstyled = {
+  container: {
+    bg: "none",
+    border: 0,
+    color: "inherit",
+    display: "inline",
+    font: "inherit",
+    lineHeight: "inherit",
+    margin: 0,
+    padding: 0,
+  },
+}
+
+const sizes: Sizes<typeof register> = {
   lg: {
-    height: 12,
-    minWidth: 12,
-    fontSize: "lg",
-    paddingX: 6,
+    container: {
+      height: 12,
+      minWidth: 12,
+      fontSize: "lg",
+      paddingX: 6,
+    },
   },
   md: {
-    height: 10,
-    minWidth: 10,
-    fontSize: "md",
-    paddingX: 4,
+    container: {
+      height: 10,
+      minWidth: 10,
+      fontSize: "md",
+      paddingX: 4,
+    },
   },
   sm: {
-    height: 8,
-    minWidth: 8,
-    fontSize: "sm",
-    paddingX: 3,
+    container: {
+      height: 8,
+      minWidth: 8,
+      fontSize: "sm",
+      paddingX: 3,
+    },
   },
   xs: {
-    height: 6,
-    minWidth: 6,
-    fontSize: "xs",
-    paddingX: 2,
+    container: {
+      height: 6,
+      minWidth: 6,
+      fontSize: "xs",
+      paddingX: 2,
+    },
   },
 }
 
-const unstyled = {
-  bg: "none",
-  border: 0,
-  color: "inherit",
-  display: "inline",
-  font: "inherit",
-  lineHeight: "inherit",
-  margin: 0,
-  padding: 0,
+const defaultProps: DefaultProps<typeof register> = {
+  variant: "solid",
+  size: "md",
+  colorScheme: "gray",
 }
 
-const Button: ComponentTheme = {
-  defaultProps: {
-    variant: "solid",
-    size: "md",
-    colorScheme: "gray",
-  },
-  baseStyle: {
-    lineHeight: "1.2",
-    borderRadius: "md",
-    fontWeight: "semibold",
-    _focus: {
-      boxShadow: "outline",
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      boxShadow: "none",
-    },
-  },
+const Button = {
+  register,
+  defaultProps,
+  baseStyle,
   sizes,
@@ -160,15 +207,2 @@ variants: {
 
-export const ButtonSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-  xs: "xs",
-}
-
-export const ButtonVariants = {
-  solid: "solid",
-  subtle: "subtle",
-  outline: "outline",
-}
-
 export default Button

src/components/checkbox.ts

@@ -1,27 +0,14 @@
-import { ComponentTheme, mode, Props } from "@chakra-ui/theme-tools"
+import { BaseStyle, DefaultProps, mode, Sizes } from "@chakra-ui/theme-tools"
 
-function checked(props: Props) {
-  const { colorScheme: c } = props
-  return {
-    bg: mode(`${c}.500`, `${c}.200`)(props),
-    borderColor: mode(`${c}.500`, `${c}.200`)(props),
-    color: mode("white", "gray.900")(props),
-    _hover: {
-      bg: mode(`${c}.600`, `${c}.300`)(props),
-      borderColor: mode(`${c}.600`, `${c}.300`)(props),
-    },
-    _disabled: {
-      borderColor: mode("gray.200", "transparent")(props),
-      bg: mode("gray.200", "whiteAlpha.300")(props),
-      color: mode("gray.500", "whiteAlpha.500")(props),
-    },
-  }
-}
+const register = {
+  parts: ["control", "label", "description", "icon"],
+  sizes: ["sm", "md", "lg"],
+} as const
 
-const baseStyle = (props: Props) => {
+const baseStyle: BaseStyle<typeof register> = (props) => {
   const { colorScheme: c } = props
-
   return {
-    Control: {
-      transition: "box-shadow 250ms",
+    control: {
+      width: "100%",
+      transition: "box-shadow 250ms, background-color 250ms",
       border: "2px solid",
@@ -31,3 +18,16 @@ borderRadius: "sm",
       color: "white",
-      _checked: checked(props),
+      _checked: {
+        bg: mode(`${c}.500`, `${c}.200`)(props),
+        borderColor: mode(`${c}.500`, `${c}.200`)(props),
+        color: mode("white", "gray.900")(props),
+        _hover: {
+          bg: mode(`${c}.600`, `${c}.300`)(props),
+          borderColor: mode(`${c}.600`, `${c}.300`)(props),
+        },
+        _disabled: {
+          borderColor: mode("gray.200", "transparent")(props),
+          bg: mode("gray.200", "whiteAlpha.300")(props),
+          color: mode("gray.500", "whiteAlpha.500")(props),
+        },
+      },
       _indeterminate: {
@@ -42,35 +42,38 @@ bg: mode(`${c}.500`, `${c}.200`)(props),
       },
-      _focus: {
-        boxShadow: "outline",
-      },
-      _invalid: {
-        borderColor: mode("red.500", "red.300")(props),
-      },
+      _focus: { boxShadow: "outline" },
+      _invalid: { borderColor: mode("red.500", "red.300")(props) },
     },
-    Label: {
+    label: {
+      userSelect: "none",
       _disabled: { opacity: 0.4 },
     },
+    icon: {
+      fontSize: "0.625rem",
+    },
   }
 }
 
-const sizes = {
+const sizes: Sizes<typeof register> = {
   sm: {
-    Control: { height: 3, width: 3 },
-    Label: { fontSize: "sm" },
+    control: { height: 3, width: 3 },
+    label: { fontSize: "sm" },
   },
   md: {
-    Control: { width: 4, height: 4 },
-    Label: { fontSize: "md" },
+    control: { width: 4, height: 4 },
+    label: { fontSize: "md" },
   },
   lg: {
-    Control: { width: 5, height: 5 },
-    Label: { fontSize: "lg" },
+    control: { width: 5, height: 5 },
+    label: { fontSize: "lg" },
   },
 }
 
-const Checkbox: ComponentTheme = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue",
-  },
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+  colorScheme: "blue",
+}
+
+const checkbox = {
+  register,
+  defaultProps,
   baseStyle,
@@ -80,8 +83,2 @@ sizes,
 
-export const CheckboxSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-}
-
-export default Checkbox
+export default checkbox

src/components/close-button.ts

@@ -1,50 +0,58 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import { BaseStyle, DefaultProps, mode, Sizes } from "@chakra-ui/theme-tools"
 
-const CloseButton: ComponentTheme = {
-  defaultProps: {
-    size: "md",
-  },
-  baseStyle: (props) => ({
-    borderRadius: "md",
-    transition: "all 0.2s",
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-      boxShadow: "none",
+const register = {
+  parts: ["icon", "container"],
+  sizes: ["sm", "md", "lg"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    icon: {},
+    container: {
+      borderRadius: "md",
+      transition: "all 0.2s",
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed",
+        boxShadow: "none",
+      },
+      _hover: {
+        bg: mode(`blackAlpha.100`, `whiteAlpha.100`)(props),
+      },
+      _active: {
+        bg: mode(`blackAlpha.200`, `whiteAlpha.200`)(props),
+      },
+      _focus: {
+        boxShadow: "outline",
+      },
     },
-    _hover: {
-      bg: mode(`blackAlpha.100`, `whiteAlpha.100`)(props),
-    },
-    _active: {
-      bg: mode(`blackAlpha.200`, `whiteAlpha.200`)(props),
-    },
-    _focus: {
-      boxShadow: "outline",
-    },
-  }),
-  sizes: {
-    lg: {
-      width: "40px",
-      height: "40px",
-      fontSize: "16px",
-    },
-    md: {
-      width: "32px",
-      height: "32px",
-      fontSize: "12px",
-    },
-    sm: {
-      width: "24px",
-      height: "24px",
-      fontSize: "10px",
-    },
+  }
+}
+
+const sizes: Sizes<typeof register> = {
+  lg: {
+    container: { width: "40px", height: "40px" },
+    icon: { fontSize: "16px" },
   },
+  md: {
+    container: { width: "32px", height: "32px" },
+    icon: { fontSize: "12px" },
+  },
+  sm: {
+    container: { width: "24px", height: "24px" },
+    icon: { fontSize: "10px" },
+  },
 }
 
-export const CloseButtonSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
 }
 
-export default CloseButton
+const closeButton = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+}
+
+export default closeButton

src/components/code.ts

@@ -1,7 +0,11 @@
-import Badge, { BadgeVariants } from "./badge"
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle } from "@chakra-ui/theme-tools"
+import badge from "./badge"
 
-const Code: ComponentTheme = {
-  defaultProps: Badge.defaultProps,
-  baseStyle: {
+const register = {
+  parts: ["container"],
+  variants: badge.register.variants,
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  container: {
     fontFamily: "mono",
@@ -12,7 +16,15 @@ fontSize: "sm",
   },
-  variants: Badge.variants,
 }
 
-export const CodeVariants = BadgeVariants
+const variants = badge.variants
 
-export default Code
+const defaultProps = badge.defaultProps
+
+const code = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants,
+}
+
+export default code

src/components/editable.ts

@@ -1,36 +0,30 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
-import { SystemProps } from "@chakra-ui/system"
+import { SystemStyleObject } from "@chakra-ui/system"
+import { BaseStyle } from "@chakra-ui/theme-tools"
 
-const base: SystemProps = {
-  fontSize: "inherit",
-  fontWeight: "inherit",
-  textAlign: "inherit",
-  bg: "transparent",
+const register = {
+  parts: ["container", "preview", "input"],
+} as const
+
+const previewStyle: SystemStyleObject = {
+  borderRadius: "md",
+  paddingY: "3px",
   transition: "all 0.2s",
-  borderRadius: "md",
-  paddingX: "3px",
-  marginX: "-3px",
 }
 
-const Editable: ComponentTheme = {
-  baseStyle: {
-    Preview: {
-      ...base,
-      cursor: "text",
-      display: "inline-block",
-    },
-    Input: {
-      ...base,
-      outline: 0,
-      width: "full",
-      _focus: {
-        boxShadow: "outline",
-      },
-      _placeholder: {
-        opacity: 0.6,
-      },
-    },
+const baseStyle: BaseStyle<typeof register> = {
+  container: {},
+  preview: previewStyle,
+  input: {
+    ...previewStyle,
+    width: "full",
+    _focus: { boxShadow: "outline" },
+    _placeholder: { opacity: 0.6 },
   },
 }
 
-export default Editable
+const editable = {
+  register,
+  baseStyle,
+}
+
+export default editable

src/components/form.ts

@@ -1,6 +0,10 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import { BaseStyle, mode } from "@chakra-ui/theme-tools"
 
-const Form: ComponentTheme = {
-  baseStyle: (props) => ({
-    Label: {
+const register = {
+  parts: ["label", "errorText", "requiredIndicator", "helperText", "errorIcon"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    label: {
       fontSize: "md",
@@ -16,3 +20,3 @@ marginRight: 3,
     },
-    ErrorText: {
+    errorText: {
       color: mode("red.500", "red.300")(props),
@@ -22,7 +26,7 @@ marginTop: 2,
     },
-    RequiredIndicator: {
+    requiredIndicator: {
       marginLeft: 1,
       color: mode("red.500", "red.300")(props),
     },
-    HelperText: {
+    helperText: {
       marginTop: 2,
@@ -33,9 +37,14 @@ color: mode("gray.500", "whiteAlpha.600")(props),
     },
-    ErrorIcon: {
+    errorIcon: {
       marginRight: "0.5em",
       color: mode("red.500", "red.300")(props),
     },
-  }),
+  }
 }
 
-export default Form
+const form = {
+  register,
+  baseStyle,
+}
+
+export default form

src/components/heading.ts

@@ -1,8 +0,10 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle, DefaultProps, Sizes } from "@chakra-ui/theme-tools"
 
-const Heading: ComponentTheme = {
-  defaultProps: {
-    size: "xl",
-  },
-  baseStyle: {
+const register = {
+  parts: ["heading"],
+  sizes: ["2xl", "xl", "lg", "md", "sm", "xs"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  heading: {
     fontFamily: "heading",
@@ -12,21 +14,30 @@ lineHeight: "shorter",
   },
-  sizes: {
-    "2xl": { fontSize: ["4xl", null, "5xl"] },
-    xl: { fontSize: ["3xl", null, "4xl"] },
-    lg: { fontSize: ["xl", null, "2xl"] },
-    md: { fontSize: "xl" },
-    sm: { fontSize: "md" },
-    xs: { fontSize: "sm" },
+}
+
+const sizes: Sizes<typeof register> = {
+  "2xl": {
+    heading: { fontSize: ["4xl", null, "5xl"] },
   },
+  xl: {
+    heading: { fontSize: ["3xl", null, "4xl"] },
+  },
+  lg: {
+    heading: { fontSize: ["xl", null, "2xl"] },
+  },
+  md: { heading: { fontSize: "xl" } },
+  sm: { heading: { fontSize: "md" } },
+  xs: { heading: { fontSize: "sm" } },
 }
 
-export const HeadingSizes = {
-  "2xl": "2xl",
-  xl: "xl",
-  lg: "lg",
-  md: "md",
-  sm: "sm",
-  xs: "xs",
+const defaultProps: DefaultProps<typeof register> = {
+  size: "xl",
 }
 
-export default Heading
+const heading = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+}
+
+export default heading

src/components/index.ts

@@ -9,8 +9,6 @@ import Accordion from "./accordion"
 import Code from "./code"
-import Divider from "./divider"
 import Modal from "./modal"
+import Drawer from "./drawer"
 import Heading from "./heading"
-import Icon from "./icon"
 import Input from "./input"
-import InputAddon from "./input-addon"
 import Link from "./link"
@@ -36,2 +34,4 @@ import Menu from "./menu"
 import Skeleton from "./skeleton"
+import Breadcrumb from "./breadcumb"
+import SkipLink from "./skip-link"
 
@@ -42,3 +42,3 @@ export default {
   Heading,
-  Icon,
+  Breadcrumb,
   Alert,
@@ -49,4 +49,4 @@ Badge,
   Code,
-  Divider,
   Spinner,
+  Drawer,
   Menu,
@@ -57,3 +57,2 @@ Tabs,
   Input,
-  InputAddon,
   Tooltip,
@@ -76,2 +75,3 @@ CloseButton,
   Skeleton,
+  SkipLink,
 }

src/components/input.ts

 import {
-  ComponentTheme,
+  BaseStyle,
+  DefaultProps,
+  getColor,
   mode,
-  Props,
-  getColor,
-  StyleObject,
+  Sizes,
+  Variants,
 } from "@chakra-ui/theme-tools"
 
-export interface InputProps {
-  focusBorderColor?: string
-  errorBorderColor?: string
-}
+const register = {
+  parts: ["field", "addon"],
+  sizes: ["sm", "md", "lg"],
+  variants: ["outline", "flushed", "filled", "unstyled"],
+} as const
 
-type VariantProps = Props & Required<InputProps>
-
-function getDefaults(props: VariantProps) {
-  const { focusBorderColor: fc, errorBorderColor: ec } = props
-  return {
-    focusBorderColor: fc || mode("blue.500", "blue.300")(props),
-    errorBorderColor: ec || mode("red.500", "red.300")(props),
-  }
+const baseStyle: BaseStyle<typeof register> = {
+  field: {
+    width: "100%",
+    outline: 0,
+    position: "relative",
+    appearance: "none",
+    transition: "all 0.2s",
+  },
 }
 
-function outline(props: VariantProps): StyleObject {
-  const { theme } = props
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
-
-  return {
-    border: "1px solid",
-    borderColor: mode("inherit", "whiteAlpha.50")(props),
-    bg: mode("white", "whiteAlpha.100")(props),
-    _hover: {
-      borderColor: mode("gray.300", "whiteAlpha.200")(props),
-    },
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all",
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-    },
-    _focus: {
-      zIndex: 1,
-      borderColor: getColor(theme, fc),
-      boxShadow: `0 0 0 1px ${getColor(theme, fc)}`,
-    },
-    _invalid: {
-      borderColor: getColor(theme, ec),
-      boxShadow: `0 0 0 1px ${getColor(theme, ec)}`,
-    },
-  }
-}
-
-function filled(props: VariantProps): StyleObject {
-  const { theme } = props
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
-
-  return {
-    border: "2px solid",
-    borderColor: "transparent",
-    bg: mode("gray.100", "whiteAlpha.50")(props),
-    _hover: {
-      bg: mode("gray.200", "whiteAlpha.100")(props),
-    },
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all",
-    },
-    _disabled: {
-      opacity: 0.4,
-      cursor: "not-allowed",
-    },
-    _focus: {
-      zIndex: 1,
-      bg: "transparent",
-      borderColor: getColor(theme, fc),
-    },
-    _invalid: {
-      borderColor: getColor(theme, ec),
-    },
-  }
-}
-
-function flushed(props: VariantProps): StyleObject {
-  const { theme } = props
-  const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
-
-  return {
-    borderBottom: "2px solid",
-    borderColor: "inherit",
-    borderRadius: 0,
-    paddingX: 0,
-    bg: "transparent",
-    _readOnly: {
-      boxShadow: "none !important",
-      userSelect: "all",
-    },
-    _focus: {
-      zIndex: 1,
-      borderColor: getColor(theme, fc),
-    },
-    _invalid: {
-      borderColor: getColor(theme, ec),
-    },
-  }
-}
-
-const unstyled = {
-  bg: "transparent",
-  paddingX: 0,
-  height: "auto",
-}
-
-const sizes: InputTheme["sizes"] = {
+const commonSizeStyle = {
   lg: {
@@ -123,2 +34,3 @@ fontSize: "lg",
   },
+
   md: {
@@ -131,2 +43,3 @@ fontSize: "md",
   },
+
   sm: {
@@ -141,38 +54,148 @@ fontSize: "sm",
 
-export type InputTheme = ComponentTheme<InputProps>
+const sizes: Sizes<typeof register> = {
+  lg: {
+    field: commonSizeStyle.lg,
+    addon: commonSizeStyle.lg,
+  },
+  md: {
+    field: commonSizeStyle.md,
+    addon: commonSizeStyle.md,
+  },
+  sm: {
+    field: commonSizeStyle.sm,
+    addon: commonSizeStyle.sm,
+  },
+}
 
-const Input: InputTheme = {
-  defaultProps: {
-    size: "md",
-    variant: "outline",
+const variants: Variants<typeof register> = {
+  outline(props) {
+    const { theme } = props
+    const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
+
+    return {
+      field: {
+        border: "1px solid",
+        borderColor: mode("inherit", "whiteAlpha.50")(props),
+        bg: mode("white", "whiteAlpha.100")(props),
+        _hover: { borderColor: mode("gray.300", "whiteAlpha.200")(props) },
+        _readOnly: { boxShadow: "none !important", userSelect: "all" },
+        _disabled: { opacity: 0.4, cursor: "not-allowed" },
+        _focus: {
+          zIndex: 1,
+          borderColor: getColor(theme, fc),
+          boxShadow: `0 0 0 1px ${getColor(theme, fc)}`,
+        },
+        _invalid: {
+          borderColor: getColor(theme, ec),
+          boxShadow: `0 0 0 1px ${getColor(theme, ec)}`,
+        },
+      },
+      addon: {
+        border: "1px solid",
+        borderColor: mode("inherit", "whiteAlpha.50")(props),
+        bg: mode("gray.100", "whiteAlpha.300")(props),
+      },
+    }
   },
-  baseStyle: {
-    width: "100%",
-    outline: 0,
-    position: "relative",
-    appearance: "none",
-    transition: "all 0.2s",
+
+  filled(props) {
+    const { theme } = props
+    const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
+
+    return {
+      field: {
+        border: "2px solid",
+        borderColor: "transparent",
+        bg: mode("gray.100", "whiteAlpha.50")(props),
+        _hover: { bg: mode("gray.200", "whiteAlpha.100")(props) },
+        _readOnly: { boxShadow: "none !important", userSelect: "all" },
+        _disabled: { opacity: 0.4, cursor: "not-allowed" },
+        _focus: {
+          zIndex: 1,
+          bg: "transparent",
+          borderColor: getColor(theme, fc),
+        },
+        _invalid: { borderColor: getColor(theme, ec) },
+      },
+      addon: {
+        border: "2px solid",
+        borderColor: "transparent",
+        bg: mode("gray.100", "whiteAlpha.50")(props),
+      },
+    }
   },
-  sizes,
-  variants: {
-    outline,
-    filled,
-    flushed,
-    unstyled,
+
+  flushed(props) {
+    const { theme } = props
+    const { focusBorderColor: fc, errorBorderColor: ec } = getDefaults(props)
+
+    return {
+      field: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
+        borderRadius: 0,
+        paddingX: 0,
+        bg: "transparent",
+        _readOnly: {
+          boxShadow: "none !important",
+          userSelect: "all",
+        },
+        _focus: {
+          zIndex: 1,
+          borderColor: getColor(theme, fc),
+        },
+        _invalid: {
+          borderColor: getColor(theme, ec),
+        },
+      },
+      addon: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
+        borderRadius: 0,
+        paddingX: 0,
+        bg: "transparent",
+      },
+    }
   },
+
+  unstyled: {
+    field: {
+      bg: "transparent",
+      paddingX: 0,
+      height: "auto",
+    },
+    addon: {
+      bg: "transparent",
+      paddingX: 0,
+      height: "auto",
+    },
+  },
 }
 
-export const InputSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+  variant: "outline",
 }
 
-export const InputVariants = {
-  outline: "outline",
-  filled: "filled",
-  flushed: "flushed",
-  unstyled: "unstyled",
+const input = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants,
 }
 
-export default Input
+export default input
+
+interface InputOptions {
+  focusBorderColor?: string
+  errorBorderColor?: string
+}
+
+function getDefaults(props: InputOptions) {
+  const { focusBorderColor: fc, errorBorderColor: ec } = props
+  return {
+    focusBorderColor: fc || mode("blue.500", "blue.300")(props),
+    errorBorderColor: ec || mode("red.500", "red.300")(props),
+  }
+}

src/components/kbd.ts

@@ -1,17 +0,28 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import { BaseStyle, mode } from "@chakra-ui/theme-tools"
 
-const Kbd: ComponentTheme = {
-  baseStyle: (props) => ({
-    bg: mode("gray.100", "whiteAlpha")(props),
-    borderRadius: "md",
-    borderWidth: "1px",
-    borderBottomWidth: "3px",
-    fontSize: "0.8em",
-    fontWeight: "bold",
-    lineHeight: "normal",
-    px: "0.4em",
-    whiteSpace: "nowrap",
-  }),
+const register = {
+  parts: ["kbd"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    kbd: {
+      bg: mode("gray.100", "whiteAlpha")(props),
+      borderRadius: "md",
+      borderWidth: "1px",
+      borderBottomWidth: "3px",
+      fontSize: "0.8em",
+      fontWeight: "bold",
+      lineHeight: "normal",
+      px: "0.4em",
+      whiteSpace: "nowrap",
+    },
+  }
 }
 
-export default Kbd
+const kbd = {
+  register,
+  baseStyle,
+}
+
+export default kbd

src/components/link.ts

@@ -1,5 +0,9 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle } from "@chakra-ui/theme-tools"
 
-const Link: ComponentTheme = {
-  baseStyle: {
+const register = {
+  parts: ["link"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  link: {
     transition: `all 0.15s ease-out`,
@@ -24,2 +28,7 @@ cursor: "pointer",
 
-export default Link
+const link = {
+  register,
+  baseStyle,
+}
+
+export default link

src/components/menu.ts

@@ -1,46 +0,48 @@
-import { Props, mode, ComponentTheme, copy } from "@chakra-ui/theme-tools"
-import { SystemProps } from "@chakra-ui/system"
-import Button from "./button"
+import { BaseStyle, mode } from "@chakra-ui/theme-tools"
 
-const menulist = (props: Props): SystemProps => ({
-  bg: mode(`#fff`, `gray.700`)(props),
-  boxShadow: mode(`sm`, `dark-lg`)(props),
-  color: "inherit",
-  outline: 0,
-  minWidth: "3xs",
-  paddingY: "2",
-  zIndex: "1",
-  borderRadius: "md",
-  borderWidth: "1px",
-})
+const register = {
+  parts: [
+    "menuList",
+    "menuItem",
+    "menuButton",
+    "groupTitle",
+    "menuDivider",
+    "icon",
+    "command",
+  ],
+} as const
 
-const menuitem = (props: Props): SystemProps => ({
-  width: "100%",
-  outline: 0,
-  textDecoration: "none",
-  paddingY: "0.4rem",
-  paddingX: "0.8rem",
-  transition: "background 50ms ease-in 0s",
-  _focus: {
-    bg: mode(`gray.100`, `whiteAlpha.100`)(props),
-  },
-  _active: {
-    bg: mode(`gray.200`, `whiteAlpha.200`)(props),
-  },
-  _expanded: {
-    bg: mode(`gray.100`, `whiteAlpha.100`)(props),
-  },
-  _disabled: {
-    opacity: 0.4,
-    cursor: "not-allowed",
-  },
-})
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    menuList: {
+      bg: mode(`#fff`, `gray.700`)(props),
+      boxShadow: mode(`sm`, `dark-lg`)(props),
+      color: "inherit",
+      minWidth: "3xs",
+      paddingY: "2",
+      zIndex: 1,
+      borderRadius: "md",
+      borderWidth: "1px",
+    },
 
-const Menu: ComponentTheme = {
-  defaultProps: Button.defaultProps,
-  baseStyle: (props) => ({
-    MenuButton: Button.baseStyle as SystemProps,
-    MenuList: menulist(props),
-    MenuItem: menuitem(props),
-    MenuGroupTitle: {
+    menuItem: {
+      paddingY: "0.4rem",
+      paddingX: "0.8rem",
+      transition: "background 50ms ease-in 0s",
+      _focus: {
+        bg: mode(`gray.100`, `whiteAlpha.100`)(props),
+      },
+      _active: {
+        bg: mode(`gray.200`, `whiteAlpha.200`)(props),
+      },
+      _expanded: {
+        bg: mode(`gray.100`, `whiteAlpha.100`)(props),
+      },
+      _disabled: {
+        opacity: 0.4,
+        cursor: "not-allowed",
+      },
+    },
+
+    groupTitle: {
       marginX: 4,
@@ -51,33 +53,14 @@ marginY: 2,
     },
-  }),
-  variants: {
-    /**
-     * We're using `copy` function to copy all button variants
-     * under the key `MenuButton`.
-     *
-     * You can ignore this copy and write your own variant styles
-     * for the different sub-components.
-     *
-     * @example
-     *
-     * variants: {
-     *   simple: {
-     *     MenuButton: {...}
-     *   },
-     *   extended: {
-     *      MenuButton: {...}
-     *   }
-     * }
-     */
-    ...copy(Button.variants, "MenuButton"),
-  },
-  sizes: {
-    /**
-     * We're using `copy` function to copy all button sizes
-     * under the key `MenuButton`.
-     */
-    ...copy(Button.sizes, "MenuButton"),
-  },
+
+    command: {
+      opacity: 0.6,
+    },
+  }
 }
 
-export default Menu
+const menu = {
+  register,
+  baseStyle,
+}
+
+export default menu

src/components/modal.ts

@@ -1,24 +0,39 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import {
+  BaseStyle,
+  DefaultProps,
+  mode,
+  Sizes,
+  TransitionStyle,
+} from "@chakra-ui/theme-tools"
 
-/**
- * Since the `maxWidth` prop references theme.sizes internally,
- * we can leverage that to size our modals.
- */
-const getSize = (value: string) => ({
-  Content: { maxWidth: value },
-})
+const register = {
+  parts: ["overlay", "content", "header", "body", "footer"],
+  sizes: [
+    "xs",
+    "sm",
+    "md",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "full",
+  ],
+} as const
 
-export interface Props {
-  scrollBehavior?: "inside" | "outside"
-}
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  const { isCentered, scrollBehavior } = props
 
-const Modal: ComponentTheme<Props> = {
-  defaultProps: {
-    size: "md",
-  },
-  baseStyle: (props) => ({
-    Overlay: {
+  return {
+    overlay: {
       bg: "blackAlpha.600",
+      display: "flex",
+      justifyContent: "center",
+      alignItems: isCentered ? "center" : "flex-start",
+      overflow: scrollBehavior === "inside" ? "hidden" : "auto",
     },
-    Content: {
+
+    content: {
       borderRadius: "md",
@@ -29,6 +44,7 @@ bg: mode("white", "gray.700")(props),
       maxHeight:
-        props.scrollBehavior === "inside" ? "calc(100vh - 7.5rem)" : undefined,
+        scrollBehavior === "inside" ? "calc(100vh - 7.5rem)" : undefined,
       boxShadow: mode("lg", "dark-lg")(props),
     },
-    Header: {
+
+    header: {
       paddingX: 6,
@@ -39,40 +55,99 @@ paddingY: 4,
     },
-    Body: {
+
+    body: {
       paddingX: 6,
       paddingY: 2,
+      flex: 1,
+      overflow: scrollBehavior === "inside" ? "auto" : undefined,
     },
-    Footer: {
+
+    footer: {
       paddingX: 6,
       paddingY: 4,
     },
-  }),
-  sizes: {
-    xs: getSize("xs"),
-    sm: getSize("sm"),
-    md: getSize("md"),
-    lg: getSize("lg"),
-    xl: getSize("xl"),
-    "2xl": getSize("2xl"),
-    "3xl": getSize("3xl"),
-    "4xl": getSize("4xl"),
-    "5xl": getSize("5xl"),
-    "6xl": getSize("6xl"),
-    full: getSize("full"),
+  }
+}
+
+/**
+ * Since the `maxWidth` prop references theme.sizes internally,
+ * we can leverage that to size our modals.
+ */
+function getSize(value: string) {
+  return {
+    content: { maxWidth: value },
+  }
+}
+
+const sizes: Sizes<typeof register> = {
+  xs: getSize("xs"),
+  sm: getSize("sm"),
+  md: getSize("md"),
+  lg: getSize("lg"),
+  xl: getSize("xl"),
+  "2xl": getSize("2xl"),
+  "3xl": getSize("3xl"),
+  "4xl": getSize("4xl"),
+  "5xl": getSize("5xl"),
+  "6xl": getSize("6xl"),
+  full: getSize("full"),
+}
+
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+}
+
+const transition: TransitionStyle<typeof register> = {
+  overlay: {
+    timeout: { enter: 150, exit: 100 },
+    enter: {
+      transition: {
+        easing: "cubic-bezier(0,0,.2,1)",
+        duration: "150ms",
+        property: "opacity",
+      },
+      from: { opacity: 0.01 },
+      to: { opacity: 1 },
+    },
+    exit: {
+      transition: {
+        easing: "cubic-bezier(.4,0,1,1)",
+        duration: "100ms",
+        property: "opacity",
+      },
+      from: { opacity: 1 },
+      to: { opacity: 0.01 },
+    },
   },
+  content: {
+    addAppearStyles: true,
+    timeout: { enter: 150, exit: 100 },
+    enter: {
+      transition: {
+        easing: "cubic-bezier(0,0,.2,1)",
+        duration: "150ms",
+        property: "opacity, transform",
+      },
+      from: { opacity: 0.01, transform: "scale(0.97)" },
+      to: { opacity: 1, transform: "scale(1)" },
+    },
+    exit: {
+      transition: {
+        easing: "cubic-bezier(.4,0,1,1)",
+        duration: "100ms",
+        property: "opacity, transform",
+      },
+      from: { opacity: 1, transform: "scale(1)" },
+      to: { opacity: 0.01, transform: "scale(0.97)" },
+    },
+  },
 }
 
-export const ModalSizes = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
-  "2xl": "2xl",
-  "3xl": "3xl",
-  "4xl": "4xl",
-  "5xl": "5xl",
-  "6xl": "6xl",
-  full: "full",
+const modal = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  transition,
 }
 
-export default Modal
+export default modal

src/components/number-input.ts

@@ -1,32 +0,24 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import {
+  BaseStyle,
+  mode,
+  runIfFn,
+  Sizes,
+  Variants,
+  VariantType,
+} from "@chakra-ui/theme-tools"
+import input from "./input"
 
-function getSizeStyle(size: "sm" | "md" | "lg") {
+const register = {
+  parts: ["field", "stepper", "stepperGroup"],
+  sizes: input.register.sizes,
+  variants: input.register.variants,
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
   return {
-    Stepper: {
-      fontSize: size === "lg" ? "14px" : "10px",
-      _first: {
-        borderTopRightRadius: size === "lg" ? 3 : 1,
-      },
-      _last: {
-        borderBottomRightRadius: size === "lg" ? 3 : 1,
-        marginTop: "-1px",
-        borderTopWidth: 1,
-      },
-    },
-  }
-}
-
-const NumberInput: ComponentTheme = {
-  defaultProps: {
-    size: "md",
-  },
-  baseStyle: (props) => ({
-    StepperGroup: {
+    field: input.baseStyle.field,
+    stepperGroup: {
       width: "24px",
-      margin: "1px",
-      position: "absolute",
-      right: "0px",
-      height: "calc(100% - 2px)",
     },
-    Stepper: {
+    stepper: {
       borderLeft: "1px solid",
@@ -43,16 +35,60 @@ borderColor: mode("inherit", "whiteAlpha.300")(props),
     },
-  }),
-  sizes: {
-    sm: getSizeStyle("sm"),
-    md: getSizeStyle("md"),
-    lg: getSizeStyle("lg"),
-  },
+  }
 }
 
-export const NumberInputSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+const sizes: Sizes<typeof register> = {
+  sm: getSizeStyle("sm"),
+  md: getSizeStyle("md"),
+  lg: getSizeStyle("lg"),
 }
 
-export default NumberInput
+function getSizeStyle(size: "sm" | "md" | "lg") {
+  const inputPartsStyle = input.sizes[size]
+  const inputStyle =
+    typeof inputPartsStyle !== "function" ? inputPartsStyle?.field : {}
+
+  const radius = {
+    lg: "md",
+    md: "md",
+    sm: "sm",
+  }
+
+  return {
+    field: inputStyle,
+    stepper: {
+      fontSize: size === "lg" ? "14px" : "10px",
+      _first: {
+        borderTopRightRadius: radius[size],
+      },
+      _last: {
+        borderBottomRightRadius: radius[size],
+        marginTop: "-1px",
+        borderTopWidth: 1,
+      },
+    },
+  }
+}
+
+const variants: Variants<typeof register> = {
+  outline: (props) => ({ field: getVariantStyle("outline", props) }),
+  filled: (props) => ({ field: getVariantStyle("filled", props) }),
+  flushed: (props) => ({ field: getVariantStyle("flushed", props) }),
+  unstyled: (props) => ({ field: getVariantStyle("unstyled", props) }),
+}
+
+function getVariantStyle(variant: VariantType<typeof register>, props: any) {
+  const partsStyle = runIfFn(input.variants[variant], props)
+  return partsStyle?.field ?? {}
+}
+
+const defaultProps = input.defaultProps
+
+const numberInput = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants,
+}
+
+export default numberInput

src/components/pin-input.ts

@@ -1,10 +0,17 @@
-import Input, { InputProps, InputVariants } from "./input"
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { Sizes } from "@chakra-ui/theme-tools"
+import input from "./input"
 
-const PinInput: ComponentTheme<InputProps> = {
-  defaultProps: Input.defaultProps,
-  baseStyle: Input.baseStyle,
-  variants: Input.variants,
-  sizes: {
-    lg: {
+const register = {
+  parts: ["field"],
+  sizes: input.register.sizes,
+  variants: input.register.variants,
+} as const
+
+const baseStyle = input.baseStyle
+
+const variants = input.variants
+
+const sizes: Sizes<typeof register> = {
+  lg: {
+    field: {
       fontSize: "lg",
@@ -15,3 +22,5 @@ width: 12,
     },
-    md: {
+  },
+  md: {
+    field: {
       fontSize: "md",
@@ -22,3 +31,5 @@ width: 10,
     },
-    sm: {
+  },
+  sm: {
+    field: {
       fontSize: "sm",
@@ -32,10 +43,12 @@ width: 8,
 
-export const PinInputSizes = {
-  lg: "lg",
-  md: "md",
-  sm: "sm",
+const defaultProps = input.defaultProps
+
+const pinInput = {
+  register,
+  defaultProps,
+  baseStyle,
+  variants,
+  sizes,
 }
 
-export const PinInputVariants = InputVariants
-
-export default PinInput
+export default pinInput

src/components/popover.ts

@@ -1,6 +0,15 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import {
+  BaseStyle,
+  mode,
+  TransitionStyle,
+  scaleFade,
+} from "@chakra-ui/theme-tools"
 
-const Popover: ComponentTheme = {
-  baseStyle: (props) => ({
-    Content: {
+const register = {
+  parts: ["content", "header", "body", "footer"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    content: {
       bg: mode("white", "gray.700")(props),
@@ -19,3 +28,3 @@ border: "1px solid",
     },
-    Header: {
+    header: {
       paddingX: 3,
@@ -25,7 +34,7 @@ paddingY: 2,
     },
-    Body: {
+    body: {
       paddingX: 3,
       paddingY: 2,
     },
-    Footer: {
+    footer: {
       paddingX: 3,
@@ -35,5 +44,15 @@ paddingY: 2,
     },
-  }),
+  }
 }
 
-export default Popover
+const transition: TransitionStyle<typeof register> = {
+  content: scaleFade,
+}
+
+const popover = {
+  register,
+  baseStyle,
+  transition,
+}
+
+export default popover

src/components/progress.ts

@@ -1,8 +0,41 @@
-import { ComponentTheme, mode, getColor } from "@chakra-ui/theme-tools"
+import {
+  BaseStyle,
+  DefaultProps,
+  generateStripe,
+  getColor,
+  mode,
+  Sizes,
+} from "@chakra-ui/theme-tools"
 
-type ProgressTheme = ComponentTheme<{ isIndeterminate?: boolean }>
+const register = {
+  parts: ["track", "filledTrack", "label"],
+  sizes: ["xs", "sm", "md", "lg"],
+} as const
 
-const getProgressBg: ProgressTheme["baseStyle"] = (props) => {
-  const { colorScheme: c, theme: t, isIndeterminate } = props
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    label: {
+      lineHeight: "1",
+      fontSize: "0.25em",
+      fontWeight: "bold",
+      color: "white",
+    },
+    track: {
+      bg: mode(`gray.100`, `whiteAlpha.300`)(props),
+    },
+    filledTrack: {
+      transition: "all 0.3s",
+      ...getFilledTrackStyle(props),
+    },
+  }
+}
 
+function getFilledTrackStyle(props: any) {
+  const { colorScheme: c, theme: t, isIndeterminate, hasStripe } = props
+
+  const stripeStyle = mode(
+    generateStripe(),
+    generateStripe("1rem", "rgba(0,0,0,0.1)"),
+  )(props)
+
   const bg = mode(`${c}.500`, `${c}.200`)(props)
@@ -17,3 +50,6 @@
 
+  const shouldAddStripe = !isIndeterminate && hasStripe
+
   return {
+    ...(shouldAddStripe && stripeStyle),
     bg: isIndeterminate ? gradient : bg,
@@ -23,46 +59,29 @@ }
 
-const sizes: ProgressTheme["sizes"] = {
+const sizes: Sizes<typeof register> = {
   xs: {
-    Track: { height: "0.25rem" },
+    track: { height: "0.25rem" },
   },
   sm: {
-    Track: { height: "0.5rem" },
+    track: { height: "0.5rem" },
   },
   md: {
-    Track: { height: "0.75rem" },
+    track: { height: "0.75rem" },
   },
   lg: {
-    Track: { height: "1rem" },
+    track: { height: "1rem" },
   },
 }
 
-const Progress: ProgressTheme = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue",
-  },
-  baseStyle: (props) => ({
-    Label: {
-      lineHeight: "1",
-      fontSize: "0.25em",
-    },
-    Track: {
-      bg: mode(`gray.100`, `whiteAlpha.300`)(props),
-    },
-    Indicator: {
-      height: "100%",
-      transition: "all 0.3s",
-      ...getProgressBg(props),
-    },
-  }),
-  sizes,
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+  colorScheme: "blue",
 }
 
-export const ProgressSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
-  xs: "xs",
+const progress = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
 }
 
-export default Progress
+export default progress

src/components/radio.ts

@@ -1,14 +0,18 @@
-import Checkbox, { CheckboxSizes } from "./checkbox"
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle, runIfFn, Sizes } from "@chakra-ui/theme-tools"
+import checkbox from "./checkbox"
 
-const baseStyle = Checkbox.baseStyle as any
+const register = {
+  parts: ["control", "label"],
+  sizes: checkbox.register.sizes,
+} as const
 
-const Radio: ComponentTheme = {
-  defaultProps: Checkbox.defaultProps,
-  baseStyle: (props) => ({
-    Control: {
-      ...baseStyle(props).Control,
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  const { label, control } = runIfFn(checkbox.baseStyle, props)
+  return {
+    label,
+    control: {
+      ...control,
       borderRadius: "full",
       _checked: {
-        ...baseStyle(props).Control["_checked"],
+        ...control?.["_checked"],
         _before: {
@@ -25,17 +29,21 @@ content: `""`,
     },
-    Label: baseStyle(props).Label,
-  }),
-  sizes: {
-    ...Checkbox.sizes,
-    sm: {
-      Control: {
-        width: 3,
-        height: 3,
-      },
-    },
+  }
+}
+
+const sizes: Sizes<typeof register> = {
+  ...checkbox.sizes,
+  sm: {
+    control: { width: 3, height: 3 },
   },
 }
 
-export const RadioSizes = CheckboxSizes
+const defaultProps = checkbox.defaultProps
 
-export default Radio
+const radio = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+}
+
+export default radio

src/components/select.ts

@@ -1,8 +0,13 @@
-import Input, { InputVariants, InputSizes, InputProps } from "./input"
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle } from "@chakra-ui/theme-tools"
+import input from "./input"
 
-const Select: ComponentTheme<InputProps> = {
-  ...Input,
-  baseStyle: {
-    ...Input.baseStyle,
+const register = {
+  parts: ["field", "icon"],
+  sizes: input.register.sizes,
+  variants: input.register.variants,
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  field: {
+    ...input.baseStyle.field,
     appearance: "none",
@@ -13,7 +18,21 @@ paddingRight: "2rem",
   },
+  icon: {
+    color: "currentColor",
+    fontSize: "1.25rem",
+    _disabled: { opacity: 0.5 },
+  },
 }
 
-export const SelectSizes = InputSizes
-export const SelectVariants = InputVariants
+const sizes = input.sizes
+const variants = input.variants
+const defaultProps = input.defaultProps
 
-export default Select
+const select = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants,
+}
+
+export default select

src/components/skeleton.ts

 import { keyframes } from "@chakra-ui/system"
-import { ComponentTheme, mode, Props, getColor } from "@chakra-ui/theme-tools"
+import { BaseStyle, getColor, mode } from "@chakra-ui/theme-tools"
 
-export interface SkeletonProps {
-  startColor?: string
-  endColor?: string
-  speed?: number
-  duration?: number
-}
+const register = {
+  parts: ["skeleton"],
+} as const
 
-export const frame = (start: string, end: string) => keyframes`
-  from {
-    border-color: ${start};
-    background: ${start};
-  }
-  to {
-    border-color: ${end};
-    background: ${end};
-  }
-`
-
-type CustomProps = Props & SkeletonProps
-
-export function baseStyle(props: CustomProps) {
+const baseStyle: BaseStyle<typeof register> = (props) => {
   const {
@@ -36,14 +20,24 @@ startColor = mode("gray.100", "gray.800")(props),
   return {
-    opacity: 0.7,
-    borderRadius: "2px",
-    borderColor: start,
-    background: end,
-    animation: `${speed}s linear infinite alternate ${frame(start, end)}`,
+    skeleton: {
+      opacity: 0.7,
+      borderRadius: "2px",
+      borderColor: start,
+      background: end,
+      animation: `${speed}s linear infinite alternate ${frame(start, end)}`,
+    },
   }
 }
 
-const Skeleton: ComponentTheme<SkeletonProps> = {
-  baseStyle: baseStyle,
+const skeleton = {
+  register,
+  baseStyle,
 }
 
-export default Skeleton
+export default skeleton
+
+export function frame(startColor: string, endColor: string) {
+  return keyframes({
+    from: { borderColor: startColor, background: startColor },
+    to: { borderColor: endColor, background: endColor },
+  })
+}

src/components/slider.ts

@@ -1,49 +0,17 @@
-import { ComponentTheme, mode, orient } from "@chakra-ui/theme-tools"
+import {
+  BaseStyle,
+  DefaultProps,
+  mode,
+  orient,
+  Sizes,
+} from "@chakra-ui/theme-tools"
 
-const Slider: ComponentTheme = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue",
-  },
-  sizes: {
-    lg: (props) => ({
-      Thumb: {
-        width: "16px",
-        height: "16px",
-      },
-      Track: orient({
-        orientation: props.orientation,
-        horizontal: {
-          height: "4px",
-        },
-        vertical: {
-          width: "4px",
-        },
-      }),
-    }),
-    md: (props) => ({
-      Thumb: {
-        width: "14px",
-        height: "14px",
-      },
-      Track: orient({
-        orientation: props.orientation,
-        horizontal: { height: "4px" },
-        vertical: { width: "4px" },
-      }),
-    }),
-    sm: (props) => ({
-      Thumb: {
-        width: "10px",
-        height: "10px",
-      },
-      Track: orient({
-        orientation: props.orientation,
-        horizontal: { height: "2px" },
-        vertical: { width: "2px" },
-      }),
-    }),
-  },
-  baseStyle: (props) => ({
-    Root: {
+const register = {
+  parts: ["container", "thumb", "track", "filledTrack"],
+  sizes: ["sm", "md", "lg"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    container: {
       _disabled: {
@@ -56,11 +24,7 @@ opacity: 0.6,
         orientation: props.orientation,
-        vertical: {
-          height: "100%",
-        },
-        horizontal: {
-          width: "100%",
-        },
+        vertical: { height: "100%" },
+        horizontal: { width: "100%" },
       }),
     },
-    Track: {
+    track: {
       borderRadius: "sm",
@@ -72,3 +36,3 @@ bg: mode("gray.200", "whiteAlpha.200")(props),
     },
-    Thumb: {
+    thumb: {
       zIndex: 1,
@@ -105,14 +69,55 @@ borderRadius: "full",
     },
-    FilledTrack: {
+    filledTrack: {
       bg: mode(`${props.colorScheme}.500`, `${props.colorScheme}.200`)(props),
     },
-  }),
+  }
 }
 
-export const SliderSizes = {
-  lg: "lg",
-  sm: "sm",
-  md: "md",
+const sizes: Sizes<typeof register> = {
+  lg: function (props) {
+    return {
+      thumb: { width: "16px", height: "16px" },
+      track: orient({
+        orientation: props.orientation,
+        horizontal: { height: "4px" },
+        vertical: { width: "4px" },
+      }),
+    }
+  },
+
+  md: function (props) {
+    return {
+      thumb: { width: "14px", height: "14px" },
+      track: orient({
+        orientation: props.orientation,
+        horizontal: { height: "4px" },
+        vertical: { width: "4px" },
+      }),
+    }
+  },
+
+  sm: function (props) {
+    return {
+      thumb: { width: "10px", height: "10px" },
+      track: orient({
+        orientation: props.orientation,
+        horizontal: { height: "2px" },
+        vertical: { width: "2px" },
+      }),
+    }
+  },
 }
 
-export default Slider
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+  colorScheme: "blue",
+}
+
+const slider = {
+  register,
+  defaultProps,
+  sizes,
+  baseStyle,
+}
+
+export default slider

src/components/spinner.ts

@@ -1,39 +0,36 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { DefaultProps, Sizes } from "@chakra-ui/theme-tools"
 
-const Spinner: ComponentTheme = {
-  defaultProps: {
-    size: "md",
+const register = {
+  parts: ["spinner"],
+  sizes: ["xs", "sm", "md", "lg", "xl"],
+} as const
+
+const sizes: Sizes<typeof register> = {
+  xs: {
+    spinner: { width: "0.75rem", height: "0.75rem" },
   },
-  sizes: {
-    xs: {
-      width: "0.75rem",
-      height: "0.75rem",
-    },
-    sm: {
-      width: "1rem",
-      height: "1rem",
-    },
-    md: {
-      width: "1.5rem",
-      height: "1.5rem",
-    },
-    lg: {
-      width: "2rem",
-      height: "2rem",
-    },
-    xl: {
-      width: "3rem",
-      height: "3rem",
-    },
+  sm: {
+    spinner: { width: "1rem", height: "1rem" },
   },
+  md: {
+    spinner: { width: "1.5rem", height: "1.5rem" },
+  },
+  lg: {
+    spinner: { width: "2rem", height: "2rem" },
+  },
+  xl: {
+    spinner: { width: "3rem", height: "3rem" },
+  },
 }
 
-export const SpinnerSizes = {
-  xs: "xs",
-  sm: "sm",
-  md: "md",
-  lg: "lg",
-  xl: "xl",
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
 }
 
-export default Spinner
+const spinner = {
+  register,
+  defaultProps,
+  sizes,
+}
+
+export default spinner

src/components/stat.ts

@@ -1,43 +0,51 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle, DefaultProps, Sizes } from "@chakra-ui/theme-tools"
 
-const Stat: ComponentTheme = {
-  defaultProps: {
-    size: "md",
+const register = {
+  parts: ["label", "helpText", "number", "container", "icon"],
+  sizes: ["sm", "md", "lg"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  container: {
+    flex: "1",
+    paddingRight: 4,
   },
-  baseStyle: {
-    Label: {
-      fontWeight: "medium",
-    },
-    HelpText: {
-      opacity: 0.8,
-      marginBottom: 2,
-    },
-    Number: {
-      verticalAlign: "baseline",
-      fontWeight: "semibold",
-    },
+  label: {
+    fontWeight: "medium",
   },
-  /**
-   * Only one size specified but you can add more,
-   * and style each part.
-   */
-  sizes: {
-    md: {
-      Label: {
-        fontSize: "sm",
-      },
-      HelpText: {
-        fontSize: "sm",
-      },
-      Number: {
-        fontSize: "2xl",
-      },
-    },
+  helpText: {
+    opacity: 0.8,
+    marginBottom: 2,
   },
+  number: {
+    verticalAlign: "baseline",
+    fontWeight: "semibold",
+  },
+  icon: {
+    marginRight: 1,
+    width: "14px",
+    height: "14px",
+    verticalAlign: "middle",
+  },
 }
 
-export const StatSizes = {
-  md: "md",
+const sizes: Sizes<typeof register> = {
+  md: {
+    label: { fontSize: "sm" },
+    helpText: { fontSize: "sm" },
+    number: { fontSize: "2xl" },
+  },
 }
 
-export default Stat
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+}
+
+const stat = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+}
+
+export default stat

src/components/switch.ts

@@ -1,10 +0,35 @@
-import { ComponentTheme, mode } from "@chakra-ui/theme-tools"
+import { BaseStyle, DefaultProps, mode, Sizes } from "@chakra-ui/theme-tools"
 
-const sizes: ComponentTheme["sizes"] = {
+const register = {
+  parts: ["track", "thumb"],
+  sizes: ["sm", "md", "lg"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  const { colorScheme: c } = props
+  return {
+    track: {
+      borderRadius: "full",
+      padding: "2px",
+      transition: "all 120ms",
+      bg: mode("gray.300", "whiteAlpha.400")(props),
+      _focus: { boxShadow: "outline" },
+      _disabled: { opacity: 0.4, cursor: "not-allowed" },
+      _checked: {
+        bg: mode(`${c}.500`, `${c}.200`)(props),
+      },
+    },
+    thumb: {
+      bg: "white",
+      transition: "transform 250ms",
+      borderRadius: "full",
+      transform: "translateX(0)",
+    },
+  }
+}
+
+const sizes: Sizes<typeof register> = {
   sm: {
-    Track: {
-      width: "1.375rem",
-      height: "0.75rem",
-    },
-    Thumb: {
+    track: { width: "1.375rem", height: "0.75rem" },
+    thumb: {
       width: "0.75rem",
@@ -18,7 +43,4 @@ height: "0.75rem",
   md: {
-    Track: {
-      width: "1.875rem",
-      height: "1rem",
-    },
-    Thumb: {
+    track: { width: "1.875rem", height: "1rem" },
+    thumb: {
       width: "1rem",
@@ -32,7 +54,4 @@ height: "1rem",
   lg: {
-    Track: {
-      width: "2.875rem",
-      height: "1.5rem",
-    },
-    Thumb: {
+    track: { width: "2.875rem", height: "1.5rem" },
+    thumb: {
       width: "1.5rem",
@@ -47,40 +66,15 @@ height: "1.5rem",
 
-const Switch: ComponentTheme = {
-  defaultProps: {
-    size: "md",
-    colorScheme: "blue",
-  },
-  baseStyle: (props) => ({
-    Track: {
-      borderRadius: "full",
-      padding: "2px",
-      transition: "all 120ms",
-      bg: mode("gray.300", "whiteAlpha.400")(props),
-      _focus: {
-        boxShadow: "outline",
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed",
-      },
-      _checked: {
-        bg: mode(`${props.colorScheme}.500`, `${props.colorScheme}.200`)(props),
-      },
-    },
-    Thumb: {
-      bg: "white",
-      transition: "transform 250ms",
-      borderRadius: "full",
-      transform: "translateX(0)",
-    },
-  }),
-  sizes,
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+  colorScheme: "blue",
 }
 
-export const SwitchSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+// can't use the `switch` here since it's a reserved keyword
+const _switch = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
 }
 
-export default Switch
+export default _switch

src/components/tabs.ts

 import {
-  Props,
+  BaseStyle,
+  DefaultProps,
+  getColor,
   mode,
-  ComponentTheme,
-  StyleObject,
-  getColor,
+  Sizes,
+  Variants,
 } from "@chakra-ui/theme-tools"
 
-function line(props: Props) {
-  const { colorScheme: c } = props
-  return {
-    TabList: {
-      borderBottom: "2px solid",
-      borderColor: "inherit",
-    },
-    Tab: {
-      borderBottom: "2px solid",
-      borderColor: "transparent",
-      marginBottom: "-2px",
-      _selected: {
-        color: mode(`${c}.600`, `${c}.300`)(props),
-        borderColor: "currentColor",
-      },
-      _active: {
-        bg: mode("gray.200", "whiteAlpha.300")(props),
-      },
-      _disabled: {
-        opacity: 0.4,
-        cursor: "not-allowed",
-      },
-    },
-  }
+const register = {
+  parts: ["tablist", "tab", "tabpanel", "indicator"],
+  sizes: ["sm", "md", "lg"],
+  variants: [
+    "line",
+    "enclosed",
+    "soft-rounded",
+    "enclosed-colored",
+    "solid-rounded",
+    "unstyled",
+  ],
+} as const
+
+const alignments = {
+  end: "flex-end",
+  center: "center",
+  start: "flex-start",
 }
 
-function enclosed(props: Props) {
-  const { colorScheme: c } = props
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  const { align = "start", isFitted } = props
   return {
-    Tab: {
-      borderTopRadius: "md",
-      border: "1px solid",
-      borderColor: "transparent",
-      marginBottom: "-1px",
-      _selected: {
-        color: mode(`${c}.600`, `${c}.300`)(props),
-        borderColor: "inherit",
-        borderBottomColor: mode(`white`, `gray.800`)(props),
+    tab: {
+      flex: isFitted ? 1 : undefined,
+      transition: "all 0.2s",
+      _focus: {
+        zIndex: 1,
+        boxShadow: "outline",
       },
     },
-    TabList: {
-      marginBottom: "-1px",
-      borderBottom: "1px solid",
-      borderColor: "inherit",
+    tablist: { justifyContent: alignments[align] },
+    tabpanel: {
+      padding: 4,
     },
@@ -57,128 +47,150 @@ }
 
-function enclosedColored(props: Props) {
-  const { colorScheme: c } = props
-  return {
-    Tab: {
-      border: "1px solid",
-      borderColor: "inherit",
-      bg: mode(`gray.50`, `whiteAlpha.50`)(props),
-      marginBottom: "-1px",
-      _notLast: {
-        mr: "-1px",
-      },
-      _selected: {
-        bg: mode(`#fff`, "gray.800")(props),
-        color: mode(`${c}.600`, `${c}.300`)(props),
-        borderColor: "inherit",
-        borderTopColor: "currentColor",
-        borderBottomColor: "transparent",
-      },
+const sizes: Sizes<typeof register> = {
+  sm: {
+    tab: {
+      paddingY: "0.25rem",
+      paddingX: "1rem",
+      fontSize: "0.85rem",
     },
-    TabList: {
-      marginBottom: "-1px",
-      borderBottom: "1px solid",
-      borderColor: "inherit",
+  },
+  md: {
+    tab: {
+      fontSize: "1rem",
+      paddingY: "0.5rem",
+      paddingX: "1rem",
     },
-  }
-}
-
-function softRounded(props: any): StyleObject {
-  const { colorScheme: c, theme } = props
-  return {
-    Tab: {
-      borderRadius: "full",
-      fontWeight: "semibold",
-      color: "gray.600",
-      _selected: {
-        color: getColor(theme, `${c}.700`),
-        bg: getColor(theme, `${c}.100`),
-      },
+  },
+  lg: {
+    tab: {
+      fontSize: "1.15rem",
+      paddingY: "0.75rem",
+      paddingX: "1rem",
     },
-    TabList: {},
-  }
+  },
 }
 
-function solidRounded(props: Props): StyleObject {
-  const { colorScheme: c } = props
-  return {
-    Tab: {
-      borderRadius: "full",
-      fontWeight: "semibold",
-      color: mode("gray.600", "inherit")(props),
-      _selected: {
-        color: mode(`#fff`, "gray.800")(props),
-        bg: mode(`${c}.600`, `${c}.300`)(props),
+const variants: Variants<typeof register> = {
+  line: function (props) {
+    const { colorScheme: c } = props
+    return {
+      tablist: {
+        borderBottom: "2px solid",
+        borderColor: "inherit",
       },
-    },
-    TabList: {},
-  }
-}
+      tab: {
+        borderBottom: "2px solid",
+        borderColor: "transparent",
+        marginBottom: "-2px",
+        _selected: {
+          color: mode(`${c}.600`, `${c}.300`)(props),
+          borderColor: "currentColor",
+        },
+        _active: {
+          bg: mode("gray.200", "whiteAlpha.300")(props),
+        },
+        _disabled: {
+          opacity: 0.4,
+          cursor: "not-allowed",
+        },
+      },
+    }
+  },
 
-const Tabs: ComponentTheme = {
-  defaultProps: {
-    size: "md",
-    variant: "line",
-    colorScheme: "blue",
-  },
-  baseStyle: {
-    Tab: {
-      transition: "all 0.2s",
-      _focus: {
-        zIndex: 1,
-        boxShadow: "outline",
+  enclosed: function (props) {
+    const { colorScheme: c } = props
+    return {
+      tab: {
+        borderTopRadius: "md",
+        border: "1px solid",
+        borderColor: "transparent",
+        marginBottom: "-1px",
+        _selected: {
+          color: mode(`${c}.600`, `${c}.300`)(props),
+          borderColor: "inherit",
+          borderBottomColor: mode(`white`, `gray.800`)(props),
+        },
       },
-    },
-    TabList: {},
-    TabPanel: {
-      padding: 4,
-    },
+      tablist: {
+        marginBottom: "-1px",
+        borderBottom: "1px solid",
+        borderColor: "inherit",
+      },
+    }
   },
-  sizes: {
-    sm: {
-      Tab: {
-        paddingY: "0.25rem",
-        paddingX: "1rem",
-        fontSize: "0.85rem",
+
+  "enclosed-colored": function (props) {
+    const { colorScheme: c } = props
+    return {
+      tab: {
+        border: "1px solid",
+        borderColor: "inherit",
+        bg: mode(`gray.50`, `whiteAlpha.50`)(props),
+        marginBottom: "-1px",
+        _notLast: {
+          mr: "-1px",
+        },
+        _selected: {
+          bg: mode(`#fff`, "gray.800")(props),
+          color: mode(`${c}.600`, `${c}.300`)(props),
+          borderColor: "inherit",
+          borderTopColor: "currentColor",
+          borderBottomColor: "transparent",
+        },
       },
-    },
-    md: {
-      Tab: {
-        fontSize: "1rem",
-        paddingY: "0.5rem",
-        paddingX: "1rem",
+      tablist: {
+        marginBottom: "-1px",
+        borderBottom: "1px solid",
+        borderColor: "inherit",
       },
-    },
-    lg: {
-      Tab: {
-        fontSize: "1.15rem",
-        paddingY: "0.75rem",
-        paddingX: "1rem",
+    }
+  },
+
+  "soft-rounded": function (props) {
+    const { colorScheme: c, theme } = props
+    return {
+      tab: {
+        borderRadius: "full",
+        fontWeight: "semibold",
+        color: "gray.600",
+        _selected: {
+          color: getColor(theme, `${c}.700`),
+          bg: getColor(theme, `${c}.100`),
+        },
       },
-    },
+      tablist: {},
+    }
   },
-  variants: {
-    line: line,
-    enclosed: enclosed,
-    "soft-rounded": softRounded,
-    "enclosed-colored": enclosedColored,
-    "solid-rounded": solidRounded,
-    unstyled: {},
+
+  "solid-rounded": function (props) {
+    const { colorScheme: c } = props
+    return {
+      tab: {
+        borderRadius: "full",
+        fontWeight: "semibold",
+        color: mode("gray.600", "inherit")(props),
+        _selected: {
+          color: mode(`#fff`, "gray.800")(props),
+          bg: mode(`${c}.600`, `${c}.300`)(props),
+        },
+      },
+    }
   },
+
+  unstyled: {},
 }
 
-export const TabSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+const defaultProps: DefaultProps<typeof register> = {
+  size: "md",
+  variant: "line",
+  colorScheme: "blue",
 }
 
-export const TabVariants = {
-  line: "line",
-  enclosed: "enclosed",
-  "soft-rounded": "soft-rounded",
-  "enclosed-colored": "enclosed-colored",
-  "solid-rounded": "solid-rounded",
-  unstyled: "unstyled",
+const tabs = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants,
 }
 
-export default Tabs
+export default tabs

src/components/tag.ts

@@ -1,11 +0,12 @@
-import { ComponentTheme } from "@chakra-ui/theme-tools"
-import Badge, { BadgeVariants } from "./badge"
+import { BaseStyle, Sizes, DefaultProps } from "@chakra-ui/theme-tools"
+import badge from "./badge"
 
-const Tag: ComponentTheme = {
-  defaultProps: {
-    size: "lg",
-    variant: "subtle",
-    colorScheme: "gray",
-  },
-  baseStyle: {
+const register = {
+  parts: ["container", "label", "closeButton"],
+  sizes: ["sm", "md", "lg"],
+  variants: badge.register.variants,
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  container: {
     outline: 0,
@@ -16,4 +17,23 @@ _focus: {
   },
-  sizes: {
-    sm: {
+  label: { lineHeight: 1.2 },
+  closeButton: {
+    fontSize: "1em",
+    width: "1.25rem",
+    height: "1.25rem",
+    borderRadius: "sm",
+    marginLeft: "0.375rem",
+    opacity: 0.5,
+    _disabled: { opacity: 0.4 },
+    _focus: {
+      boxShadow: "outline",
+      bg: "rgba(0, 0, 0, 0.14)",
+    },
+    _hover: { opacity: 0.8 },
+    _active: { opacity: 1 },
+  },
+}
+
+const sizes: Sizes<typeof register> = {
+  sm: {
+    container: {
       minHeight: "1.25rem",
@@ -25,3 +45,5 @@ minWidth: "1.25rem",
     },
-    md: {
+  },
+  md: {
+    container: {
       minHeight: "1.5rem",
@@ -33,3 +55,5 @@ minWidth: "1.5rem",
     },
-    lg: {
+  },
+  lg: {
+    container: {
       minHeight: 8,
@@ -42,13 +66,20 @@ minWidth: 8,
   },
-  variants: Badge.variants,
 }
 
-export const TagSizes = {
-  sm: "sm",
-  md: "md",
-  lg: "lg",
+const variants = badge.variants
+
+const defaultProps: DefaultProps<typeof register> = {
+  size: "lg",
+  variant: "subtle",
+  colorScheme: "gray",
 }
 
-export const TagVariants = BadgeVariants
+const tag = {
+  register,
+  defaultProps,
+  baseStyle,
+  sizes,
+  variants,
+}
 
-export default Tag
+export default tag

src/components/textarea.ts

@@ -1,7 +0,13 @@
-import Input, { InputSizes, InputTheme, InputVariants } from "./input"
+import { BaseStyle } from "@chakra-ui/theme-tools"
+import input from "./input"
 
-const Textarea: InputTheme = {
-  ...Input,
-  baseStyle: {
-    ...Input.baseStyle,
+const register = {
+  parts: ["field"],
+  variants: input.register.variants,
+  sizes: input.register.sizes,
+} as const
+
+const baseStyle: BaseStyle<typeof register> = {
+  field: {
+    ...input.baseStyle.field,
     paddingY: "8px",
@@ -13,5 +19,8 @@ minHeight: "80px",
 
-export const TextareaVariants = InputVariants
-export const TextareaSizes = InputSizes
+const textarea = {
+  ...input,
+  register,
+  baseStyle,
+}
 
-export default Textarea
+export default textarea

src/components/tooltip.ts

@@ -1,18 +0,49 @@
-import { mode, ComponentTheme } from "@chakra-ui/theme-tools"
+import { BaseStyle, mode, TransitionStyle } from "@chakra-ui/theme-tools"
 
-const Tooltip: ComponentTheme = {
-  baseStyle: (props) => ({
-    paddingX: "8px",
-    paddingY: "2px",
-    bg: mode(`gray.700`, `gray.300`)(props),
-    color: mode(`whiteAlpha.900`, `gray.900`)(props),
-    borderRadius: "sm",
-    fontWeight: "medium",
-    pointerEvents: "none",
-    fontSize: "sm",
-    boxShadow: "md",
-    maxWidth: "320px",
-  }),
+const register = {
+  parts: ["arrow", "container"],
+} as const
+
+const baseStyle: BaseStyle<typeof register> = (props) => {
+  return {
+    container: {
+      paddingX: "8px",
+      paddingY: "2px",
+      bg: mode("gray.700", "gray.300")(props),
+      color: mode("whiteAlpha.900", "gray.900")(props),
+      borderRadius: "sm",
+      fontWeight: "medium",
+      pointerEvents: "none",
+      fontSize: "sm",
+      boxShadow: "md",
+      maxWidth: "320px",
+    },
+  }
 }
 
-export default Tooltip
+const transition: TransitionStyle<typeof register> = {
+  container: {
+    timeout: 120,
+    transition: {
+      easing: "ease-in-out",
+      duration: "120ms",
+      property: "common",
+    },
+    enter: {
+      from: { opacity: 0.01, transform: "scale(0.9)" },
+      to: { opacity: 1, transform: "scale(1)" },
+    },
+    exit: {
+      from: { opacity: 1, transform: "scale(1)" },
+      to: { opacity: 0.01, transform: "scale(0.9)" },
+    },
+  },
+}
+
+const tooltip = {
+  register,
+  baseStyle,
+  transition,
+}
+
+export default tooltip

src/foundations/colors.ts

@@ -19,4 +19,4 @@ export interface ColorHues {
   current: "currentColor",
-  black: "#000",
-  white: "#fff",
+  black: "#000000",
+  white: "#FFFFFF",
 
@@ -63,12 +63,12 @@ whiteAlpha: {
   red: {
-    50: "#fff5f5",
-    100: "#fed7d7",
-    200: "#feb2b2",
-    300: "#fc8181",
-    400: "#f56565",
-    500: "#e53e3e",
-    600: "#c53030",
-    700: "#9b2c2c",
+    50: "#FFF5F5",
+    100: "#FED7D7",
+    200: "#FEB2B2",
+    300: "#FC8181",
+    400: "#F56565",
+    500: "#E53E3E",
+    600: "#C53030",
+    700: "#9B2C2C",
     800: "#822727",
-    900: "#63171b",
+    900: "#63171B",
   },
@@ -90,10 +90,10 @@
   yellow: {
-    50: "#fffff0",
-    100: "#fefcbf",
-    200: "#faf089",
-    300: "#f6e05e",
-    400: "#ecc94b",
-    500: "#d69e2e",
-    600: "#b7791f",
-    700: "#975a16",
+    50: "#FFFFF0",
+    100: "#FEFCBF",
+    200: "#FAF089",
+    300: "#F6E05E",
+    400: "#ECC94B",
+    500: "#D69E2E",
+    600: "#B7791F",
+    700: "#975A16",
     800: "#744210",
@@ -104,11 +104,11 @@ 900: "#5F370E",
   green: {
-    50: "#f0fff4",
-    100: "#c6f6d5",
-    200: "#9ae6b4",
-    300: "#68d391",
-    400: "#48bb78",
-    500: "#38a169",
-    600: "#2f855a",
+    50: "#F0FFF4",
+    100: "#C6F6D5",
+    200: "#9AE6B4",
+    300: "#68D391",
+    400: "#48BB78",
+    500: "#38A169",
+    600: "#2F855A",
     700: "#276749",
-    800: "#22543d",
+    800: "#22543D",
     900: "#1C4532",
@@ -131,12 +131,12 @@ },
   blue: {
-    50: "#ebf8ff",
-    100: "#ceedff",
-    200: "#90cdf4",
-    300: "#63b3ed",
-    400: "#4299e1",
-    500: "#3182ce",
-    600: "#2a69ac",
-    700: "#1e4e8c",
-    800: "#153e75",
-    900: "#1a365d",
+    50: "#EBF8FF",
+    100: "#CEEDFF",
+    200: "#90CDF4",
+    300: "#63B3ED",
+    400: "#4299E1",
+    500: "#3182CE",
+    600: "#2A69AC",
+    700: "#1E4E8C",
+    800: "#153E75",
+    900: "#1A365D",
   },
@@ -158,11 +158,11 @@
   purple: {
-    50: "#faf5ff",
-    100: "#e9d8fd",
-    200: "#d6bcfa",
-    300: "#b794f4",
-    400: "#9f7aea",
-    500: "#805ad5",
-    600: "#6b46c1",
-    700: "#553c9a",
-    800: "#44337a",
+    50: "#FAF5FF",
+    100: "#E9D8FD",
+    200: "#D6BCFA",
+    300: "#B794F4",
+    400: "#9F7AEA",
+    500: "#805AD5",
+    600: "#6B46C1",
+    700: "#553C9A",
+    800: "#44337A",
     900: "#322659",
@@ -172,10 +172,10 @@ },
   pink: {
-    50: "#fff5f7",
-    100: "#fed7e2",
-    200: "#fbb6ce",
-    300: "#f687b3",
-    400: "#ed64a6",
-    500: "#d53f8c",
-    600: "#b83280",
-    700: "#97266d",
+    50: "#FFF5F7",
+    100: "#FED7E2",
+    200: "#FBB6CE",
+    300: "#F687B3",
+    400: "#ED64A6",
+    500: "#D53F8C",
+    600: "#B83280",
+    700: "#97266D",
     800: "#702459",
@@ -225,38 +225,38 @@ 900: "#521B41",
   whatsapp: {
-    50: "#e2f7f4",
-    100: "#c3f0e9",
-    200: "#a0e7dc",
-    300: "#76dccd",
-    400: "#43cfba",
+    50: "#E2F7F4",
+    100: "#C3F0E9",
+    200: "#A0E7DC",
+    300: "#76DCCD",
+    400: "#43CFBA",
     500: "#00BFA5",
-    600: "#00ac92",
+    600: "#00AC92",
     700: "#009780",
-    800: "#007d6a",
-    900: "#005a4c",
+    800: "#007D6A",
+    900: "#005A4C",
   },
 
   twitter: {
-    50: "#e5f4fd",
-    100: "#c8e9fb",
-    200: "#a8dcfa",
-    300: "#83cdf7",
-    400: "#57bbf5",
+    50: "#E5F4FD",
+    100: "#C8E9FB",
+    200: "#A8DCFA",
+    300: "#83CDF7",
+    400: "#57BBF5",
     500: "#1DA1F2",
-    600: "#1a94da",
-    700: "#1681bf",
-    800: "#136b9e",
-    900: "#0d4d71",
+    600: "#1A94DA",
+    700: "#1681BF",
+    800: "#136B9E",
+    900: "#0D4D71",
   },
 
   telegram: {
-    50: "#e3f2f9",
-    100: "#c5e4f3",
-    200: "#a2d4ec",
-    300: "#7ac1e4",
-    400: "#47a9da",
+    50: "#E3F2F9",
+    100: "#C5E4F3",
+    200: "#A2D4EC",
+    300: "#7AC1E4",
+    400: "#47A9DA",
     500: "#0088CC",
-    600: "#007ab8",
-    700: "#006ba1",
+    600: "#007AB8",
+    700: "#006BA1",
     800: "#005885",
-    900: "#003f5e",
+    900: "#003F5E",
   },
@@ -263,0 +263,0 @@ }

src/foundations/index.ts

@@ -9,2 +9,3 @@ import breakpoints from "./breakpoints"
 import borders from "./borders"
+import transition from "./transition"
 
@@ -23,2 +24,3 @@ const space = baseSizes
   borders,
+  transition,
 }
@@ -25,0 +27,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1804677

increased by270.51%

Number of package files

333

increased by2.15%

Lines of code

24528

increased by173.32%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@chakra-ui/color-mode@1.4.8(transitive)

• + Added@chakra-ui/hooks@1.9.1(transitive)

• + Added@chakra-ui/react-env@1.1.6(transitive)

• + Added@chakra-ui/react-utils@1.2.3(transitive)

• + Added@chakra-ui/styled-system@1.19.0(transitive)

• + Added@chakra-ui/system@1.12.1(transitive)

• + Addedcompute-scroll-into-view@1.0.14(transitive)

• + Addedcopy-to-clipboard@3.3.1(transitive)

• + Addedcsstype@3.0.9(transitive)

• + Addedreact-fast-compare@3.2.0(transitive)

• + Addedtoggle-selection@1.0.6(transitive)

• + Addedtslib@2.7.0(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

• - Removed@chakra-ui/utils@2.0.15(transitive)

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedtslib@2.4.0(transitive)

• Updated@chakra-ui/theme-tools@^1.0.0-next.5