Select

    () => {
      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 (
        <Select
          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' },
        { type: 'divider' },
        { value: 'Fujicolor Superior 200', content: 'Fujicolor Superior 200' },
      ];
      const defaultOption = options[0];
      const [option, setOption] = useState(defaultOption)
      return (
        <Select
          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 (
        <Stack gap="s">
          <Select
            triggerVariant="box"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
          />
          <Select
            triggerVariant="text"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            menuWidth="240px"
          />
        </Stack>
      )
    }

    () => {
      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 (
        <Stack gap="s">
          <Select
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            trigger={({ props }) => <Select.Trigger variant="text">{props.children}</Select.Trigger>}
          />
          <Select
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            trigger={({ props }) => <Button>{props.children}</Button>}
          />
        </Stack>
      )
    }

    () => {
      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 defaultOptions = [
        options[0],
        options[1],
      ]
      const [multiSelectedOptions, setMultiSelectedOptions] = React.useState(defaultOptions);
      return (
        <Select
          options={options}
          value={multiSelectedOptions.map(option => option.value)}
          onChange={setMultiSelectedOptions}
          allowMultiple
          trigger={({ props }) => <Select.Trigger>{props.children}</Select.Trigger>}
        />
      )
    }

    () => {
      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),
      }
      return (
        <Arrange gap="s">
          <Select
            menuPlacement="bottomStart"
            menuWidth="fit-content"
            {...sharedProps}
          />
          <Select
            menuPlacement="bottomEnd"
            menuWidth="320px"
            {...sharedProps}
          />
          <Select
            menuPlacement="topStart"
            menuWidth="fit-content"
            {...sharedProps}
          />
          <Select
            menuPlacement="topEnd"
            menuWidth="320px"
            {...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 (
        <Select
          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 defaultOptions = [
        options[0],
        options[1],
      ]
      const [multiSelectedOptions, setMultiSelectedOptions] = React.useState(defaultOptions);
      return (
        <Select
          label="Films"
          options={options}
          value={multiSelectedOptions.map(option => option.value)}
          onChange={setMultiSelectedOptions}
          allowMultiple
        />
      )
    }

    () => {
      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 [option, setOption] = useState();
      return (
        <Select
          label="Film"
          hint="Choose your favorite film"
          options={options}
          value={option && option.value}
          onChange={(option) => setOption(option)}
          placeholder="Choose an option"
        />
      )
    }

    () => {
      const options = [{ value: 'Neopan 100 Acros', content: 'Neopan 100 Acros' }];
      const [option, setOption] = useState(options[0])
      return (
        <Select
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          isDisabled
        />
      )
    }

    () => {
      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">
          <Select
            label="Film"
            hint="Choose your favorite film"
            options={options}
            value={option.value}
            onChange={(option) => setOption(option)}
            backgroundColor="background"
          />
        </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 (
        <Select
          label="Film"
          options={options}
          value={option.value}
          onChange={(option) => setOption(option)}
          onClear={(option) => setOption({})}
          placeholder="Choose an option"
        />
      )
    }