@ndlib/component-library 1.0.20 → 1.0.22

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent } from '@testing-library/react';
+import { vi } from 'vitest';
+import { render } from '../../../utils/test';
+import { ButtonV2 } from '.';
+const MockPrimaryIcon = () => _jsx("div", { children: "Mock Primary Icon" });
+const MockLeftIcon = () => _jsx("div", { children: "Mock Left Icon" });
+const MockRightIcon = () => _jsx("div", { children: "Mock Right Icon" });
+describe('Button', () => {
+    const mockClickHandler = vi.fn();
+    afterEach(() => {
+        vi.resetAllMocks();
+    });
+    it('renders without throwing an error', () => {
+        const { getByText } = render(_jsx(ButtonV2, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+    it('renders icon component passed to it', () => {
+        const { getByText } = render(_jsxs(_Fragment, { children: [_jsx(ButtonV2, Object.assign({ leftIcon: MockLeftIcon }, { children: "Click Me" })), _jsx(ButtonV2, Object.assign({ primaryIcon: MockPrimaryIcon }, { children: "Click Me" })), _jsx(ButtonV2, Object.assign({ rightIcon: MockRightIcon }, { children: "Click Me" }))] }));
+        expect(getByText('Mock Primary Icon')).toBeDefined();
+        expect(getByText('Mock Left Icon')).toBeDefined();
+        expect(getByText('Mock Right Icon')).toBeDefined();
+    });
+    it('renders without icons if not passed', () => {
+        const { queryByText } = render(_jsx(ButtonV2, { 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(ButtonV2, { onClick: mockClickHandler }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).toHaveBeenCalledTimes(1);
+    });
+    it('does not respond to click handler when disabled', () => {
+        const { getByRole } = render(_jsx(ButtonV2, { onClick: mockClickHandler, disabled: true }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).not.toHaveBeenCalled();
+    });
+    it('does not respond to click handler when loading', () => {
+        const { getByRole } = render(_jsx(ButtonV2, { onClick: mockClickHandler, loading: true }));
+        fireEvent.click(getByRole('button'));
+        expect(mockClickHandler).not.toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+import { COLOR } from '../../../theme/colors';
+export declare enum BUTTONV2_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare enum BUTTONV2_TYPE {
+    DEFAULT = "default",
+    TEXT = "text",
+    OUTLINE = "outline"
+}
+export type ButtonV2Props = StyledElementPropsV2<HTMLButtonElement, {
+    size?: BUTTONV2_SIZE;
+    type?: BUTTONV2_TYPE;
+    color?: COLOR;
+    textColor?: COLOR;
+    customColor?: string;
+    primaryIcon?: React.FC<any>;
+    leftIcon?: React.FC<any>;
+    rightIcon?: React.FC<any>;
+    accessibleLabel?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    disableFocusStyles?: boolean;
+}>;
+export declare const ButtonV2: React.ForwardRefExoticComponent<{
+    sx?: import("../../../theme").StylesPropV2 | undefined;
+    children?: React.ReactNode;
+} & Omit<React.HTMLAttributes<HTMLButtonElement>, "children" | "onChange"> & {
+    size?: BUTTONV2_SIZE | undefined;
+    type?: BUTTONV2_TYPE | undefined;
+    color?: COLOR | undefined;
+    textColor?: COLOR | undefined;
+    customColor?: string | undefined;
+    primaryIcon?: React.FC<any> | undefined;
+    leftIcon?: React.FC<any> | undefined;
+    rightIcon?: React.FC<any> | undefined;
+    accessibleLabel?: string | undefined;
+    loading?: boolean | undefined;
+    disabled?: boolean | undefined;
+    disableFocusStyles?: boolean | undefined;
+} & {
+    htmlFor?: string | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+type LinkButtonV2Props = Omit<ButtonV2Props, 'type' | 'color' | 'textColor'>;
+export declare const LinkButtonV2: React.FC<LinkButtonV2Props>;
+export {};

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

@@ -0,0 +1,136 @@
+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 { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../theme/typography';
+import { IconV2 } from '../IconV2';
+import { useEnvironment } from '../../providers/env';
+import { SPINNERV2_SIZE, SpinnerV2 } from '../SpinnerV2';
+import { BOX_SHADOW } from '../../../theme/custom';
+import { processSx } from '../../../utils/processSx';
+import { useHover } from '../../../utils/hooks/useHover';
+import { useFocus } from '../../../utils/hooks/useFocus';
+import * as styles from './ButtonV2.module.css';
+export var BUTTONV2_SIZE;
+(function (BUTTONV2_SIZE) {
+    BUTTONV2_SIZE["SM"] = "sm";
+    BUTTONV2_SIZE["MD"] = "md";
+    BUTTONV2_SIZE["LG"] = "lg";
+})(BUTTONV2_SIZE || (BUTTONV2_SIZE = {}));
+const typographyMap = {
+    [BUTTONV2_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [BUTTONV2_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [BUTTONV2_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
+};
+const defaultPaddingX = {
+    [BUTTONV2_SIZE.SM]: '0.5rem',
+    [BUTTONV2_SIZE.MD]: '0.75rem',
+    [BUTTONV2_SIZE.LG]: '1rem',
+};
+const defaultHeight = {
+    [BUTTONV2_SIZE.SM]: '2rem',
+    [BUTTONV2_SIZE.MD]: '2.5rem',
+    [BUTTONV2_SIZE.LG]: '3rem',
+};
+const iconMargin = {
+    [BUTTONV2_SIZE.SM]: '0.25rem',
+    [BUTTONV2_SIZE.MD]: '0.5rem',
+    [BUTTONV2_SIZE.LG]: '0.5rem',
+};
+export var BUTTONV2_TYPE;
+(function (BUTTONV2_TYPE) {
+    BUTTONV2_TYPE["DEFAULT"] = "default";
+    BUTTONV2_TYPE["TEXT"] = "text";
+    BUTTONV2_TYPE["OUTLINE"] = "outline";
+})(BUTTONV2_TYPE || (BUTTONV2_TYPE = {}));
+const typeSafeStyles = styles;
+export const ButtonV2 = 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 { flagInDevelopment } = useEnvironment();
+    const { isHovered, anchorElementProps } = useHover();
+    const { isFocused } = useFocus();
+    let bg = COLOR.PRIMARY;
+    let borderColor = COLOR.TRANSPARENT;
+    let cursor = 'pointer';
+    let textColor = COLOR.BACKGROUND;
+    let hoverShadow = BOX_SHADOW.NORMAL;
+    let hoverDecoration = undefined;
+    let hoverTransform = 'scale(1.03)';
+    const isTextButton = typeParam === BUTTONV2_TYPE.TEXT;
+    const isIconButton = primaryIcon;
+    const type = typeParam || BUTTONV2_TYPE.DEFAULT;
+    const size = sizeParam || BUTTONV2_SIZE.MD;
+    const paddingX = isIconButton || isTextButton ? 0 : defaultPaddingX[size];
+    const height = isTextButton ? undefined : defaultHeight[size];
+    const width = primaryIcon ? height : undefined;
+    if (isIconButton && !rest['aria-label']) {
+        flagInDevelopment('Icon buttons should include aria-label prop for accessibility');
+    }
+    if (isIconButton) {
+        hoverTransform = 'scale(1.05)';
+    }
+    if (type === BUTTONV2_TYPE.DEFAULT) {
+        bg = color || COLOR.SECONDARY;
+        textColor = COLOR.BLACK;
+    }
+    if (type === BUTTONV2_TYPE.TEXT) {
+        bg = COLOR.TRANSPARENT;
+        textColor = color || COLOR.PRIMARY;
+        hoverShadow = undefined;
+        hoverDecoration = 'underline';
+    }
+    if (type === BUTTONV2_TYPE.OUTLINE) {
+        bg = COLOR.BACKGROUND;
+        textColor = color || COLOR.TEXT;
+        borderColor = textColor;
+    }
+    if (textColorParam) {
+        textColor = textColorParam;
+    }
+    if (disabled) {
+        cursor = 'not-allowed';
+        if (bg === COLOR.BACKGROUND || bg === COLOR.TRANSPARENT) {
+            textColor = COLOR.GRAY;
+        }
+        else {
+            bg = COLOR.GRAY;
+        }
+    }
+    const typography = typographyMap[size];
+    const typographyStyles = getTypographyStyles(typography);
+    let body = children;
+    if (primaryIcon) {
+        body = (_jsx(IconV2, { icon: primaryIcon, size: getIconSize(typographyStyles.fontSize), color: textColor }));
+    }
+    if (loading) {
+        body = (_jsxs("div", Object.assign({ className: typeSafeStyles.spinnerWrapper }, { children: [_jsx(SpinnerV2, { size: SPINNERV2_SIZE.SM, color: textColor, sx: { position: 'absolute' } }), _jsx("div", Object.assign({ style: { visibility: 'hidden' } }, { children: body }))] })));
+    }
+    const processedStyles = processSx(Object.assign(Object.assign({ bg: customColor ? customColor : bg }, typographyStyles), sx));
+    const hoverStyles = !disabled
+        ? {
+            boxShadow: hoverShadow,
+            transform: hoverTransform,
+            textDecoration: hoverDecoration,
+        }
+        : undefined;
+    const appliedHoverStyles = !disableFocusStyles && isHovered ? hoverStyles : {};
+    const appliedFocusStyles = !disableFocusStyles && isFocused ? hoverStyles : {};
+    return (_jsxs("button", Object.assign({}, anchorElementProps, { ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, className: typeSafeStyles.button, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ cursor }, processSx({
+            color: textColor,
+            borderColor,
+        })), { paddingLeft: paddingX, paddingRight: paddingX, width: width, height: height }), appliedHoverStyles), appliedFocusStyles), processedStyles) }, rest, { children: [leftIcon && (_jsx(IconV2, { icon: leftIcon, size: typographyStyles.fontSize, sx: { mr: iconMargin[size] }, color: textColor })), _jsx("div", Object.assign({ className: typeSafeStyles.bodyWrapper }, { children: body })), rightIcon && (_jsx(IconV2, { icon: rightIcon, size: typographyStyles.fontSize, sx: { ml: iconMargin[size] }, color: textColor }))] })));
+});
+export const LinkButtonV2 = (props) => {
+    return (_jsx(ButtonV2, Object.assign({}, props, { color: COLOR.ND_BLUE_BRIGHT, textColor: COLOR.WHITE })));
+};

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox } from './index';
 import { useState } from 'react';
-import { Row } from '../../layout/Row';
+import { Row } from '../layout/Row';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Fields/Checkbox',
     component: Checkbox,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const StatefulCheckbox = (props) => {

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, fireEvent } from '@testing-library/react';
-import { Checkbox } from './';
+import { Checkbox } from '.';
 import { vi } from 'vitest';
 describe('Checkbox', () => {
     it('renders unchecked checkbox', () => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyledElementProps } from '../../../../theme';
+import { StyledElementProps } from '../../../theme';
 type CheckboxProps = StyledElementProps<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;

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

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

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckboxGroup } from './index';
 import { useState } from 'react';
-import { Row } from '../../layout/Row';
+import { Row } from '../layout/Row';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Fields/CheckboxGroup',
     component: CheckboxGroup,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const options = [

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, fireEvent } from '@testing-library/react';
-import { CheckboxGroup } from './';
+import { CheckboxGroup } from '.';
 import { vi } from 'vitest';
 const mockOptions = [
     { value: 'option1', label: 'Option 1' },

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

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

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

@@ -11,14 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { Row } from '../../layout/Row';
+import { Row } from '../layout/Row';
 import { Checkbox } from '../Checkbox';
-import { Label } from '../../text/Label';
-import { Group } from '../../Group';
-import { GROUP_TYPE } from '../../Group';
-import { Column } from '../../layout/Column';
-import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
-import { COLOR } from '../../../../theme/colors';
+import { Label } from '../Label';
+import { Group } from '../Group';
+import { GROUP_TYPE } from '../Group';
+import { Column } from '../layout/Column';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
 export function CheckboxGroup(_a) {
     var { options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "rowStyles", "onChange"]);
     const columns = columnsProp || 1;

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

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

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckboxGroupV2 } from './index';
+import { useState } from 'react';
+import { RowV2 } from '../layoutV2/RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/CheckboxGroupV2',
+    component: CheckboxGroupV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const options = [
+    { value: 'orange', label: 'Orange', disabled: true },
+    { value: 'apple', label: 'Apple' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'pineapple', label: 'Pineapple' },
+];
+const StatefulCheckboxGroup = (props) => {
+    const [checked, setChecked] = useState(new Set(['orange']));
+    return (_jsx(CheckboxGroupV2, Object.assign({}, props, { checkedOptions: checked, options: props.options || options, onChange: setChecked })));
+};
+export const Default = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulCheckboxGroup, {}) })),
+};
+export const Columns = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulCheckboxGroup, { columns: 2 }) })),
+};
+export const Disabled = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulCheckboxGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
+};

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxGroupV2 } 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('CheckboxGroupV2', () => {
+    it('renders checkboxes with options correctly', () => {
+        const { getByText } = render(_jsx(CheckboxGroupV2, { 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(CheckboxGroupV2, { 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(CheckboxGroupV2, { 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/CheckboxGroupV2/index.d.ts

@@ -0,0 +1,17 @@
+import { StyledElementPropsV2, StylesPropV2 } from '../../../theme';
+import { Key } from '../option';
+export type Option<K extends Key = string> = {
+    value: K;
+    label: string;
+    disabled?: boolean;
+};
+type CheckboxGroupV2Props<K extends Key = string> = StyledElementPropsV2<HTMLDivElement, {
+    onChange: (value: Set<K>) => void;
+    options: Option<K>[];
+    checkedOptions?: Set<K>;
+    columnStyles?: StylesPropV2;
+    rowStyles?: StylesPropV2;
+    columns?: number;
+}, string>;
+export declare function CheckboxGroupV2<K extends Key>({ options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange, ...rest }: CheckboxGroupV2Props<K>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,50 @@
+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 { useMemo } from 'react';
+import { RowV2 } from '../layoutV2/RowV2';
+import { CheckboxV2 } from '../CheckboxV2';
+import { LabelV2 } from '../LabelV2';
+import { GroupV2 } from '../GroupV2';
+import { GROUPV2_TYPE } from '../GroupV2';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+export function CheckboxGroupV2(_a) {
+    var { options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "rowStyles", "onChange"]);
+    const columns = columnsProp || 1;
+    const optionsByColumn = useMemo(() => {
+        const optionsByColumn = [];
+        for (let i = 0; i < options.length; i++) {
+            const maxPerColumn = Math.ceil(options.length / columns);
+            const columnIndex = Math.floor(i / maxPerColumn);
+            if (optionsByColumn[columnIndex] === undefined) {
+                optionsByColumn[columnIndex] = [];
+            }
+            optionsByColumn[columnIndex].push(options[i]);
+        }
+        return optionsByColumn;
+    }, [options, columns]);
+    return (_jsx(RowV2, Object.assign({}, rest, { children: optionsByColumn.map((options, index) => (_jsx(ColumnV2, Object.assign({ grow: 1, sx: Object.assign({ mr: 4 }, columnStyles) }, { children: options.map((option) => (_jsx(GroupV2, Object.assign({ type: GROUPV2_TYPE.RAW }, { children: ({ labelTargetId }) => (_jsxs(RowV2, Object.assign({ sx: Object.assign({ mb: 2, alignItems: 'center' }, rowStyles) }, { children: [_jsx(CheckboxV2, { onChange: (checked) => {
+                                const updatedSet = new Set(checkedOptions || []);
+                                if (checked) {
+                                    updatedSet.add(option.value);
+                                }
+                                else {
+                                    updatedSet.delete(option.value);
+                                }
+                                onChange(updatedSet);
+                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, disabled: option.disabled, sx: {
+                                mr: 2,
+                                flexShrink: 0,
+                            } }), _jsx(LabelV2, Object.assign({ sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
+}

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

@@ -0,0 +1,5 @@
+.checkbox {
+  margin: 0;
+  height: 1rem;
+  width: 1rem;
+}

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

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

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

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckboxV2 } from '.';
+import { useState } from 'react';
+import { RowV2 } from '../layoutV2/RowV2';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/Fields/CheckboxV2',
+    component: CheckboxV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const StatefulCheckbox = (props) => {
+    const [checked, setChecked] = useState(false);
+    return _jsx(CheckboxV2, Object.assign({}, props, { checked: checked, onChange: setChecked }));
+};
+export const Default = {
+    render: () => (_jsx(RowV2, { children: _jsx(StatefulCheckbox, {}) })),
+};

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

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, fireEvent } from '@testing-library/react';
+import { CheckboxV2 } from '.';
+import { vi } from 'vitest';
+describe('CheckboxV2', () => {
+    it('renders unchecked checkbox', () => {
+        const { getByRole } = render(_jsx(CheckboxV2, { checked: false, onChange: () => { } }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toBeInTheDocument();
+        expect(checkbox).not.toBeChecked();
+    });
+    it('renders checked checkbox', () => {
+        const { getByRole } = render(_jsx(CheckboxV2, { 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(CheckboxV2, { 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(CheckboxV2, { 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(CheckboxV2, { checked: false, onChange: () => { } }));
+        const checkbox = getByRole('checkbox');
+        expect(checkbox).toHaveStyle('cursor: pointer;');
+    });
+});

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

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

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

@@ -0,0 +1,22 @@
+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 { processSx } from '../../../utils/processSx';
+import * as styles from './CheckboxV2.module.css';
+const typeSafeStyles = styles;
+export const CheckboxV2 = (_a) => {
+    var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
+    const processedStyles = processSx(sx);
+    return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
+            onChange(e.target.checked);
+        }, checked: checked, className: typeSafeStyles.checkbox, style: Object.assign({ cursor: disabled ? 'not-allowed' : 'pointer' }, processedStyles), disabled: disabled }, rest)));
+};

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { DatePicker } from '.';
-import { Box } from '../../layout/Box';
+import { Box } from '../layout/Box';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Fields/DatePicker',
     component: DatePicker,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const StatefulDatePicker = (props) => {

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

@@ -1,7 +1,7 @@
 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 './';
+import { DatePicker, areDatesEqual } from '.';
 describe('DatePicker Component', () => {
     it('renders correctly', () => {
         const mockDate = new Date(2023, 4, 23);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInputProps } from '../TextInput';
-import { BoxProps } from '../../layout/Box';
+import { BoxProps } from '../layout/Box';
 export declare const InputWrapper: React.ForwardRefExoticComponent<{
     onChange?: ((e: React.ChangeEvent) => void) | undefined;
     onClick?: ((e: React.MouseEvent) => void) | undefined;

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

@@ -15,8 +15,8 @@ import _ReactDatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import { TextInput } from '../TextInput';
 import _CalendarIcon from '@mui/icons-material/CalendarMonth';
-import { Box } from '../../layout/Box';
-import { importedDefaultComponentShim } from '../../../../utils/misc';
+import { Box } from '../layout/Box';
+import { importedDefaultComponentShim } from '../../../utils/misc';
 const CalendarIcon = importedDefaultComponentShim(_CalendarIcon);
 const ReactDatePicker = importedDefaultComponentShim(_ReactDatePicker);
 export const InputWrapper = React.forwardRef(({ onChange, value, children, onClick }, ref) => {