tharaday 0.8.4 → 0.8.7

package/dist/{components → src/components}/Textarea/Textarea.d.ts

@@ -1 +1,2 @@
+import { TextareaProps } from './Textarea.types.ts';
 export declare const Textarea: ({ size, error, label, helperText, fullWidth, className, id, rows, ...props }: TextareaProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Textarea/Textarea.stories.d.ts

@@ -0,0 +1,32 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ size, error, label, helperText, fullWidth, className, id, rows, ...props }: import('./Textarea.types.ts').TextareaProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+        };
+        error: {
+            control: "boolean";
+        };
+        disabled: {
+            control: "boolean";
+        };
+        fullWidth: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithError: Story;
+export declare const Disabled: Story;
+export declare const Small: Story;
+export declare const Large: Story;
+export declare const Gallery: Story;

package/dist/src/components/Textarea/Textarea.types.d.ts

@@ -0,0 +1,11 @@
+import { TextareaHTMLAttributes } from 'react';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    size?: TextareaSize;
+    error?: boolean;
+    label?: string;
+    helperText?: string;
+    rows?: number;
+    fullWidth?: boolean;
+}

package/dist/{components → src/components}/Tooltip/Tooltip.d.ts

@@ -1 +1,2 @@
+import { TooltipProps } from './Tooltip.types.ts';
 export declare const Tooltip: ({ content, children, position, variant, delay, className, id, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip.tsx';
+declare const meta: Meta<typeof Tooltip>;
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const Right: Story;
+export declare const LightVariant: Story;

package/dist/src/components/Tooltip/Tooltip.types.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipVariant = 'dark' | 'light';
+export interface TooltipProps {
+    id?: string;
+    content: ReactNode;
+    children: ReactNode;
+    position?: TooltipPosition;
+    variant?: TooltipVariant;
+    delay?: number;
+    className?: string;
+}

package/dist/{components → src/components}/Tree/Tree.d.ts

@@ -1,5 +1,5 @@
-import type { TreeProps } from './Tree.types';
+import { TreeProps } from './Tree.types';
 export declare const Tree: {
     ({ data, className, defaultExpanded, expandIcon, collapseIcon, ...props }: TreeProps): import("react/jsx-runtime").JSX.Element;
-    Item: ({ data, label, defaultExpanded, expandIcon, collapseIcon, isRoot, level, setSize, posInSet, }: import("./TreeItem.types").TreeItemProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ data, label, defaultExpanded, expandIcon, collapseIcon, isRoot, level, setSize, posInSet, }: import('./TreeItem.types').TreeItemProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/src/components/Tree/Tree.stories.d.ts

@@ -0,0 +1,27 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ data, className, defaultExpanded, expandIcon, collapseIcon, ...props }: import('./Tree.types').TreeProps): import("react/jsx-runtime").JSX.Element;
+        Item: ({ data, label, defaultExpanded, expandIcon, collapseIcon, isRoot, level, setSize, posInSet, }: import('./TreeItem.types').TreeItemProps) => import("react/jsx-runtime").JSX.Element;
+    };
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Simple: Story;
+export declare const Nested: Story;
+export declare const ArrayOnly: Story;
+export declare const Primitive: Story;
+export declare const NullValue: Story;
+export declare const Collapsed: Story;
+export declare const ExpandedByDefault: Story;
+export declare const CustomIcons: Story;
+export declare const EmptyStructures: Story;

