Use named import for clsx

This was causing an issue when bundling the website, probably due to how
Node handles ESM imports.
I didn't investigate further, but avoiding the default export from clsx
seems to fix it

Author: gabro

packages/bento-design-system/src/Box/Box.tsx

@@ -1,7 +1,7 @@
 import { extractAtomsFromProps } from "@dessert-box/core";
 import * as resetStyles from "../reset.css";
 import { forwardRef, createElement } from "react";
-import clsx, { ClassValue } from "clsx";
+import { ClassValue, clsx } from "clsx";
 import { useSprinkles } from "../SprinklesContext";
 import { SprinklesFn } from "../util/ConfigurableTypes";
 

packages/bento-design-system/src/DateField/DateField.tsx

@@ -9,7 +9,6 @@ import { useField } from "@react-aria/label";
 import { Input } from "./Input";
 import { IconMinus } from "../Icons";
 import { dateFieldRecipe } from "./DateField.css";
-import clsx from "clsx";
 import { LocalizedString } from "../util/LocalizedString";
 import { useBentoConfig } from "../BentoConfigContext";
 import { getReadOnlyBackgroundStyle } from "../Field/utils";
@@ -159,7 +158,7 @@ export function DateField(props: Props) {
         paddingX={inputConfig.paddingX}
         paddingY={inputConfig.paddingY}
         background={inputConfig.background.default}
-        className={clsx(
+        className={[
           inputRecipe({ validation: validationState || "notSet" }),
           bodyRecipe({
             color: props.disabled ? "disabled" : "primary",
@@ -169,8 +168,8 @@ export function DateField(props: Props) {
           dateFieldRecipe({ validation: validationState || "notSet", isFocused }),
           {
             readOnly: props.readOnly,
-          }
-        )}
+          },
+        ]}
         style={getReadOnlyBackgroundStyle(inputConfig)}
         disabled={props.disabled}
       >

packages/bento-design-system/src/SelectField/components.tsx

@@ -30,7 +30,7 @@ import {
 } from "..";
 import { singleValue, placeholder, menu, control } from "./SelectField.css";
 import { bodyRecipe } from "../Typography/Body/Body.css";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import type { SelectOption } from "./SelectField";
 import { InternalList } from "../List/InternalList";
 import { ListItem } from "../List/ListItem";

packages/website/src/components/HomepageFeatures.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import clsx from "clsx";
 import styles from "./HomepageFeatures.module.css";
 
 type FeatureItem = {
@@ -44,7 +43,7 @@ const FeatureList: FeatureItem[] = [
 
 function Feature({ title, image, description }: FeatureItem) {
   return (
-    <div className={clsx("col col--4")}>
+    <div className={"col col--4"}>
       <div className="text--center padding-vert--md">
         <img className={styles.featureSvg} alt={title} src={image} />
       </div>

packages/website/src/pages/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";