@ndlib/component-library 1.0.22 → 1.0.24

package/dist/components/composites/CardV2/index.d.ts

@@ -35,6 +35,7 @@ export type CardV2Props = StyledElementPropsV2<HTMLDivElement, {
     containImage?: boolean;
     backgroundColor?: COLOR;
     shouldShowHoverStyle?: boolean;
+    className?: string;
     leftBadge?: React.ReactNode;
     rightBadge?: React.ReactNode;
 }, CardChildren>;

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

@@ -3,12 +3,13 @@ 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';
 import { KEY_CODES } from '../../../utils/misc';
 import * as styles from './CardV2.module.css';
+import clsx from 'clsx';
 export var CARDV2_LAYOUT;
 (function (CARDV2_LAYOUT) {
     CARDV2_LAYOUT["VERTICAL"] = "vertical";
@@ -49,7 +50,7 @@ const DateDisplay = ({ date: dateString }) => {
                     marginTop: '0.25rem',
                 } }, { children: MONTH_LABELS[date.getMonth()] }))] })));
 };
-export const CardV2 = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, leftBadge, rightBadge, shouldShowHoverStyle, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, inlineStyles, children, }) => {
+export const CardV2 = ({ size, displayDate, headline, image, alt, layout, onClick, raised, truncateHeadlineAfter, heading, headlineStyles, headingStyles, headingIcon, headingAction, backgroundColor, leftBadge, rightBadge, className, shouldShowHoverStyle, imageHeight: imageHeightProp, imageWidth: imageWidthProp, containImage, containerWidth, containerHeight, inlineStyles, children, }) => {
     const contentPaddingX = size === CARDV2_SIZE.SM ? 3 : 4;
     const isVertical = !layout || layout === CARDV2_LAYOUT.VERTICAL;
     const [objectFit, setObjectFit] = useState('scale-down');
@@ -73,13 +74,14 @@ export const CardV2 = ({ size, displayDate, headline, image, alt, layout, onClic
     const typography = size === CARDV2_SIZE.SM
         ? TYPOGRAPHY_TYPE.HEADLINE_SMALL
         : TYPOGRAPHY_TYPE.HEADLINE_MEDIUM;
+    const baseCardClass = onClick || shouldShowHoverStyle
+        ? typeSafeStyles.groupCardWrapperWithHover
+        : typeSafeStyles.groupCardWrapper;
     return (_jsxs(GroupV2, Object.assign({ type: headline || heading ? GROUPV2_TYPE.REGION : GROUPV2_TYPE.GROUP, role: onClick ? 'button' : 'group', onClick: onClick, onKeyDown: (e) => {
             if (onClick && e.key === KEY_CODES.ENTER) {
                 onClick();
             }
-        }, tabIndex: onClick ? 0 : undefined, className: onClick || shouldShowHoverStyle
-            ? typeSafeStyles.groupCardWrapperWithHover
-            : typeSafeStyles.groupCardWrapper, sx: Object.assign({ boxShadow: raised || heading ? BOX_SHADOW.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : '', flexDirection: layout === CARDV2_LAYOUT.HORIZONTAL ? 'row' : 'column' }, inlineStyles) }, { children: [leftBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.leftBadge }, { children: leftBadge }))), rightBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.rightBadge }, { children: rightBadge }))), image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
+        }, tabIndex: onClick ? 0 : undefined, className: clsx(baseCardClass, className), sx: Object.assign({ boxShadow: raised || heading ? BOX_SHADOW.NORMAL : undefined, width: !isVertical && '100%', backgroundColor: backgroundColor ? backgroundColor : '', flexDirection: layout === CARDV2_LAYOUT.HORIZONTAL ? 'row' : 'column' }, inlineStyles) }, { children: [leftBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.leftBadge }, { children: leftBadge }))), rightBadge && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.rightBadge }, { children: rightBadge }))), image && !containImage && (_jsx("img", { src: image, alt: alt, style: {
                     width: imageWidth,
                     height: imageHeight,
                 } })), image && containImage && (_jsx(BoxV2, Object.assign({ className: typeSafeStyles.containImageContainer, sx: {

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/ButtonV2/index.d.ts

@@ -24,6 +24,7 @@ export type ButtonV2Props = StyledElementPropsV2<HTMLButtonElement, {
     loading?: boolean;
     disabled?: boolean;
     disableFocusStyles?: boolean;
+    className?: string;
 }>;
 export declare const ButtonV2: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesPropV2 | undefined;
@@ -41,6 +42,7 @@ export declare const ButtonV2: React.ForwardRefExoticComponent<{
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
     disableFocusStyles?: boolean | undefined;
+    className?: string | undefined;
 } & {
     htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

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

@@ -21,6 +21,7 @@ import { processSx } from '../../../utils/processSx';
 import { useHover } from '../../../utils/hooks/useHover';
 import { useFocus } from '../../../utils/hooks/useFocus';
 import * as styles from './ButtonV2.module.css';
+import clsx from 'clsx';
 export var BUTTONV2_SIZE;
 (function (BUTTONV2_SIZE) {
     BUTTONV2_SIZE["SM"] = "sm";
@@ -55,7 +56,7 @@ export var BUTTONV2_TYPE;
 })(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"]);
+    var { size: sizeParam, type: typeParam, color, customColor, textColor: textColorParam, primaryIcon, leftIcon, rightIcon, disabled: disabledParam, children, sx, loading, disableFocusStyles, className } = _a, rest = __rest(_a, ["size", "type", "color", "customColor", "textColor", "primaryIcon", "leftIcon", "rightIcon", "disabled", "children", "sx", "loading", "disableFocusStyles", "className"]);
     const disabled = disabledParam || loading;
     const { flagInDevelopment } = useEnvironment();
     const { isHovered, anchorElementProps } = useHover();
@@ -126,7 +127,7 @@ export const ButtonV2 = React.forwardRef((_a, ref) => {
         : 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({
+    return (_jsxs("button", Object.assign({}, anchorElementProps, { ref: ref, tabIndex: disabled ? -1 : 0, disabled: disabled, className: clsx(typeSafeStyles.button, className), 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 }))] })));

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/CheckboxV2/index.d.ts

@@ -4,6 +4,7 @@ type CheckboxV2Props = StyledElementPropsV2<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
+    className?: string;
 }, string>;
 export declare const CheckboxV2: React.FC<CheckboxV2Props>;
 export {};

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

@@ -12,11 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { processSx } from '../../../utils/processSx';
 import * as styles from './CheckboxV2.module.css';
+import clsx from 'clsx';
 const typeSafeStyles = styles;
 export const CheckboxV2 = (_a) => {
-    var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
+    var { checked, onChange, disabled, className, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "className", "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)));
+        }, checked: checked, className: clsx(typeSafeStyles.checkbox, className), style: Object.assign({ cursor: disabled ? 'not-allowed' : 'pointer' }, processedStyles), disabled: disabled }, rest)));
 };

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/HeadingV2/index.d.ts

@@ -11,6 +11,7 @@ type HeaderV2Props = StyledElementPropsV2<HTMLSpanElement, {
     typography?: TYPOGRAPHY_TYPE;
     headlineStyles?: any;
     level?: number;
+    className?: string;
 }>;
 export declare enum HEADINGV2_SIZE {
     SM = "sm",

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

@@ -17,6 +17,7 @@ import { useEnvironment } from '../../providers/env';
 import { multiplyRemSize } from '../../../utils/misc';
 import { processSx } from '../../../utils/processSx';
 import * as styles from './HeadingV2.module.css';
+import clsx from 'clsx';
 export var HEADINGV2_SIZE;
 (function (HEADINGV2_SIZE) {
     HEADINGV2_SIZE["SM"] = "sm";
@@ -39,7 +40,7 @@ const LEVEL_TYPOGRAPHY_MAP = {
     6: TYPOGRAPHY_TYPE.HEADING_SMALL,
 };
 export const HeadingV2 = (_a) => {
-    var { sx, size, standalone, id, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "id", "underline", "underlineColor", "typography", "level"]);
+    var { sx, size, standalone, id, underline, underlineColor, typography: typographyProp, level: levelParam, className } = _a, rest = __rest(_a, ["sx", "size", "standalone", "id", "underline", "underlineColor", "typography", "level", "className"]);
     const { level: groupLevel, type, trackHeadingRendered } = useGroupV2();
     const { flagInDevelopment } = useEnvironment();
     const level = levelParam || groupLevel;
@@ -83,18 +84,18 @@ export const HeadingV2 = (_a) => {
     const headerProps = Object.assign({ id: id, role: 'heading', 'aria-level': level, style: Object.assign(Object.assign({ borderBottomWidth: underline ? '2px' : 0, borderBottomColor: underlineColor ? underlineColor : '', marginTop: topMargin }, processedTypography), processedStyles) }, rest);
     switch (level) {
         case 1:
-            return _jsx("h1", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h1", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
         case 2:
-            return _jsx("h2", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h2", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
         case 3:
-            return _jsx("h3", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h3", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
         case 4:
-            return _jsx("h4", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h4", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
         case 5:
-            return _jsx("h5", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h5", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
         case 6:
-            return _jsx("h6", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h6", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
         default:
-            return _jsx("h6", Object.assign({ className: typeSafeStyles.heading }, headerProps));
+            return (_jsx("h6", Object.assign({ className: clsx(typeSafeStyles.heading, className) }, headerProps)));
     }
 };

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/IconV2/index.d.ts

@@ -6,5 +6,6 @@ export type IconV2Props = StyledElementPropsV2<HTMLDivElement, {
     icon: React.FC<any>;
     size?: FONT_SIZE;
     color?: COLOR;
+    className?: string;
 }>;
 export declare const IconV2: React.FC<IconV2Props>;

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

@@ -15,16 +15,17 @@ import { COLOR, colors } from '../../../theme/colors';
 import { useEnvironment } from '../../providers/env';
 import { processSx } from '../../../utils/processSx';
 import * as styles from './IconV2.module.css';
+import clsx from 'clsx';
 const typeSafeStyles = styles;
 export const IconV2 = (_a) => {
-    var { icon, size, color, sx, onClick } = _a, rest = __rest(_a, ["icon", "size", "color", "sx", "onClick"]);
+    var { icon, size, color, className, sx, onClick } = _a, rest = __rest(_a, ["icon", "size", "color", "className", "sx", "onClick"]);
     const InnerComponent = icon;
     const processedStyles = processSx(Object.assign({ fontSize: size }, sx));
     const { flagInDevelopment } = useEnvironment();
     if (onClick && !rest['aria-label']) {
         flagInDevelopment('Icon component with onClick should have an aria-label and tabIndex={0}');
     }
-    return (_jsx("div", Object.assign({ tabIndex: onClick ? 0 : undefined, role: onClick ? 'button' : 'none', onClick: onClick, className: typeSafeStyles.iconWrapper, style: processedStyles }, rest, { children: React.createElement(InnerComponent, {
+    return (_jsx("div", Object.assign({ tabIndex: onClick ? 0 : undefined, role: onClick ? 'button' : 'none', onClick: onClick, className: clsx(typeSafeStyles.iconWrapper, className), style: processedStyles }, rest, { children: React.createElement(InnerComponent, {
             style: {
                 fontSize: 'inherit',
                 color: colors[color || COLOR.PRIMARY],

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/ListBoxV2/index.d.ts

@@ -3,6 +3,7 @@ import { StyledElementPropsV2 } from '../../../theme';
 import { BasicOption, RenderOption } from '../option';
 type ListBoxV2Props<Value extends Key, Option extends BasicOption<Value>> = StyledElementPropsV2<HTMLDivElement, {
     options: Option[];
+    className?: string;
     renderOption?: RenderOption<Value, Option>;
     selected?: Value;
     focused?: Value;
@@ -17,6 +18,7 @@ export declare const ListBoxV2: <Value extends React.Key = string, Option extend
     children?: React.ReactNode;
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onChange"> & {
     options: Option[];
+    className?: string | undefined;
     renderOption?: RenderOption<Value, Option> | undefined;
     selected?: Value | undefined;
     focused?: Value | undefined;

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

@@ -15,6 +15,7 @@ import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography'
 import { defaultRenderOption, getOptionId, } from '../option';
 import { processSx } from '../../../utils/processSx';
 import * as styles from './ListBoxV2.module.css';
+import clsx from 'clsx';
 const typeSafeStyles = styles;
 function ListBoxOption({ option, selected, focused, selectOption, renderOption, }) {
     return (_jsx("div", Object.assign({ id: getOptionId(option.value), "aria-selected": selected === option.value, role: "option", onClick: option.onClick, onMouseDown: () => selectOption && selectOption(option), className: typeSafeStyles.listBoxOption }, { children: renderOption({
@@ -24,11 +25,11 @@ function ListBoxOption({ option, selected, focused, selectOption, renderOption,
         }) }), option.value));
 }
 function ListBoxInnerV2(_a, ref) {
-    var { options, renderOption: renderOptionParam, selected, focused, selectOption, sx, style } = _a, rest = __rest(_a, ["options", "renderOption", "selected", "focused", "selectOption", "sx", "style"]);
+    var { options, renderOption: renderOptionParam, selected, focused, selectOption, className, sx, style } = _a, rest = __rest(_a, ["options", "renderOption", "selected", "focused", "selectOption", "className", "sx", "style"]);
     const renderOption = renderOptionParam || defaultRenderOption;
     const typography = getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM);
     const processedStyles = processSx(Object.assign(Object.assign({}, typography), sx));
-    return (_jsx("div", Object.assign({ role: "listbox", ref: ref, className: typeSafeStyles.listBox, style: Object.assign(Object.assign({}, style), processedStyles), onKeyDown: (e) => {
+    return (_jsx("div", Object.assign({ role: "listbox", ref: ref, className: clsx(typeSafeStyles.listBox, className), style: Object.assign(Object.assign({}, style), processedStyles), onKeyDown: (e) => {
             console.log(e);
         } }, rest, { children: options.map((option) => (_jsx(ListBoxOption, { option: option, selected: selected, focused: focused, selectOption: selectOption, renderOption: renderOption }, option.value))) })));
 }

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/ReadMoreV2/index.d.ts

@@ -9,4 +9,5 @@ export declare const ReadMoreV2: React.FC<StyledElementPropsV2<HTMLDivElement, {
     typography: TYPOGRAPHY_TYPE;
     lines: number;
     fixedHeight?: boolean;
+    className?: string;
 }, string>>;

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

@@ -18,6 +18,7 @@ import { multiplyRemSize } from '../../../utils/misc';
 import { useManualRerender } from '../../../utils/hooks/useManualRerender';
 import { processSx } from '../../../utils/processSx';
 import * as styles from './ReadMoreV2.module.css';
+import clsx from 'clsx';
 const typeSafeStyles = styles;
 const ReadMoreLinkV2 = (props) => {
     const bg = colors[props.bg || COLOR.BACKGROUND];
@@ -40,7 +41,7 @@ export const useLinesHeightV2 = (args) => {
 };
 export const ReadMoreV2 = (_a) => {
     var _b, _c;
-    var { typography, sx, role, lines, fixedHeight, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "children"]);
+    var { typography, sx, role, lines, fixedHeight, className, children } = _a, rest = __rest(_a, ["typography", "sx", "role", "lines", "fixedHeight", "className", "children"]);
     const ref = React.useRef(null);
     const [showEllipsis, setShowEllipsis] = useState(true);
     const forceRerender = useManualRerender();
@@ -77,5 +78,5 @@ export const ReadMoreV2 = (_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 || '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 })] })));
+    return (_jsxs("div", Object.assign({ role: role || 'region', ref: ref, className: clsx(typeSafeStyles.outerWrapper, className), 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/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.d.ts

@@ -13,6 +13,7 @@ type SelectV2Props<Value extends Key, Option extends BasicOption<Value>> = Style
     options: Option[];
     renderOption?: RenderOption<Value, Option>;
     renderOptionLabel?: RenderOptionLabel<Option>;
+    className?: string;
 }, 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 declare function SelectV2<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, className, sx, }: SelectV2Props<Value, Option>): import("react/jsx-runtime").JSX.Element;
 export {};

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';
@@ -35,7 +35,7 @@ const buttonSizeMap = {
 };
 const DEFAULT_WIDTH = '16rem';
 const typeSafeStyles = styles;
-export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, sx, }) {
+export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, inverted, renderOptionLabel: renderOptionLabelParam, className, sx, }) {
     const listboxId = useUniqueId('select-list-box');
     const inputId = useUniqueId('select-input');
     const { isHovered, anchorElementProps } = useHover();
@@ -130,7 +130,7 @@ export function SelectV2({ size: sizeParam, placeholder, leftIcon, value, label,
     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: {
+    return (_jsxs(BoxV2, Object.assign({}, anchorElementProps, { className: className, 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',

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/SpinnerV2/index.d.ts

@@ -9,6 +9,7 @@ export declare enum SPINNERV2_SIZE {
 export type SpinnerV2Props = StyledElementPropsV2<HTMLDivElement, {
     size?: SPINNERV2_SIZE;
     color?: COLOR;
+    className?: string;
 }>;
 export declare const SPINNERV2_LABEL = "Loading";
 export declare const SpinnerV2: React.FC<SpinnerV2Props>;

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

@@ -13,6 +13,7 @@ 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';
+import clsx from 'clsx';
 export var SPINNERV2_SIZE;
 (function (SPINNERV2_SIZE) {
     SPINNERV2_SIZE["SM"] = "sm";
@@ -27,9 +28,9 @@ const sizeLengthMap = {
 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"]);
+    var { size: sizeParam, color: colorParam, className, sx } = _a, rest = __rest(_a, ["size", "color", "className", "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)));
+    return (_jsx("div", Object.assign({ "aria-label": SPINNERV2_LABEL, className: clsx(typeSafeStyles.spinner, className), 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/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/components/elements/TextInputV2/index.d.ts

@@ -26,6 +26,7 @@ export type TextInputV2Props = StyledElementPropsV2<HTMLInputElement, {
     value: string;
     onChange?: (value: string) => void;
     onChangeRaw?: (e: string | React.ChangeEvent) => void;
+    className?: string;
 }, string>;
 export declare const TextInputV2: React.ForwardRefExoticComponent<{
     sx?: import("../../../theme").StylesPropV2 | undefined;
@@ -40,6 +41,7 @@ export declare const TextInputV2: React.ForwardRefExoticComponent<{
     value: string;
     onChange?: ((value: string) => void) | undefined;
     onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+    className?: string | undefined;
 } & {
     htmlFor?: string | undefined;
 } & React.RefAttributes<any>>;

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

@@ -21,6 +21,7 @@ import { useHover } from '../../../utils/hooks/useHover';
 import { useFocus } from '../../../utils/hooks/useFocus';
 import { processSx } from '../../../utils/processSx';
 import * as styles from './TextInputV2.module.css';
+import clsx from 'clsx';
 export var INPUTV2_SIZE;
 (function (INPUTV2_SIZE) {
     INPUTV2_SIZE["SM"] = "sm";
@@ -54,7 +55,7 @@ const defaultHeight = {
 };
 const typeSafeStyles = styles;
 export const TextInputV2 = React.forwardRef((_a, ref) => {
-    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"]);
+    var { value, label, onChange, onChangeRaw, onClick, inline, inverted, size: sizeParam, leftIcon, sx, disabled, className } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "inverted", "size", "leftIcon", "sx", "disabled", "className"]);
     const id = useUniqueId('text-input');
     const size = sizeParam || INPUTV2_SIZE.MD;
     const display = inline === false ? 'flex' : '';
@@ -72,7 +73,7 @@ export const TextInputV2 = React.forwardRef((_a, ref) => {
         };
     const appliedHoverStyles = isHovered ? focusStyles : {};
     const appliedFocusStyles = isFocused ? focusStyles : {};
-    return (_jsxs("div", Object.assign({}, anchorElementProps, { ref: ref, onClick: onClick, id: id, className: `${typeSafeStyles.wrapper} ${inverted ? typeSafeStyles.inverted : ''}`, style: Object.assign(Object.assign(Object.assign({ height,
+    return (_jsxs("div", Object.assign({}, anchorElementProps, { ref: ref, onClick: onClick, id: id, className: clsx(`${typeSafeStyles.wrapper} ${inverted ? typeSafeStyles.inverted : ''}`, className), style: Object.assign(Object.assign(Object.assign({ height,
             display, paddingLeft: paddingX, paddingRight: paddingX }, appliedHoverStyles), appliedFocusStyles), processedStyles) }, { children: [_jsx("fieldset", Object.assign({ className: `${typeSafeStyles.fieldset} ${inverted ? typeSafeStyles.inverted : ''}` }, { children: _jsx("legend", Object.assign({ className: typeSafeStyles.legend }, { children: label && (_jsx(LabelV2, Object.assign({ standalone: true, "aria-hidden": "true", sx: {
                             px: 1,
                             position: 'relative',

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.22",
+  "version": "1.0.24",
   "type": "module",
   "sideEffects": false,
   "files": [
@@ -92,6 +92,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.24.5",
+    "clsx": "^2.1.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.16.0",
     "react-markdown": "^8.0.7",