package/dist/{components → src/components}/Tree/Tree.types.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
 export interface TreeProps extends HTMLAttributes<HTMLDivElement> {
     /** The data to be displayed in the tree */
     data: unknown;

package/dist/{components → src/components}/Tree/TreeItem.d.ts

@@ -1,2 +1,2 @@
-import type { TreeItemProps } from './TreeItem.types';
+import { TreeItemProps } from './TreeItem.types';
 export declare const TreeItem: ({ data, label, defaultExpanded, expandIcon, collapseIcon, isRoot, level, setSize, posInSet, }: TreeItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{components → src/components}/Tree/TreeItem.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { ReactNode } from 'react';
 export interface TreeItemProps {
     /** The data to be displayed in the tree item */
     data: unknown;

package/dist/{hooks → src/hooks}/useClickOutside.d.ts

@@ -1,4 +1,4 @@
-import { type RefObject } from 'react';
+import { RefObject } from 'react';
 /**
  * Calls onClose when the user clicks outside the referenced element
  * or presses Escape. Only active when enabled is true.

package/dist/{hooks → src/hooks}/useComponentId.d.ts

@@ -2,4 +2,4 @@
  * Generates a stable, unique component ID.
  * Returns the provided id if given, otherwise creates one prefixed with `ds-{prefix}-`.
  */
-export declare const useComponentId: (prefix: string, id?: string | undefined) => string;
+export declare const useComponentId: (prefix: string, id?: string) => string;

package/dist/{hooks → src/hooks}/useFocusTrap.d.ts

@@ -13,5 +13,5 @@ interface UseFocusTrapOptions {
  *
  * Returns a ref that must be attached to the container element.
  */
-export declare const useFocusTrap: <T extends HTMLElement>({ isOpen, onClose, isLoading, }: UseFocusTrapOptions) => import("react").RefObject<T | null>;
+export declare const useFocusTrap: <T extends HTMLElement>({ isOpen, onClose, isLoading, }: UseFocusTrapOptions) => import('react').RefObject<T | null>;
 export {};

package/dist/{layouts → src/layouts}/AppLayout/AppLayout.d.ts

@@ -1 +1,2 @@
+import { AppLayoutProps } from './AppLayout.types.ts';
 export declare const AppLayout: ({ header, navbar, children, className, maxWidth, }: AppLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/layouts/AppLayout/AppLayout.stories.d.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ header, navbar, children, className, maxWidth, }: import('./AppLayout.types.ts').AppLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LoggedOut: Story;
+export declare const LongHeaderContent: Story;

package/dist/src/layouts/AppLayout/AppLayout.types.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export interface AppLayoutProps {
+    /** Additional class name for the layout root */
+    className?: string;
+    /** Max width for the main content container */
+    maxWidth?: string | number;
+    /** Header slot — render a pre-configured Header component */
+    header?: ReactNode;
+    /** NavBar slot — render a pre-configured NavBar component */
+    navbar?: ReactNode;
+    /** Main content */
+    children: ReactNode;
+}

package/dist/{layouts → src/layouts}/AuthLayout/AuthLayout.d.ts

@@ -1 +1,2 @@
+import { AuthLayoutProps } from './AuthLayout.types.tsx';
 export declare const AuthLayout: ({ logo, title, description, children, className }: AuthLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/layouts/AuthLayout/AuthLayout.stories.d.ts

@@ -0,0 +1,12 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ logo, title, description, children, className }: import('./AuthLayout.types.tsx').AuthLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Login: Story;
+export declare const SignUp: Story;

package/dist/src/layouts/AuthLayout/AuthLayout.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface AuthLayoutProps {
+    className?: string;
+    logo?: ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    children: ReactNode;
+}

package/dist/{layouts → src/layouts}/DashboardLayout/DashboardLayout.d.ts

@@ -1 +1,2 @@
+import { DashboardLayoutProps } from './DashboardLayout.types.tsx';
 export declare const DashboardLayout: ({ header, breadcrumbs, actions, stats, children, className, }: DashboardLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/layouts/DashboardLayout/DashboardLayout.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ header, breadcrumbs, actions, stats, children, className, }: import('./DashboardLayout.types.tsx').DashboardLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Overview: Story;

package/dist/src/layouts/DashboardLayout/DashboardLayout.types.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface DashboardLayoutProps {
+    className?: string;
+    /** Header slot — render a pre-configured Header component */
+    header?: ReactNode;
+    breadcrumbs?: ReactNode;
+    actions?: ReactNode;
+    stats?: ReactNode;
+    children: ReactNode;
+}

package/dist/{layouts → src/layouts}/SettingsLayout/SettingsLayout.d.ts

@@ -1 +1,2 @@
+import { SettingsLayoutProps } from './SettingsLayout.types.tsx';
 export declare const SettingsLayout: ({ header, breadcrumbs, sidebar, children, className, }: SettingsLayoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/layouts/SettingsLayout/SettingsLayout.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ header, breadcrumbs, sidebar, children, className, }: import('./SettingsLayout.types.tsx').SettingsLayoutProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const ProfileSettings: Story;

package/dist/src/layouts/SettingsLayout/SettingsLayout.types.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export interface SettingsLayoutProps {
+    className?: string;
+    /** Header slot — render a pre-configured Header component */
+    header?: ReactNode;
+    breadcrumbs?: ReactNode;
+    sidebar?: ReactNode;
+    children: ReactNode;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tharaday",
-  "version": "0.8.4",
+  "version": "0.8.7",
   "author": "Ania Wyroba",
   "publishConfig": {
     "access": "public",
@@ -16,7 +16,7 @@
   "exports": {
     ".": {
       "import": "./dist/ds.js",
-      "types": "./dist/src/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
     "./styles.css": "./dist/ds.css"
   },
@@ -75,56 +75,41 @@
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4"
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@release-it/conventional-changelog": "^10.0.6",
-    "@storybook/addon-a11y": "^10.3.4",
-    "@storybook/addon-docs": "^10.3.4",
-    "@storybook/addon-vitest": "^10.3.4",
-    "@storybook/react-vite": "^10.3.4",
+    "@release-it/conventional-changelog": "^11.0.0",
+    "@storybook/addon-a11y": "^10.4.1",
+    "@storybook/addon-docs": "^10.4.1",
+    "@storybook/addon-vitest": "^10.4.1",
+    "@storybook/react-vite": "^10.4.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.5.2",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@vitest/browser-playwright": "^4.1.2",
-    "@vitest/coverage-v8": "^4.1.2",
-    "eslint": "^10.2.0",
+    "@vitest/browser-playwright": "^4.1.7",
+    "@vitest/coverage-v8": "^4.1.7",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
-    "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^17.4.0",
+    "eslint-plugin-simple-import-sort": "^13.0.0",
+    "globals": "^17.6.0",
     "husky": "^9.1.7",
-    "jsdom": "^29.0.1",
-    "playwright": "^1.59.1",
-    "prettier": "^3.8.1",
-    "release-it": "^19.2.4",
-    "storybook": "^10.3.4",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.3",
-    "vite-plugin-dts": "^1.0.5",
-    "vitest": "^4.1.2"
-  },
-  "overrides": {
-    "eslint-plugin-react-hooks": {
-      "eslint": "$eslint"
-    },
-    "typescript-eslint": {
-      "typescript": "$typescript"
-    },
-    "minimatch": "^10.2.4",
-    "@joshwooding/vite-plugin-react-docgen-typescript": {
-      "vite": "$vite"
-    },
-    "release-it": {
-      "undici": "^6.24.1"
-    }
+    "jsdom": "^29.1.1",
+    "playwright": "^1.60.0",
+    "prettier": "^3.8.3",
+    "release-it": "^20.0.1",
+    "storybook": "^10.4.1",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.59.4",
+    "vite": "8.0.5",
+    "vite-plugin-dts": "^5.0.1",
+    "vitest": "^4.1.7"
   }
 }

package/src/components/Box/Box.types.ts

@@ -25,10 +25,7 @@ export type BoxBackgroundColor =
 export type BoxBorderColor = 'main' | 'subtle' | 'danger' | 'warning' | 'success' | 'info';
 export type BoxBorderRadius = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'full';
 
-export interface BoxProps extends HTMLAttributes<HTMLElement> {
-  children?: ReactNode;
-  as?: ElementType;
-  display?: BoxDisplay;
+export interface SpacingProps {
   padding?: BoxPadding;
   paddingX?: BoxPadding;
   paddingY?: BoxPadding;
@@ -43,6 +40,12 @@ export interface BoxProps extends HTMLAttributes<HTMLElement> {
   marginBottom?: BoxMargin;
   marginLeft?: BoxMargin;
   marginRight?: BoxMargin;
+}
+
+export interface BoxProps extends HTMLAttributes<HTMLElement>, SpacingProps {
+  children?: ReactNode;
+  as?: ElementType;
+  display?: BoxDisplay;
   gap?: BoxGap;
   flexDirection?: BoxFlexDirection;
   alignItems?: BoxAlignItems;

package/src/components/Drawer/Drawer.types.ts

@@ -6,7 +6,7 @@ export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface DrawerProps {
   isOpen: boolean;
   onClose: () => void;
-  title?: string;
+  title?: ReactNode;
   children?: ReactNode;
   footer?: ReactNode;
   placement?: DrawerPlacement;

package/src/components/EmptyState/EmptyState.types.ts

@@ -2,9 +2,9 @@ import type { HTMLAttributes, ReactNode } from 'react';
 
 export type EmptyStateSize = 'sm' | 'md' | 'lg';
 
-export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
+export interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  title: ReactNode;
+  description?: ReactNode;
   icon?: ReactNode;
   action?: ReactNode;
   size?: EmptyStateSize;

package/src/components/Header/Header.types.ts

@@ -9,7 +9,7 @@ export interface HeaderProps {
   className?: string;
   maxWidth?: string | number;
   logo?: ReactNode;
-  title?: string;
+  title?: ReactNode;
   user?: User;
   onLogin?: () => void;
   onLogout?: () => void;

package/src/components/Modal/Modal.types.ts

@@ -4,7 +4,7 @@ export interface ModalProps {
   id?: string;
   isOpen: boolean;
   onClose: () => void;
-  title?: string;
+  title?: ReactNode;
   children?: ReactNode;
   footer?: ReactNode;
   size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';

package/src/components/Notification/Notification.types.ts

@@ -2,10 +2,10 @@ import type { HTMLAttributes, ReactNode } from 'react';
 
 export type NotificationIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
 
-export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
+export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
   className?: string;
   intent?: NotificationIntent;
-  title?: string;
+  title?: ReactNode;
   children: ReactNode;
   onClose?: () => void;
 }

package/src/components/Slider/Slider.test.tsx

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import { Slider } from './Slider.tsx';
 
@@ -69,4 +70,109 @@ describe('Slider', () => {
     expect(start).toHaveAttribute('aria-valuetext', '10 - 90');
     expect(end).toHaveAttribute('aria-valuetext', '10 - 90');
   });
+
+  describe('thumb movement', () => {
+    it('allows sliding above defaultValue in non-dual mode', () => {
+      render(<Slider defaultValue={45} max={100} showValue />);
+      fireEvent.change(screen.getByRole('slider'), { target: { value: '70' } });
+      expect(screen.getByText('70')).toBeInTheDocument();
+    });
+
+    it('allows sliding below defaultValue in non-dual mode', () => {
+      render(<Slider defaultValue={45} showValue />);
+      fireEvent.change(screen.getByRole('slider'), { target: { value: '20' } });
+      expect(screen.getByText('20')).toBeInTheDocument();
+    });
+
+    it('clamps start thumb to end thumb position in dual mode', () => {
+      render(<Slider defaultValue={[20, 60]} showValue />);
+      const [start] = screen.getAllByRole('slider');
+      fireEvent.change(start, { target: { value: '80' } });
+      expect(screen.getByText('60 - 60')).toBeInTheDocument();
+    });
+
+    it('clamps end thumb to start thumb position in dual mode', () => {
+      render(<Slider defaultValue={[40, 80]} showValue />);
+      const [, end] = screen.getAllByRole('slider');
+      fireEvent.change(end, { target: { value: '10' } });
+      expect(screen.getByText('40 - 40')).toBeInTheDocument();
+    });
+
+    it('calls onValueChange with updated value', () => {
+      const onValueChange = vi.fn();
+      render(<Slider defaultValue={45} onValueChange={onValueChange} />);
+      fireEvent.change(screen.getByRole('slider'), { target: { value: '70' } });
+      expect(onValueChange).toHaveBeenCalledWith(70);
+    });
+
+    it('calls onValueChange with a pair for dual sliders', () => {
+      const onValueChange = vi.fn();
+      render(<Slider defaultValue={[20, 60]} onValueChange={onValueChange} />);
+      const [start] = screen.getAllByRole('slider');
+      fireEvent.change(start, { target: { value: '30' } });
+      expect(onValueChange).toHaveBeenCalledWith([30, 60]);
+    });
+  });
+
+  describe('controlled mode', () => {
+    it('uses value prop instead of internal state', () => {
+      render(<Slider value={70} onValueChange={vi.fn()} showValue />);
+      expect(screen.getByText('70')).toBeInTheDocument();
+    });
+
+    it('reflects updated value prop on re-render', () => {
+      const { rerender } = render(<Slider value={40} onValueChange={vi.fn()} showValue />);
+      rerender(<Slider value={80} onValueChange={vi.fn()} showValue />);
+      expect(screen.getByText('80')).toBeInTheDocument();
+    });
+  });
+
+  describe('showInputs', () => {
+    it('tracks typed value in number input while editing', async () => {
+      const user = userEvent.setup();
+      render(<Slider defaultValue={45} showInputs />);
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '70');
+      expect(input).toHaveValue(70);
+    });
+
+    it('commits number input value to slider on blur', async () => {
+      const user = userEvent.setup();
+      render(<Slider defaultValue={45} showInputs showValue />);
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '70');
+      await user.tab();
+      expect(screen.getByText('70')).toBeInTheDocument();
+      expect(input).toHaveValue(70);
+    });
+
+    it('clamps out-of-range input to max on blur', async () => {
+      const user = userEvent.setup();
+      render(<Slider defaultValue={45} max={100} showInputs showValue />);
+      const input = screen.getByRole('spinbutton');
+      await user.clear(input);
+      await user.type(input, '200');
+      await user.tab();
+      expect(screen.getByText('100')).toBeInTheDocument();
+      expect(input).toHaveValue(100);
+    });
+
+    it('syncs number input with slider when slider moves while not editing', () => {
+      render(<Slider defaultValue={45} showInputs />);
+      fireEvent.change(screen.getByRole('slider'), { target: { value: '70' } });
+      expect(screen.getByRole('spinbutton')).toHaveValue(70);
+    });
+
+    it('commits dual start input and updates start thumb', async () => {
+      const user = userEvent.setup();
+      render(<Slider defaultValue={[20, 80]} showInputs showValue />);
+      const input = screen.getByLabelText('Slider minimum input');
+      await user.clear(input);
+      await user.type(input, '35');
+      await user.tab();
+      expect(screen.getByText('35 - 80')).toBeInTheDocument();
+    });
+  });
 });