@ndlib/component-library 0.0.118 → 0.0.120

package/dist/components/composites/DragDropList/DragDrop.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/DragDropList/DragDrop.test.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { DragDropList } from './';
+describe('DragDropList component', () => {
+    const items = [
+        { id: 1, accessibleLabel: 'Item 1' },
+        { id: 2, accessibleLabel: 'Item 2' },
+        { id: 3, accessibleLabel: 'Item 3' },
+    ];
+    it('should render without errors', () => {
+        const { container } = render(_jsx(DragDropList, { items: items, onReorder: () => { }, children: () => _jsx("div", { children: "Child" }) }));
+        expect(container).toBeInTheDocument();
+    });
+    it('should render items correctly', () => {
+        const { getByText } = render(_jsx(DragDropList, { items: items, onReorder: () => { }, children: ({ item }) => _jsx("div", { children: item.accessibleLabel }) }));
+        items.forEach((item) => {
+            expect(getByText(item.accessibleLabel)).toBeInTheDocument();
+        });
+    });
+});

package/dist/components/composites/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/Modal/Modal.test.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { render } from '../../../utils/test';
+import { vi } from 'vitest';
+import { Modal } from './';
+describe('Modal', () => {
+    const handleClose = vi.fn();
+    const mockActions = [
+        { label: 'Action 1', onClick: vi.fn() },
+        { label: 'Action 2', onClick: vi.fn() },
+    ];
+    it('renders modal with heading and content', () => {
+        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading" }, { children: _jsx("div", { children: "Modal Content" }) })));
+        expect(getByText('Test Heading')).toBeInTheDocument();
+        expect(getByText('Modal Content')).toBeInTheDocument();
+    });
+    it('calls close handler when close button is clicked', () => {
+        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading" }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const closeButton = getByText('Close');
+        fireEvent.click(closeButton);
+        expect(handleClose).toHaveBeenCalledTimes(1);
+    });
+    it('renders actions correctly', () => {
+        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions }, { children: _jsx("div", { children: "Modal Content" }) })));
+        expect(getByText('Action 1')).toBeInTheDocument();
+        expect(getByText('Action 2')).toBeInTheDocument();
+    });
+    it('calls action handler when action button is clicked', () => {
+        const { getByText } = render(_jsx(Modal, Object.assign({ isOpen: true, close: handleClose, heading: "Test Heading", actions: mockActions }, { children: _jsx("div", { children: "Modal Content" }) })));
+        const actionButton1 = getByText('Action 1');
+        fireEvent.click(actionButton1);
+        expect(mockActions[0].onClick).toHaveBeenCalledTimes(1);
+        const actionButton2 = getByText('Action 2');
+        fireEvent.click(actionButton2);
+        expect(mockActions[1].onClick).toHaveBeenCalledTimes(1);
+    });
+});

package/dist/components/composites/Modal/index.d.ts

@@ -1,7 +1,7 @@
 import { StyledElementProps, StylesProp } from '../../../theme';
 import React from 'react';
 import { ButtonProps } from '../../elements/Button';
