@ndlib/component-library 1.0.21 → 1.0.23

package/dist/components/elements/TextInputV2/TextInputV2.module.css

@@ -0,0 +1,71 @@
+.wrapper {
+  display: inline-flex;
+  border-radius: 4px;
+  flex-direction: row;
+  position: relative;
+  align-items: center;
+  background-color: var(--white);
+}
+
+.wrapper.inverted {
+  background-color: var(--darkGray);
+}
+
+.fieldset {
+  text-align: left;
+  position: absolute;
+  inset: -4px 0 0 0;
+  margin: 0;
+  padding: 0 0.5rem;
+  pointer-events: none;
+  border-radius: inherit;
+  border-style: solid;
+  border-width: 1px;
+  overflow: hidden;
+  min-width: 0%;
+  z-index: 2;
+  border-color: var(--lightGray);
+}
+
+.fieldset.inverted {
+  border-color: var(--gray);
+}
+
+.legend {
+  width: auto;
+  float: unset;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  padding: 0;
+  height: 8px;
+  font-size: 0.75em;
+  visibility: hidden;
+  white-space: nowrap;
+}
+
+.input {
+  padding: 0;
+  width: 100%;
+  border: none;
+  background-color: var(--white);
+  color: var(--text);
+}
+
+.input::placeholder {
+  color: var(--gray);
+}
+
+.input.inverted {
+  background-color: var(--darkGray);
+  color: var(--extraLightGray);
+}
+
+.input.inverted::placeholder {
+  color: var(--lightGray);
+}
+
+.input:focus,
+.input.inverted:focus {
+  outline: none;
+}

package/dist/components/elements/TextInputV2/TextInputV2.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextInputV2 } from '.';
+declare const meta: Meta<typeof TextInputV2>;
+export default meta;
+type Story = StoryObj<typeof TextInputV2>;
+export declare const Default: Story;
+export declare const WithLabel: Story;
+export declare const Inverted: Story;
+export declare const Disabled: Story;

