fix(exports): use default exports

src/_internal/contexts/ExitContext.tsx

@@ -1,5 +1,9 @@
 import {createContext} from 'react';
 
-export const ExitContext = createContext(() => {
-  // noop
-});
+const noop = () => {
+  // nothing
+};
+
+const ExitContext = createContext(noop);
+
+export default ExitContext;

src/_internal/hooks/useCloseOnClickOutside.tsx

@@ -1,7 +1,7 @@
 import {useEffect} from 'react';
 import type {MutableRefObject} from 'react';
 
-export const useCloseOnClickOutside = (
+const useCloseOnClickOutside = (
   isOpen: boolean,
   close: () => void,
   containerRef: MutableRefObject<HTMLElement | null>,
@@ -25,3 +25,5 @@ export const useCloseOnClickOutside = (
     }
   }, [isOpen, close, containerRef]);
 };
+
+export default useCloseOnClickOutside;

src/components/a11y/SkipLink.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {SkipLink as SkipLinkComponent} from './SkipLink.js';
+import SkipLinkComponent from './SkipLink.js';
 
 const meta = {
   title: 'Base/A11y/SkipLink',

src/components/a11y/SkipLink.tsx

@@ -7,7 +7,7 @@ type Props = {
   children?: ReactNode;
 };
 
-export const SkipLink: FC<Props> = ({href, children = 'Skip to Content'}) => {
+const SkipLink: FC<Props> = ({href, children = 'Skip to Content'}) => {
   if (!isValidHashHref(href)) {
     throw new Error('Hash link href is invalid!');
   }
@@ -20,3 +20,5 @@ export const SkipLink: FC<Props> = ({href, children = 'Skip to Content'}) => {
     </a>
   );
 };
+
+export default SkipLink;

src/components/buttons/Button.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {Button as Component} from './Button.js';
+import Component from './Button.js';
 
 const meta = {
   title: 'Base/Buttons/Button',

src/components/buttons/Button.tsx

@@ -12,7 +12,7 @@ type StyleData = {
 type Props = StyleableProps<JSX.IntrinsicElements['button'], StyleData> &
   StyleData & {remove?: () => void};
 
-export const Button = forwardRef<HTMLButtonElement, Props>(
+const Button = forwardRef<HTMLButtonElement, Props>(
   (
     {
       type = 'button',
@@ -42,3 +42,5 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
     );
   },
 );
+
+export default Button;

src/components/buttons/ButtonGroup.stories.tsx

@@ -1,6 +1,6 @@
 import type {FC} from 'react';
-import {ButtonGroup as Component} from './ButtonGroup.js';
-import {Button} from './Button.js';
+import Component from './ButtonGroup.js';
+import Button from './Button.js';
 
 const meta = {
   title: 'Base/Buttons/ButtonGroup',

src/components/buttons/ButtonGroup.tsx

@@ -2,7 +2,7 @@ import type {ComponentProps, ReactElement, ReactNode, FC} from 'react';
 import {cloneElement, isValidElement, Children} from 'react';
 import type {DockConfig} from '../../_internal/utils/dock.js';
 import {mergeDockConfigs} from '../../_internal/utils/dock.js';
-import {Button} from './Button.js';
+import Button from './Button.js';
 
 type ButtonElement = ReactElement<ComponentProps<typeof Button>, typeof Button>;
 
@@ -14,7 +14,7 @@ type Props = {
 const isButton = (child: ReactNode): child is ButtonElement =>
   isValidElement(child) && child.type === Button;
 
-export const ButtonGroup: FC<Props> = ({dock, children}) => {
+const ButtonGroup: FC<Props> = ({dock, children}) => {
   const buttons = Children.toArray(children).filter(isButton);
   return (
     <div className="flex">
@@ -31,3 +31,5 @@ export const ButtonGroup: FC<Props> = ({dock, children}) => {
     </div>
   );
 };
+
+export default ButtonGroup;

src/components/buttons/DropdownButton.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {DropdownButton as DropdownButtonComponent} from './DropdownButton.js';
+import DropdownButtonComponent from './DropdownButton.js';
 
 const meta = {
   title: 'Base/Buttons/DropdownButton',

src/components/buttons/DropdownButton.tsx

@@ -1,9 +1,9 @@
 import type {ComponentProps, FC, ReactNode} from 'react';
-import {ExitContext} from '../../_internal/contexts/ExitContext.js';
+import ExitContext from '../../_internal/contexts/ExitContext.js';
 import {useToggle} from '../../_internal/hooks/useToggle.js';
-import {CollapsibleIcon} from '../icons/CollapsibleIcon.js';
-import {Dropdown} from '../overlays/Dropdown.js';
-import {Button} from './Button.js';
+import CollapsibleIcon from '../icons/CollapsibleIcon.js';
+import Dropdown from '../overlays/Dropdown.js';
+import Button from './Button.js';
 
 type Props = ComponentProps<typeof Button> &
   Omit<
@@ -13,7 +13,7 @@ type Props = ComponentProps<typeof Button> &
     label: ReactNode;
   };
 
-export const DropdownButton: FC<Props> = ({
+const DropdownButton: FC<Props> = ({
   placement,
   children,
   label,
@@ -35,3 +35,5 @@ export const DropdownButton: FC<Props> = ({
     </Dropdown>
   );
 };
+
+export default DropdownButton;

src/components/buttons/IconButton.stories.tsx

@@ -1,6 +1,6 @@
 import type {FC} from 'react';
 import {MdAdd} from 'react-icons/md/index.js';
-import {IconButton as IconButtonComponent} from './IconButton.js';
+import IconButtonComponent from './IconButton.js';
 
 const meta = {
   title: 'Base/Buttons/IconButton',

src/components/buttons/IconButton.tsx

@@ -1,10 +1,12 @@
 import type {FC} from 'react';
 import type {Unstyled} from '../../_internal/utils/types.js';
 
-export const IconButton: FC<Unstyled<'button'> & {title: string}> = props => (
+const IconButton: FC<Unstyled<'button'> & {title: string}> = props => (
   <button
     {...props}
     type="button"
     className="transform p-1 duration-75 hover:scale-150"
   />
 );
+
+export default IconButton;

src/components/buttons/LinkButton.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {LinkButton as LinkButtonComponent} from './LinkButton.js';
+import LinkButtonComponent from './LinkButton.js';
 
 const meta = {
   title: 'Base/Buttons/Link Button',

src/components/buttons/LinkButton.tsx

@@ -2,8 +2,10 @@ import type {FC} from 'react';
 import type {Unstyled} from '../../_internal/utils/types.js';
 import {getHyperlinkClasses} from '../../_internal/utils/getHyperlinkClasses.js';
 
-export const LinkButton: FC<Unstyled<'button'>> = ({children, ...rest}) => (
+const LinkButton: FC<Unstyled<'button'>> = ({children, ...rest}) => (
   <button {...rest} type="button" className={getHyperlinkClasses()}>
     {children}
   </button>
 );
+
+export default LinkButton;

src/components/buttons/TabButton.stories.tsx

@@ -1,6 +1,6 @@
 import type {FC} from 'react';
 import {MdBrowserNotSupported} from 'react-icons/md/index.js';
-import {TabButton as Component} from './TabButton.js';
+import Component from './TabButton.js';
 
 const meta = {
   title: 'Base/Buttons/TabButton',

src/components/buttons/TabButton.tsx

@@ -1,10 +1,12 @@
 import type {FC, ComponentProps} from 'react';
 import type {DockConfig} from '../../_internal/utils/dock.js';
-import {Button} from './Button.js';
+import Button from './Button.js';
 
 const DEFAULT_DOCK: DockConfig = {bottom: true};
 
-export const TabButton: FC<ComponentProps<typeof Button>> = ({
+const TabButton: FC<ComponentProps<typeof Button>> = ({
   dock = DEFAULT_DOCK,
   ...rest
 }) => <Button dock={dock} {...rest} />;
+
+export default TabButton;

src/components/buttons/TabButtonGroup.stories.tsx

@@ -1,7 +1,7 @@
 import type {FC} from 'react';
 import {MdClose} from 'react-icons/md/index.js';
-import {Button} from './Button.js';
-import {TabButtonGroup as Component} from './TabButtonGroup.js';
+import Button from './Button.js';
+import Component from './TabButtonGroup.js';
 
 const meta = {
   title: 'Base/Buttons/TabButtonGroup',

src/components/buttons/TabButtonGroup.tsx

@@ -1,10 +1,12 @@
 import type {FC, ComponentProps} from 'react';
 import type {DockConfig} from '../../_internal/utils/dock.js';
-import {ButtonGroup} from './ButtonGroup.js';
+import ButtonGroup from './ButtonGroup.js';
 
 const DEFAULT_DOCK: DockConfig = {bottom: true};
 
-export const TabButtonGroup: FC<ComponentProps<typeof ButtonGroup>> = ({
+const TabButtonGroup: FC<ComponentProps<typeof ButtonGroup>> = ({
   dock = DEFAULT_DOCK,
   ...rest
 }) => <ButtonGroup dock={dock} {...rest} />;
+
+export default TabButtonGroup;

src/components/feedback/Alert.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {Alert as AlertComponent} from './Alert.js';
+import AlertComponent from './Alert.js';
 
 const meta = {
   title: 'Base/Feedback/Alert',

src/components/feedback/Alert.tsx

@@ -4,7 +4,7 @@ import type {FC, ReactNode} from 'react';
 
 const clsx = defaultImport(_clsx);
 
-export const Alert: FC<{
+const Alert: FC<{
   type?: 'danger' | 'error' | 'info' | 'success' | 'warning';
   children?: ReactNode;
 }> = ({type = 'info', children}) => (
@@ -30,3 +30,5 @@ export const Alert: FC<{
     {children}
   </div>
 );
+
+export default Alert;

src/components/feedback/ProgressSpinner.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {ProgressSpinner as Component} from './ProgressSpinner.js';
+import Component from './ProgressSpinner.js';
 
 const meta = {
   title: 'Base/Feedback/Progress Spinner',

src/components/feedback/ProgressSpinner.tsx

@@ -5,7 +5,7 @@ import {defaultImport} from 'default-import';
 
 const clsx = defaultImport(_clsx);
 
-export const ProgressSpinner: FC<{progress: number; grow?: boolean}> = ({
+const ProgressSpinner: FC<{progress: number; grow?: boolean}> = ({
   progress,
   grow,
 }) => {
@@ -49,3 +49,5 @@ export const ProgressSpinner: FC<{progress: number; grow?: boolean}> = ({
     </div>
   );
 };
+
+export default ProgressSpinner;

src/components/feedback/Spinner.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {Spinner as Component} from './Spinner.js';
+import Component from './Spinner.js';
 
 const meta = {
   title: 'Base/Feedback/Spinner',

src/components/feedback/Spinner.tsx

@@ -5,10 +5,7 @@ import {defaultImport} from 'default-import';
 
 const clsx = defaultImport(_clsx);
 
-export const Spinner: FC<{grow?: boolean; delay?: number}> = ({
-  grow,
-  delay = 100,
-}) => {
+const Spinner: FC<{grow?: boolean; delay?: number}> = ({grow, delay = 100}) => {
   const [shouldShow, setShouldShow] = useState(delay === 0);
 
   useEffect(() => {
@@ -81,3 +78,5 @@ export const Spinner: FC<{grow?: boolean; delay?: number}> = ({
     </div>
   );
 };
+
+export default Spinner;

src/components/form-controls/Checkbox.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {Checkbox as Component} from './Checkbox.js';
+import Component from './Checkbox.js';
 
 const meta = {
   title: 'Base/Forms/Controls/Checkbox',

src/components/form-controls/Checkbox.tsx

@@ -2,7 +2,7 @@ import type {FC} from 'react';
 import type {FieldMeta} from '../../_internal/utils/types.js';
 import {getFieldClasses} from '../../_internal/utils/getFieldClasses.js';
 
-export const Checkbox: FC<
+const Checkbox: FC<
   JSX.IntrinsicElements['input'] & {
     meta?: Omit<FieldMeta, 'dock' | 'isCheckbox' | 'isRadio'>;
   }
@@ -14,3 +14,5 @@ export const Checkbox: FC<
     className={getFieldClasses({...meta, block: false, isCheckbox: true})}
   />
 );
+
+export default Checkbox;

src/components/form-controls/Radio.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {Radio as Component} from './Radio.js';
+import Component from './Radio.js';
 
 const meta = {
   title: 'Base/Forms/Controls/Radio',

src/components/form-controls/Radio.tsx

@@ -2,7 +2,7 @@ import type {FC} from 'react';
 import type {FieldMeta} from '../../_internal/utils/types.js';
 import {getFieldClasses} from '../../_internal/utils/getFieldClasses.js';
 
-export const Radio: FC<
+const Radio: FC<
   JSX.IntrinsicElements['input'] & {meta?: Omit<FieldMeta, 'dock' | 'isRadio'>}
 > = ({meta, ...rest}) => (
   <input
@@ -11,3 +11,5 @@ export const Radio: FC<
     className={getFieldClasses({...meta, block: false, isRadio: true})}
   />
 );
+
+export default Radio;

src/components/form-controls/RadioSelect.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {RadioSelect as Component} from './RadioSelect.js';
+import Component from './RadioSelect.js';
 
 const meta = {
   title: 'Base/Forms/Controls/RadioSelect',

src/components/form-controls/RadioSelect.tsx

@@ -1,13 +1,13 @@
 import type {ChangeEvent, FC, ReactNode} from 'react';
 import {Children} from 'react';
 import type {FieldMeta} from '../../_internal/utils/types.js';
-import {Label} from '../form-layout/Label.js';
+import Label from '../form-layout/Label.js';
 import {getOptionLabel} from '../../_internal/utils/getOptionLabel.js';
 import {getOptionValue} from '../../_internal/utils/getOptionValue.js';
 import {isOptionElement} from '../../_internal/utils/isOptionElement.js';
-import {Radio} from './Radio.js';
+import Radio from './Radio.js';
 
-export const RadioSelect: FC<{
+const RadioSelect: FC<{
   name: string;
   value?: string;
   defaultValue?: string;
@@ -41,3 +41,5 @@ export const RadioSelect: FC<{
     </div>
   );
 };
+
+export default RadioSelect;

src/components/form-controls/Select.stories.tsx

@@ -1,5 +1,5 @@
 import type {FC} from 'react';
-import {Select as Component} from './Select.js';
+import Component from './Select.js';
 
 const meta = {
   title: 'Base/Forms/Controls/Select',

src/components/form-controls/Select.tsx

@@ -3,7 +3,7 @@ import {MdExpandMore} from 'react-icons/md/index.js';
 import type {FieldMeta, Unstyled} from '../../_internal/utils/types.js';
 import {getFieldClasses} from '../../_internal/utils/getFieldClasses.js';
 
-export const Select: FC<Unstyled<'select'> & {meta?: FieldMeta}> = ({
+const Select: FC<Unstyled<'select'> & {meta?: FieldMeta}> = ({
   meta,
   ...props
 }) => (
@@ -18,3 +18,5 @@ export const Select: FC<Unstyled<'select'> & {meta?: FieldMeta}> = ({
     </div>
   </div>
 );
+
+export default Select;