@cerebruminc/cerebellum 18.0.0 → 19.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # react-component-lib-boilerplate
 
+## [19.0.0](https://github.com/cerebruminc/cerebellum/compare/v18.0.0...v19.0.0) (2026-07-23)
+
+
+### ⚠ BREAKING CHANGES
+
+* **nav-layout:** NavLayout no longer uses themeOverride and uses height and paddingLeft instead. backgroundColor override has been removed entirely as it was unused across all consumers.
+
+### Features
+
+* **nav-layout:** migrate NavLayout from styled-components to CSS modules ([44638fa](https://github.com/cerebruminc/cerebellum/commit/44638fab6578b0a4fced2917c6b100e21a543c77))
+
+
+### Bug Fixes
+
+* **avatar:** allow the placeholder font size to grow with the component ([4b3d5a4](https://github.com/cerebruminc/cerebellum/commit/4b3d5a424a6774cf356a4adf7231a68a4b020b6c))
+* **avatar:** remove the border on the Avatar placeholder ([82b97da](https://github.com/cerebruminc/cerebellum/commit/82b97da16eeb589f4e10c03c728714232e03a8d5))
+* support next 16 ([7a5d33d](https://github.com/cerebruminc/cerebellum/commit/7a5d33d9e30724e07f2aced6ecf439ba4feae25d))
+* **user-card:** fix the click out feature ([bcd7db7](https://github.com/cerebruminc/cerebellum/commit/bcd7db73bf2147d1a455a5c0982624942a567eb2))
+
 ## [18.0.0](https://github.com/cerebruminc/cerebellum/compare/v17.5.0...v18.0.0) (2026-07-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerebruminc/cerebellum",
-  "version": "18.0.0",
+  "version": "19.0.0",
   "description": "Cerebrum's React Component Library",
   "type": "module",
   "main": "src/index.ts",
@@ -92,7 +92,7 @@
     "lint-staged": "^15.0.0",
     "lorem-ipsum": "^2.0.4",
     "msw": "^2.14.6",
-    "next": "^15.1.5",
+    "next": "^16.2.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "remark-gfm": "^4.0.0",
@@ -110,7 +110,7 @@
     "@types/pngjs": "^6.0.5",
     "@types/react-datepicker": "^6.0.3",
     "@types/react-places-autocomplete": "^7.2.14",
-    "next": "^14.0.0 || ^15.0.0",
+    "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "styled-components": "^6.1.16"

package/src/SharedStorybook/ComponentLabel.tsx

@@ -1,7 +1,7 @@
-import React, { FC } from "react";
+import { FC } from "react";
+import { TextLink, TextVariantEnum, Typography, colors } from "..";
 import { ChatBubbleLines, User } from "../components/Icons";
 import { TooltipLabel } from "../components/TooltipLabel";
-import { TextLink, TextVariantEnum, Typography, colors } from "..";
 import { SmallLabelBase, SmallLabelIcon, SmallLabelText, TooltipJSXBase } from "./ComponentLabelStyles";
 
 export const ComponentLabel = <TooltipLabel label={"React component in label"} tooltipText={"It works!"} />;

package/src/SharedStorybook/DocStyles.tsx

@@ -1,5 +1,5 @@
-import { colors } from "../const/colors";
 import { styled } from "styled-components";
+import { colors } from "../const/colors";
 
 export const Name = styled.h1`
   font-size: 30px;

package/src/SharedStorybook/DocsOnly.tsx

@@ -1,7 +1,7 @@
 // This component is for stories that don't import a component
 //		Helper functions, etc.
 
-import React, { FC } from "react";
+import { FC } from "react";
 import { Col1, Col2, Col3, Col4, Description, Name, Row, Table } from "./DocStyles";
 import { GridContainer } from "./GridStyles";
 import { DocProps } from "./types";

package/src/SharedStorybook/Layout.tsx

@@ -1,5 +1,5 @@
-import { colors } from "../const/colors";
 import { styled } from "styled-components";
+import { colors } from "../const/colors";
 import { AlignProps, ElementSpacingProps, FlexContainerProps, RelativeContainerProps, SpacerProps } from "./types";
 
 export const Spacer = styled.div<SpacerProps>`

package/src/SharedStorybook/Notes.tsx

@@ -1,5 +1,5 @@
-import { colors } from "../const/colors";
 import { styled } from "styled-components";
+import { colors } from "../const/colors";
 import { BackgroundProps, CenterContainerProps, NoteProps } from "./types";
 
 export const Background = styled.div<BackgroundProps>`

package/src/SharedStorybook/TextGroup.tsx

@@ -1,5 +1,5 @@
 import { LoremIpsum } from "lorem-ipsum";
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Header, Text, Title } from "./TextGroupStyles";
 import { TextGroupProps } from "./types";

package/src/SharedStorybook/TextGroupStyles.tsx

@@ -1,5 +1,5 @@
-import { colors } from "../const/colors";
 import { styled } from "styled-components";
+import { colors } from "../const/colors";
 
 export const Title = styled.h1`
   color: ${colors.COOL_GREY_85};

package/src/assets/EmptySearchIcon.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export const EmptySearchIcon = () => {
   return (
     <svg viewBox="0 0 59 60" version="1.1">

package/src/assets/icons/Cerebrum.tsx

@@ -1,7 +1,7 @@
-import React, { JSXElementConstructor } from "react";
-import { boxColorLookup } from "../../helpers/colors";
+import { JSXElementConstructor } from "react";
 import { BoringSpan, IconBox, InnerIconBox, Svg } from "../../components/Icons/IconComponentStyles";
 import { IconProps, IconType } from "../../components/Icons/types";
+import { boxColorLookup } from "../../helpers/colors";
 
 export const Cerebrum: IconType = (props: IconProps) => {
   const { boxed = false, boxedSize = 67, boxColor, fill = "currentColor", round = false, scale = 1, title } = props;

package/src/assets/icons/Cognition.tsx

@@ -1,7 +1,7 @@
-import React, { JSXElementConstructor } from "react";
-import { boxColorLookup } from "../../helpers/colors";
+import { JSXElementConstructor } from "react";
 import { BoringSpan, IconBox, InnerIconBox } from "../../components/Icons/IconComponentStyles";
 import { IconProps, IconType } from "../../components/Icons/types";
+import { boxColorLookup } from "../../helpers/colors";
 
 import CognitionLogo from "./../../../stories/assets/cognition.svg";
 

package/src/assets/icons/Cortex.tsx

@@ -1,7 +1,7 @@
-import React, { JSXElementConstructor } from "react";
-import { boxColorLookup } from "../../helpers/colors";
+import { JSXElementConstructor } from "react";
 import { BoringSpan, IconBox, InnerIconBox, Svg } from "../../components/Icons/IconComponentStyles";
 import { IconProps, IconType } from "../../components/Icons/types";
+import { boxColorLookup } from "../../helpers/colors";
 
 export const Cortex: IconType = (props: IconProps) => {
   const { boxed = false, boxedSize = 67, boxColor, fill = "currentColor", round = false, scale = 1, title } = props;

package/src/assets/icons/Neuron.tsx

@@ -1,7 +1,7 @@
-import React, { JSXElementConstructor } from "react";
-import { boxColorLookup } from "../../helpers/colors";
+import { JSXElementConstructor } from "react";
 import { BoringSpan, IconBox, InnerIconBox, Svg } from "../../components/Icons/IconComponentStyles";
 import { IconProps, IconType } from "../../components/Icons/types";
+import { boxColorLookup } from "../../helpers/colors";
 
 export const Neuron: IconType = (props: IconProps) => {
   const { boxed = false, boxedSize = 67, boxColor, fill = "currentColor", round = false, scale = 1, title } = props;

package/src/codemods/formatMdxStorybook7Update.ts

@@ -5,9 +5,6 @@
  * Your .mdx file will still need updating, specifically moving comments into the <Description /> tag
  */
 
-// consts
-const LIBRARY = "@cerebruminc/cerebellum";
-
 export default (fileInfo, api) => {
   const j = api.jscodeshift;
   const root = j(fileInfo.source);

package/src/components/Accordion/Accordion.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import { withTheme } from "../../hocs/withTheme";
 import { Accordion } from "./Accordion";
 import { drawers, openDrawers } from "./mocks";

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { FC, Fragment, useState } from "react";
+import { FC, Fragment, useState } from "react";
 import { useTheme } from "styled-components";
 import { Drawer } from "../Drawer";
 import { FormSeparator } from "../Form/FormStyles";

package/src/components/AddressInput/AddressInput.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from "@testing-library/react";
-import React from "react";
 import { withTheme } from "../../hocs/withTheme";
 import { AddressInput } from "./AddressInput";
 

package/src/components/AlertCount/AlertCount.stories.tsx

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
 import { AlertCount } from "./AlertCount";
 

package/src/components/AlertCount/AlertCount.test.tsx

@@ -1,9 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
+import { withTheme } from "../../hocs/withTheme";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
 import { cerebellumTheme } from "../../theme";
-import { withTheme } from "../../hocs/withTheme";
 import { AlertCount } from "./AlertCount";
 
 const ThemedAlertCount = withTheme(AlertCount);

package/src/components/Avatar/Avatar.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import { withTheme } from "../../hocs/withTheme";
 import { Avatar } from "./Avatar";
 

package/src/components/Avatar/Avatar.tsx

@@ -1,6 +1,6 @@
-import React, { FC, useMemo } from "react";
-import { higherContrast } from "../../helpers/accessibility";
+import { FC, useMemo } from "react";
 import { useTheme } from "styled-components";
+import { higherContrast } from "../../helpers/accessibility";
 
 import { Badge, Base, Initials } from "./AvatarStyles";
 import { getInitialsOnly } from "./helpers";

package/src/components/Button/BoxedButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonType } from "./types";

package/src/components/Button/BoxedOutlineButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonType } from "./types";

package/src/components/Button/Button.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { InfoCircle } from "../Icons";
 import { colors } from "../../const/colors";
+import { InfoCircle } from "../Icons";
 
 import { ExternalIcon } from "../../SharedStorybook/ExternalObjects";
 import { Cell, GridContainer, Label } from "../../SharedStorybook/GridStyles";

package/src/components/Button/Button.test.tsx

@@ -1,11 +1,10 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { ExternalIcon } from "../../SharedStorybook/ExternalObjects";
-import { Search } from "../Icons";
 import { colors } from "../../const/colors";
-import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
 import { withTheme } from "../../hocs/withTheme";
+import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
+import { Search } from "../Icons";
 import { Button } from "./Button";
 
 const customColorFamily = {

package/src/components/Button/Button.tsx

@@ -1,9 +1,9 @@
-import React, { FC, KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react";
+import { FC, KeyboardEvent, MouseEvent, useEffect, useRef, useState } from "react";
 import { useTheme } from "styled-components";
 
-import { ArrowLong, CaretDown, IndicatorDown } from "../Icons";
 import { pressedEnter } from "../../helpers/accessibility";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
+import { ArrowLong, CaretDown, IndicatorDown } from "../Icons";
 
 import { LoadingEllipsis } from "./../LoadingEllipsis";
 import {

package/src/components/Button/ButtonComponentStyles.tsx

@@ -1,5 +1,5 @@
+import { type DefaultTheme, styled } from "styled-components";
 import { colors } from "../../const/colors";
-import { styled, type DefaultTheme } from "styled-components";
 
 import {
   ButtonElementProps,

package/src/components/Button/OutlineButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonType } from "./types";

package/src/components/Button/PrimaryButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonType } from "./types";

package/src/components/Button/SecondaryButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonType } from "./types";

package/src/components/Button/SingleButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonVariantEnum, SingleButtonType } from "./types";

package/src/components/Button/TextButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 
 import { Button } from "./Button";
 import { ButtonType } from "./types";

package/src/components/Button/helpers.ts

@@ -94,8 +94,17 @@ interface GetLoadingOffsetProps {
   nextButton?: boolean;
 }
 
-export const getLoadingOffset = ({ iconSize, autoIconSize, iconGap, confirmedIconGap, Icon, backButton, caret, nextButton }: GetLoadingOffsetProps): number => {
-  const iconOffset = (((iconSize != null && iconSize > 0) ? iconSize : autoIconSize) + (iconGap ?? 10)) / 2;
+export const getLoadingOffset = ({
+  iconSize,
+  autoIconSize,
+  iconGap,
+  confirmedIconGap,
+  Icon,
+  backButton,
+  caret,
+  nextButton,
+}: GetLoadingOffsetProps): number => {
+  const iconOffset = ((iconSize != null && iconSize > 0 ? iconSize : autoIconSize) + (iconGap ?? 10)) / 2;
   const backOffset = (autoIconSize + confirmedIconGap) / 2;
   const nextAndCaretOffset = backOffset * -1;
   const loadingAnimationOffset = Icon ? iconOffset : backButton ? backOffset : caret || nextButton ? nextAndCaretOffset : 0;

package/src/components/Button/types.ts

@@ -1,8 +1,8 @@
 import { KeyboardEvent, MouseEvent } from "react";
 
-import { IconType } from "../Icons";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
 import { ColorFamilyType } from "../../sharedTypes/types";
+import { IconType } from "../Icons";
 import { LoadingEllipsisType } from "../LoadingEllipsis";
 export interface ButtonType {
   /** Sets the `aria-label` attribute on the button element */

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,5 +1,4 @@
 import { render, screen } from "@testing-library/react";
-import React from "react";
 import { withTheme } from "../../hocs/withTheme";
 import { Checkbox } from "./Checkbox";
 

package/src/components/Checkbox/Checkbox.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import { CheckboxEmpty, CheckboxFull } from "../Icons";
+import { FC } from "react";
 import { useTheme } from "styled-components";
+import { CheckboxEmpty, CheckboxFull } from "../Icons";
 
 import { CheckContainer, CheckboxDisabled, CheckboxIcon } from "./CheckboxStyles";
 import { CheckboxComponentType } from "./types";

package/src/components/CheckboxGroup/CheckboxGroup.stories.tsx

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { useArgs } from "storybook/preview-api";
 import { addOrRemoveString } from "../../helpers/arrays";
 import {
   checkboxesOrToggles,
@@ -7,7 +7,6 @@ import {
   checkboxesOrTogglesStates,
   checkboxesOrTogglesStatesActiveValues,
 } from "../../sharedMocks/options";
-import { useArgs } from "storybook/preview-api";
 import { CheckboxGroup } from "./CheckboxGroup";
 
 /**

package/src/components/CheckboxGroup/CheckboxGroup.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React, { ChangeEvent } from "react";
+import { ChangeEvent } from "react";
 import { withTheme } from "../../hocs/withTheme";
 import { CheckboxGroup } from "./CheckboxGroup";
 
@@ -46,7 +46,14 @@ describe("CheckboxGroup", () => {
   test("validation message has role='alert' when showValidationMessage is true", () => {
     const validationMessage = "Selection required";
     render(
-      <ThemedCheckboxGroup onClick={jest.fn()} activeValues={[]} checkboxes={[]} label="foo" validationMessage={validationMessage} showValidationMessage />
+      <ThemedCheckboxGroup
+        onClick={jest.fn()}
+        activeValues={[]}
+        checkboxes={[]}
+        label="foo"
+        validationMessage={validationMessage}
+        showValidationMessage
+      />
     );
     const alert = screen.getByRole("alert");
     expect(alert).toHaveTextContent(validationMessage);
@@ -60,7 +67,14 @@ describe("CheckboxGroup", () => {
 
   test("group has aria-invalid when showValidationMessage is true", () => {
     render(
-      <ThemedCheckboxGroup onClick={jest.fn()} activeValues={[]} checkboxes={[]} label="foo" validationMessage="Error" showValidationMessage />
+      <ThemedCheckboxGroup
+        onClick={jest.fn()}
+        activeValues={[]}
+        checkboxes={[]}
+        label="foo"
+        validationMessage="Error"
+        showValidationMessage
+      />
     );
     const group = screen.getByRole("group");
     expect(group).toHaveAttribute("aria-invalid", "true");

package/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
-import { BodyXSEmphasis } from "../../const/text";
+import { FC } from "react";
 import { useTheme } from "styled-components";
+import { BodyXSEmphasis } from "../../const/text";
 import { CheckboxItem } from "../CheckboxItem";
 
 import { Asterisk, ValidationText } from "../../sharedStyle/Inputs";
@@ -45,7 +45,14 @@ export const CheckboxGroup: FC<CheckboxGroupType> = ({
   const disabledTextColor = disabledLabelColor || theme.text.disabledColor;
 
   return (
-    <CheckboxGroupBase $labelGap={labelGap} $noBottomPadding={noBottomPadding} $width={checkboxGroupWidth} role="group" aria-invalid={(hasError ?? showValidationMessage) ? "true" : undefined} aria-required={required ? "true" : undefined}>
+    <CheckboxGroupBase
+      $labelGap={labelGap}
+      $noBottomPadding={noBottomPadding}
+      $width={checkboxGroupWidth}
+      role="group"
+      aria-invalid={(hasError ?? showValidationMessage) ? "true" : undefined}
+      aria-required={required ? "true" : undefined}
+    >
       {label ? (
         typeof label === "string" ? (
           <BodyXSEmphasis $textColor={disableGroup ? disabledTextColor : titleColor} data-sentry-unmask>

package/src/components/CheckboxGroup/types.ts

@@ -1,6 +1,6 @@
 import { ChangeEvent, ReactElement, ReactNode } from "react";
-import { CheckboxItemType } from "../CheckboxItem/types";
 import { SwitchGroupSwitchType } from "../../sharedTypes/types";
+import { CheckboxItemType } from "../CheckboxItem/types";
 
 export interface CheckboxGroupType extends Omit<CheckboxItemType, "active" | "disabled" | "label" | "onClick" | "value"> {
   /** An array of strings that match the value for each active checkbox */

package/src/components/CheckboxItem/CheckboxItem.stories.tsx

@@ -1,10 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import { useArgs } from "storybook/preview-api";
 import { FlexContainer, IconContainer } from "../../SharedStorybook/Layout";
 import { Note } from "../../SharedStorybook/Notes";
-import { User, WarningExclaim } from "../Icons";
 import { BodySEmphasis } from "../../const/text";
-import { useArgs } from "storybook/preview-api";
+import { User, WarningExclaim } from "../Icons";
 import { CheckboxItem } from "./CheckboxItem";
 
 /**

package/src/components/CheckboxItem/CheckboxItem.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { withTheme } from "../../hocs/withTheme";
 import { CheckboxItem } from "./CheckboxItem";
 

package/src/components/CheckboxItem/CheckboxItem.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import { FC } from "react";
 import { HiddenInput, LabelText } from "../../sharedStyle/Switches";
 import { cerebellumTheme } from "../../theme";
 import { Checkbox } from "../Checkbox/Checkbox";

package/src/components/ClearableTag/ClearableTag.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Calendar } from "../Icons";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
+import { Calendar } from "../Icons";
 import { ClearableTag } from "./ClearableTag";
 
 /** `ClearableTag` is a tag that is designed to be deleted. It will grow to fit any text given to it, will fit on the same line as its siblings

package/src/components/ClearableTag/ClearableTag.test.tsx

@@ -1,8 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
-import { Calendar } from "../Icons";
 import { withTheme } from "../../hocs/withTheme";
+import { Calendar } from "../Icons";
 import { ClearableTag } from "./ClearableTag";
 
 const ThemedClearableTag = withTheme(ClearableTag);

package/src/components/ClearableTag/ClearableTag.tsx

@@ -1,10 +1,10 @@
-import React, { FC, KeyboardEvent } from "react";
+import { FC, KeyboardEvent } from "react";
 import { useTheme } from "styled-components";
 
-import { Close } from "../Icons";
 import { pressedEnter } from "../../helpers/accessibility";
 import useMeasure from "../../hooks/useMeasure";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
+import { Close } from "../Icons";
 
 import { Background, IconBox, Text, TextBox, Title, XBox, XIconBox } from "./ClearableTagStyles";
 import { ClearableTagType } from "./types";

package/src/components/ClearableTag/ClearableTagStyles.tsx

@@ -1,5 +1,5 @@
-import { focusAfter } from "../../sharedStyle/mixins";
 import { styled } from "styled-components";
+import { focusAfter } from "../../sharedStyle/mixins";
 import { BackgroundProps, TextBoxProps, TextProps, TitleProps, XBoxProps, XIconBoxProps } from "./types";
 
 export const Background = styled.span<BackgroundProps>`

package/src/components/ClickOutHandler/ClickOutHandler.stories.tsx

@@ -1,11 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React, { FC } from "react";
+import { FC } from "react";
+import { action } from "storybook/actions";
+import { useArgs } from "storybook/preview-api";
 import { CenterContainer } from "../../SharedStorybook/Notes";
-import { Button } from "../Button/Button";
 import { noop } from "../../helpers/utils";
 import { ButtonColorFamilyEnum } from "../../sharedTypes/enums";
-import { action } from "storybook/actions";
-import { useArgs } from "storybook/preview-api";
+import { Button } from "../Button/Button";
 import { ClickOutHandler } from "./ClickOutHandler";
 import { FlexContainer, StorybookInnerDiv, StorybookRedText } from "./ClickoutHandlerStoryStyles";
 import { ClickOutHandlerStoryType } from "./types";

package/src/components/ClickOutHandler/ClickOutHandler.test.tsx

@@ -1,6 +1,5 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { ClickOutHandler } from "./ClickOutHandler";
 
 describe("ClickOutHandler", () => {

package/src/components/ClickOutHandler/ClickOutHandler.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useRef } from "react";
+import { FC, useEffect, useRef } from "react";
 import { Wrapper } from "./ClickOutHandlerStyles";
 import { ClickOutHandlerType } from "./types";
 

package/src/components/ClickOutHandler/ClickoutHandlerStoryStyles.tsx

@@ -1,5 +1,5 @@
-import { colors } from "../../const/colors";
 import { styled } from "styled-components";
+import { colors } from "../../const/colors";
 
 export const StorybookInnerDiv = styled.div`
   padding: 0 45px;

package/src/components/ColorButton/ColorButton.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Check } from "../Icons";
 import { colors } from "../../const/colors";
+import { Check } from "../Icons";
 import { ColorButton } from "./ColorButton";
 
 /**

package/src/components/ColorButton/ColorButton.test.tsx

@@ -1,9 +1,8 @@
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
-import { CheckedOff } from "../Icons";
 import { colors } from "../../const/colors";
 import { withTheme } from "../../hocs/withTheme";
+import { CheckedOff } from "../Icons";
 import { ColorButton } from "./ColorButton";
 
 const ThemedColorButton = withTheme(ColorButton);

package/src/components/ColorButton/ColorButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC, KeyboardEvent, useEffect, useRef, useState } from "react";
+import { FC, KeyboardEvent, useEffect, useRef, useState } from "react";
 import { higherContrast, pressedEnter } from "../../helpers/accessibility";
 import { IconBox, Swatch } from "./ColorButtonStyles";
 import { ColorButtonType } from "./types";

package/src/components/ColorButton/ColorButtonStyles.tsx

@@ -1,5 +1,5 @@
-import { absoluteAfter } from "../../sharedStyle";
 import { styled } from "styled-components";
+import { absoluteAfter } from "../../sharedStyle";
 
 import { SwatchProps } from "./types";