package/dist/components/elements/TextInputV2/TextInputV2.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import SearchIcon from '@mui/icons-material/Search';
+import { INPUTV2_SIZE, TextInputV2 } from '.';
+import { useState } from 'react';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { GroupV2 } from '../GroupV2';
+import { HeadingV2, HEADINGV2_SIZE } from '../HeadingV2';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/TextInputV2',
+    component: TextInputV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { label: 'Large', size: INPUTV2_SIZE.LG },
+    { label: 'Medium', size: INPUTV2_SIZE.MD },
+    { label: 'Small', size: INPUTV2_SIZE.SM },
+];
+const StatefulInput = (props) => {
+    const [value, setValue] = useState('');
+    return _jsx(TextInputV2, Object.assign({ value: value, onChange: setValue }, props));
+};
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }, i))) })),
+};
+export const WithLabel = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", placeholder: "Placeholder", sx: { mt: 2 } })] }, i))) })),
+};
+export const Inverted = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 2 } }, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { inverted: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }, i))) }))),
+};
+export const Disabled = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { p: 2 } }, { children: sizes.map((size, i) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulInput, { disabled: true, size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", label: "Search", sx: { mt: 2 } })] }, i))) }))),
+};

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

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

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

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { TextInputV2, INPUTV2_SIZE } from '.';
+import '@testing-library/jest-dom';
+vi.mock('../../../providers/uniqueIds', () => ({
+    useUniqueId: (prefix) => `${prefix}-mock-id`,
+}));
+describe('TextInputV2 Component', () => {
+    const setup = (props = {}) => {
+        const initialProps = Object.assign({ value: '', onChange: vi.fn(), onChangeRaw: vi.fn(), size: INPUTV2_SIZE.MD }, props);
+        return render(_jsx(TextInputV2, 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: INPUTV2_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/TextInputV2/index.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementPropsV2 } from '../../../theme';
+export declare enum INPUTV2_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const labelTypographyMapV2: {
+    sm: TYPOGRAPHY_TYPE;
+    md: TYPOGRAPHY_TYPE;
+    lg: TYPOGRAPHY_TYPE;
+};
+export declare const labelOffsetMapV2: {
+    sm: string;
+    md: string;
+    lg: string;
+};
+export type TextInputV2Props = StyledElementPropsV2<HTMLInputElement, {
+    size?: INPUTV2_SIZE;
+    leftIcon?: React.FC<any>;
+    inline?: boolean;
+    inverted?: boolean;
+    label?: string;
+    disabled?: boolean;
+    value: string;
+    onChange?: (value: string) => void;
+    onChangeRaw?: (e: string | React.ChangeEvent) => void;
+    className?: string;
+}, string>;
+export declare const TextInputV2: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesPropV2 | undefined;
+    children?: string | undefined;
+} & Omit<React.HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & {
+    size?: INPUTV2_SIZE | undefined;
+    leftIcon?: React.FC<any> | undefined;
+    inline?: boolean | undefined;
+    inverted?: boolean | undefined;
+    label?: string | undefined;
+    disabled?: boolean | undefined;
+    value: string;
+    onChange?: ((value: string) => void) | undefined;
+    onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+    className?: string | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<any>>;

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

@@ -0,0 +1,98 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
+import { IconV2 } from '../IconV2';
+import { COLOR } from '../../../theme/colors';
+import { LabelV2 } from '../LabelV2';
+import { useUniqueId } from '../../providers/uniqueIds';
+import { BOX_SHADOW, Z_INDEX } from '../../../theme/custom';
+import { useHover } from '../../../utils/hooks/useHover';
+import { useFocus } from '../../../utils/hooks/useFocus';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './TextInputV2.module.css';
+import clsx from 'clsx';
+export var INPUTV2_SIZE;
+(function (INPUTV2_SIZE) {
+    INPUTV2_SIZE["SM"] = "sm";
+    INPUTV2_SIZE["MD"] = "md";
+    INPUTV2_SIZE["LG"] = "lg";
+})(INPUTV2_SIZE || (INPUTV2_SIZE = {}));
+const typographyMap = {
+    [INPUTV2_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [INPUTV2_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [INPUTV2_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+export const labelTypographyMapV2 = {
+    [INPUTV2_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUTV2_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUTV2_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+};
+export const labelOffsetMapV2 = {
+    [INPUTV2_SIZE.SM]: '-0.375rem',
+    [INPUTV2_SIZE.MD]: '-0.45rem',
+    [INPUTV2_SIZE.LG]: '-0.5rem',
+};
+const defaultPaddingX = {
+    [INPUTV2_SIZE.SM]: '0.5rem',
+    [INPUTV2_SIZE.MD]: '0.75rem',
+    [INPUTV2_SIZE.LG]: '0.75rem',
+};
+const defaultHeight = {
+    [INPUTV2_SIZE.SM]: '2.25rem',
+    [INPUTV2_SIZE.MD]: '2.5rem',
+    [INPUTV2_SIZE.LG]: '3rem',
+};
+const typeSafeStyles = styles;
+export const TextInputV2 = React.forwardRef((_a, ref) => {
+    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled, className } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled", "className"]);
+    const id = useUniqueId('text-input');
+    const size = sizeParam || INPUTV2_SIZE.MD;
+    const display = inline === false ? 'flex' : '';
+    const { isHovered, anchorElementProps } = useHover();
+    const { isFocused } = useFocus();
+    const paddingX = defaultPaddingX[size];
+    const height = defaultHeight[size];
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const processedStyles = processSx(Object.assign(Object.assign({}, typographyStyles), sx));
+    const focusStyles = disabled
+        ? {}
+        : {
+            boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
+        };
+    const appliedHoverStyles = isHovered ? focusStyles : {};
+    const appliedFocusStyles = isFocused ? focusStyles : {};
+    return (_jsxs("div", Object.assign({}, anchorElementProps, { ref: ref, onClick: onClick, id: id, className: clsx(`${typeSafeStyles.wrapper} ${inverted ? typeSafeStyles.inverted : ''}`, className), style: Object.assign(Object.assign(Object.assign({ height,
+            display, paddingLeft: paddingX, paddingRight: paddingX }, appliedHoverStyles), appliedFocusStyles), processedStyles) }, { children: [_jsx("fieldset", Object.assign({ className: `${typeSafeStyles.fieldset} ${inverted ? typeSafeStyles.inverted : ''}` }, { children: _jsx("legend", Object.assign({ className: typeSafeStyles.legend }, { children: label && (_jsx(LabelV2, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMapV2[size] }, { children: label }))) })) })), leftIcon && (_jsx(IconV2, { icon: leftIcon, color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.TEXT, sx: {
+                    mr: 2,
+                    fontSize: getIconSize(typographyStyles.fontSize),
+                } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
+                    onChange && onChange(event.target.value);
+                    onChangeRaw && onChangeRaw(event.target.value);
+                }, className: `${typeSafeStyles.input} ${inverted ? typeSafeStyles.inverted : ''}`, style: Object.assign({}, processSx(Object.assign({}, typographyStyles))), disabled: disabled }, rest)), label && (_jsx(LabelV2, Object.assign({ htmlFor: id, typography: labelTypographyMapV2[size], sx: {
+                    position: 'absolute',
+                    color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: Z_INDEX.ELEVATED,
+                    px: 1,
+                    top: labelOffsetMapV2[size],
+                } }, { children: label })))] })));
+});

package/dist/components/elements/layout/Box.stories.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box as BoxComponent } from './Box';
 import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Layout/Box',
     component: BoxComponent,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Box = {

package/dist/components/elements/layout/Flex.stories.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Column } from './Column';
 import { Row } from './Row';
-import { Paragraph } from '../text/Paragraph';
+import { Paragraph } from '../Paragraph';
 import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Layout/Flex',
     component: Row,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Columns = {

package/dist/components/elements/layoutV2/BoxV2.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+export type BoxV2Props = StyledElementPropsV2<HTMLDivElement>;
+export declare const BoxV2: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesPropV2 | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & object & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layoutV2/BoxV2.js

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { processSx } from '../../../utils/processSx';
+export const BoxV2 = React.forwardRef((_a, ref) => {
+    var { sx } = _a, rest = __rest(_a, ["sx"]);
+    const processedStyles = processSx(sx);
+    return _jsx("div", Object.assign({}, rest, { style: processedStyles, ref: ref }));
+});

package/dist/components/elements/layoutV2/BoxV2.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BoxV2 as BoxV2Component } from './BoxV2';
+declare const meta: Meta<typeof BoxV2Component>;
+export default meta;
+type Story = StoryObj<typeof BoxV2Component>;
+export declare const Box: Story;

package/dist/components/elements/layoutV2/BoxV2.stories.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { BoxV2 as BoxV2Component } from './BoxV2';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Layout/BoxV2',
+    component: BoxV2Component,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+export const Box = {
+    render: () => (_jsx(BoxV2Component, Object.assign({ sx: { p: 1, bg: COLOR.PRIMARY } }, { children: _jsx(BoxV2Component, { sx: { p: 1, bg: COLOR.SECONDARY } }) }))),
+};

package/dist/components/elements/layoutV2/ColumnV2.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FlexHelperPropsV2 } from './RowV2';
+export declare const ColumnV2: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesPropV2 | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperPropsV2 & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layoutV2/ColumnV2.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { convertFlexHelperPropsV2 } from './RowV2';
+import { processSx } from '../../../utils/processSx';
+export const ColumnV2 = React.forwardRef((_a, ref) => {
+    var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);
+    const flexStyles = convertFlexHelperPropsV2(rest);
+    const processedStyles = processSx(sx);
+    return (_jsx("div", Object.assign({ ref: ref }, rest, { style: Object.assign(Object.assign(Object.assign({}, flexStyles), processedStyles), { display: 'flex', flexDirection: 'column' }) }, { children: children })));
+});

package/dist/components/elements/layoutV2/RowV2.d.ts

@@ -0,0 +1,19 @@
+import React, { CSSProperties } from 'react';
+export declare const convertFlexHelperPropsV2: (props: FlexHelperPropsV2) => React.CSSProperties;
+export type FlexHelperPropsV2 = {
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    flex?: string;
+    align?: CSSProperties['alignItems'];
+    justify?: CSSProperties['justifyContent'];
+    centered?: boolean;
+};
+export declare const RowV2: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesPropV2 | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperPropsV2 & {
+    breakpoint?: number | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/layoutV2/RowV2.js

@@ -0,0 +1,54 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { processSx } from '../../../utils/processSx';
+export const convertFlexHelperPropsV2 = (props) => {
+    const styleObject = {};
+    if (props.grow) {
+        styleObject.flexGrow = props.grow;
+    }
+    if (props.shrink) {
+        styleObject.flexShrink = props.shrink;
+    }
+    if (props.flex) {
+        styleObject.flex = props.flex;
+    }
+    if (props.basis) {
+        styleObject.flexBasis = props.basis;
+    }
+    if (props.centered) {
+        styleObject.alignItems = 'center';
+        styleObject.justifyContent = 'center';
+    }
+    if (props.align) {
+        styleObject.alignItems = props.align;
+    }
+    if (props.justify) {
+        styleObject.justifyContent = props.justify;
+    }
+    return styleObject;
+};
+export const RowV2 = React.forwardRef((_a, ref) => {
+    var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
+    const flexStyles = convertFlexHelperPropsV2(rest);
+    let flexDirection = 'row';
+    if (breakpointParam !== undefined) {
+        flexDirection = [];
+        for (let i = 0; i <= breakpointParam; i++) {
+            flexDirection.push('column');
+        }
+        flexDirection.push('row');
+    }
+    const processedStyles = processSx(Object.assign(Object.assign({}, sx), { flexDirection }));
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, style: Object.assign(Object.assign(Object.assign({}, flexStyles), processedStyles), { display: 'flex' }) }, { children: children })));
+});

package/dist/components/providers/alerts.js

@@ -42,7 +42,6 @@ const composeGraphqlQuery = ({ startTime, endTime, }) => {
         ) {
           data {
             attributes {
-              uuid
               title
               description
               type

package/dist/components/providers/alerts.test.d.ts

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

package/dist/components/providers/alerts.test.js

@@ -0,0 +1,115 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { AlertsProvider, useAlerts } from './alerts';
+describe('AlertsProvider and useAlerts', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        localStorage.clear();
+    });
+    const mockAlerts = [
+        {
+            uuid: '1',
+            domains: ['library'],
+            startTime: '2020-09-06T04:00:00.000Z',
+            endTime: '2020-09-09T04:00:00.000Z',
+            title: 'Aleph API down due to DNS problem',
+            description: 'Test 1',
+            type: 'Warning',
+            global: true,
+        },
+        {
+            uuid: '2',
+            title: 'Test Alert 2',
+            type: 'Warning',
+            description: 'Issue with Primo',
+            domains: ['primo'],
+            global: false,
+        },
+        {
+            uuid: '3',
+            domains: ['library'],
+            startTime: '2020-09-06T04:00:00.000Z',
+            endTime: '2020-09-09T04:00:00.000Z',
+            title: 'Aleph API down due to DNS problem',
+            description: '__bold__ [Test 2 Link](https://onesearch.library.nd.edu/)',
+            type: 'Warning',
+            global: true,
+        },
+    ];
+    const mockApiResponse = {
+        data: {
+            alerts: {
+                data: mockAlerts.map((alert) => ({
+                    attributes: alert,
+                })),
+            },
+        },
+    };
+    it('fetches and displays alerts correctly', () => __awaiter(void 0, void 0, void 0, function* () {
+        global.fetch = vi.fn().mockResolvedValue({
+            json: vi.fn().mockResolvedValue(mockApiResponse),
+        });
+        const TestComponent = () => {
+            const { alerts } = useAlerts();
+            return (_jsx("div", { children: alerts.map((alert) => (_jsx("div", { children: alert.title }, alert.uuid))) }));
+        };
+        render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
+        yield waitFor(() => {
+            expect(screen.getAllByText('Aleph API down due to DNS problem').length).toBe(2);
+            expect(screen.queryAllByText('Test Alert 2').length).toBe(0);
+        });
+    }));
+    it('handles empty response from GraphQL', () => __awaiter(void 0, void 0, void 0, function* () {
+        global.fetch = vi.fn().mockResolvedValue({
+            json: vi.fn().mockResolvedValue({ data: { alerts: { data: [] } } }),
+        });
+        const TestComponent = () => {
+            const { alerts } = useAlerts();
+            return (_jsx("div", { children: alerts.length === 0
+                    ? 'No Alerts'
+                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.uuid)) }));
+        };
+        render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
+        yield waitFor(() => {
+            expect(screen.getByText('No Alerts')).toBeInTheDocument();
+        });
+    }));
+    it('handles missing data in GraphQL response', () => __awaiter(void 0, void 0, void 0, function* () {
+        global.fetch = vi.fn().mockResolvedValue({
+            json: vi.fn().mockResolvedValue({ data: {} }),
+        });
+        const TestComponent = () => {
+            const { alerts } = useAlerts();
+            return (_jsx("div", { children: alerts.length === 0
+                    ? 'No Alerts'
+                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.uuid)) }));
+        };
+        render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
+        yield waitFor(() => {
+            expect(screen.getByText('No Alerts')).toBeInTheDocument();
+        });
+    }));
+    it('handles network error during fetch', () => __awaiter(void 0, void 0, void 0, function* () {
+        global.fetch = vi.fn().mockRejectedValue(new Error('Network error'));
+        const TestComponent = () => {
+            const { alerts } = useAlerts();
+            return (_jsx("div", { children: alerts.length === 0
+                    ? 'No Alerts'
+                    : alerts.map((alert) => _jsx("div", { children: alert.title }, alert.uuid)) }));
+        };
+        render(_jsx(AlertsProvider, { children: _jsx(TestComponent, {}) }));
+        yield waitFor(() => {
+            expect(screen.getByText('No Alerts')).toBeInTheDocument();
+        });
+    }));
+});