Tray

const [isOpen, setOpen] = useState(false);
const onClose = () => setOpen(false);
return (
  <>
    <ActionButton onClick={() => setOpen(true)} label="Open tray" />
    <Tray isOpen={isOpen} onClose={() => setOpen(false)} size="medium">
      <form onSubmit={onClose}>
        <Stack gap="medium" padding="xlarge">
          <Flex justifyContent="space-between">
            <Heading level="3">Some form</Heading>
            <IconButton
              colorScheme="tertiary"
              variant="text"
              label="Close"
              icon={XIcon}
              onClick={onClose}
            />
          </Flex>
          <Stack gap="medium">
            <Columns gap="medium">
              <Field label="First name">
                <TextInput />
              </Field>
              <Field label="Last name">
                <TextInput />
              </Field>
            </Columns>
            <Field label="Email address">
              <TextInput />
            </Field>
          </Stack>
          <Inline align="right" gap="small">
            <Button
              colorScheme="tertiary"
              variant="text"
              label="Cancel"
              onClick={onClose}
            />
            <Button type="submit" label="Submit" />
          </Inline>
        </Stack>
      </form>
    </Tray>
  </>
);

const SIZES = ['small', 'medium', 'large', 'full'];
const [isOpen, setOpen] = useState(false);
const [index, setIndex] = useState(0);
const size = SIZES[index];
const onClick = () => {
  setIndex((current) => (current + 1) % SIZES.length);
};
const titleCase = (str) => str.charAt(0).toUpperCase() + str.slice(1);
return (
  <Inline gap="medium">
    <SegmentedControl
      onChange={(s) => setIndex(SIZES.indexOf(s))}
      value={size}
      options={SIZES.map((value) => ({ label: titleCase(value), value }))}
    />
    <ActionButton onClick={() => setOpen(true)} label="Open tray" />
    <Tray isOpen={isOpen} onClose={() => setOpen(false)} size={size}>
      <Stack gap="medium" padding="xlarge">
        <Heading level="3">{titleCase(size)}</Heading>
        <Text>
          Cupcake ipsum dolor sit amet bonbon chocolate cake fruitcake.
          Chocolate bar gummi bears gummi bears jelly beans. Gummi bears cookie
          tart topping. Marshmallow caramels gummies gummies marzipan topping
          brownie pudding.
        </Text>
        <div>
          <Button onClick={onClick} label="Next" />
        </div>
      </Stack>
    </Tray>
  </Inline>
);