refactor: remove unused commonjs plugin

.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';

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [12.0.0-alpha.1](https://github.com/chanzuckerberg/edu-design-system/compare/v12.0.0-alpha.0...v12.0.0-alpha.1) (2023-04-04)
+
 ## [12.0.0-alpha.0](https://github.com/chanzuckerberg/edu-design-system/compare/v11.0.0...v12.0.0-alpha.0) (2023-04-04)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "12.0.0-alpha.0",
+  "version": "12.0.0-alpha.1",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
@@ -109,7 +109,6 @@
     "@commitlint/cli": "^17.5.1",
     "@commitlint/config-conventional": "^17.4.4",
     "@geometricpanda/storybook-addon-badges": "^1.1.1",
-    "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-typescript": "^11.0.0",
     "@size-limit/file": "^8.2.4",

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';