-type ModalProps = StyledElementProps<HTMLDivElement, {
+export type ModalProps = StyledElementProps<HTMLDivElement, {
     isOpen: boolean;
     close: (e: React.MouseEvent) => void;
     heading: string;
@@ -12,11 +12,10 @@ type ModalProps = StyledElementProps<HTMLDivElement, {
     wrapWithTheme?: boolean;
     bodyStyles?: StylesProp;
 }>;
-type ModalAction = {
+export type ModalAction = {
     label: string;
     isPrimary?: boolean;
     buttonProps?: Partial<ButtonProps>;
     onClick: (e: React.MouseEvent) => void;
 };
 export declare const Modal: React.FC<ModalProps>;
-export {};

package/dist/components/composites/StructuredData/sdEvent/sdEvent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/StructuredData/sdEvent/sdEvent.test.js

@@ -0,0 +1,32 @@
+import stringifyEventSchema from './';
+describe('stringifyEventSchema', () => {
+    it('generates the correct event schema', () => {
+        const props = {
+            title: 'Test Event',
+            startDate: '2024-05-20T10:00:00Z',
+            endDate: '2024-05-20T12:00:00Z',
+            description: 'This is a test event',
+            eventLocation: '123 Main St, City, Country',
+            eventLocationName: 'Main Hall',
+            image: 'https://example.com/event-image.jpg',
+            url: 'https://example.com/event',
+            siteUrl: 'https://example.com',
+        };
+        const expectedSchema = {
+            '@type': 'Event',
+            name: 'Test Event',
+            startDate: '2024-05-20T10:00:00Z',
+            endDate: '2024-05-20T12:00:00Z',
+            description: 'This is a test event',
+            image: 'https://example.com/event-image.jpg',
+            url: 'https://example.com/event/https://example.com/event',
+            location: {
+                '@type': 'Place',
+                name: 'Main Hall',
+                address: '123 Main St, City, Country',
+            },
+        };
+        const generatedSchema = stringifyEventSchema(props);
+        expect(JSON.parse(generatedSchema)).toEqual(expectedSchema);
+    });
+});

package/dist/components/composites/StructuredData/sdNews/sdNews.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/composites/StructuredData/sdNews/sdNews.test.js

@@ -0,0 +1,25 @@
+import { makeNewsSchema } from './makeNewsSchema';
+describe('makeNewsSchema', () => {
+    it('generates the correct news schema with all fields provided', () => {
+        const props = {
+            title: 'Test News',
+            author: 'John Doe',
+            abstract: 'This is a test news article',
+            image: 'https://example.com/news-image.jpg',
+            url: 'https://example.com/news',
+            publishedDate: '2024-05-20T10:00:00Z',
+            siteUrl: 'https://example.com',
+        };
+        const expectedSchema = {
+            '@type': 'NewsArticle',
+            name: 'Test News',
+            creator: 'John Doe',
+            abstract: 'This is a test news article',
+            image: 'https://example.com/news-image.jpg',
+            url: 'https://example.com/news/https://example.com/news',
+            datePublished: '2024-05-20T10:00:00Z',
+        };
+        const generatedSchema = makeNewsSchema(props);
+        expect(generatedSchema).toEqual(expectedSchema);
+    });
+});

package/dist/components/elements/Alerts/index.js

@@ -65,7 +65,7 @@ export const Alert = (_a) => {
         [ALERT_TYPE.INFORMATIONAL]: InfoIcon,
         [ALERT_TYPE.SUCCESS]: SuccessIcon,
     }[type];
-    return (_jsx(Row, Object.assign({ sx: Object.assign({}, style) }, rest, { centered: true }, { children: _jsxs(Row, Object.assign({ sx: {
+    return (_jsx(Row, Object.assign({ sx: Object.assign({}, style) }, rest, { children: _jsxs(Row, Object.assign({ sx: {
                 boxSizing: 'border-box',
                 margin: '0 auto',
                 pl: '.5rem',

package/dist/components/elements/Button/Button.test.js

@@ -21,6 +21,12 @@ describe('Button', () => {
         expect(getByText('Mock Left Icon')).toBeDefined();
         expect(getByText('Mock Right Icon')).toBeDefined();
     });
+    it('renders without icons if not passed', () => {
+        const { queryByText } = render(_jsx(Button, { children: "Click Me" }));
+        expect(queryByText('Mock Primary Icon')).toBeNull();
+        expect(queryByText('Mock Left Icon')).toBeNull();
+        expect(queryByText('Mock Right Icon')).toBeNull();
+    });
     it('responds to click handlers', () => {
         const { getByRole } = render(_jsx(Button, { onClick: mockClickHandler }));
         fireEvent.click(getByRole('button'));

package/dist/components/elements/Button/index.js

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import React from 'react';
-import { useTheme } from '../../../theme';
 import { COLOR } from '../../../theme/colors';
 import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
 import { Icon } from '../Icon';
 import { useEnvironment } from '../../providers/env';
 import { SPINNER_SIZE, Spinner } from '../Spinner';
+import { BOX_SHADOW } from '../../../theme/custom';
 export var BUTTON_SIZE;
 (function (BUTTON_SIZE) {
     BUTTON_SIZE["SM"] = "sm";
@@ -52,13 +52,12 @@ export var BUTTON_TYPE;
 export const Button = React.forwardRef((_a, ref) => {
     var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading, disableFocusStyles } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading", "disableFocusStyles"]);
     const disabled = disabledParam || loading;
-    const theme = useTheme();
     const { flagInDevelopment } = useEnvironment();
     let bg = COLOR.PRIMARY;
     let borderColor = COLOR.TRANSPARENT;
     let cursor = 'pointer';
     let textColor = COLOR.BACKGROUND;
-    let hoverShadow = theme.boxShadow.NORMAL;
+    let hoverShadow = BOX_SHADOW.NORMAL;
     let hoverDecoration = undefined;
     let hoverTransform = 'scale(1.03)';
     const isTextButton = typeParam === BUTTON_TYPE.TEXT;

package/dist/components/elements/Fields/AutoComplete/AutoComplete.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/elements/Fields/AutoComplete/AutoComplete.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { describe, it, expect, vi } from 'vitest';
+import { AutoComplete } from './';
+describe('AutoComplete Component', () => {
+    const options = [
+        { label: 'Apple', value: 'apple' },
+        { label: 'Banana', value: 'banana' },
+        { label: 'Cherry', value: 'cherry' },
+    ];
+    const setup = (props = {}) => {
+        const initialProps = Object.assign({ value: '', options: options, onSelect: vi.fn() }, props);
+        return render(_jsx(AutoComplete, Object.assign({}, initialProps)));
+    };
+    it('renders the component with initial value', () => {
+        setup({ value: 'Apple' });
+        expect(screen.getByDisplayValue('Apple')).toBeInTheDocument();
+    });
+    it('filters options based on input value', () => {
+        setup();
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'Ba' } });
+        expect(screen.getByText('Banana')).toBeInTheDocument();
+        expect(screen.queryByText('Apple')).not.toBeInTheDocument();
+    });
+    it('shows no options when input does not match any option', () => {
+        setup();
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'xyz' } });
+        expect(screen.queryByText('Apple')).not.toBeInTheDocument();
+        expect(screen.queryByText('Banana')).not.toBeInTheDocument();
+        expect(screen.queryByText('Cherry')).not.toBeInTheDocument();
+    });
+    it('calls onSelect with the correct value when an option is selected', () => {
+        const mockOnSelect = vi.fn();
+        setup({ onSelect: mockOnSelect });
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'Ap' } });
+        const option = screen.getByText('Apple');
+        fireEvent.mouseDown(option);
+        expect(mockOnSelect).toHaveBeenCalledWith('apple');
+    });
+    it('hides options after selection', () => {
+        setup();
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'Ap' } });
+        const option = screen.getByText('Apple');
+        fireEvent.mouseDown(option);
+        expect(screen.queryByText('Apple')).not.toBeInTheDocument();
+    });
+});

package/dist/components/elements/Fields/AutoComplete/index.d.ts

@@ -1,8 +1,8 @@
-interface Option {
+export interface Option {
     label: string;
     value: string;
 }
-interface AutoCompleteProps {
+export interface AutoCompleteProps {
     value: string;
     options: Option[];
     onSelect: (option: string) => any;

package/dist/components/elements/Fields/Checkbox/Checkbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Fields/Checkbox/Checkbox.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { Checkbox } from './';
+import { vi } from 'vitest';
+describe('Checkbox', () => {
+    it('renders unchecked checkbox', () => {
+        const { getByRole } = render(_jsx(Checkbox, { checked: false, onChange: () => { } }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).not.toBeChecked();
+    });
+    it('renders checked checkbox', () => {
+        const { getByRole } = render(_jsx(Checkbox, { checked: true, onChange: () => { } }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).toBeChecked();
+    });
+    it('calls onChange handler when checkbox is clicked', () => {
+        const onChangeMock = vi.fn();
+        const { getByRole } = render(_jsx(Checkbox, { checked: false, onChange: onChangeMock }));
+        const checkbox = getByRole('checkbox');
+        fireEvent.click(checkbox);
+        expect(onChangeMock).toHaveBeenCalledWith(true);
+    });
+    it('applies disabled styles when disabled', () => {
+        const { getByRole } = render(_jsx(Checkbox, { checked: false, onChange: () => { }, disabled: true }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toHaveStyle('cursor: not-allowed;');
+    });
+    it('applies pointer cursor style when not disabled', () => {
+        const { getByRole } = render(_jsx(Checkbox, { checked: false, onChange: () => { } }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toHaveStyle('cursor: pointer;');
+    });
+});

package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Fields/CheckboxGroup/CheckboxGroup.test.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxGroup } from './';
+import { vi } from 'vitest';
+const mockOptions = [
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2', disabled: true },
+    { value: 'option3', label: 'Option 3' },
+];
+describe('CheckboxGroup', () => {
+    it('renders checkboxes with options correctly', () => {
+        const { getByText } = render(_jsx(CheckboxGroup, { options: mockOptions, onChange: () => { } }));
+        mockOptions.forEach((option) => {
+            const label = getByText(option.label);
+            expect(label).toBeInTheDocument();
+        });
+    });
+    it('calls onChange handler with correct value when checkbox is clicked', () => {
+        const onChangeMock = vi.fn();
+        const { getByLabelText } = render(_jsx(CheckboxGroup, { options: mockOptions, onChange: onChangeMock }));
+        const option1Checkbox = getByLabelText('Option 1');
+        fireEvent.click(option1Checkbox);
+        expect(onChangeMock).toHaveBeenCalledWith(new Set(['option1']));
+    });
+    it('disables checkboxes correctly', () => {
+        const { getByLabelText } = render(_jsx(CheckboxGroup, { options: mockOptions, onChange: () => { } }));
+        const option1Checkbox = getByLabelText('Option 1');
+        expect(option1Checkbox).not.toBeDisabled();
+        const option2Checkbox = getByLabelText('Option 2');
+        expect(option2Checkbox).toBeDisabled();
+        const option3Checkbox = getByLabelText('Option 3');
+        expect(option3Checkbox).not.toBeDisabled();
+    });
+});

package/dist/components/elements/Fields/CheckboxGroup/index.d.ts

@@ -1,6 +1,6 @@
 import { StyledElementProps, StylesProp } from '../../../../theme';
 import { Key } from '../option';
-type Option<K extends Key = string> = {
+export type Option<K extends Key = string> = {
     value: K;
     label: string;
     disabled?: boolean;

package/dist/components/elements/Fields/DatePicker/DatePicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Fields/DatePicker/DatePicker.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { DatePicker, areDatesEqual } from './';
+describe('DatePicker Component', () => {
+    it('renders correctly', () => {
+        const mockDate = new Date(2023, 4, 23);
+        render(_jsx(DatePicker, { value: mockDate, onChange: vi.fn() }));
+        expect(screen.getByDisplayValue('05/23/2023')).toBeInTheDocument();
+    });
+    it('triggers onChange when a date is selected', () => {
+        const mockDate = new Date(2023, 4, 23);
+        const handleChange = vi.fn();
+        render(_jsx(DatePicker, { value: mockDate, onChange: handleChange }));
+        fireEvent.click(screen.getByDisplayValue('05/23/2023'));
+        fireEvent.click(screen.getByText('24'));
+        expect(handleChange).toHaveBeenCalled();
+    });
+    it('applies custom input props to TextInput', () => {
+        const mockDate = new Date(2023, 4, 23);
+        render(_jsx(DatePicker, { value: mockDate, onChange: vi.fn(), inputProps: { placeholder: 'Select date' } }));
+        expect(screen.getByPlaceholderText('Select date')).toBeInTheDocument();
+    });
+    it('highlights specified dates', () => {
+        const mockDate = new Date(2023, 4, 23);
+        const highlightDate = new Date(2023, 4, 24);
+        render(_jsx(DatePicker, { value: mockDate, onChange: vi.fn(), highlightDates: [highlightDate] }));
+        fireEvent.click(screen.getByDisplayValue('05/23/2023'));
+        const dayElement = screen.getByText((content, element) => {
+            return ((element === null || element === void 0 ? void 0 : element.classList.contains('ndlib-date-picker-highlight')) &&
+                content === '24');
+        });
+        expect(dayElement).toBeInTheDocument();
+    });
+    it('applies custom wrapper props to Box', () => {
+        const mockDate = new Date(2023, 4, 23);
+        render(_jsx(DatePicker, { value: mockDate, onChange: vi.fn(), wrapperProps: { 'data-testid': 'wrapper' } }));
+        expect(screen.getByTestId('wrapper')).toBeInTheDocument();
+    });
+});
+describe('areDatesEqual Function', () => {
+    it('returns true for equal dates', () => {
+        const date1 = new Date(2023, 4, 23);
+        const date2 = new Date(2023, 4, 23);
+        expect(areDatesEqual(date1, date2)).toBe(true);
+    });
+    it('returns false for different dates', () => {
+        const date1 = new Date(2023, 4, 23);
+        const date2 = new Date(2023, 4, 24);
+        expect(areDatesEqual(date1, date2)).toBe(false);
+    });
+});

package/dist/components/elements/Fields/DatePicker/index.d.ts

@@ -8,6 +8,7 @@ export declare const InputWrapper: React.ForwardRefExoticComponent<{
     value?: string | undefined;
     children: React.ReactElement;
 } & React.RefAttributes<any>>;
+export declare const areDatesEqual: (d1: Date, d2: Date) => boolean;
 export declare const DatePicker: React.FC<{
     value: Date;
     onChange: (date: Date) => void;

package/dist/components/elements/Fields/DatePicker/index.js

@@ -29,7 +29,7 @@ export const InputWrapper = React.forwardRef(({ onChange, value, children, onCli
     });
 });
 const PermissiveTextInput = TextInput;
-const areDatesEqual = (d1, d2) => {
+export const areDatesEqual = (d1, d2) => {
     const serializeDate = (d) => `${d.getFullYear()} ${d.getMonth()} ${d.getDate()}`;
     return serializeDate(d1) === serializeDate(d2);
 };

package/dist/components/elements/Fields/MonthPicker/MonthPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Fields/MonthPicker/MonthPicker.test.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { MonthPicker } from './';
+describe('MonthPicker component', () => {
+    const mockOnChange = vi.fn();
+    const selectedDate = new Date(Date.UTC(96, 1, 2, 3, 4, 5));
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders without crashing', () => {
+        render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange }));
+        expect(screen.getByRole('textbox')).toBeInTheDocument();
+    });
+    it('displays the correct selected date', () => {
+        render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange }));
+        expect(screen.getByRole('textbox')).toHaveValue('02/02/1996');
+    });
+    it('passes inputProps to TextInput component', () => {
+        const inputProps = { placeholder: 'Select month' };
+        render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange, inputProps: inputProps }));
+        expect(screen.getByPlaceholderText('Select month')).toBeInTheDocument();
+    });
+    it('passes wrapperProps to Box component', () => {
+        const wrapperProps = {
+            'data-testid': 'box-wrapper',
+            className: 'custom-class',
+        };
+        render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange, wrapperProps: wrapperProps }));
+        const box = screen.getByTestId('box-wrapper');
+        expect(box).toBeInTheDocument();
+        expect(box).toHaveClass('custom-class');
+    });
+    it('renders the date picker inline if inline prop is true', () => {
+        render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange, inline: true }));
+        const datePicker = screen.getByRole('alert');
+        screen.debug();
+        expect(datePicker).toHaveClass('react-datepicker__aria-live');
+    });
+    it('respects minDate and maxDate props', () => {
+        const minDate = new Date('2021-01-01');
+        const maxDate = new Date('2023-01-01');
+        render(_jsx(MonthPicker, { value: selectedDate, onChange: mockOnChange, minDate: minDate, maxDate: maxDate }));
+        const datePicker = screen.getByRole('textbox');
+        expect(datePicker).toBeInTheDocument();
+    });
+});

package/dist/components/elements/Fields/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Fields/Radio/Radio.test.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { Radio } from './';
+import { useTheme } from '../../../../theme';
+vi.mock('../../../../theme', () => ({
+    useTheme: vi.fn(),
+}));
+describe('Radio Component', () => {
+    const mockUseTheme = useTheme;
+    const theme = { boxShadow: '0 0 5px rgba(0,0,0,0.2)' };
+    beforeEach(() => {
+        mockUseTheme.mockReturnValue(theme);
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    const setup = (props = {}) => {
+        const initialProps = Object.assign({ checked: false, onChange: vi.fn(), disabled: false, sx: {} }, props);
+        return render(_jsx(Radio, Object.assign({}, initialProps)));
+    };
+    it('renders the component with initial checked state', () => {
+        setup({ checked: true });
+        const radio = screen.getByRole('radio');
+        expect(radio).toBeChecked();
+    });
+    it('calls onChange with the correct value when clicked', () => {
+        const mockOnChange = vi.fn();
+        setup({ onChange: mockOnChange });
+        const radio = screen.getByRole('radio');
+        fireEvent.click(radio);
+        expect(mockOnChange).toHaveBeenCalledWith(true);
+    });
+    it('applies the disabled state correctly', () => {
+        setup({ disabled: true });
+        const radio = screen.getByRole('radio');
+        expect(radio).toBeDisabled();
+        expect(radio).toHaveStyle('cursor: not-allowed');
+    });
+    it('applies custom styles from sx prop', () => {
+        const customStyles = { backgroundColor: 'red' };
+        setup({ sx: customStyles });
+        const radio = screen.getByRole('radio');
+        expect(radio).toHaveStyle('background-color: rgb(255, 0, 0)');
+    });
+});

package/dist/components/elements/Fields/Radio/index.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
-type RadioProps = StyledElementProps<HTMLInputElement, {
+export type RadioProps = StyledElementProps<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
 }, string>;
 export declare const Radio: React.FC<RadioProps>;
-export {};

package/dist/components/elements/Fields/Radio/index.js

@@ -10,13 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { useTheme } from '../../../../theme';
+import { BOX_SHADOW } from '../../../../theme/custom';
 export const Radio = (_a) => {
     var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
-    const theme = useTheme();
     return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {
             onChange(e.target.checked);
-        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
-                boxShadow: theme.boxShadow,
-            } }, sx), disabled: disabled }, rest)));
+        }, checked: checked, disabled: disabled, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
+                boxShadow: disabled ? null : BOX_SHADOW.NORMAL,
+            } }, sx) }, rest)));
 };

