refactor: use named import for clsx

.storybook/components/TokenSpecimen/TokenSpecimen.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { Component } from 'react';
 import './TokenSpecimen.css';
 

.storybook/pages/AlongDemo/AlongDemo.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { useId, useState } from 'react';
 
 import {

.storybook/pages/CoursePlannerEdit/CoursePlannerEdit.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { useState } from 'react';
 import type { ReactNode } from 'react';
 

.storybook/pages/CoursePlannerEdit/ProjectCard/ProjectCard.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 

.storybook/pages/CoursePlannerStep1/CoursePlannerStep1.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 
 import {

.storybook/pages/StudentRefinement/StudentRefinement.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import debounce from 'lodash.debounce';
 import React, { useEffect, useState } from 'react';
 

.storybook/pages/WireframeDemo/WireframeDemo.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { useId, useState } from 'react';
 
 import {

.storybook/recipes/ButtonActionCalloutCard/ButtonActionCalloutCard.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { Card, Heading } from '../../../src';

.storybook/recipes/CalendarCard/CalendarCard.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 

.storybook/recipes/CardWithNotification/CardWithNotification.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 

.storybook/recipes/NumberIconList/NumberIconList.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from './NumberIconList.module.css';

.storybook/recipes/PageShell/PageShell.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import { Link, Layout, LayoutContainer, LayoutSection } from '../../../src';

.storybook/recipes/PrimaryNav/PrimaryNav.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { IconName } from '../../../src';

plop-templates/Component/Component.tsx.hbs

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import {clsx} from 'clsx';
 import React from 'react';
 import styles from './{{pascalCase name}}.module.css';
 

plop-templates/Recipe/Recipe.tsx.hbs

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import {clsx} from 'clsx';
 import React from 'react';
 import styles from './{{pascalCase name}}.module.css';
 

src/components/Accordion/Accordion.tsx

@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { createContext, useContext } from 'react';
 import { ENTER_KEYCODE, SPACEBAR_KEYCODE } from '../../util/keycodes';
 import Button from '../Button';

src/components/Avatar/Avatar.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import Icon from '../Icon';
 import styles from './Avatar.module.css';

src/components/Badge/Badge.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import Icon from '../Icon';
 import type { IconName, IconProps } from '../Icon';

src/components/Banner/Banner.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import Button from '../Button';

src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import debounce from 'lodash.debounce';
 import React, { type ReactNode } from 'react';
 import { flattenReactChildren } from '../../util/flattenReactChildren';

src/components/BreadcrumbsItem/BreadcrumbsItem.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import ButtonDropdown from '../ButtonDropdown';
 import Icon from '../Icon';

src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import ClickableStyle from '../ClickableStyle';

src/components/ButtonDropdown/ButtonDropdown.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { ClickableStyleProps } from '../ClickableStyle';

src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from './ButtonGroup.module.css';

src/components/Card/Card.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { HTMLAttributes, ReactNode } from 'react';
 import React from 'react';
 import CardBody from '../CardBody';

src/components/CardBody/CardBody.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from '../Card/Card.module.css';

src/components/CardFooter/CardFooter.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from '../Card/Card.module.css';

src/components/CardHeader/CardHeader.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from '../Card/Card.module.css';

src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { useId } from 'react';
 import type { EitherInclusive } from '../../util/utility-types';
 import type { CheckboxInputProps } from '../CheckboxInput';

src/components/CheckboxInput/CheckboxInput.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import useForwardedRef from '../../util/useForwardedRef';
 import styles from './CheckboxInput.module.css';

src/components/CheckboxLabel/CheckboxLabel.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { InputLabelProps } from '../InputLabel/InputLabel';
 import { InputLabel } from '../InputLabel/InputLabel';

src/components/ClickableStyle/ClickableStyle.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import styles from './ClickableStyle.module.css';

src/components/DataBar/DataBar.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { useId } from 'react';
 
 import DataBarSegment from '../DataBarSegment';

src/components/DataBarSegment/DataBarSegment.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import Tooltip from '../Tooltip';
 import styles from './DataBarSegment.module.css';

src/components/DragDrop/DragDrop.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, {
   type ReactNode,
   useState,

src/components/DragDropContainer/DragDropContainer.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { DroppableProvided } from 'react-beautiful-dnd';

src/components/DragDropItem/DragDropItem.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { DraggableProvided } from 'react-beautiful-dnd';

src/components/Drawer/Drawer.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, {
   useCallback,
   useState,

src/components/DrawerBody/DrawerBody.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from '../Drawer/Drawer.module.css';

src/components/DrawerFooter/DrawerFooter.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 

src/components/DrawerHeader/DrawerHeader.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import Button from '../../components/Button';

src/components/Dropdown/Dropdown.stories.tsx

@@ -1,7 +1,7 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { StoryObj, Meta } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { OptionsAlignType, VariantType } from './Dropdown';
 import { Dropdown } from './Dropdown';

src/components/Dropdown/Dropdown.tsx

@@ -1,5 +1,5 @@
 import { Listbox } from '@headlessui/react';
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactElement, ReactNode, ElementType } from 'react';
 import React, { useContext } from 'react';
 

src/components/DropdownButton/DropdownButton.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React, { forwardRef } from 'react';
 import Icon from '../Icon';

src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type {
   ReactNode,
   KeyboardEvent,

src/components/DropdownMenuItem/DropdownMenuItem.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode, MouseEventHandler } from 'react';
 import React, { useContext } from 'react';
 import { DropdownMenuContext } from '../DropdownMenu';

src/components/FieldNote/FieldNote.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import Icon from '../Icon';

src/components/Fieldset/Fieldset.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import FieldsetItems from '../FieldsetItems';

src/components/FieldsetItems/FieldsetItems.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 import React from 'react';
 import styles from './FieldsetItems.module.css';

src/components/FieldsetLegend/FieldsetLegend.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './FieldsetLegend.module.css';
 

src/components/FiltersButton/FiltersButton.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { forwardRef } from 'react';
 import Button, { type ButtonProps } from '../Button';
 import type { VariantStatus } from '../ClickableStyle';

src/components/FiltersCheckboxField/FiltersCheckboxField.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import Fieldset from '../Fieldset';
 import FieldsetLegend from '../FieldsetLegend';

src/components/FiltersDrawer/FiltersDrawer.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useId, useRef, useState } from 'react';
 import Button from '../Button';

src/components/FiltersPopover/FiltersPopover.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { type ReactNode, useEffect, useRef } from 'react';
 import Button from '../Button';
 import ButtonGroup from '../ButtonGroup';

src/components/Grid/Grid.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import GridItem from '../GridItem';

src/components/GridItem/GridItem.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode } from 'react';
 import React from 'react';
 import styles from './GridItem.module.css';

src/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React, { forwardRef } from 'react';
 import styles from './Heading.module.css';
 

src/components/HorizontalStep/HorizontalStep.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import Icon from '../Icon';
 import NumberIcon from '../NumberIcon';

src/components/HorizontalStepper/HorizontalStepper.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import HorizontalStep from '../HorizontalStep';
 import styles from './HorizontalStepper.module.css';

src/components/Hr/Hr.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './Hr.module.css';
 

src/components/Icon/Icon.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ReactNode, CSSProperties } from 'react';
 import React from 'react';
 import icons, { type IconName } from '../../icons/spritemap';

src/components/InlineNotification/InlineNotification.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import Icon from '../Icon';
 import Text from '../Text';

src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ChangeEventHandler } from 'react';
 import React, { forwardRef } from 'react';
 import styles from './Input.module.css';

src/components/InputField/InputField.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import type { ChangeEventHandler, ReactNode } from 'react';
 import React, { forwardRef, useId } from 'react';
 import type { EitherInclusive } from '../../util/utility-types';

src/components/InputLabel/InputLabel.tsx

@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import { clsx } from 'clsx';
 import React from 'react';
 import styles from './InputLabel.module.css';