@ndlib/component-library 1.0.22 → 1.0.23

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

@@ -9,6 +9,7 @@ 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/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/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/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/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/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/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/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

@@ -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/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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndlib/component-library",
-  "version": "1.0.22",
+  "version": "1.0.23",
   "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",