package/dist/components/elements/Fields/RadioGroup/RadioGroup.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/elements/Fields/RadioGroup/RadioGroup.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { RadioGroup } from './';
+describe('RadioGroup', () => {
+    const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2', disabled: true },
+        { value: 'option3', label: 'Option 3' },
+    ];
+    const onChange = vi.fn();
+    it('renders all options', () => {
+        render(_jsx(RadioGroup, { options: options, onChange: onChange }));
+        options.forEach((option) => {
+            expect(screen.getByText(option.label)).toBeInTheDocument();
+        });
+    });
+    it('renders checked option correctly', () => {
+        render(_jsx(RadioGroup, { options: options, checked: "option1", onChange: onChange }));
+        const radio = screen.getByLabelText('Option 1');
+        expect(radio.checked).toBe(true);
+    });
+    it('calls onChange when an option is clicked', () => {
+        render(_jsx(RadioGroup, { options: options, onChange: onChange }));
+        const radio = screen.getByLabelText('Option 3');
+        fireEvent.click(radio);
+        expect(onChange).toHaveBeenCalledWith('option3');
+    });
+    it('disables the correct options', () => {
+        render(_jsx(RadioGroup, { options: options, onChange: onChange }));
+        const disabledRadio = screen.getByLabelText('Option 2');
+        expect(disabledRadio.disabled).toBe(true);
+    });
+});

