@ndlib/component-library 1.0.20 → 1.0.22

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

@@ -0,0 +1,27 @@
+.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;
+}
+
+.legend {
+  width: auto;
+  float: unset;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  padding: 0;
+  height: 8px;
+  font-size: 0.75em;
+  visibility: hidden;
+  white-space: nowrap;
+}

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

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

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AppleIcon from '@mui/icons-material/Apple';
+import { INPUTV2_SIZE } from '../TextInputV2';
+import { SelectV2 } 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/SelectV2',
+    component: SelectV2,
+    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 options = [
+    { value: 'orange', label: 'Orange' },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulSelect = (props) => {
+    const [value, setValue] = useState('');
+    return (_jsx(SelectV2, Object.assign({ options: options }, props, { value: value, onSelectOption: setValue, placeholder: "Select A Fruit..." })));
+};
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
+};
+export const WithLabel = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
+};
+export const InvertedColors = {
+    render: () => (_jsx(ColumnV2, Object.assign({ sx: { backgroundColor: COLOR.BLACK, p: 4 } }, { children: sizes.map((size) => (_jsxs(GroupV2, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.MD, sx: { color: COLOR.WHITE } }, { children: size.label })), _jsx(StatefulSelect, { inverted: true, size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) }))),
+};

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

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

package/dist/components/elements/SelectV2/SelectV2.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 { SelectV2 } from '.';
+describe('SelectV2', () => {
+    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(SelectV2, { options: options, value: "", placeholder: "Select an option", onSelectOption: onSelectOption }));
+        expect(screen.getByRole('combobox')).toHaveTextContent('Select an option');
+    });
+    it('renders the selected value', () => {
+        render(_jsx(SelectV2, { options: options, value: "option2", onSelectOption: onSelectOption }));
+        expect(screen.getByRole('combobox')).toHaveTextContent('Option 2');
+    });
+    it('opens the dropdown on click and displays options', () => {
+        render(_jsx(SelectV2, { 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(SelectV2, { 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(SelectV2, { 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(SelectV2, { 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/SelectV2/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+import { INPUTV2_SIZE } from '../TextInputV2';
+import { BasicOption, Key, RenderOption, RenderOptionLabel } from '../option';
+type SelectV2Props<Value extends Key, Option extends BasicOption<Value>> = StyledElementPropsV2<HTMLSelectElement, {
+    placeholder?: string;
+    size?: INPUTV2_SIZE;
+    leftIcon?: React.FC<any>;
+    value: Value;
+    label?: string;
+    inverted?: boolean;
+    onSelectOption: (value: Value) => void;
+    options: Option[];
+    renderOption?: RenderOption<Value, Option>;
+    renderOptionLabel?: RenderOptionLabel<Option>;
+}, string>;
+export declare function SelectV2<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }: SelectV2Props<Value, Option>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { INPUTV2_SIZE, labelOffsetMapV2, labelTypographyMapV2, } from '../TextInputV2';
+import { ListBoxV2 } from '../ListBoxV2';
+import { BUTTONV2_SIZE, BUTTONV2_TYPE, ButtonV2 } from '../ButtonV2';
+import { defaultRenderOptionLabel, getOptionId, } from '../option';
+import { KEY_CODES, importedDefaultComponentShim } from '../../../utils/misc';
+import { COLOR } from '../../../theme/colors';
+import { BoxV2 } from '../layoutV2/BoxV2';
+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 './SelectV2.module.css';
+const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
+const typographyMap = {
+    [INPUTV2_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [INPUTV2_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [INPUTV2_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+const defaultHeight = {
+    [INPUTV2_SIZE.SM]: '2.25rem',
+    [INPUTV2_SIZE.MD]: '2.5rem',
+    [INPUTV2_SIZE.LG]: '3rem',
+};
+const buttonSizeMap = {
+    [INPUTV2_SIZE.SM]: BUTTONV2_SIZE.SM,
+    [INPUTV2_SIZE.MD]: BUTTONV2_SIZE.MD,
+    [INPUTV2_SIZE.LG]: BUTTONV2_SIZE.LG,
+};
+const DEFAULT_WIDTH = '16rem';
+const typeSafeStyles = styles;
+export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
+    const listboxId = useUniqueId('select-list-box');
+    const inputId = useUniqueId('select-input');
+    const { isHovered, anchorElementProps } = useHover();
+    const { isFocused } = useFocus();
+    const [isOpen, setIsOpen] = useState(false);
+    const [stagedOptionValue, setStagedOptionValue] = useState();
+    const currentOption = useMemo(() => {
+        return options.find((option) => option.value === value);
+    }, [options, value]);
+    const getNextOptionValue = () => {
+        if (stagedOptionValue) {
+            const currentIndex = options
+                .map((option) => option.value)
+                .indexOf(stagedOptionValue);
+            const nextIndex = Math.min(currentIndex + 1, options.length - 1);
+            return options[nextIndex].value;
+        }
+        else {
+            setIsOpen(true);
+            return options[0].value;
+        }
+    };
+    const getPrevOptionValue = () => {
+        if (stagedOptionValue) {
+            const currentIndex = options
+                .map((option) => option.value)
+                .indexOf(stagedOptionValue);
+            const nextIndex = Math.max(currentIndex - 1, 0);
+            return options[nextIndex].value;
+        }
+        else {
+            setIsOpen(true);
+            return options[options.length - 1].value;
+        }
+    };
+    const [dropdownMinWidth, setDropdownMinWidth] = useState('0px');
+    const { refs, floatingStyles } = useFloating({
+        placement: 'bottom-start',
+        middleware: [
+            offset(2),
+            sizeMiddleware({
+                apply({ rects }) {
+                    setDropdownMinWidth(`${rects.reference.width}px`);
+                },
+            }),
+            autoPlacement({
+                allowedPlacements: ['top-start', 'bottom-start'],
+            }),
+        ],
+    });
+    const close = () => {
+        setStagedOptionValue(undefined);
+        setIsOpen(false);
+    };
+    const open = () => {
+        setStagedOptionValue(stagedOptionValue || value || options[0].value);
+        setIsOpen(true);
+    };
+    const onKeyDown = (e) => {
+        if (e.key === KEY_CODES.ARROW_DOWN) {
+            const nextValue = getNextOptionValue();
+            setStagedOptionValue(nextValue);
+        }
+        if (e.key === KEY_CODES.ARROW_UP) {
+            const prevValue = getPrevOptionValue();
+            setStagedOptionValue(prevValue);
+        }
+        if (e.key === KEY_CODES.ENTER) {
+            if (!isOpen) {
+                open();
+            }
+            if (isOpen && stagedOptionValue && onSelectOption) {
+                onSelectOption(stagedOptionValue);
+                close();
+            }
+        }
+        if (e.key === KEY_CODES.ESCAPE) {
+            close();
+        }
+    };
+    const size = sizeParam || INPUTV2_SIZE.MD;
+    const buttonSize = buttonSizeMap[size];
+    const height = defaultHeight[size];
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
+    const focusStyles = {
+        boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
+    };
+    const appliedHoverStyles = isHovered ? focusStyles : {};
+    const appliedFocusStyles = isFocused ? focusStyles : {};
+    const fieldsetBorderColor = processSx({
+        borderColor: inverted ? COLOR.WHITE : COLOR.LIGHT_GRAY,
+    });
+    return (_jsxs(BoxV2, Object.assign({}, anchorElementProps, { sx: Object.assign(Object.assign(Object.assign({ width: DEFAULT_WIDTH, position: 'relative', borderRadius: '4px', backgroundColor: inverted ? COLOR.DARK_GRAY : COLOR.WHITE }, appliedHoverStyles), appliedFocusStyles), sx) }, { children: [_jsx("fieldset", Object.assign({ className: typeSafeStyles.fieldset, style: Object.assign({}, fieldsetBorderColor) }, { children: _jsx("legend", Object.assign({ className: typeSafeStyles.legend }, { children: label && (_jsx(LabelV2, Object.assign({ standalone: true, sx: {
+                            px: 1,
+                            position: 'relative',
+                            display: 'inline-flex',
+                            opacity: '0',
+                            visibility: 'hidden',
+                        }, typography: labelTypographyMapV2[size] }, { children: label }))) })) })), _jsx(LabelV2, Object.assign({ id: inputId, typography: labelTypographyMapV2[size], sx: {
+                    position: 'absolute',
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: Z_INDEX.ELEVATED,
+                    color: inverted ? COLOR.WHITE : COLOR.PRIMARY,
+                    px: 1,
+                    top: labelOffsetMapV2[size],
+                } }, { children: label })), _jsx(ButtonV2, Object.assign({ ref: refs.setReference, disableFocusStyles: true, role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-labelledby": inputId, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
+                    ? getOptionId(stagedOptionValue)
+                    : undefined, type: BUTTONV2_TYPE.OUTLINE, size: buttonSize, onBlur: () => close(), onFocus: () => open(), onKeyDown: onKeyDown, onMouseDown: () => {
+                    if (!isOpen) {
+                        open();
+                    }
+                    else {
+                        close();
+                    }
+                }, 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(ListBoxV2, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
+                    onSelectOption && onSelectOption(option.value);
+                    close();
+                }, ref: refs.setFloating, renderOption: renderOption, sx: {
+                    zIndex: Z_INDEX.DIALOG,
+                    minWidth: dropdownMinWidth,
+                    boxShadow: inverted ? BOX_SHADOW.INVERTED : BOX_SHADOW.NORMAL,
+                }, style: Object.assign({}, floatingStyles) }))] })));
+}

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

@@ -3,10 +3,12 @@ import { Column, Group, HEADING_SIZE, Heading } from '../../..';
 import { SPINNER_SIZE, Spinner } from '.';
 import { GROUP_TYPE } from '../Group';
 import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Spinner',
     component: Spinner,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

@@ -37,7 +37,7 @@ export const Spinner = (_a) => {
     var { size: sizeParam, color: colorParam } = _a, rest = __rest(_a, ["size", "color"]);
     const { colors } = useTheme();
     const size = sizeParam || SPINNER_SIZE.MD;
-    const color = colors[colorParam || COLOR.PRIMARY];
+    const color = colors === null || colors === void 0 ? void 0 : colors[colorParam || COLOR.PRIMARY];
     return (_jsx("div", Object.assign({ "aria-label": SPINNER_LABEL, sx: {
             animation: `${spin} 1.4s linear 0s infinite normal none running;`,
             borderRadius: '50%',

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

@@ -0,0 +1,12 @@
+.spinner {
+  animation: spin 1.4s linear infinite;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SpinnerV2 } from '.';
+declare const meta: Meta<typeof SpinnerV2>;
+export default meta;
+type Story = StoryObj<typeof SpinnerV2>;
+export declare const Default: Story;
+export declare const CustomColor: Story;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { SPINNERV2_SIZE, SpinnerV2 } from '.';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/SpinnerV2',
+    component: SpinnerV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: SPINNERV2_SIZE.LG, label: 'Large' },
+    { size: SPINNERV2_SIZE.MD, label: 'Medium' },
+    { size: SPINNERV2_SIZE.SM, label: 'Small' },
+];
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.SM }, { children: size.label })), _jsx(SpinnerV2, { size: size.size })] })))) })),
+    args: {},
+};
+export const CustomColor = {
+    render: () => (_jsx(ColumnV2, { children: _jsx(SpinnerV2, { color: COLOR.SECONDARY }) })),
+    args: {
+        children: 'Heading',
+    },
+};

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { SPINNERV2_LABEL, SpinnerV2 } from '.';
+describe('Button', () => {
+    it('renders without throwing an error', () => {
+        const { getByLabelText } = render(_jsx(SpinnerV2, {}));
+        expect(getByLabelText(SPINNERV2_LABEL)).toBeInTheDocument();
+    });
+});

package/dist/components/elements/SpinnerV2/index.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { StyledElementPropsV2 } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export declare enum SPINNERV2_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export type SpinnerV2Props = StyledElementPropsV2<HTMLDivElement, {
+    size?: SPINNERV2_SIZE;
+    color?: COLOR;
+}>;
+export declare const SPINNERV2_LABEL = "Loading";
+export declare const SpinnerV2: React.FC<SpinnerV2Props>;

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

@@ -0,0 +1,35 @@
+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 { COLOR, colors } from '../../../theme/colors';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './SpinnerV2.module.css';
+export var SPINNERV2_SIZE;
+(function (SPINNERV2_SIZE) {
+    SPINNERV2_SIZE["SM"] = "sm";
+    SPINNERV2_SIZE["MD"] = "md";
+    SPINNERV2_SIZE["LG"] = "lg";
+})(SPINNERV2_SIZE || (SPINNERV2_SIZE = {}));
+const sizeLengthMap = {
+    [SPINNERV2_SIZE.SM]: '0.75rem',
+    [SPINNERV2_SIZE.MD]: '1.5rem',
+    [SPINNERV2_SIZE.LG]: '2.25rem',
+};
+export const SPINNERV2_LABEL = 'Loading';
+const typeSafeStyles = styles;
+export const SpinnerV2 = (_a) => {
+    var { size: sizeParam, color: colorParam, sx } = _a, rest = __rest(_a, ["size", "color", "sx"]);
+    const size = sizeParam || SPINNERV2_SIZE.MD;
+    const color = colors[colorParam || COLOR.PRIMARY];
+    const processedStyles = processSx(sx);
+    return (_jsx("div", Object.assign({ "aria-label": SPINNERV2_LABEL, className: typeSafeStyles.spinner, style: Object.assign(Object.assign({}, processedStyles), { height: `${sizeLengthMap[size]}`, width: `${sizeLengthMap[size]}`, borderWidth: `${size === SPINNERV2_SIZE.LG ? '6px' : '4px'}`, borderStyle: 'solid', borderRadius: '50%', borderColor: `${color} ${color} transparent` }) }, rest)));
+};

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

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { TabList } from './index';
 import { ExampleTabs } from './example';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/TabList',
     component: TabList,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 export const Default = {

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

@@ -2,10 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Table, TableColumn } from '.';
 import { SORT_DIRECTION, sortByKey } from '../../../utils/sortByKey';
 import { useState } from 'react';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Table',
     component: Table,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const data = [

package/dist/components/elements/{Fields/TextInput → TextInput}/TextInput.stories.js

@@ -2,14 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchIcon from '@mui/icons-material/Search';
 import { INPUT_SIZE, TextInput } from '.';
 import { useState } from 'react';
-import { Column } from '../../layout/Column';
-import { Group } from '../../Group';
-import { Heading, HEADING_SIZE } from '../../text/Heading';
-import { COLOR } from '../../../../theme/colors';
+import { Column } from '../layout/Column';
+import { Group } from '../Group';
+import { Heading, HEADING_SIZE } from '../Heading';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Fields/TextInput',
     component: TextInput,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

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

package/dist/components/elements/{Fields/TextInput → TextInput}/TextInput.test.js

@@ -1,9 +1,9 @@
 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 { TextInput, INPUT_SIZE } from '.';
 import { ThemeProvider } from 'theme-ui';
-import { theme } from '../../../../theme';
+import { theme } from '../../../theme';
 import '@testing-library/jest-dom';
 vi.mock('../../../providers/uniqueIds', () => ({
     useUniqueId: (prefix) => `${prefix}-mock-id`,

package/dist/components/elements/{Fields/TextInput → TextInput}/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
-import { StyledElementProps } from '../../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementProps } from '../../../theme';
 export declare enum INPUT_SIZE {
     SM = "sm",
     MD = "md",
@@ -28,7 +28,7 @@ export type TextInputProps = StyledElementProps<HTMLInputElement, {
     onChangeRaw?: (e: string | React.ChangeEvent) => void;
 }, string>;
 export declare const TextInput: React.ForwardRefExoticComponent<{
-    sx?: import("../../../../theme").StylesProp | undefined;
+    sx?: import("../../../theme").StylesProp | undefined;
     children?: string | undefined;
 } & Omit<React.HTMLAttributes<HTMLInputElement>, "children" | "onChange"> & {
     size?: INPUT_SIZE | undefined;

package/dist/components/elements/{Fields/TextInput → TextInput}/index.js

@@ -11,13 +11,13 @@ 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 { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../theme/typography';
-import { useTheme } from '../../../../theme';
-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';
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
+import { useTheme } from '../../../theme';
+import { Icon } from '../Icon';
+import { COLOR } from '../../../theme/colors';
+import { Label } from '../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";
@@ -50,6 +50,7 @@ const defaultHeight = {
     [INPUT_SIZE.LG]: '3rem',
 };
 export const TextInput = React.forwardRef((_a, ref) => {
+    var _b;
     var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled"]);
     const id = useUniqueId('text-input');
     const theme = useTheme();
@@ -111,7 +112,7 @@ export const TextInput = React.forwardRef((_a, ref) => {
                     color: inverted ? COLOR.EXTRA_LIGHT_GRAY : COLOR.ND_PROVOST_BLUE,
                     left: '0.5rem',
                     lineHeight: 1,
-                    zIndex: theme.zIndex.ELEVATED,
+                    zIndex: (_b = theme.zIndex) === null || _b === void 0 ? void 0 : _b.ELEVATED,
                     px: 1,
                     top: labelOffsetMap[size],
                 } }, { children: label })))] })));

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;
+}