@ndlib/component-library 1.0.23 → 1.0.24

package/dist/components/composites/CardV2/index.js

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { HEADINGV2_SIZE, HeadingV2 } from '../../elements/HeadingV2';
 import { BOX_SHADOW } from '../../../theme';
 import { GROUPV2_TYPE, GroupV2 } from '../../elements/GroupV2';
-import { BoxV2 } from '../../elements/layoutV2/BoxV2';
+import { BoxV2 } from '../../elements/BoxV2';
 import { IconV2 } from '../../elements/IconV2';
 import { ColumnV2, FONT, FONT_SIZE, RowV2, TYPOGRAPHY_TYPE } from '../../..';
 import { COLOR } from '../../../theme/colors';

package/dist/components/composites/ModalV2/index.js

@@ -14,7 +14,7 @@ import _ReactModal from 'react-modal';
 import { importedDefaultComponentShim } from '../../../utils/misc';
 import { Z_INDEX } from '../../../theme';
 import { GROUPV2_TYPE, GroupV2 } from '../../elements/GroupV2';
-import { RowV2 } from '../../elements/layoutV2/RowV2';
+import { RowV2 } from '../../elements/RowV2';
 import { HEADINGV2_SIZE, HeadingV2 } from '../../elements/HeadingV2';
 import { BUTTONV2_TYPE, ButtonV2 } from '../../elements/ButtonV2';
 import { COLOR } from '../../../theme/colors';

package/dist/components/elements/{layoutV2 → BoxV2}/BoxV2.stories.d.ts

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

package/dist/components/elements/{layoutV2 → BoxV2}/BoxV2.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { BoxV2 as BoxV2Component } from './BoxV2';
+import { BoxV2 as BoxV2Component } from '.';
 import { COLOR } from '../../../theme/colors';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
 const meta = {

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

@@ -5,8 +5,8 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { BUTTONV2_SIZE, BUTTONV2_TYPE, ButtonV2, LinkButtonV2 } from '.';
 import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
 import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
-import { RowV2 } from '../layoutV2/RowV2';
+import { ColumnV2 } from '../ColumnV2';
+import { RowV2 } from '../RowV2';
 import { ParagraphV2 } from '../ParagraphV2';
 import { COLOR } from '../../../theme/colors';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckboxGroupV2 } from './index';
 import { useState } from 'react';
