fix css

packages/ui/app/.storybook/preview.tsx

@@ -1,8 +1,7 @@
+import { FernTooltipProvider, Toaster } from "@fern-ui/components";
 import { withThemeByClassName } from "@storybook/addon-themes";
 import type { Preview } from "@storybook/react";
 import React from "react";
-import { Toaster } from "../src/components/FernToast";
-import { FernTooltipProvider } from "../src/components/FernTooltip";
 import "../src/next-app/globals.scss";
 import "./variables.css";
 

packages/ui/components/package.json

@@ -36,13 +36,12 @@
   },
   "dependencies": {
     "@emotion/is-prop-valid": "^1.2.2",
+    "@fern-ui/react-commons": "workspace:*",
     "@headlessui/react": "^1.7.18",
     "@radix-ui/colors": "^3.0.0",
-    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
@@ -52,25 +51,26 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@shikijs/transformers": "^1.2.2",
     "clsx": "^2.1.0",
-    "framer-motion": "^11.1.7",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-feather": "^2.0.10",
-    "@fern-ui/react-commons": "workspace:*",
     "sonner": "^1.4.41"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.3.5",
+    "@chromatic-com/storybook": "^1.4.0",
     "@fern-platform/configs": "workspace:*",
-    "@storybook/addon-essentials": "8.1.0-alpha.6",
-    "@storybook/addon-interactions": "8.1.0-alpha.6",
-    "@storybook/addon-links": "8.1.0-alpha.6",
-    "@storybook/addon-onboarding": "8.1.0-alpha.6",
-    "@storybook/addon-themes": "^8.0.10",
-    "@storybook/blocks": "8.1.0-alpha.6",
-    "@storybook/react": "8.1.0-alpha.6",
-    "@storybook/test": "8.1.0-alpha.6",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-onboarding": "^8.1.1",
+    "@storybook/addon-themes": "^8.1.1",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.2",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/react-webpack5": "^8.1.1",
+    "@storybook/test": "^8.1.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tailwindcss/typography": "^0.5.10",
     "@types/node": "^18.7.18",
@@ -86,7 +86,8 @@
     "organize-imports-cli": "^0.10.0",
     "postcss-import": "^16.0.1",
     "prettier": "^3.2.4",
-    "storybook": "8.1.0-alpha.6",
+    "sass": "^1.74.1",
+    "storybook": "^8.1.1",
     "stylelint": "^16.1.0",
     "tailwindcss": "^3.4.3",
     "typescript": "5.4.3",

packages/ui/components/src/FernAudioPlayer.tsx

@@ -3,6 +3,7 @@ import moment from "moment";
 import { createRef, ReactElement, useEffect, useState } from "react";
 import { FastForward, Pause, Play, Rewind, RotateCcw, Volume2, VolumeX } from "react-feather";
 import { FernButton, FernButtonGroup } from "./FernButton";
+import "./index.scss";
 
 export interface FernAudioPlayerProps {
     /** The URL of the audio file to play */

packages/ui/components/src/FernButton.tsx

@@ -1,5 +1,5 @@
 import cn from "clsx";
-import { ComponentProps, forwardRef, PropsWithChildren, ReactNode, useRef } from "react";
+import { ComponentProps, forwardRef, PropsWithChildren, ReactElement, ReactNode, useRef } from "react";
 import { FernTooltip, FernTooltipProvider } from "./FernTooltip";
 import { RemoteFontAwesomeIcon } from "./FontAwesomeIcon";
 
@@ -111,7 +111,7 @@ export const FernButtonGroup = forwardRef<HTMLSpanElement, ComponentProps<"div">
 export function renderButtonContent(
     { icon: leftIcon, rightIcon, mono = false, text, children }: PropsWithChildren<FernButtonSharedProps>,
     buttonTextRef?: React.RefObject<HTMLSpanElement>,
-) {
+): ReactElement {
     children = children ?? text;
     return (
         <span className="fern-button-content">
@@ -144,7 +144,7 @@ export function getButtonClassName({
     rightIcon,
     text,
     children,
-}: PropsWithChildren<FernButtonSharedProps>) {
+}: PropsWithChildren<FernButtonSharedProps>): string {
     children = children ?? text;
     return cn(className, "fern-button", variant, size, {
         [intent]: intent !== "none",

packages/ui/components/src/FernCard.tsx

@@ -1,5 +1,6 @@
 import cn from "clsx";
 import { ComponentProps, forwardRef } from "react";
+import "./index.scss";
 
 export interface FernCardProps {
     className?: string;

packages/ui/components/src/FernCheckbox.tsx

@@ -3,6 +3,7 @@ import { CheckIcon } from "@radix-ui/react-icons";
 import cn from "clsx";
 import { FC, ReactNode } from "react";
 import "./FernCheckbox.css";
+import "./index.scss";
 
 interface FernCheckboxProps extends Checkbox.CheckboxProps {
     labelClassName?: string;

packages/ui/components/src/FernChip.tsx

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
 import { PropsWithChildren, forwardRef } from "react";
+import "./index.scss";
 import { ColorScheme, Size } from "./shared-component-types";
 
 export type FernChipSize = Extract<Size, "sm" | "lg">;

packages/ui/components/src/FernCollapse.tsx

@@ -1,5 +1,6 @@
 import { Transition } from "@headlessui/react";
 import { FC, PropsWithChildren, useRef, useState } from "react";
+import "./index.scss";
 
 interface FernCollapseProps {
     isOpen?: boolean;

packages/ui/components/src/FernDropdown.tsx

@@ -4,6 +4,7 @@ import cn from "clsx";
 import { PropsWithChildren, ReactElement, ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { FernScrollArea } from "./FernScrollArea";
 import { FernTooltip, FernTooltipProvider } from "./FernTooltip";
+import "./index.scss";
 
 export declare namespace FernDropdown {
     export interface ValueOption {

packages/ui/components/src/FernInput.tsx

@@ -1,5 +1,6 @@
 import cn from "clsx";
 import { ComponentProps, forwardRef } from "react";
+import "./index.scss";
 
 export interface FernInputProps extends ComponentProps<"input"> {
     inputClassName?: string;

packages/ui/components/src/FernModal.tsx

@@ -1,6 +1,7 @@
 import { Dialog, Transition } from "@headlessui/react";
 import cn from "clsx";
 import { FC, Fragment, PropsWithChildren, ReactElement } from "react";
+import "./index.scss";
 
 interface FernModalProps {
     isOpen: boolean;

packages/ui/components/src/FernNumericInput.tsx

@@ -12,6 +12,7 @@ import {
     useState,
 } from "react";
 import { FernButton } from "./FernButton";
+import "./index.scss";
 
 export interface FernNumericInputProps extends ComponentProps<"input"> {
     inputClassName?: string;

packages/ui/components/src/FernRadioGroup.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 import { FernDropdown } from "./FernDropdown";
 import "./FernRadioGroup.css";
 import { FernTooltip, FernTooltipProvider } from "./FernTooltip";
+import "./index.scss";
 
 interface FernRadioGroupProps extends RadioGroup.RadioGroupProps {
     options: FernDropdown.Option[];

packages/ui/components/src/FernScrollArea.tsx

@@ -2,6 +2,7 @@ import * as ScrollArea from "@radix-ui/react-scroll-area";
 import cn from "clsx";
 import { forwardRef, PropsWithChildren, RefObject } from "react";
 import "./FernScrollArea.css";
+import "./index.scss";
 
 export declare namespace FernScrollArea {
     interface FernScrollAreaProps extends ScrollArea.ScrollAreaProps, Omit<ScrollArea.ScrollAreaViewportProps, "dir"> {

packages/ui/components/src/FernSegmentedControl.tsx

@@ -4,6 +4,7 @@ import { FC } from "react";
 import { FernButton } from "./FernButton";
 import { FernDropdown } from "./FernDropdown";
 import { FernTooltip, FernTooltipProvider } from "./FernTooltip";
+import "./index.scss";
 
 interface FernSegmentedControlProps {
     className?: string;

packages/ui/components/src/FernSelect.tsx

@@ -2,6 +2,7 @@ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "@radix-ui/react-icons
 import * as Select from "@radix-ui/react-select";
 import classnames from "clsx";
 import { FC, forwardRef } from "react";
+import "./index.scss";
 
 export const FernSelect: FC<Select.SelectProps> = () => (
     <Select.Root>

packages/ui/components/src/FernSwitch.tsx

@@ -1,6 +1,7 @@
 import * as Switch from "@radix-ui/react-switch";
 import cn from "clsx";
 import { ReactElement } from "react";
+import "./index.scss";
 
 export function FernSwitch(props: Switch.SwitchProps): ReactElement {
     return (

packages/ui/components/src/FernTabs.tsx

@@ -1,5 +1,6 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import { FC, ReactNode } from "react";
+import "./index.scss";
 
 export interface FernTabProps {
     title: string;

packages/ui/components/src/FernTag.tsx

@@ -1,5 +1,6 @@
 import { clsx } from "clsx";
 import { FC, PropsWithChildren } from "react";
+import "./index.scss";
 import { ColorScheme, Size } from "./shared-component-types";
 
 export type FernTagSize = Extract<Size, "sm" | "lg">;

packages/ui/components/src/FernTextarea.tsx

@@ -1,5 +1,6 @@
 import cn from "clsx";
 import { ComponentProps, forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import "./index.scss";
 
 interface FernTextareaProps extends ComponentProps<"textarea"> {
     onValueChange?: (value: string) => void;

packages/ui/components/src/FernToast.tsx

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { AlertCircle, CheckCircle, Info, Loader, XCircle } from "react-feather";
 import { Toaster as SonnerToaster } from "sonner";
+
 export { toast } from "sonner";
 export type { ToastT } from "sonner";
 

packages/ui/components/src/FernTooltip.tsx

@@ -1,6 +1,7 @@
 import * as Tooltip from "@radix-ui/react-tooltip";
 import cn from "clsx";
 import { FC, ReactNode } from "react";
+import "./index.scss";
 
 interface FernTooltipProps extends Tooltip.TooltipProps, Omit<Tooltip.TooltipContentProps, "content"> {
     content: ReactNode | undefined;

packages/ui/components/src/FontAwesomeIcon.tsx

@@ -1,5 +1,6 @@
 import cn from "clsx";
 import { forwardRef } from "react";
+import "./index.scss";
 
 export declare namespace RemoteFontAwesomeIcon {
     export interface Props {

packages/ui/components/src/SearchInput.tsx

@@ -1,6 +1,7 @@
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { ReactElement } from "react";
 import { FernInput } from "./FernInput";
+import "./index.scss";
 
 type SearchProps = {
     searchInput: string;