@indico-data/design-system 3.19.0 → 3.21.0

package/src/components/table/utils/processColumns.tsx

@@ -1,6 +1,6 @@
-import { TableColumn, HorizontalStickyHeaderText } from '../types';
-import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
 import { getPinnedColumnStyles } from '../components/helpers';
+import HorizontalStickyHeader from '../components/HorizontalStickyHeader';
+import { type TableColumn, type HorizontalStickyHeaderText } from '../types';
 
 export const processColumns = <T,>(
   columns: TableColumn<T>[],

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -1,4 +1,4 @@
-import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
+import { type Row, type ColumnDef, type SortingState } from '@tanstack/react-table';
 
 /** Customizable text for TanstackTable. */
 export interface TanstackTableText {

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -1,11 +1,12 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef } from '@tanstack/react-table';
+import { useState } from 'react';
 
-import { TanstackTable } from './TanstackTable';
-import { people, Person } from './mock-data/mock-data';
+import { people, type Person } from './mock-data/mock-data';
 import { columns } from './mock-data/table-configuration';
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { TanstackTable } from './TanstackTable';
 import { Button } from '../button';
-import { useState } from 'react';
+
 const meta: Meta = {
   title: 'Layout/Tanstack Table',
   component: TanstackTable,

package/src/components/tanstackTable/TanstackTable.tsx

@@ -1,22 +1,22 @@
-import { useEffect, useRef, useState } from 'react';
-
 import {
   useReactTable,
   getCoreRowModel,
   getSortedRowModel,
-  SortingState,
+  type SortingState,
 } from '@tanstack/react-table';
 import classNames from 'classnames';
+import { isNil } from 'lodash';
+import { useEffect, useRef, useState } from 'react';
+
 
 import { ActionBar } from './components/ActionBar';
 import { NoResults } from './components/NoResults';
-import { isNil } from 'lodash';
-import { TablePagination } from './components/TablePagination';
-import { Props, TanstackTableText } from './TankstackTable.types';
-import { useTanstackTable } from './useTanstackTable';
-import { TableHeader } from './components/TableHeader';
 import { TableBody } from './components/TableBody';
+import { TableHeader } from './components/TableHeader';
 import { TableLoading } from './components/TableLoading/TableLoading';
+import { TablePagination } from './components/TablePagination';
+import { type Props, type TanstackTableText } from './TankstackTable.types';
+import { useTanstackTable } from './useTanstackTable';
 
 const DEFAULT_TEXT: Required<TanstackTableText> = {
   loading: 'Table is loading...',

package/src/components/tanstackTable/__tests__/TanstackTable.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import '@testing-library/jest-dom';
-import { TanstackTable } from '../TanstackTable';
 import { data, columns } from './__mocks__/test-mock-data';
+import { TanstackTable } from '../TanstackTable';
 
 describe('Tanstack Table Component', () => {
   test('renders the table with provided data', () => {

package/src/components/tanstackTable/__tests__/__mocks__/test-mock-data.tsx

@@ -1,5 +1,6 @@
+import { type ColumnDef } from "@tanstack/react-table";
+
 import { Checkbox } from "@/components/forms/checkbox";
-import { ColumnDef } from "@tanstack/react-table";
 
 export interface TestData {
   id: string;

package/src/components/tanstackTable/components/ActionBar/ActionBar.stories.tsx

@@ -1,8 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { ActionBar } from './ActionBar';
-import { Table } from '@tanstack/react-table';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type Table } from '@tanstack/react-table';
+
 import { Button } from '@/components/button';
 
+import { ActionBar } from './ActionBar';
+
+
 type DummyRow = {
   id: string;
   isSelected: boolean;

package/src/components/tanstackTable/components/ActionBar/ActionBar.tsx

@@ -1,8 +1,12 @@
-import React from 'react';
-import { Row, Table } from '@tanstack/react-table';
-import { Card } from '@/components/card';
+import { type Row, type Table } from '@tanstack/react-table';
 import classNames from 'classnames';
 
+import { Card } from '@/components/card';
+
+import type React from 'react';
+
+
+
 type Props<T extends object> = {
   /** Table instance. */
   table: Table<T & { id: string }>;

package/src/components/tanstackTable/components/ActionBar/__tests__/ActionBar.test.tsx

@@ -1,7 +1,10 @@
-import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
+
+
 import { ActionBar } from '../ActionBar';
+
 import type { Table } from '@tanstack/react-table';
+import type React from 'react';
 
 type DummyRow = {
   getIsSelected: () => boolean;

package/src/components/tanstackTable/components/NoResults/__tests__/NoResult.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent } from '@testing-library/react';
+
 import { NoResults } from '../NoResults';
 
 describe('NoResults Component', () => {

package/src/components/tanstackTable/components/TableBody/TableBody.tsx

@@ -1,5 +1,6 @@
-import { flexRender, Table } from '@tanstack/react-table';
+import { flexRender, type Table } from '@tanstack/react-table';
 import classNames from 'classnames';
+
 import { getTdStyles } from '../../helpers';
 
 export type Props<T> = {

package/src/components/tanstackTable/components/TableHeader/TableHeader.tsx

@@ -1,6 +1,7 @@
-import { forwardRef } from 'react';
-import { Column, flexRender, Header, Table } from '@tanstack/react-table';
+import { type Column, flexRender, type Header, type Table } from '@tanstack/react-table';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
+
 import { getThStyles } from '../../helpers';
 
 interface Props {

package/src/components/tanstackTable/components/TableLoading/TableLoading.tsx

@@ -1,4 +1,5 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { type ColumnDef } from '@tanstack/react-table';
+
 import { CirclePulse } from '../../../loading-indicators/CirclePulse';
 
 export type Props<T> = {

package/src/components/tanstackTable/components/TablePagination/TablePagination.tsx

@@ -1,5 +1,5 @@
-import { Pagination as PaginationComponent, PaginationText } from '../../../pagination';
 import { Row, Col } from '../../../grid';
+import { Pagination as PaginationComponent, type PaginationText } from '../../../pagination';
 
 interface TablePaginationProps {
   rowsPerPage: number;

package/src/components/tanstackTable/components/TablePagination/__tests__/TablePagination.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { TablePagination } from '../TablePagination';
 
 describe('TablePagination', () => {

package/src/components/tanstackTable/docs/internalSorting/InternalClientSideSorting.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef } from '@tanstack/react-table';
 
-import { TanstackTable } from '../../TanstackTable';
-import { people, Person } from '../../mock-data/mock-data';
-import { columns } from '../../mock-data/table-configuration';
-import { ColumnDef } from '@tanstack/react-table';
 import { Button } from '../../../button';
+import { people, type Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { TanstackTable } from '../../TanstackTable';
 
 const meta: Meta = {
   title: 'Layout/Tanstack Table/Internal Client Side Sorting',

package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef } from '@tanstack/react-table';
 
-import { TanstackTable } from '../../TanstackTable';
-import { people, Person } from '../../mock-data/mock-data';
+import { people, type Person } from '../../mock-data/mock-data';
 import { columns } from '../../mock-data/table-configuration';
-import { ColumnDef } from '@tanstack/react-table';
+import { TanstackTable } from '../../TanstackTable';
+
 
 const meta: Meta = {
   title: 'Layout/Tanstack Table/Pinned Columns',

package/src/components/tanstackTable/docs/withRowClick/WithRowClick.stories.tsx

@@ -1,9 +1,10 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type ColumnDef, type Row } from '@tanstack/react-table';
 
-import { TanstackTable } from '../../TanstackTable';
-import { people, Person } from '../../mock-data/mock-data';
+import { people, type Person } from '../../mock-data/mock-data';
 import { columns } from '../../mock-data/table-configuration';
-import { ColumnDef, Row } from '@tanstack/react-table';
+import { TanstackTable } from '../../TanstackTable';
+
 
 const meta: Meta = {
   title: 'Layout/Tanstack Table/With Row Click',

package/src/components/tanstackTable/helpers.ts

@@ -1,5 +1,5 @@
-import { Column } from '@tanstack/react-table';
-import { CSSProperties } from 'react';
+import { type Column } from '@tanstack/react-table';
+import { type CSSProperties } from 'react';
 
 // Sets style attributes for pinned columns
 const getCommonPinningStyles = <T>(column: Column<T>): CSSProperties => {

package/src/components/tanstackTable/mock-data/table-configuration.tsx

@@ -1,9 +1,12 @@
-import { ColumnDef } from '@tanstack/react-table';
-import { Person } from './mock-data';
-import { Checkbox } from '@/components/forms/checkbox/Checkbox';
-import { Button } from '@/components/button';
+import { type ColumnDef } from '@tanstack/react-table';
 import styled from 'styled-components';
 
+
+import { Button } from '@/components/button';
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+
+import { type Person } from './mock-data';
+
 const PinHeaderColumns = ({
   content,
   onPinClick,

package/src/components/tanstackTable/useTanstackTable.tsx

@@ -1,6 +1,5 @@
+import { type ColumnDef } from '@tanstack/react-table';
 import { useState } from 'react';
-
-import { ColumnDef } from '@tanstack/react-table';
 import { useEffect, useMemo } from 'react';
 
 type Props<T> = {

package/src/components/toast/Toast.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { toast, ToastContainer } from './index';
 import { Button } from '../button';
 import { Col, Row } from '../grid';

package/src/components/tooltip/Tooltip.stories.tsx

@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Tooltip } from './Tooltip';
-import { Col, Container, Row } from '../grid';
 import { Button } from '../button';
+import { Col, Container, Row } from '../grid';
 
 const meta: Meta = {
   title: 'Utilities/Tooltip',

package/src/components/tooltip/Tooltip.tsx

@@ -1,5 +1,5 @@
-import { CSSProperties } from 'react';
-import { PlacesType, Tooltip as ReactTooltip, PositionStrategy } from 'react-tooltip';
+import { type CSSProperties } from 'react';
+import { type PlacesType, Tooltip as ReactTooltip, type PositionStrategy } from 'react-tooltip';
 
 export interface TooltipProps {
   id: string;

package/src/components/truncate/Truncate.stories.tsx

@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Truncate } from './Truncate';
-import { TruncateProps } from './types';
+import { type TruncateProps } from './types';
 
 const meta: Meta<typeof Truncate> = {
   title: 'Utilities/Truncate',

package/src/components/truncate/Truncate.tsx

@@ -1,8 +1,9 @@
-import { useState, useEffect, CSSProperties, useMemo, useRef } from 'react';
-import { Tooltip } from '../tooltip';
-import { TruncateProps } from './types';
-import { v4 as uuidv4 } from 'uuid';
 import classNames from 'classnames';
+import { useState, useEffect, type CSSProperties, useMemo, useRef } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+
+import { type TruncateProps } from './types';
+import { Tooltip } from '../tooltip';
 
 export const Truncate = ({
   numLines = 1,

package/src/components/truncate/__tests__/Truncate.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen } from '@testing-library/react';
+
 import { Truncate } from '../Truncate';
 
 // Mock uuid to return a predictable ID

package/src/components/truncate/types.ts

@@ -1,4 +1,4 @@
-import { TooltipProps } from '../tooltip/Tooltip';
+import { type TooltipProps } from '../tooltip/Tooltip';
 
 export interface TruncateProps {
   /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */

package/src/docs/BaseColorPalette/BaseColorPalette.tsx

@@ -1,4 +1,5 @@
 import { Container, Row, Col } from 'react-grid-system';
+
 import { Swatch } from './Swatch';
 
 const colorList = [

package/src/docs/BaseColorPalette/BaseColorsPalette.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BaseColorPalette } from './BaseColorPalette';
 
 const meta: Meta<typeof BaseColorPalette> = {

package/src/docs/BaseColorPalette/Swatch.tsx

@@ -1,5 +1,6 @@
 import './swatches.scss';
 import { Row, Col } from 'react-grid-system';
+
 import { Icon } from '../../components';
 
 interface Props {
@@ -34,7 +35,7 @@ export const Swatch = ({ color, shade, colorValue }: Props) => {
     if (value.startsWith('rgba(')) {
       const match = value.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/);
       if (match) {
-        const [, r, g, b, a] = match;
+        const [, , , , a] = match;
         const opacity = Math.round(parseFloat(a) * 100);
         return `${opacity}%`;
       }

package/src/docs/SemanticTokens/ColorSwatch.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 
 interface ColorSwatchProps {
   colorVar: string;

package/src/docs/SemanticTokens/SemanticTokens.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import { type Meta } from '@storybook/react';
+
 import { ColorSwatch } from './ColorSwatch';
-import { Card } from '../../index';
 
 const TokenItem = ({ category, variant }: { category: string; variant: string }) => {
   const colorVar = `--pf-semantic-${category}-${variant}`;

package/src/setup/setupIcons.ts

@@ -1,5 +1,4 @@
-import { IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
-
+import { type IconDefinition, library } from '@fortawesome/fontawesome-svg-core';
 // TODO: Once legacy components are removed, remove associated icons
 import {
   faArrowDown,
@@ -26,6 +25,7 @@ import {
   faChevronLeft,
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
+
 import { indiconDefinitions } from '@/components/icons/indicons';
 
 // Utility for registering Font Awesome icons

package/src/storybook/formArgTypes.ts

@@ -1,5 +1,6 @@
 // Common argTypes for form components that include a label and input
-import { ArgTypes } from '@storybook/react';
+import { type ArgTypes } from '@storybook/react';
+
 import { iconNames } from './iconNames';
 
 const labelArgTypes: ArgTypes = {

package/src/storybook/iconNames.ts

@@ -2,6 +2,7 @@
 // Avoid importing this file into the design system code to keep bundle size at a minimum.
 
 import { fas } from '@fortawesome/free-solid-svg-icons';
+
 import { indicons } from '../components/icons/indicons';
 
 export const fontAwesomeIconNames = [

package/src/styles/primitives/_colors.scss

@@ -96,21 +96,21 @@
   --pf-yellow-color-800: #322c1b;
   --pf-yellow-color-900: #1b160e;
 
-  --pf-green-color: #14b869;
+  --pf-green-color: #14b866;
   --pf-green-color-50: #f7fdfa;
   --pf-green-color-100: #effbf5;
   --pf-green-color-150: #e7f9f0;
   --pf-green-color-200: #def7eb;
   --pf-green-color-250: #c2f4db;
-  --pf-green-color-300: #a8f0cd;
-  --pf-green-color-400: #3eea97;
-  --pf-green-color-450: #18dc7e;
-  --pf-green-color-500: #14b869;
+  --pf-green-color-300: #97edc2;
+  --pf-green-color-400: #44e494;
+  --pf-green-color-450: #1cd97a;
+  --pf-green-color-500: #14b866;
   --pf-green-color-550: #129e45;
-  --pf-green-color-600: #17824e;
-  --pf-green-color-700: #175e3c;
-  --pf-green-color-800: #173627;
-  --pf-green-color-900: #0e1b15;
+  --pf-green-color-600: #14804a;
+  --pf-green-color-700: #175e3b;
+  --pf-green-color-800: #173626;
+  --pf-green-color-900: #0e1b14;
 
   --pf-teal-color: #29a3a3;
   --pf-teal-color-50: #f6fdfd;
@@ -188,6 +188,7 @@
   --pf-primary-color-500: #50647c;
   --pf-primary-color-550: #455066;
   --pf-primary-color-600: #243447;
+  --pf-primary-color-650: #1f2a37;
   --pf-primary-color-700: #192534;
   --pf-primary-color-800: #111b28;
   --pf-primary-color-900: #0c141d;
@@ -221,6 +222,7 @@
   --pf-tertiary-color-550: #5f6a85;
   --pf-tertiary-color-600: #58637b;
   --pf-tertiary-color-700: #4b5364;
+  --pf-tertiary-color-750: #373f51;
   --pf-tertiary-color-800: #2c303a;
   --pf-tertiary-color-900: #111317;
 }

package/src/styles/tokens/_semantic-tokens.scss

@@ -46,16 +46,19 @@
   --pf-semantic-background-secondary: var(--pf-gray-color-50);
   --pf-semantic-background-tertiary: var(--pf-gray-color-200);
   --pf-semantic-background-quaternary: var(--pf-gray-color-250);
+  --pf-semantic-background-soft: var(--pf-gray-color-250);
   --pf-semantic-background-accent: var(--pf-secondary-color-200);
   --pf-semantic-background-highlight: var(--pf-blue-color-250);
   --pf-semantic-background-brand-solid: var(--pf-blue-color-500);
   --pf-semantic-background-brand-hover: var(--pf-blue-color-600);
   --pf-semantic-background-inverted: var(--pf-tertiary-color-900);
+  --pf-semantic-background-contrast: var(--pf-secondary-color-150);
 
   // Border
   --pf-semantic-border-primary: var(--pf-gray-color-300);
   --pf-semantic-border-secondary: var(--pf-gray-color-250);
-  --pf-semantic-border-hover: var(--pf-gray-color-400);
+  --pf-semantic-border-tertiary: var(--pf-gray-color-200);
+  --pf-semantic-border-quaternary: var(--pf-gray-color-400);
   --pf-semantic-border-soft: var(--pf-secondary-color-450);
   --pf-semantic-border-accent: var(--pf-blue-color-450);
   --pf-semantic-border-error: var(--pf-red-color-450);
@@ -129,16 +132,19 @@
   --pf-semantic-background-secondary: var(--pf-primary-color-800);
   --pf-semantic-background-tertiary: var(--pf-primary-color-600);
   --pf-semantic-background-quaternary: var(--pf-primary-color-500);
+  --pf-semantic-background-soft: var(--pf-tertiary-color-750);
   --pf-semantic-background-accent: var(--pf-blue-color-800);
   --pf-semantic-background-highlight: var(--pf-blue-color-700);
   --pf-semantic-background-brand-solid: var(--pf-secondary-color-450);
   --pf-semantic-background-brand-hover: var(--pf-secondary-color-600);
-  --pf-semantic-background-inverted: var(--pf-tertiary-color-100);
+  --pf-semantic-background-inverted: var(--pf-tertiary-color-50);
+  --pf-semantic-background-contrast: var(--pf-primary-color-650);
 
   // Border
   --pf-semantic-border-primary: var(--pf-tertiary-color-700);
   --pf-semantic-border-secondary: var(--pf-primary-color-600);
-  --pf-semantic-border-hover: var(--pf-tertiary-color-600);
+  --pf-semantic-border-tertiary: var(--pf-tertiary-color-750);
+  --pf-semantic-border-quaternary: var(--pf-tertiary-color-600);
   --pf-semantic-border-soft: var(--pf-secondary-color-600);
   --pf-semantic-border-accent: var(--pf-secondary-color-400);
   --pf-semantic-border-error: var(--pf-red-color-450);

package/src/stylesAndAnimations/borders/BorderColor.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderColor } from './BorderColor';
 
 const meta: Meta<typeof BorderColor> = {

package/src/stylesAndAnimations/borders/BorderColor.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/borders/BorderRadius.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderRadius } from './BorderRadius';
 
 const meta: Meta<typeof BorderRadius> = {

package/src/stylesAndAnimations/borders/BorderRadius.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/borders/BorderStyles.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderStyles } from './BorderStyles';
 
 const meta: Meta<typeof BorderStyles> = {

package/src/stylesAndAnimations/borders/BorderStyles.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/borders/BorderThickness.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { BorderThickness } from './BorderThickness';
 
 const meta: Meta<typeof BorderThickness> = {

package/src/stylesAndAnimations/borders/BorderThickness.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 import './borders.scss';
 

package/src/stylesAndAnimations/colors/UtilityClasses.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { UtilityClasses } from './UtilityClasses';
 
 const meta: Meta<typeof UtilityClasses> = {

package/src/stylesAndAnimations/colors/UtilityClasses.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { Row } from '../../components/grid/row/Row';
 import { Col } from '../../components/grid/col/Col';
+import { Row } from '../../components/grid/row/Row';
 
 export const UtilityClasses = () => {
   return (

package/src/stylesAndAnimations/sizing/Sizing.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Sizing } from './Sizing';
 
 const meta: Meta<typeof Sizing> = {

package/src/stylesAndAnimations/sizing/Sizing.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import '../../styles/_borders.scss';
 export const Sizing = () => {
   return (

package/src/stylesAndAnimations/typography/Typography.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { Typography } from './Typography';
 
 const meta: Meta<typeof Typography> = {

package/src/stylesAndAnimations/typography/Typography.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Container, Row, Col } from 'react-grid-system';
 
 export const Typography = () => {

package/src/stylesAndAnimations/utilityClasses/UtilityClassesTable.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { UtilityClassesTable } from './UtilityClassesTable';
 
 const meta: Meta<typeof UtilityClassesTable> = {