'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var react = require('@chakra-ui/react');
var themeTools = require('@chakra-ui/theme-tools');
var alert_helper = require('./alert.helper.cjs');
var anatomy = require('@chakra-ui/anatomy');
var styledSystem = require('@chakra-ui/styled-system');

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var _a, _b, _c, _d, _e, _f, _g, _h;
const { definePartsStyle } = styledSystem.createMultiStyleConfigHelpers(anatomy.popoverAnatomy.keys);
const components = {
  Heading: {
    baseStyle: {
      fontWeight: "600",
      color: "gray.800",
      lineHeight: "100%",
      _dark: {
        color: "white"
      }
    },
    // for backwards compatability between the old <Heading size="xxx"> and the new <Heading variant="xxx">
    sizes: {
      xl: {
        fontSize: "1.71rem"
      },
      lg: {
        fontSize: "1.71rem"
      },
      md: {
        fontSize: "1.29rem"
      },
      sm: {
        fontSize: "1.14rem"
      },
      xs: {
        fontSize: "1rem"
      }
    },
    variants: {
      xl: {
        fontSize: "1.71rem",
        lineHeight: "100%"
      },
      lg: {
        fontSize: "1.29rem",
        lineHeight: "100%"
      },
      md: {
        fontSize: "1.14rem",
        lineHeight: "100%"
      },
      sm: {
        fontSize: "1rem",
        lineHeight: "100%"
      }
    }
  },
  Badge: {
    baseStyle: {
      fontSize: "12px",
      fontWeight: "medium",
      textTransform: "inherit",
      borderRadius: "sm",
      borderWidth: "1px",
      boxShadow: "none",
      paddingX: 1
    },
    variants: {
      default: (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("gray.500", themeTools.transparentize("gray.500", 0.6)(theme2))(props),
          borderColor: themeTools.mode("gray.500", themeTools.transparentize("gray.500", 0.6)(theme2))(props),
          color: themeTools.mode("white", themeTools.transparentize("white", 0.8)(theme2))(props)
        };
      },
      inverted: (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("gray.200", themeTools.transparentize("gray.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("gray.200", themeTools.transparentize("gray.200", 0.16)(theme2))(props),
          color: themeTools.mode("gray.800", themeTools.transparentize("white", 0.8)(theme2))(props)
        };
      },
      outline: (props) => {
        return {
          bg: "transparent",
          color: themeTools.mode("gray.600", "gray.200")(props),
          borderWidth: "1px",
          borderColor: themeTools.mode("gray.500", "gray.200")(props),
          boxShadow: "none"
        };
      },
      info: (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("blue.500", themeTools.transparentize("blue.500", 0.6)(theme2))(props),
          borderColor: themeTools.mode("blue.500", themeTools.transparentize("blue.500", 0.6)(theme2))(props),
          color: themeTools.mode("white", themeTools.transparentize("white", 0.8)(theme2))(props)
        };
      },
      "info-inverted": (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("blue.100", themeTools.transparentize("blue.400", 0.25)(theme2))(props),
          borderColor: themeTools.mode("blue.100", themeTools.transparentize("blue.400", 0.25)(theme2))(props),
          color: themeTools.mode("blue.800", themeTools.transparentize("white", 0.8)(theme2))(props)
        };
      },
      "info-outline": (props) => {
        return {
          bg: "transparent",
          color: themeTools.mode("blue.600", "blue.200")(props),
          borderWidth: "1px",
          borderColor: themeTools.mode("blue.500", "blue.200")(props),
          boxShadow: "none"
        };
      },
      error: (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("red.500", themeTools.transparentize("red.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("red.500", themeTools.transparentize("red.200", 0.16)(theme2))(props),
          color: themeTools.mode("white", "red.200")(props)
        };
      },
      "error-inverted": (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("red.100", themeTools.transparentize("red.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("red.100", themeTools.transparentize("red.200", 0.16)(theme2))(props),
          color: themeTools.mode("red.800", "red.200")(props)
        };
      },
      "error-outline": (props) => {
        return {
          bg: "transparent",
          color: themeTools.mode("red.600", "red.200")(props),
          borderWidth: "1px",
          borderColor: themeTools.mode("red.500", "red.200")(props)
        };
      },
      success: (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("green.500", themeTools.transparentize("green.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("green.500", themeTools.transparentize("green.200", 0.16)(theme2))(props),
          color: themeTools.mode("white", "green.200")(props)
        };
      },
      "success-inverted": (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("green.100", themeTools.transparentize("green.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("green.100", themeTools.transparentize("green.200", 0.16)(theme2))(props),
          color: themeTools.mode("green.800", "green.200")(props)
        };
      },
      "success-outline": (props) => {
        return {
          bg: "transparent",
          color: themeTools.mode("green.600", "green.200")(props),
          borderWidth: "1px",
          borderColor: themeTools.mode("green.500", "green.200")(props)
        };
      },
      warning: (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("yellow.500", themeTools.transparentize("yellow.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("yellow.500", themeTools.transparentize("yellow.200", 0.16)(theme2))(props),
          color: themeTools.mode("white", "yellow.200")(props)
        };
      },
      "warning-inverted": (props) => {
        const { theme: theme2 } = props;
        return {
          bg: themeTools.mode("yellow.100", themeTools.transparentize("yellow.200", 0.16)(theme2))(props),
          borderColor: themeTools.mode("yellow.100", themeTools.transparentize("yellow.200", 0.16)(theme2))(props),
          color: themeTools.mode("yellow.800", "yellow.200")(props)
        };
      },
      "warning-outline": (props) => {
        return {
          bg: "transparent",
          color: themeTools.mode("yellow.600", "yellow.200")(props),
          borderWidth: "1px",
          borderColor: themeTools.mode("yellow.500", "yellow.200")(props)
        };
      }
    }
  },
  Input: {
    defaultProps: {
      focusBorderColor: "focus.500"
    },
    sizes: {
      md: {
        borderRadius: "full"
      }
    }
  },
  NumberInput: {
    defaultProps: {
      focusBorderColor: "focus.500"
    }
  },
  Button: {
    baseStyle: {
      color: "darkblue.600",
      borderRadius: "md",
      borderColor: "darkblue.600",
      padding: "0 1.15rem !important",
      fontWeight: "600",
      lineHeight: "1.7142857143rem"
      // 24px
    },
    defaultProps: {
      variant: "solid",
      size: "md"
    },
    sizes: {
      sm: {
        fontSize: "0.8571428571rem",
        padding: "0 0.8571428571 !important",
        height: "100%"
      },
      md: {
        height: "2.4285714286rem"
        // 34px
      }
    },
    variants: {
      solid: (props) => {
        var _a2, _b2, _c2, _d2;
        const { colorScheme: c } = props;
        const bg = c === "brand" ? [`${c}.500`, `${c}.200`] : [`${c}.600`, `${c}.200`];
        const bgHover = c === "brand" ? [`${c}.600`, `${c}.300`] : [`${c}.800`, `${c}.300`];
        return __spreadProps(__spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Button) == null ? void 0 : _c2.variants) == null ? void 0 : _d2.solid(props)), {
          bg: themeTools.mode(bg[0], bg[1])(props),
          _hover: {
            bg: themeTools.mode(bgHover[0], bgHover[1])(props)
          },
          _disabled: {
            opacity: 0.335
          }
        });
      },
      "solid-brand": (props) => {
        var _a2, _b2, _c2, _d2;
        return __spreadProps(__spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Button) == null ? void 0 : _c2.variants) == null ? void 0 : _d2.solid(props)), {
          bg: themeTools.mode("brand.500", "brand.200")(props),
          _hover: {
            bg: themeTools.mode("brand.600", "brand.300")(props),
            _disabled: {
              bg: themeTools.mode("brand.500", "brand.200")(props)
            }
          },
          _active: {
            bg: themeTools.mode("brand.700", "brand.400")(props)
          }
        });
      },
      outline: (props) => ({
        color: themeTools.mode("darkblue.600 !important", "darkblue.200 !important")(props),
        lineHeight: "1.5714285714rem",
        // 22px to account for 2px border
        _hover: {
          bg: themeTools.mode("darkblue.50 !important", "whiteAlpha.200")(props)
        }
      }),
      delete: (props) => {
        var _a2, _b2, _c2, _d2;
        return __spreadProps(__spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Button) == null ? void 0 : _c2.variants) == null ? void 0 : _d2.solid(props)), {
          bg: themeTools.mode("red.500", "red.200")(props),
          // color: 'white',
          // color: mode('blackAlpha.200', 'gray.800')(props),
          _hover: {
            bg: themeTools.mode("red.600", "red.300")(props),
            _disabled: {
              bg: themeTools.mode("red.500", "red.200")(props)
            }
          },
          _active: {
            bg: themeTools.mode("red.700", "red.400")(props)
          }
        });
      },
      "outline-delete": (props) => {
        var _a2, _b2, _c2, _d2;
        return __spreadProps(__spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Button) == null ? void 0 : _c2.variants) == null ? void 0 : _d2.outline(props)), {
          color: "red.600",
          lineHeight: "1.5714285714rem",
          // 22px to account for 2px border
          _hover: {
            bg: themeTools.mode(`red.50`, `whiteAlpha.200`)(props)
          },
          _active: { bg: themeTools.mode(`red.100`, `whiteAlpha.300`)(props) }
        });
      },
      inputOutline: (props) => {
        var _a2, _b2, _c2, _d2;
        return __spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Button) == null ? void 0 : _c2.variants) == null ? void 0 : _d2.outline(props));
      },
      link: (props) => ({
        color: themeTools.mode("darkblue.600", "darkblue.200")(props),
        textDecoration: "underline",
        lineHeight: "1.714285714285714rem",
        px: "0.5rem",
        _hover: {
          _disabled: {
            textDecoration: "underline"
          }
        }
      }),
      nav: {
        borderRadius: "sm",
        background: "transparent",
        color: "gray.500",
        alignContent: "left",
        _hover: {
          background: "gray.100"
        }
      },
      icon: (props) => ({
        opacity: 1,
        background: "transparent",
        color: themeTools.mode("blackAlpha.800", "whiteAlpha.800")(props),
        _hover: {
          color: themeTools.mode("brand.500", "brand.400")(props)
        },
        _active: {
          color: themeTools.mode("brand.600", "brand.500")(props)
        }
      }),
      ghost: (props) => ({
        color: themeTools.mode("darkblue.600", "darkblue.200")(props),
        _hover: {
          background: themeTools.mode("blackAlpha.100", "whiteAlpha.100")(props)
        },
        _active: {
          background: themeTools.mode("blackAlpha.300", "whiteAlpha.300")(props)
        }
      }),
      "ghost-white": () => ({
        color: "white",
        _hover: {
          background: "blackAlpha.100",
          color: "darkblue.600"
        },
        _active: {
          background: "blackAlpha.300"
        }
      }),
      subtle: (props) => ({
        background: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
      }),
      unstyled: (props) => ({
        color: "darkblue.600"
      })
    }
  },
  Link: {
    defaultProps: {
      variant: "primary"
    },
    variants: {
      primary: (props) => ({
        textDecoration: "underline",
        textUnderlineOffset: "2px",
        transitionDuration: "100ms",
        color: themeTools.mode("black", "white")(props),
        _hover: {
          color: themeTools.mode("brand.500", "brand.400")(props)
        },
        _active: {
          color: themeTools.mode("brand.600", "brand.500")(props)
        }
      }),
      nav: (props) => ({
        borderRadius: "md",
        bg: "transparent",
        color: "white",
        padding: "0.5rem 0.75rem",
        fontSize: "0.9rem",
        // Note: this is used for the sidebar - also update disabled-nav varaint if changing
        fontWeight: "400",
        _hover: {
          bg: themeTools.mode("whiteAlpha.200", "blackAlpha.400")(props),
          textDecoration: "none"
        },
        _activeLink: {
          fontWeight: "600",
          bg: themeTools.mode("whiteAlpha.200", "blackAlpha.400")(props)
        }
      }),
      "nav-disabled": (props) => ({
        borderRadius: "md",
        bg: "transparent",
        color: "gray.500",
        padding: "0.5rem 0.75rem",
        fontSize: "0.9rem",
        fontWeight: "medium",
        cursor: "not-allowed",
        _hover: {
          bg: themeTools.mode("whiteAlpha.100", "gray.900")(props),
          textDecoration: "none"
        },
        _activeLink: {
          color: themeTools.mode("gray.500", "white")(props),
          bg: themeTools.mode("gray.50", "gray.900")(props)
        }
      })
    }
  },
  Tabs: {
    defaultProps: {
      colorScheme: "darkblue"
    },
    variants: {
      line: (props) => ({
        tab: {
          border: 0,
          borderBottom: 0,
          position: "relative",
          fontWeight: "500",
          _active: {
            bg: themeTools.mode("blackAlpha.200", "whiteAlpha.200")(props)
          },
          _selected: {
            color: themeTools.mode(`darkblue.700`, "white")(props),
            _after: {
              position: "absolute",
              left: 0,
              right: 0,
              bottom: 0,
              content: `" "`,
              // Note: necessary to make the pseudo-element appear
              height: "3px",
              width: "100%",
              bg: themeTools.mode(`darkblue.700`, "white")(props),
              borderRadius: "2px"
            }
          }
        },
        tablist: {
          borderBottom: "1px solid"
        }
      })
    }
  },
  Table: {
    parts: ["th", "tbody", "td"],
    baseStyle: (props) => ({
      th: __spreadValues({}, tableBorderStyle(props)),
      tbody: {
        tr: {
          _hover: {
            bg: themeTools.mode("whiteAlpha.500", "blackAlpha.200")(props)
          }
        }
      },
      td: __spreadValues({}, tableBorderStyle(props))
    }),
    sizes: {
      md: {
        td: {
          paddingTop: 3,
          paddingBottom: 3
        }
      }
    }
  },
  FormLabel: {
    baseStyle: {
      fontWeight: "600",
      fontSize: "sm",
      span: {
        color: "darkblue.800",
        _dark: {
          color: "white"
        }
      },
      marginBottom: "3px"
    }
  },
  List: {
    defaultProps: {
      spacing: "50px"
    },
    baseStyle: {
      container: {
        spacing: "150px !important"
      }
    }
  },
  Accordion: {
    parts: ["container", "button", "panel", "icon"],
    baseStyle: (props) => ({
      container: {
        _first: {
          borderTopWidth: "0"
        },
        _last: {
          borderBottomWidth: "0"
        }
      }
    })
  },
  Radio: {
    parts: ["control", "label", "container"],
    baseStyle: (props) => ({
      control: {
        borderColor: themeTools.mode("black", "white")(props),
        border: "1px solid",
        _checked: {
          background: themeTools.mode("white", "black")(props),
          borderColor: themeTools.mode("darkblue.600", "white")(props),
          color: themeTools.mode("darkblue.600", "white")(props),
          _hover: {
            background: themeTools.mode("white", "black")(props),
            borderColor: "currentColor"
          },
          _before: {
            content: '""',
            display: "inline-block",
            position: "relative",
            width: "66%",
            height: "66%",
            borderRadius: "50%"
          },
          _disabled: {
            background: themeTools.mode("white", "black")(props),
            borderColor: themeTools.mode("gray.300", "whiteAlpha.500")(props)
          }
        },
        _disabled: {
          background: themeTools.mode("white", "black")(props),
          borderColor: themeTools.mode("gray.300", "whiteAlpha.500")(props)
        }
      }
    })
  },
  RadioCard: {
    baseStyle: () => ({
      _invalid: {
        textColor: "red.500",
        borderColor: "red.500"
      }
    })
  },
  Slider: {
    /**
     * @see https://chakra-ui.com/docs/components/slider/theming#anatomy
     */
    parts: ["container", "track", "thumb", "filledTrack", "mark"],
    baseStyle: {
      mark: {
        mt: 2.5,
        ml: -1,
        fontSize: "sm"
      },
      track: {
        height: 2.5,
        borderRadius: 4
      }
    }
  },
  Progress: {
    baseStyle: {
      track: {
        borderRadius: 4
      }
    }
  },
  Alert: {
    /**
     * @see https://chakra-ui.com/docs/components/alert/theming#anatomy
     */
    parts: ["container", "title", "description", "icon", "spinner"],
    variants: {
      "left-accent": (props) => {
        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
        return __spreadProps(__spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Alert) == null ? void 0 : _c2.variants) == null ? void 0 : _d2["left-accent"](props)), {
          container: __spreadValues(__spreadProps(__spreadValues({}, (_h2 = (_g2 = (_f2 = (_e2 = react.theme) == null ? void 0 : _e2.components) == null ? void 0 : _f2.Alert) == null ? void 0 : _g2.variants) == null ? void 0 : _h2["left-accent"](props).container), {
            borderLeftWidth: "4px",
            borderRadius: "4px"
          }), alert_helper.getAlertStyle({
            variant: props.variant,
            status: props.status
          }))
        });
      },
      "top-accent": (props) => {
        var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2;
        return __spreadProps(__spreadValues({}, (_d2 = (_c2 = (_b2 = (_a2 = react.theme) == null ? void 0 : _a2.components) == null ? void 0 : _b2.Alert) == null ? void 0 : _c2.variants) == null ? void 0 : _d2["top-accent"](props)), {
          container: __spreadValues(__spreadProps(__spreadValues({}, (_h2 = (_g2 = (_f2 = (_e2 = react.theme) == null ? void 0 : _e2.components) == null ? void 0 : _f2.Alert) == null ? void 0 : _g2.variants) == null ? void 0 : _h2["top-accent"](props).container), {
            borderLeftWidth: "4px",
            borderRadius: "4px"
          }), alert_helper.getAlertStyle({
            variant: props.variant,
            status: props.status
          }))
        });
      }
    }
  },
  Popover: {
    parts: ["content", "header"],
    baseStyle: (props) => ({
      header: {
        color: "gray.900",
        fontWeight: "semibold"
      }
    }),
    sizes: {
      md: definePartsStyle({
        content: {
          w: "var(--chakra-sizes-md)"
        }
      }),
      lg: definePartsStyle({
        content: {
          w: "var(--chakra-sizes-lg)"
        }
      }),
      xl: definePartsStyle({
        content: {
          w: "var(--chakra-sizes-xl)"
        }
      }),
      stretch: definePartsStyle({
        content: {
          minW: "max-content",
          maxW: "max-content"
        }
      }),
      auto: definePartsStyle({
        content: {
          w: "auto"
        }
      })
    }
  },
  Text: {
    variants: {
      sm: {
        fontSize: "0.875rem"
      },
      lg: {
        fontSize: "1.125rem"
      },
      xl: {
        fontSize: "1.25rem"
      },
      label: {
        fontSize: "0.875rem",
        fontWeight: "bold"
      }
    }
  }
};
const tableBorderStyle = (props) => ({
  "border-bottom-color": themeTools.mode(
    "var(--chakra-colors-blackAlpha-200) !important",
    "var(--chakra-colors-whiteAlpha-200) !important"
  )(props)
});
if ((_b = (_a = components == null ? void 0 : components.Button) == null ? void 0 : _a.variants) == null ? void 0 : _b["solid-brand"]) {
  components.Button.variants["brand"] = (_d = (_c = components == null ? void 0 : components.Button) == null ? void 0 : _c.variants) == null ? void 0 : _d["solid-brand"];
}
if ((_f = (_e = components == null ? void 0 : components.Badge) == null ? void 0 : _e.variants) == null ? void 0 : _f["inverted"]) {
  components.Badge.variants["subtle"] = (_h = (_g = components == null ? void 0 : components.Badge) == null ? void 0 : _g.variants) == null ? void 0 : _h["inverted"];
}

exports.components = components;
//# sourceMappingURL=components.cjs.map
