Autocomplete

    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

    () => {
      const options = Object.values(demoFilmsObject).map((film, index) => {
        return { value: film.name, content: film.name, groupTitle: film.company, }
      })
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)

      return (
        <Autocomplete
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
        />
      )
    }

    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      const sharedProps = {        
        options: options,
        value: option.value,
        onChange: (option) => setOption(option),
        menuWidth: '240px',
      }
      return (
        <Arrange gap="s">
          <Autocomplete menuPlacement="bottomStart" {...sharedProps} />
          <Autocomplete menuPlacement="bottomEnd" {...sharedProps} />
          <Autocomplete menuPlacement="topStart" {...sharedProps} />
          <Autocomplete menuPlacement="topEnd" {...sharedProps} />
        </Arrange>
      )
    }

    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: demoText.l },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          menuItemsHaveEllipsis={false}
        />
      )
    }

    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = { value: '', content: ''}
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete
          label="Film"
          value={option.value}
          hint="Choose your favorite film"
          options={options}
          onChange={(option) => setOption(option)}
          hasError
          errorMessage="This field is required"
        />
      )
    }

    () => {
      const Pre = ({backgroundColor}) => (
        <Box 
          marginLeft="6px" 
          backgroundColor={backgroundColor} 
          paddingY="xs"
          paddingX="s"
          radius="xs"
        >
          <Text color="white" variant="caps">PRE</Text>
        </Box>
      )
      const options = [
        { 
          value: 'Neopan 100 Acros', 
          content: 'Neopan 100 Acros',
          preContent: <Pre backgroundColor="red"/>
        },
        { 
          value: 'Fujicolor Pro 160NS', 
          content: 'Fujicolor Pro 160NS',
          preContent: <Pre backgroundColor="blue"/>
        },
        { 
          value: 'Fujicolor Superior 200', 
          content: 'Fujicolor Superior 200',
          preContent: <Pre backgroundColor="green"/>
        },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete
          label="Film"
          value={option.value}
          hint="Choose your favorite film"
          options={options}
          onChange={(option) => setOption(option)}
        />
      )
    }

    () => {
      const [options, setOptions] = useState([
        {
          value: 'Neopan 100 Acros',
          content: 'Neopan 100 Acros',
        },
        {
          value: 'Fujicolor Pro 160NS',
          content: 'Fujicolor Pro 160NS',
        },
        {
          value: 'Fujicolor Superior 200',
          content: 'Fujicolor Superior 200',
        },
      ])

      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete
          label="Film"
          value={option.value}
          hint="Choose your favorite film"
          options={options}
          onChange={(option) => setOption(option)}
          isCreatable
          onCreate={(option) => {
            setOption(option)
            setOptions([...options, option])
          }}
        />
      )
    }

    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Box padding="l2" backgroundColor="background2" borderSide="all" radius="m">
          <Autocomplete
            backgroundColor="background"
            label="Film"
            hint="Choose your favorite film"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
          />
        </Box>
      )
    }

    () => {
      const options = [
        { value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' },
        { value: 'Fujicolor Pro 160NS', content: 'Fujicolor Pro 160NS' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Autocomplete
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          onClear={() => setOption({})}
        />
      )
    }