How to use the @lugia/lugia-web.consts.CheckboxGroup function in @lugia/lugia-web

const CheckboxGroup = Checkbox.Group;
const CheckBoxButton = Checkbox.Button;

const SelectContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Label = styled.span`
  color: rgba(0,0,0,0.65);
  cursor: pointer;
  margin-right: 10px;
`;

const theme = {
  [Widget.CheckboxGroup]: {
    Checkbox: {
      Container: {
        normal: {
          opacity: 0,
          width: 100,
          height: 50,
          margin: {
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
          },
          padding: {
            top: 10,
            bottom: 10,
            left: 10,

}
};

const iconView = {
  [Widget.Icon]: {
    Icon: {
      normal: {
        fontSize: 20,
        color: "#888"
      }
    }
  }
};

const checkbuttonView = {
  [Widget.CheckboxGroup]: {
    CheckButton: {
      CheckButtonChecked: {
        normal: {
          opacity: 1,
          border: {
            top: { color: "#4d63ff", width: 1, style: "solid" },
            right: { color: "#4d63ff", width: 1, style: "solid" },
            bottom: { color: "#4d63ff", width: 1, style: "solid" }
          },

          color: "#fff",
          font: { size: 14, fontWeight: 500 }
        },
        hover: {
          opacity: 1,
          border: {

const CheckBoxButton = Checkbox.Button;

const SelectContainer = styled.div`
  display: flex;
  align-items: center;
`;

const Label = styled.span`
  color: rgba(0,0,0,0.65);
  cursor: pointer;
  margin-right: 10px;
`;


const theme = {
  [Widget.CheckboxGroup]: {
    Checkbox: {
      Container: {
        normal: {
          opacity: 0,
          width: 100,
          height: 50,
          margin: {
            top: 10,
            bottom: 10,
            left: 10,
            right: 10,
          },
          padding: {
            top: 10,
            bottom: 10,
            left: 10,