text: import * as React from "react";
  import { MixedCheckbox } from "@reach/checkbox";
  import "@reach/checkbox/styles.css";
  
  let name = "Checklist";
  
  function Example() {
    const [toppings, setToppings] = React.useState({
      condiments: {
        mayo: true,
        mustard: true,
        ketchup: false,
      },
      veggies: {
        lettuce: true,
        tomato: true,
        sprouts: false,
      },
      meats: {
        turkey: false,
        ham: true,
        pepperoni: false,
      },
    });
  
    const handleAll = (event) => {
      const { checked, value } = event.target;
      const allTypesChecked = Object.keys(toppings[value]).reduce(
        (state, topping) => ({
          ...state,
          [topping]: checked,
        }),
        {}
      );
      setToppings({
        ...toppings,
        [value]: {
          ...allTypesChecked,
        },
      });
    };
  
    const getHandler = (type) => (event) => {
      const { checked, value } = event.target;
      setToppings({
        ...toppings,
        [type]: {
          ...toppings[type],
          [value]: checked,
        },
      });
    };
  
    const allChecked = (type) =>
      Object.values(toppings[type]).every((t) => t)
        ? true
        : Object.values(toppings[type]).some((t) => t)
        ? "mixed"
        : false;
  
    return (
      <div>
        <h3>Let's build a sandwich</h3>
        <div style={{ display: "flex", flexFlow: "row wrap" }}>
          {Object.keys(toppings).map((type, index, arr) => {
            return (
              <fieldset
                key={type}
                style={{
                  margin: 10,
                  marginLeft: index === 0 ? 0 : 10,
                  marginRight: index === arr.length - 1 ? 0 : 10,
                  padding: "1rem 1.5rem 1.5rem",
                  width: 400,
                  maxWidth: "100%",
                }}
              >
                <label>
                  <MixedCheckbox
                    value={type}
                    checked={allChecked(type)}
                    onChange={handleAll}
                  />
                  <span>All {type}</span>
                </label>
                <fieldset style={{ margin: "1rem 0 0", padding: "1rem 1.5rem" }}>
                  <legend>{type}</legend>
  
                  <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
                    {Object.entries(toppings[type]).map(([value, state]) => (
                      <li key={value}>
                        <label>
                          <MixedCheckbox
                            name={type}
                            value={value}
                            checked={state}
                            onChange={getHandler(type)}
                          />
                          <span>{value}</span>
                        </label>
                      </li>
                    ))}
                  </ul>
                </fieldset>
              </fieldset>
            );
          })}
        </div>
      </div>
    );
  }
  
  Example.storyName = name;
  export const Checklist = Example;
  export default { title: "Checkbox" };
  