package/dist/components/elements/Fields/RadioGroup/index.d.ts

@@ -5,7 +5,7 @@ type Option<K extends Key = string> = {
     label: string;
     disabled?: boolean;
 };
-type RadioGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
+export type RadioGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
     onChange: (value: K) => void;
     options: Option<K>[];
     columnStyles?: StylesProp;

package/dist/components/elements/Fields/Select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/Fields/Select/Select.test.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Select } from './';
+describe('Select', () => {
+    const options = [
+        { value: 'option1', label: 'Option 1' },
+        { value: 'option2', label: 'Option 2' },
+        { value: 'option3', label: 'Option 3' },
+    ];
+    const onSelectOption = vi.fn();
+    it('renders placeholder when no value is selected', () => {
+        render(_jsx(Select, { options: options, value: "", placeholder: "Select an option", onSelectOption: onSelectOption }));
+        expect(screen.getByRole('combobox')).toHaveTextContent('Select an option');
+    });
+    it('renders the selected value', () => {
+        render(_jsx(Select, { options: options, value: "option2", onSelectOption: onSelectOption }));
+        expect(screen.getByRole('combobox')).toHaveTextContent('Option 2');
+    });
+    it('opens the dropdown on click and displays options', () => {
+        render(_jsx(Select, { options: options, value: "", onSelectOption: onSelectOption }));
+        const combobox = screen.getByRole('combobox');
+        fireEvent.mouseDown(combobox);
+        options.forEach((option) => {
+            expect(screen.getByText(option.label)).toBeInTheDocument();
+        });
+    });
+    it('calls onSelectOption with correct value on option click', () => {
+        render(_jsx(Select, { options: options, value: "", onSelectOption: onSelectOption }));
+        const combobox = screen.getByRole('combobox');
+        fireEvent.mouseDown(combobox);
+        const option = screen.getByText('Option 1');
+        fireEvent.mouseDown(option);
+        expect(onSelectOption).toHaveBeenCalledWith('option1');
+    });
+    it('handles keyboard navigation and selection', () => {
+        render(_jsx(Select, { options: options, value: "", onSelectOption: onSelectOption }));
+        const combobox = screen.getByRole('combobox');
+        fireEvent.focus(combobox);
+        fireEvent.keyDown(combobox, { key: 'ArrowDown' });
+        fireEvent.keyDown(combobox, { key: 'Enter' });
+        expect(onSelectOption).toHaveBeenCalledWith('option2');
+    });
+    it('closes the dropdown on blur', () => {
+        render(_jsx(Select, { options: options, value: "", onSelectOption: onSelectOption }));
+        const combobox = screen.getByRole('combobox');
+        fireEvent.mouseDown(combobox);
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+        fireEvent.blur(combobox);
+        expect(screen.queryByText('Option 1')).not.toBeInTheDocument();
+    });
+});

