Add select divider support

Author: colinrotherham

src/components/form-elements/select/Select.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
@@ -27,13 +27,17 @@ const SelectComponent = forwardRef<HTMLSelectElement, SelectProps>(
   ),
 );
 
+export const SelectDivider: FC = () => <hr />;
+
 export const SelectOption = forwardRef<HTMLOptionElement, ComponentPropsWithoutRef<'option'>>(
   (props, forwardedRef) => <option ref={forwardedRef} {...props} />,
 );
 
 SelectComponent.displayName = 'Select';
+SelectDivider.displayName = 'Select.Divider';
 SelectOption.displayName = 'Select.Option';
 
 export const Select = Object.assign(SelectComponent, {
+  Divider: SelectDivider,
   Option: SelectOption,
 });

stories/Form Elements/Select.stories.tsx

@@ -58,6 +58,18 @@ export const SelectWithErrorAndHintText: Story = {
   },
 };
 
+export const SelectWithDivider: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <Select.Option value="first-name-ascending">First name (A to Z)</Select.Option>
+      <Select.Option value="first-name-descending">First name (Z to A)</Select.Option>
+      <Select.Divider />
+      <Select.Option value="last-name-ascending">Last name (A to Z)</Select.Option>
+      <Select.Option value="last-name-descending">Last name (Z to A)</Select.Option>
+    </Select>
+  ),
+};
+
 export const SelectWithButton: Story = {
   args: {
     formGroupProps: {