-import { RowV2 } from '../layoutV2/RowV2';
+import { RowV2 } from '../RowV2';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
 const meta = {
     title: 'Elements/Fields/CheckboxGroupV2',

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

@@ -11,12 +11,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { RowV2 } from '../layoutV2/RowV2';
+import { RowV2 } from '../RowV2';
 import { CheckboxV2 } from '../CheckboxV2';
 import { LabelV2 } from '../LabelV2';
 import { GroupV2 } from '../GroupV2';
 import { GROUPV2_TYPE } from '../GroupV2';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
 export function CheckboxGroupV2(_a) {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { CheckboxV2 } from '.';
 import { useState } from 'react';
-import { RowV2 } from '../layoutV2/RowV2';
+import { RowV2 } from '../RowV2';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
 const meta = {
     title: 'Elements/Fields/CheckboxV2',

package/dist/components/elements/{layoutV2/ColumnV2.d.ts → ColumnV2/index.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FlexHelperPropsV2 } from './RowV2';
+import { FlexHelperPropsV2 } from '../RowV2';
 export declare const ColumnV2: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesPropV2 | undefined;
     children?: React.ReactNode;

package/dist/components/elements/{layoutV2/ColumnV2.js → ColumnV2/index.js}

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { convertFlexHelperPropsV2 } from './RowV2';
+import { convertFlexHelperPropsV2 } from '../RowV2';
 import { processSx } from '../../../utils/processSx';
 export const ColumnV2 = React.forwardRef((_a, ref) => {
     var { sx, children } = _a, rest = __rest(_a, ["sx", "children"]);

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
 import { HEADINGV2_SIZE, HeadingV2 } from '.';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { COLOR } from '../../../theme/colors';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
 const meta = {

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
 import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { IconV2 } from '.';
 import AccessAlarmIcon from '@mui/icons-material/AccessAlarm';
 import { COLOR } from '../../../theme/colors';

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
 import { LABELV2_SIZE, LabelV2 } from '.';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';
 const meta = {
     title: 'Elements/LabelV2',

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

@@ -1,7 +1,7 @@
 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 { ColumnV2 } from '../ColumnV2';
 import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
 import { COLOR } from '../../../theme/colors';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ReadMoreV2 } from '.';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { TYPOGRAPHY_TYPE } from '../../../theme/typography';
 import { COLOR } from '../../../theme/colors';
 import { UIVersion2 } from '../../../utils/decorators/UIVersion2';

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

@@ -0,0 +1,47 @@
+.row {
+  display: flex;
+}
+
+.flexRow {
+  flex-direction: row;
+}
+
+.bp0 {
+  flex-direction: column;
+
+  @media screen and (min-width: 576px) {
+    flex-direction: row;
+  }
+}
+
+.bp1 {
+  flex-direction: column;
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+  }
+}
+
+.bp2 {
+  flex-direction: column;
+
+  @media screen and (min-width: 992px) {
+    flex-direction: row;
+  }
+}
+
+.bp3 {
+  flex-direction: column;
+
+  @media screen and (min-width: 1200px) {
+    flex-direction: row;
+  }
+}
+
+.bp4 {
+  flex-direction: column;
+
+  @media screen and (min-width: 1400px) {
+    flex-direction: row;
+  }
+}

package/dist/components/elements/{layoutV2/RowV2.d.ts → RowV2/index.d.ts}

@@ -14,6 +14,7 @@ export declare const RowV2: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & FlexHelperPropsV2 & {
     breakpoint?: number | undefined;
+    className?: string | undefined;
 } & {
     htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/dist/components/elements/{layoutV2/RowV2.js → RowV2/index.js}

@@ -12,6 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { processSx } from '../../../utils/processSx';
+import * as styles from './RowV2.module.css';
+import clsx from 'clsx';
+const typeSafeStyles = styles;
 export const convertFlexHelperPropsV2 = (props) => {
     const styleObject = {};
     if (props.grow) {
@@ -39,16 +42,15 @@ export const convertFlexHelperPropsV2 = (props) => {
     return styleObject;
 };
 export const RowV2 = React.forwardRef((_a, ref) => {
-    var { sx, children, breakpoint: breakpointParam } = _a, rest = __rest(_a, ["sx", "children", "breakpoint"]);
+    var { sx, children, breakpoint: breakpointParam, className } = _a, rest = __rest(_a, ["sx", "children", "breakpoint", "className"]);
     const flexStyles = convertFlexHelperPropsV2(rest);
-    let flexDirection = 'row';
-    if (breakpointParam !== undefined) {
-        flexDirection = [];
-        for (let i = 0; i <= breakpointParam; i++) {
-            flexDirection.push('column');
+    const processedStyles = processSx(sx);
+    const getBreakpointClass = (breakpoint) => {
+        if (breakpoint !== undefined && breakpoint >= 0 && breakpoint <= 4) {
+            return typeSafeStyles[`bp${breakpoint}`];
         }
-        flexDirection.push('row');
-    }
-    const processedStyles = processSx(Object.assign(Object.assign({}, sx), { flexDirection }));
-    return (_jsx("div", Object.assign({}, rest, { ref: ref, style: Object.assign(Object.assign(Object.assign({}, flexStyles), processedStyles), { display: 'flex' }) }, { children: children })));
+        return typeSafeStyles.flexRow;
+    };
+    const flexBreakpointClass = getBreakpointClass(breakpointParam);
+    return (_jsx("div", Object.assign({}, rest, { ref: ref, style: Object.assign(Object.assign({}, flexStyles), processedStyles), className: clsx(typeSafeStyles.row, flexBreakpointClass, className) }, { children: children })));
 });

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

@@ -3,7 +3,7 @@ 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 { ColumnV2 } from '../ColumnV2';
 import { GroupV2 } from '../GroupV2';
 import { HeadingV2, HEADINGV2_SIZE } from '../HeadingV2';
 import { COLOR } from '../../../theme/colors';

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

@@ -9,7 +9,7 @@ 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 { BoxV2 } from '../BoxV2';
 import { LabelV2 } from '../LabelV2';
 import { useUniqueId } from '../../providers/uniqueIds';
 import { BOX_SHADOW, Z_INDEX } from '../../../theme/custom';

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { GROUPV2_TYPE, GroupV2 } from '../GroupV2';
 import { HEADINGV2_SIZE, HeadingV2 } from '../HeadingV2';
 import { SPINNERV2_SIZE, SpinnerV2 } from '.';

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

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import SearchIcon from '@mui/icons-material/Search';
 import { INPUTV2_SIZE, TextInputV2 } from '.';
 import { useState } from 'react';
-import { ColumnV2 } from '../layoutV2/ColumnV2';
+import { ColumnV2 } from '../ColumnV2';
 import { GroupV2 } from '../GroupV2';
 import { HeadingV2, HEADINGV2_SIZE } from '../HeadingV2';
 import { COLOR } from '../../../theme/colors';

package/dist/index.d.ts

@@ -19,11 +19,11 @@ export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
 export { GroupV2, useGroupV2, GROUPV2_TYPE, } from './components/elements/GroupV2';
 export { Markdown } from './components/elements/Markdown';
 export { Box } from './components/elements/layout/Box';
-export { BoxV2 } from './components/elements/layoutV2/BoxV2';
+export { BoxV2 } from './components/elements/BoxV2';
 export { Column } from './components/elements/layout/Column';
-export { ColumnV2 } from './components/elements/layoutV2/ColumnV2';
+export { ColumnV2 } from './components/elements/ColumnV2';
 export { Row } from './components/elements/layout/Row';
-export { RowV2 } from './components/elements/layoutV2/RowV2';
+export { RowV2 } from './components/elements/RowV2';
 export { Link, LINK_SIZE } from './components/elements/Link';
 export { INPUT_SIZE, TextInput } from './components/elements/TextInput';
 export { INPUTV2_SIZE, TextInputV2 } from './components/elements/TextInputV2';

package/dist/index.js

@@ -18,11 +18,11 @@ export { Group, useGroup, GROUP_TYPE } from './components/elements/Group';
 export { GroupV2, useGroupV2, GROUPV2_TYPE, } from './components/elements/GroupV2';
 export { Markdown } from './components/elements/Markdown';
 export { Box } from './components/elements/layout/Box';
-export { BoxV2 } from './components/elements/layoutV2/BoxV2';
+export { BoxV2 } from './components/elements/BoxV2';
 export { Column } from './components/elements/layout/Column';
-export { ColumnV2 } from './components/elements/layoutV2/ColumnV2';
+export { ColumnV2 } from './components/elements/ColumnV2';
 export { Row } from './components/elements/layout/Row';
-export { RowV2 } from './components/elements/layoutV2/RowV2';
+export { RowV2 } from './components/elements/RowV2';
 export { Link, LINK_SIZE } from './components/elements/Link';
 export { INPUT_SIZE, TextInput } from './components/elements/TextInput';
 export { INPUTV2_SIZE, TextInputV2 } from './components/elements/TextInputV2';

package/dist/theme/typography.js

@@ -63,7 +63,7 @@ export const fontStyles = {
     fontSizes: fontSizeMap,
     lineHeights: {
         [LINE_HEIGHT.NORMAL]: 1.625,
-        [LINE_HEIGHT.CONDENSED]: 1.3,
+        [LINE_HEIGHT.CONDENSED]: 1.4,
         [LINE_HEIGHT.EXTRA_CONDENSED]: 1,
     },
     fontWeights: {

package/dist/utils/processSx.js

@@ -1,13 +1,6 @@
 import { colors, COLOR } from '../theme/colors';
 import { fontStyles, FONT, FONT_SIZE, TYPOGRAPHY_TYPE, FONT_WEIGHT, LINE_HEIGHT, } from '../theme/typography';
 import { getTypographyStyles } from '../theme/typography';
-const breakpoints = {
-    xs: '576px',
-    sm: '768px',
-    md: '992px',
-    lg: '1200px',
-    xl: '1400px',
-};
 const resolveMappedValue = (key, value) => {
     if (Object.values(COLOR).includes(value)) {
         return colors[value];
@@ -97,39 +90,11 @@ export const processSx = (sx) => {
     for (const key in sx) {
         let value = sx[key];
         value = resolveMappedValue(key, value);
-        if (Array.isArray(value)) {
-            styles[key] = value[0];
-            if (value[1]) {
-                styles[`@media (min-width: ${breakpoints.xs})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.xs})`]), { [key]: value[1] });
-            }
-            if (value[2]) {
-                styles[`@media (min-width: ${breakpoints.sm})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.sm})`]), { [key]: value[2] });
-            }
-            if (value[3]) {
-                styles[`@media (min-width: ${breakpoints.md})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.md})`]), { [key]: value[3] });
-            }
-            if (value[4]) {
-                styles[`@media (min-width: ${breakpoints.lg})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.lg})`]), { [key]: value[4] });
-            }
-            if (value[5]) {
-                styles[`@media (min-width: ${breakpoints.xl})`] = Object.assign(Object.assign({}, styles[`@media (min-width: ${breakpoints.xl})`]), { [key]: value[5] });
-            }
-        }
-        else {
-            Object.assign(styles, expandShorthandProperties(key, value));
-        }
+        Object.assign(styles, expandShorthandProperties(key, value));
     }
     const flattenedStyles = {};
     for (const key in styles) {
-        if (typeof styles[key] === 'object' && key.startsWith('@media')) {
-            const mediaStyles = styles[key];
-            for (const mediaKey in mediaStyles) {
-                flattenedStyles[key] = Object.assign(Object.assign({}, flattenedStyles[key]), { [mediaKey]: mediaStyles[mediaKey] });
-            }
-        }
-        else {
-            flattenedStyles[key] = styles[key];
-        }
+        flattenedStyles[key] = styles[key];
     }
     return flattenedStyles;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "type": "module",
   "sideEffects": false,
   "files": [