package/dist/components/elements/Fields/Select/index.js

@@ -3,7 +3,6 @@ import { useMemo, useState } from 'react';
 import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
 import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
-import { useTheme } from '../../../../theme';
 import { INPUT_SIZE, labelOffsetMap, labelTypographyMap } from '../TextInput';
 import { ListBox } from '../../ListBox';
 import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
@@ -13,6 +12,7 @@ import { COLOR } from '../../../../theme/colors';
 import { Box } from '../../layout/Box';
 import { Label } from '../../text/Label';
 import { useUniqueId } from '../../../providers/uniqueIds';
+import { BOX_SHADOW, Z_INDEX } from '../../../../theme/custom';
 const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
@@ -31,7 +31,6 @@ const buttonSizeMap = {
 };
 const DEFAULT_WIDTH = '16rem';
 export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
-    const theme = useTheme();
     const listboxId = useUniqueId('select-list-box');
     const inputId = useUniqueId('select-input');
     const [isOpen, setIsOpen] = useState(false);
@@ -117,7 +116,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
     const typographyStyles = getTypographyStyles(typography);
     const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
     const focusStyles = {
-        boxShadow: inverted ? theme.boxShadow.INVERTED : theme.boxShadow.NORMAL,
+        boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
     };
     return (_jsxs(Box, Object.assign({ sx: Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, ':hover fieldset': focusStyles, ':focus fieldset': focusStyles }, sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
                     textAlign: 'left',
@@ -132,7 +131,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     overflow: 'hidden',
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
-                    zIndex: theme.zIndex.ELEVATED,
+                    zIndex: Z_INDEX.ELEVATED,
                 } }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
                         float: 'unset',
@@ -154,7 +153,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     position: 'absolute',
                     left: '0.5rem',
                     lineHeight: 1,
-                    zIndex: theme.zIndex.ELEVATED,
+                    zIndex: Z_INDEX.ELEVATED,
                     color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
                     px: 1,
                     top: labelOffsetMap[size],
@@ -167,12 +166,10 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, label, o
                     else {
                         close();
                     }
-                }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: theme.zIndex.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                }, color: inverted ? COLOR.WHITE : COLOR.TEXT, sx: Object.assign({ height, width: '100%', border: 'solid 0px', flexDirection: 'row', alignItems: 'center', position: 'relative', zIndex: Z_INDEX.NORMAL, background: 'none' }, typographyStyles), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
                 }, ref: refs.setFloating, renderOption: renderOption, sx: {
-                    zIndex: theme.zIndex.DIALOG,
-                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted
-                        ? theme.boxShadow.INVERTED
-                        : theme.boxShadow.NORMAL }) }))] })));
+                    zIndex: Z_INDEX.DIALOG,
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL }) }))] })));
 }

