@ndlib/component-library 1.0.21 → 1.0.22

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
+import { PARAGRAPHV2_SIZE, ParagraphV2 } from '.';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ParagraphV2',
+    component: ParagraphV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const sizes = [
+    { size: PARAGRAPHV2_SIZE.LG, label: 'Large' },
+    { size: PARAGRAPHV2_SIZE.MD, label: 'Medium' },
+    { size: PARAGRAPHV2_SIZE.SM, label: 'Small' },
+];
+const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
+const p2 = 'Sed non lobortis mi, vitae dapibus arcu. Aenean at euismod arcu. Ut consectetur porttitor mattis. In eget vehicula augue. Ut at dolor posuere, tristique nisi finibus, posuere turpis. Etiam placerat, dui id lacinia volutpat, lorem turpis volutpat nisi, vel dapibus purus lorem at ante. Ut imperdiet enim nec arcu sagittis luctus.';
+export const Default = {
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(ParagraphV2, Object.assign({}, args, { size: size.size }, { children: content }))))] })))) })),
+    args: {
+        children: 'Heading',
+    },
+};
+export const LineClamp = {
+    render: (args) => (_jsx(ColumnV2, { children: sizes.map((size) => (_jsxs(GroupV2, Object.assign({ type: GROUPV2_TYPE.REGION }, { children: [_jsx(HeadingV2, Object.assign({ size: HEADINGV2_SIZE.LG, underline: true, sx: { color: COLOR.PRIMARY } }, { children: size.label })), [p1, p2].map((content) => (_jsx(ParagraphV2, Object.assign({}, args, { size: size.size, clampLines: 2 }, { children: content }))))] })))) })),
+    args: {
+        children: 'Heading',
+    },
+};

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

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

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/test';
+import { ParagraphV2 } from '.';
+describe('Paragraph', () => {
+    it('renders without an error', () => {
+        const { getByText } = render(_jsx(ParagraphV2, { children: "Foo" }));
+        expect(getByText('Foo')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { StyledElementPropsV2 } from '../../../theme';
+type ParagraphV2Props = StyledElementPropsV2<HTMLSpanElement, {
+    size?: PARAGRAPHV2_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
+    clampLines?: number;
+}>;
+export declare enum PARAGRAPHV2_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const ParagraphV2: React.FC<ParagraphV2Props>;
+export {};

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

@@ -0,0 +1,39 @@
+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 { fontStyles, getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../theme/typography';
+import { multiplyRemSize } from '../../../utils/misc';
+import { processSx } from '../../../utils/processSx';
+export var PARAGRAPHV2_SIZE;
+(function (PARAGRAPHV2_SIZE) {
+    PARAGRAPHV2_SIZE["SM"] = "sm";
+    PARAGRAPHV2_SIZE["MD"] = "md";
+    PARAGRAPHV2_SIZE["LG"] = "lg";
+})(PARAGRAPHV2_SIZE || (PARAGRAPHV2_SIZE = {}));
+const SIZE_TYPOGRAPHY_MAP = {
+    [PARAGRAPHV2_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
+    [PARAGRAPHV2_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
+    [PARAGRAPHV2_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+};
+export const ParagraphV2 = (_a) => {
+    var { size, typography: typographyParam, sx, clampLines } = _a, rest = __rest(_a, ["size", "typography", "sx", "clampLines"]);
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || PARAGRAPHV2_SIZE.MD];
+    const typographyStyles = getTypographyStyles(typography);
+    const processedStyles = processSx(Object.assign(Object.assign({}, typographyStyles), sx));
+    const marginHeightMultiple = fontStyles.lineHeights[typographyStyles.lineHeight] * 0.7;
+    const fontSize = fontStyles.fontSizes[typographyStyles.fontSize];
+    const topMargin = multiplyRemSize({
+        size: fontSize,
+        multiple: marginHeightMultiple,
+    });
+    return (_jsx("p", Object.assign({ style: Object.assign({ display: clampLines ? '-webkit-box' : undefined, WebkitLineClamp: clampLines ? String(clampLines) : undefined, WebkitBoxOrient: 'vertical', overflow: clampLines ? 'hidden' : undefined, marginTop: topMargin }, processedStyles) }, rest)));
+};

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

@@ -2,13 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchIcon from '@mui/icons-material/Search';
 import { PILL_SIZE, PILL_TYPE, Pill } from '.';
 import { GROUP_TYPE, Group } from '../Group';
-import { HEADING_SIZE, Heading } from '../text/Heading';
+import { HEADING_SIZE, Heading } from '../Heading';
 import { Column } from '../layout/Column';
 import { Row } from '../layout/Row';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/Pill',
     component: Pill,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

@@ -42,6 +42,7 @@ export var PILL_TYPE;
     PILL_TYPE["OUTLINE"] = "outline";
 })(PILL_TYPE || (PILL_TYPE = {}));
 export const Pill = React.forwardRef((_a, ref) => {
+    var _b;
     var { size: sizeParam, type: typeParam, color, icon, children, sx, onClick } = _a, rest = __rest(_a, ["size", "type", "color", "icon", "children", "sx", "onClick"]);
     const theme = useTheme();
     const [hover, setHover] = useState(false);
@@ -52,7 +53,7 @@ export const Pill = React.forwardRef((_a, ref) => {
     let hoverTextColor = undefined;
     let borderColor = COLOR.TRANSPARENT;
     const cursor = clickable ? 'pointer' : 'default';
-    const hoverShadow = theme.boxShadow.NORMAL;
+    const hoverShadow = (_b = theme.boxShadow) === null || _b === void 0 ? void 0 : _b.NORMAL;
     const hoverDecoration = undefined;
     const hoverTransform = 'scale(1.03)';
     const type = typeParam || PILL_TYPE.DEFAULT;

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Radio } 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/Radio',
     component: Radio,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const StatefulRadio = (props) => {

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

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

package/dist/components/elements/{Fields/Radio → Radio}/Radio.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, beforeEach } from 'vitest';
-import { Radio } from './';
-import { useTheme } from '../../../../theme';
-vi.mock('../../../../theme', () => ({
+import { Radio } from '.';
+import { useTheme } from '../../../theme';
+vi.mock('../../../theme', () => ({
     useTheme: vi.fn(),
 }));
 describe('Radio Component', () => {

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

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

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

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-import { BOX_SHADOW } from '../../../../theme/custom';
+import { BOX_SHADOW } from '../../../theme/custom';
 export const Radio = (_a) => {
     var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
     return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RadioGroup } 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/RadioGroup',
     component: RadioGroup,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const options = [

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

@@ -2,7 +2,7 @@ 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 './';
+import { RadioGroup } from '.';
 describe('RadioGroup', () => {
     const options = [
         { value: 'option1', label: 'Option 1' },

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

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

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

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Row } from '../../layout/Row';
-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 { Row } from '../layout/Row';
+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 { Radio } from '../Radio';
 export function RadioGroup(_a) {
     var { options, checked, onChange, columnStyles, rowStyles } = _a, rest = __rest(_a, ["options", "checked", "onChange", "columnStyles", "rowStyles"]);

package/dist/components/elements/{text/ReadMore → ReadMore}/ReadMore.stories.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ReadMore } from '.';
-import { Column } from '../../layout/Column';
-import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
-import { COLOR } from '../../../../theme/colors';
+import { Column } from '../layout/Column';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion1 } from '../../../utils/decorators/UIVersion1';
 const meta = {
     title: 'Elements/ReadMore',
     component: ReadMore,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';

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

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

package/dist/components/elements/{text/ReadMore → ReadMore}/ReadMore.test.js

@@ -1,9 +1,9 @@
 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';
+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 = {
@@ -16,17 +16,12 @@ describe('ReadMore Component', () => {
     });
     it('renders without crashing', () => {
         render(_jsx(ReadMore, Object.assign({}, defaultProps, { children: mockText })));
-        expect(screen.getByRole('paragraph')).toBeInTheDocument();
+        expect(screen.getByRole('region')).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 })));

package/dist/components/elements/{text/ReadMore → ReadMore}/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { StyledElementProps } from '../../../../theme';
-import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
 export declare const useLinesHeight: (args: {
     lines: number;
     typography: TYPOGRAPHY_TYPE;

package/dist/components/elements/{text/ReadMore → ReadMore}/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, { useState, useEffect } from 'react';
-import { useTheme } from '../../../../theme';
-import { COLOR, colors } from '../../../../theme/colors';
-import { getTypographyStyles, } from '../../../../theme/typography';
-import { useMediaQuery } from '../../../providers/media';
-import { multiplyRemSize } from '../../../../utils/misc';
-import { useManualRerender } from '../../../../utils/hooks/useManualRerender';
+import { useTheme } from '../../../theme';
+import { COLOR, colors } from '../../../theme/colors';
+import { getTypographyStyles } from '../../../theme/typography';
+import { useMediaQuery } from '../../providers/media';
+import { multiplyRemSize } from '../../../utils/misc';
+import { useManualRerender } from '../../../utils/hooks/useManualRerender';
 const ReadMoreLink = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
     const color = colors[props.color || COLOR.ND_BLUE_LIGHT];
@@ -34,11 +34,12 @@ const ReadMoreLink = (props) => {
             } }, { children: "Read More..." })) })));
 };
 export const useLinesHeight = (args) => {
+    var _a, _b;
     const theme = useTheme();
     const styles = getTypographyStyles(args.typography);
     const fontSize = styles.fontSize;
-    const fontSizeRem = theme.fontSizes[fontSize];
-    const linesHeight = theme.lineHeights[styles.lineHeight] * args.lines;
+    const fontSizeRem = ((_a = theme.fontSizes) === null || _a === void 0 ? void 0 : _a[fontSize]) || '1rem';
+    const linesHeight = (((_b = theme.lineHeights) === null || _b === void 0 ? void 0 : _b[styles.lineHeight]) || 1.625) * args.lines;
     return multiplyRemSize({
         size: fontSizeRem,
         multiple: linesHeight,
@@ -77,5 +78,5 @@ export const ReadMore = (_a) => {
         (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
         (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.clientHeight,
     ]);
-    return (_jsxs("div", Object.assign({ role: role || 'paragraph', ref: ref, sx: Object.assign(Object.assign({ maxHeight: wrapperHeight, overflow: 'hidden', position: 'relative', height: fixedHeight ? wrapperHeight : 'auto' }, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
+    return (_jsxs("div", Object.assign({ role: role || 'region', ref: ref, sx: Object.assign(Object.assign({ maxHeight: wrapperHeight, overflow: 'hidden', position: 'relative', height: fixedHeight ? wrapperHeight : 'auto' }, getTypographyStyles(typography)), sx) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLink, { bg: bg, color: color })] })));
 };

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

@@ -0,0 +1,19 @@
+.linkOuterWrapper {
+  white-space: nowrap;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding-left: 3rem;
+}
+
+.linkInnerWrapper {
+  transform: scale(0.9);
+  cursor: pointer;
+  color: var(--ndBlueLight)
+}
+
+.outerWrapper {
+  overflow: hidden;
+  position: relative;
+  height: auto;
+}

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

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

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ReadMoreV2 } from '.';
+import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { COLOR } from '../../../theme/colors';
+import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
+const meta = {
+    title: 'Elements/ReadMoreV2',
+    component: ReadMoreV2,
+    tags: ['autodocs'],
+    decorators: [UIVersion2],
+};
+export default meta;
+const p1 = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices venenatis purus at porta. Etiam congue sapien leo, sed malesuada justo commodo in. Nunc consequat, massa non cursus posuere, magna eros lacinia lectus, eget lobortis mi erat ut justo. Maecenas nisi mi, mollis sed ornare vitae, pharetra sed augue. Curabitur mollis orci risus, sed imperdiet nisi aliquet et. Ut non elit nec magna rhoncus maximus sit amet ut dui. Mauris sit amet eleifend lectus. Aliquam consectetur posuere libero eu ultricies. Etiam rutrum non orci nec vulputate. Sed vel accumsan diam. Cras aliquet eros eros, sit amet pharetra eros tincidunt ut. Vestibulum est erat, eleifend dapibus eros vel, elementum vehicula risus. Etiam blandit condimentum sodales. Donec non libero in orci aliquam egestas fringilla eget purus. Suspendisse pellentesque at ligula ut accumsan.';
+const p2 = 'Lorem ipsum dolor sit';
+export const Default = {
+    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p1 })) })),
+};
+export const NotTruncated = {
+    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, Object.assign({ sx: { width: '250px' }, lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM }, { children: p2 })) })),
+};
+export const CustomColor = {
+    render: () => (_jsx(ColumnV2, { children: _jsx(ReadMoreV2, Object.assign({ lines: 2, typography: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM, sx: {
+                color: COLOR.BACKGROUND,
+                bg: COLOR.PRIMARY,
+                width: '250px',
+            } }, { children: p1 })) })),
+};

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

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

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

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { ReadMoreV2 } from '.';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+import { render } from '../../../utils/test';
+describe('ReadMoreV2 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(ReadMoreV2, Object.assign({}, defaultProps, { children: mockText })));
+        expect(screen.getByRole('region')).toBeInTheDocument();
+    });
+    it('displays the correct text content', () => {
+        render(_jsx(ReadMoreV2, Object.assign({}, defaultProps, { children: mockText })));
+        expect(screen.getByText(mockText)).toBeInTheDocument();
+    });
+    it('does not show ellipsis if content fits within allotted space', () => {
+        const shortText = 'Short text';
+        render(_jsx(ReadMoreV2, Object.assign({}, defaultProps, { children: shortText })));
+        expect(screen.queryByText('Read More...')).not.toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyledElementPropsV2 } from '../../../theme';
+import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
+export declare const useLinesHeightV2: (args: {
+    lines: number;
+    typography: TYPOGRAPHY_TYPE;
+}) => string;
+export declare const ReadMoreV2: React.FC<StyledElementPropsV2<HTMLDivElement, {
+    typography: TYPOGRAPHY_TYPE;
+    lines: number;
+    fixedHeight?: boolean;
+}, string>>;

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

@@ -0,0 +1,81 @@
+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, { useState, useEffect } from 'react';
+import { COLOR, colors } from '../../../theme/colors';
+import { fontStyles, getTypographyStyles, } from '../../../theme/typography';
+import { useMediaQueryV2 } from '../../providers/mediaV2';
+import { multiplyRemSize } from '../../../utils/misc';
+import { useManualRerender } from '../../../utils/hooks/useManualRerender';
+import { processSx } from '../../../utils/processSx';
+import * as styles from './ReadMoreV2.module.css';
+const typeSafeStyles = styles;
+const ReadMoreLinkV2 = (props) => {
+    const bg = colors[props.bg || COLOR.BACKGROUND];
+    const color = props.color ? colors[props.color] : '';
+    return (_jsx("div", Object.assign({ className: typeSafeStyles.linkOuterWrapper, style: {
+            background: `linear-gradient(to right, ${bg}00, ${bg} 30%, ${bg} 100%)`,
+        } }, { children: _jsx("div", Object.assign({ className: typeSafeStyles.linkInnerWrapper, "aria-hidden": "true", style: {
+                color,
+            } }, { children: "Read More..." })) })));
+};
+export const useLinesHeightV2 = (args) => {
+    const styles = getTypographyStyles(args.typography);
+    const fontSize = styles.fontSize;
+    const fontSizeRem = fontStyles.fontSizes[fontSize];
+    const linesHeight = fontStyles.lineHeights[styles.lineHeight] * args.lines;
+    return multiplyRemSize({
+        size: fontSizeRem,
+        multiple: linesHeight,
+    });
+};
+export const ReadMoreV2 = (_a) => {
+    var _b, _c;
+    var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
+    const ref = React.useRef(null);
+    const [showEllipsis, setShowEllipsis] = useState(true);
+    const forceRerender = useManualRerender();
+    const wrapperHeight = useLinesHeightV2({ typography, lines });
+    const { screenSize } = useMediaQueryV2();
+    const { color: _color, bg: _bg } = sx || {};
+    const color = Array.isArray(_color) ? _color[0] : _color;
+    const bg = Array.isArray(_bg) ? _bg[0] : _bg;
+    const validColor = color && Object.values(COLOR).includes(color)
+        ? color
+        : undefined;
+    const validBg = bg && Object.values(COLOR).includes(bg) ? bg : undefined;
+    const typographyStyles = getTypographyStyles(typography);
+    const processedStyles = processSx(Object.assign(Object.assign({}, typographyStyles), sx));
+    useEffect(() => {
+        forceRerender({
+            delay: [100, 500, 2000],
+        });
+    }, []);
+    useEffect(() => {
+        if (ref.current) {
+            const isOverflowing = ref.current.scrollHeight > ref.current.clientHeight;
+            if (isOverflowing) {
+                setShowEllipsis(true);
+            }
+            else {
+                setShowEllipsis(false);
+            }
+        }
+    }, [
+        children,
+        wrapperHeight,
+        screenSize,
+        (_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.scrollHeight,
+        (_c = ref === null || ref === void 0 ? void 0 : ref.current) === null || _c === void 0 ? void 0 : _c.clientHeight,
+    ]);
+    return (_jsxs("div", Object.assign({ role: role || 'region', ref: ref, className: typeSafeStyles.outerWrapper, style: Object.assign(Object.assign({}, processedStyles), { maxHeight: wrapperHeight, height: fixedHeight ? wrapperHeight : '' }) }, rest, { children: [children, showEllipsis && _jsx(ReadMoreLinkV2, { bg: validBg, color: validColor })] })));
+};

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

@@ -3,14 +3,16 @@ import AppleIcon from '@mui/icons-material/Apple';
 import { INPUT_SIZE } from '../TextInput';
 import { Select } from './index';
 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/Select',
     component: Select,
     tags: ['autodocs'],
+    decorators: [UIVersion1],
 };
 export default meta;
 const sizes = [

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

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

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

@@ -1,7 +1,7 @@
 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 './';
+import { Select } from '.';
 describe('Select', () => {
     const options = [
         { value: 'option1', label: 'Option 1' },

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyledElementProps } from '../../../../theme';
+import { StyledElementProps } from '../../../theme';
 import { INPUT_SIZE } from '../TextInput';
 import { BasicOption, Key, RenderOption, RenderOptionLabel } from '../option';
 type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledElementProps<HTMLSelectElement, {

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

@@ -2,17 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/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 { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
 import { INPUT_SIZE, labelOffsetMap, labelTypographyMap } from '../TextInput';
-import { ListBox } from '../../ListBox';
-import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
+import { ListBox } from '../ListBox';
+import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../Button';
 import { defaultRenderOptionLabel, getOptionId, } from '../option';
-import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
-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';
+import { KEY_CODES, importedDefaultComponentShim } from '../../../utils/misc';
+import { COLOR } from '../../../theme/colors';
+import { Box } from '../layout/Box';
+import { Label } from '../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,