message: feat: split and export tag baseStyle and variants
diff: import { multiStyleConfig } from "@chakra-ui/theme-tools"
  -import badge from "./badge"
  +import { badgeStyles } from "./badge"
  -const tag = multiStyleConfig({
  - parts: {
  +const parts = {
  container: "the tag container",
  label: "the tag inner text",
  closeButton: "the close button",
  - },
  - baseStyle: {
  - container: {
  +}
  +
  +const baseStyleContainer = {
  fontWeight: "medium",
  lineHeight: 1.2,
  outline: 0,
  _focus: {
  boxShadow: "outline",
  },
  - },
  - label: {
  +}
  +
  +const baseStyleLabel = {
  lineHeight: 1.2,
  - },
  - closeButton: {
  +}
  +
  +const baseStyleCloseButton = {
  fontSize: "18px",
  w: "1.25rem",
  h: "1.25rem",
  @@ -36,10 +37,15 @@ const tag = multiStyleConfig({
  },
  _hover: { opacity: 0.8 },
  _active: { opacity: 1 },
  - },
  - },
  +}
  +
  +const baseStyle = {
  + container: baseStyleContainer,
  + label: baseStyleLabel,
  + closeButton: baseStyleCloseButton,
  +}
  - sizes: {
  +const sizes = {
  sm: {
  container: {
  minH: "1.25rem",
  @@ -67,25 +73,54 @@ const tag = multiStyleConfig({
  px: 3,
  },
  },
  - },
  +}
  - variants: {
  - subtle: function (props) {
  - return { container: badge.variants?.subtle(props) }
  - },
  - solid: function (props) {
  - return { container: badge.variants?.solid(props) }
  - },
  - outline: function (props) {
  - return { container: badge.variants?.outline(props) }
  - },
  - },
  +// @ts-ignore
  +const variantSubtle = function (props) {
  + return { container: badgeStyles.variantSubtle(props) }
  +}
  +
  +// @ts-ignore
  +const variantSolid = function (props) {
  + return { container: badgeStyles.variantSolid(props) }
  +}
  +
  +// @ts-ignore
  +const variantOutline = function (props) {
  + return { container: badgeStyles.variantOutline(props) }
  +}
  - defaultProps: {
  +const variants = {
  + subtle: variantSubtle,
  + solid: variantSolid,
  + outline: variantOutline,
  +}
  +
  +const defaultProps = {
  size: "lg",
  variant: "subtle",
  colorScheme: "gray",
  - },
  +}
  +
  +const tag = multiStyleConfig({
  + parts,
  + baseStyle,
  + sizes,
  + variants,
  + // @ts-ignore
  + defaultProps,
  })
  +export const tagStyles = {
  + parts,
  + baseStyleContainer,
  + baseStyleCloseButton,
  + baseStyleLabel,
  + variantOutline,
  + variantSolid,
  + variantSubtle,
  + sizes,
  + defaultProps,
  +}
  +
  export default tag
  