package/dist/components/elements/Fields/TextInput/TextInput.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/components/elements/Fields/TextInput/TextInput.test.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { TextInput, INPUT_SIZE } from './';
+import { ThemeProvider } from 'theme-ui';
+import { theme } from '../../../../theme';
+import '@testing-library/jest-dom';
+vi.mock('../../../providers/uniqueIds', () => ({
+    useUniqueId: (prefix) => `${prefix}-mock-id`,
+}));
+describe('TextInput Component', () => {
+    const setup = (props = {}) => {
+        const initialProps = Object.assign({ value: '', onChange: vi.fn(), onChangeRaw: vi.fn(), size: INPUT_SIZE.MD }, props);
+        return render(_jsx(ThemeProvider, Object.assign({ theme: theme }, { children: _jsx(TextInput, Object.assign({}, initialProps)) })));
+    };
+    it('renders with the correct initial value', () => {
+        setup({ value: 'Initial value' });
+        expect(screen.getByDisplayValue('Initial value')).toBeInTheDocument();
+    });
+    it('calls onChange when input value changes', () => {
+        const mockOnChange = vi.fn();
+        setup({ value: 'Initial value', onChange: mockOnChange });
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'New value' } });
+        expect(mockOnChange).toHaveBeenCalledWith('New value');
+    });
+    it('calls onChangeRaw with the event when input value changes', () => {
+        const mockOnChangeRaw = vi.fn();
+        setup({ value: 'Initial value', onChangeRaw: mockOnChangeRaw });
+        const input = screen.getByRole('textbox');
+        fireEvent.change(input, { target: { value: 'New value' } });
+        expect(mockOnChangeRaw).toHaveBeenCalled();
+        const value = mockOnChangeRaw.mock.calls[0][0];
+        expect(value).toBe('New value');
+    });
+    it('renders the left icon if provided', () => {
+        const MockIcon = () => _jsx("span", Object.assign({ "data-testid": "mock-icon" }, { children: "Icon" }));
+        setup({ leftIcon: MockIcon });
+        expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    });
+    it('renders the label if provided', () => {
+        setup({ label: 'Test Label' });
+        const labelElements = screen.getAllByText('Test Label');
+        expect(labelElements.length).toBeGreaterThan(0);
+    });
+    it('applies the correct styles for the input size', () => {
+        setup({ size: INPUT_SIZE.SM });
+        const inputContainer = screen.getByRole('textbox');
+        expect(inputContainer).toHaveStyle({ height: '2.25rem;' });
+    });
+    it('disables the input if the disabled prop is true', () => {
+        setup({ disabled: true });
+        const input = screen.getByRole('textbox');
+        expect(input).toBeDisabled();
+    });
+    it('renders with inverted styles if the inverted prop is true', () => {
+        setup({ inverted: true });
+        const input = screen.getByRole('textbox');
+        expect(input).toHaveStyle({ backgroundColor: 'rgb(51, 51, 51);' });
+    });
+});

package/dist/components/elements/Fields/TextInput/index.js

@@ -17,6 +17,7 @@ import { Icon } from '../../Icon';
 import { COLOR } from '../../../../theme/colors';
 import { Label } from '../../text/Label';
 import { useUniqueId } from '../../../providers/uniqueIds';
+import { BOX_SHADOW, Z_INDEX } from '../../../../theme/custom';
 export var INPUT_SIZE;
 (function (INPUT_SIZE) {
     INPUT_SIZE["SM"] = "sm";
@@ -61,9 +62,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const focusStyles = disabled
         ? {}
         : {
-            boxShadow: inverted
-                ? theme.boxShadow.INVERTED
-                : theme.boxShadow.NORMAL,
+            boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
         };
     return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
             display, px: paddingX, backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': focusStyles, ':focus': focusStyles }, typographyStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ sx: {
@@ -79,7 +78,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     overflow: 'hidden',
                     minWidth: '0%',
                     borderColor: inverted ? COLOR.GRAY : COLOR.LIGHT_GRAY,
-                    zIndex: theme.zIndex.ELEVATED,
+                    zIndex: Z_INDEX.ELEVATED,
                 } }, { children: _jsx("legend", Object.assign({ style: {
                         width: 'auto',
                         float: 'unset',
@@ -102,7 +101,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     fontSize: getIconSize(typographyStyles.fontSize),
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
                     onChange && onChange(event.target.value);
-                    onChangeRaw && onChangeRaw(event);
+                    onChangeRaw && onChangeRaw(event.target.value);
                 }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT }, typographyStyles), { '::placeholder': {
                         color: inverted ? COLOR.LIGHT_GRAY : COLOR.GRAY,
                     }, ':focus': {

package/dist/components/elements/Icon/Icon.test.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/dist/components/elements/Icon/Icon.test.js

@@ -1,34 +1,62 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/test';
-import { Icon } from '.';
-import { SPACING } from '../../../theme';
-import { FONT_SIZE, fontSizeMap } from '../../../theme/typography';
-import { vitest } from 'vitest';
-const MockIcon = () => {
-    return _jsx("div", { children: "Mock Icon" });
-};
-describe('Icon', () => {
-    it('renders component passed to it', () => {
-        const { getByText } = render(_jsx(Icon, { icon: MockIcon }));
-        expect(getByText('Mock Icon')).toBeInTheDocument();
-    });
-    it('passes font size to outer wrapper', () => {
-        const { container } = render(_jsx(Icon, { icon: MockIcon, size: FONT_SIZE.MD }));
-        expect(container.childNodes[0]).toHaveStyle({
-            fontSize: fontSizeMap[FONT_SIZE.MD],
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { vi, describe, it, beforeEach, afterEach, expect } from 'vitest';
+import { Icon } from './';
+import { COLOR } from '../../../theme/colors';
+import { FONT_SIZE } from '../../../theme/typography';
+import { useEnvironment } from '../../providers/env';
+vi.mock('../../providers/env', () => ({
+    useEnvironment: vi.fn(),
+}));
+describe('Icon Component', () => {
+    const MockIcon = () => _jsx("svg", { "data-testid": "mock-icon" });
+    const mockFlagInDevelopment = vi.fn();
+    beforeEach(() => {
+        ;
+        useEnvironment.mockReturnValue({
+            flagInDevelopment: mockFlagInDevelopment,
         });
     });
-    it('passes custom styles to outer wrapper', () => {
-        const { container } = render(_jsx(Icon, { icon: MockIcon, sx: { p: 1 } }));
-        expect(container.childNodes[0]).toHaveStyle({
-            padding: SPACING[1],
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders the icon component', () => {
+        render(_jsx(Icon, { icon: MockIcon }));
+        expect(screen.getByTestId('mock-icon')).toBeInTheDocument();
+    });
+    it('applies the correct size and color', () => {
+        render(_jsx(Icon, { icon: MockIcon, size: FONT_SIZE.LG, color: COLOR.SECONDARY }));
+        const iconElement = screen.getByTestId('mock-icon');
+        expect(iconElement).toHaveStyle({
+            fontSize: 'inherit',
+            color: 'color: rgb(211, 159, 16)',
         });
     });
-    it('icon can be clicked', () => {
-        const onClick = vitest.fn();
-        const { getByLabelText } = render(_jsx(Icon, { icon: MockIcon, sx: { p: 1 }, onClick: onClick, "aria-label": "My Icon" }));
-        const icon = getByLabelText('My Icon');
-        icon.click();
-        expect(onClick).toHaveBeenCalled();
+    it('calls flagInDevelopment if onClick is provided without aria-label', () => {
+        render(_jsx(Icon, { icon: MockIcon, onClick: vi.fn() }));
+        expect(mockFlagInDevelopment).toHaveBeenCalledWith('Icon component with onClick should have an aria-label and tabIndex={0}');
+    });
+    it('does not call flagInDevelopment if onClick is provided with aria-label', () => {
+        render(_jsx(Icon, { icon: MockIcon, onClick: vi.fn(), "aria-label": "icon" }));
+        expect(mockFlagInDevelopment).not.toHaveBeenCalled();
+    });
+    it('renders with tabIndex and role when onClick is provided', () => {
+        render(_jsx(Icon, { icon: MockIcon, onClick: vi.fn(), "aria-label": "icon" }));
+        const divElement = screen.getByRole('button');
+        expect(divElement).toHaveAttribute('tabIndex', '0');
+    });
+    it('does not render with tabIndex and role when onClick is not provided', () => {
+        render(_jsx(Icon, { icon: MockIcon }));
+        const divElement = screen.getByTestId('mock-icon').parentElement;
+        expect(divElement).not.toHaveAttribute('tabIndex');
+        expect(divElement).not.toHaveAttribute('role', 'button');
+    });
+    it('handles onClick event', () => {
+        const handleClick = vi.fn();
+        render(_jsx(Icon, { icon: MockIcon, onClick: handleClick, "aria-label": "icon" }));
+        const divElement = screen.getByRole('button');
+        fireEvent.click(divElement);
+        expect(handleClick).toHaveBeenCalledTimes(1);
     });
 });

package/dist/components/elements/text/ReadMore/ReadMore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/elements/text/ReadMore/ReadMore.test.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { ReadMore } from './';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { render } from '../../../../utils/test';
+describe('ReadMore Component', () => {
+    const mockText = 'This is a test content for the ReadMore component. It should truncate properly if it exceeds the given number of lines.';
+    const defaultProps = {
+        typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+        lines: 3,
+        fixedHeight: false,
+    };
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    it('renders without crashing', () => {
+        render(_jsx(ReadMore, Object.assign({}, defaultProps, { children: mockText })));
+        expect(screen.getByRole('paragraph')).toBeInTheDocument();
+    });
+    it('displays the correct text content', () => {
+        render(_jsx(ReadMore, Object.assign({}, defaultProps, { children: mockText })));
+        expect(screen.getByText(mockText)).toBeInTheDocument();
+    });
+    it('applies the correct typography styles', () => {
+        render(_jsx(ReadMore, Object.assign({}, defaultProps)));
+        const paragraph = screen.getByRole('paragraph');
+        expect(paragraph).toHaveStyle('font-size: 1rem');
+    });
+    it('does not show ellipsis if content fits within allotted space', () => {
+        const shortText = 'Short text';
+        render(_jsx(ReadMore, Object.assign({}, defaultProps, { children: shortText })));
+        expect(screen.queryByText('Read More...')).not.toBeInTheDocument();
+    });
+});

package/dist/theme/index.d.ts

@@ -2,8 +2,18 @@ import { PropsWithChildren } from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
 import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
 import { COLOR } from './colors';
-import { BOX_SHADOW, Z_INDEX } from './custom';
 export declare const BREAKPOINTS: string[];
+export declare enum BOX_SHADOW {
+    NORMAL = "0 0 8px #dfdfdf",
+    EMPHASIZED = "0 0 12px #d3d3d3",
+    INVERTED = "0 0 8px #767676"
+}
+export declare enum Z_INDEX {
+    NORMAL = 1,
+    ELEVATED = 2,
+    DIALOG = 3,
+    MODAL = 4
+}
 export declare const SPACING: string[];
 export declare const theme: {
     colors: {

package/dist/theme/index.js

@@ -2,8 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeUIProvider, useThemeUI } from 'theme-ui';
 import { fontStyles, } from './typography';
 import { colors } from './colors';
-import { BOX_SHADOW, Z_INDEX } from './custom';
 export const BREAKPOINTS = ['576px', '768px', '992px', '1200px', '1400px'];
+export var BOX_SHADOW;
+(function (BOX_SHADOW) {
+    BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
+    BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
+    BOX_SHADOW["INVERTED"] = "0 0 8px #767676";
+})(BOX_SHADOW || (BOX_SHADOW = {}));
+export var Z_INDEX;
+(function (Z_INDEX) {
+    Z_INDEX[Z_INDEX["NORMAL"] = 1] = "NORMAL";
+    Z_INDEX[Z_INDEX["ELEVATED"] = 2] = "ELEVATED";
+    Z_INDEX[Z_INDEX["DIALOG"] = 3] = "DIALOG";
+    Z_INDEX[Z_INDEX["MODAL"] = 4] = "MODAL";
+})(Z_INDEX || (Z_INDEX = {}));
 export const SPACING = [
     '0rem',
     '0.25rem',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "0.0.118",
+  "version": "0.0.120",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -63,6 +63,7 @@
     "@typescript-eslint/eslint-plugin": "^5.57.1",
     "@typescript-eslint/parser": "^5.57.1",
     "@vitejs/plugin-react-swc": "^3.0.0",
+    "@vitest/coverage-c8": "^0.33.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
@@ -77,7 +78,7 @@
     "storybook": "^7.0.17",
     "theme-ui": "^0.16.1",
     "typescript": "^5.0.2",
-    "vite": "^4.5.2",
+    "vite": "^4.5.3",
     "vitest": "^0.31.4"
   },
   "prettier": {
@@ -87,6 +88,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.5",
+    "@vitest/coverage-istanbul": "^1.6.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.16.0",
     "react-markdown": "^8.0.7",