@ndlib/component-library 0.0.33 → 0.0.35

package/dist/components/composites/EmptyState/EmptyState.stories.d.ts

@@ -4,5 +4,6 @@ declare const meta: Meta<typeof EmptyState>;
 export default meta;
 type Story = StoryObj<typeof EmptyState>;
 export declare const Default: Story;
+export declare const Small: Story;
 export declare const CustomMessage: Story;
 export declare const CustomIcon: Story;

package/dist/components/composites/EmptyState/EmptyState.stories.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { EmptyState } from '.';
+import { EMPTY_STATE_SIZE, EmptyState } from '.';
 import NotInterestedIcon from '@mui/icons-material/NotInterested';
 const meta = {
     title: 'Composites/EmptyState',
@@ -11,6 +11,10 @@ export const Default = {
     render: () => _jsx(EmptyState, {}),
     args: {},
 };
+export const Small = {
+    render: () => _jsx(EmptyState, { size: EMPTY_STATE_SIZE.SM }),
+    args: {},
+};
 export const CustomMessage = {
     render: () => _jsx(EmptyState, { message: "Custom message" }),
     args: {},

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

@@ -1,7 +1,12 @@
 import { StyledElementProps } from '../../../theme';
 import React from 'react';
+export declare enum EMPTY_STATE_SIZE {
+    SM = "SM",
+    LG = "LG"
+}
 type EmptyStateProps = StyledElementProps<HTMLDivElement, {
     icon?: React.FC;
+    size?: EMPTY_STATE_SIZE;
     message?: string;
 }>;
 export declare const DEFAULT_MESSAGE = "No results found.";

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

@@ -19,8 +19,14 @@ import { Icon } from '../../elements/Icon';
 import { FONT_SIZE } from '../../../theme/typography';
 import { importedDefaultComponentShim } from '../../../utils/misc';
 const SearchOffIcon = importedDefaultComponentShim(_SearchOffIcon);
+export var EMPTY_STATE_SIZE;
+(function (EMPTY_STATE_SIZE) {
+    EMPTY_STATE_SIZE["SM"] = "SM";
+    EMPTY_STATE_SIZE["LG"] = "LG";
+})(EMPTY_STATE_SIZE || (EMPTY_STATE_SIZE = {}));
 export const DEFAULT_MESSAGE = 'No results found.';
 export const EmptyState = (_a) => {
-    var { icon, message, sx } = _a, rest = __rest(_a, ["icon", "message", "sx"]);
-    return (_jsxs(Column, Object.assign({ sx: Object.assign(Object.assign({}, sx), { width: '100%', alignItems: 'center', justifyContent: 'center', mt: 5 }) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: FONT_SIZE.XL, color: COLOR.GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
+    var { icon, message, size: sizeProp, sx } = _a, rest = __rest(_a, ["icon", "message", "size", "sx"]);
+    const size = sizeProp || EMPTY_STATE_SIZE.LG;
+    return (_jsxs(Column, Object.assign({ sx: Object.assign({ width: '100%', alignItems: 'center', justifyContent: 'center', mt: size === EMPTY_STATE_SIZE.SM ? 3 : 5 }, sx) }, rest, { children: [_jsx(Row, { children: _jsx(Icon, { icon: icon || SearchOffIcon, size: size === EMPTY_STATE_SIZE.SM ? FONT_SIZE.ML : FONT_SIZE.XL, color: COLOR.GRAY }) }), _jsx(Row, Object.assign({ sx: { mt: size === EMPTY_STATE_SIZE.SM ? 0 : 1 } }, { children: _jsx(Paragraph, Object.assign({ sx: { color: COLOR.GRAY }, size: size === EMPTY_STATE_SIZE.SM ? PARAGRAPH_SIZE.MD : PARAGRAPH_SIZE.LG }, { children: message || DEFAULT_MESSAGE })) }))] })));
 };

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

@@ -40,6 +40,8 @@ export declare const Button: React.ForwardRefExoticComponent<{
     accessibleLabel?: string | undefined;
     loading?: boolean | undefined;
     disabled?: boolean | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;
 type LinkButtonProps = Omit<ButtonProps, 'type' | 'color' | 'textColor'>;
 export declare const LinkButton: React.FC<LinkButtonProps>;

package/dist/components/elements/Fields/Select/Select.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof Select>;
 export default meta;
 type Story = StoryObj<typeof Select>;
 export declare const Default: Story;
+export declare const WithLabel: Story;

package/dist/components/elements/Fields/Select/Select.stories.js

@@ -28,5 +28,8 @@ const StatefulSelect = (props) => {
     return (_jsx(Select, Object.assign({ options: options }, props, { value: value, onSelectOption: setValue, placeholder: "Select A Fruit..." })));
 };
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 1 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 } })] }))) })),
+};
+export const WithLabel = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulSelect, { size: size.size, leftIcon: AppleIcon, sx: { mt: 2 }, label: "Fruit" })] }))) })),
 };

package/dist/components/elements/Fields/Select/index.d.ts

@@ -7,10 +7,11 @@ type SelectProps<Value extends Key, Option extends BasicOption<Value>> = StyledE
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     value: Value;
+    label?: string;
     onSelectOption: (value: Value) => void;
     options: Option[];
     renderOption: RenderOption<Value, Option>;
     renderOptionLabel: RenderOptionLabel<Option>;
 }, string>;
-export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
+export declare function Select<Value extends Key, Option extends BasicOption<Value>>({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }: SelectProps<Value, Option>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/elements/Fields/Select/index.js

@@ -1,16 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import _ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
 import { useFloating, size as sizeMiddleware, offset, autoPlacement, } from '@floating-ui/react';
 import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
 import { useTheme } from '../../../../theme';
-import { INPUT_SIZE } from '../TextInput';
+import { INPUT_SIZE, labelOffsetMap, labelTypographyMap } from '../TextInput';
 import { ListBox } from '../../ListBox';
 import { BUTTON_SIZE, BUTTON_TYPE, Button } from '../../Button';
 import { defaultRenderOptionLabel, getOptionId, } from '../option';
 import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
 import { KEY_CODES, importedDefaultComponentShim } from '../../../../utils/misc';
 import { COLOR } from '../../../../theme/colors';
+import { Box } from '../../layout/Box';
+import { Label } from '../../text/Label';
 const ArrowDropDownIcon = importedDefaultComponentShim(_ArrowDropDownIcon);
 const typographyMap = {
     [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
@@ -18,7 +20,7 @@ const typographyMap = {
     [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
 const defaultHeight = {
-    [INPUT_SIZE.SM]: '2rem',
+    [INPUT_SIZE.SM]: '2.25rem',
     [INPUT_SIZE.MD]: '2.5rem',
     [INPUT_SIZE.LG]: '3rem',
 };
@@ -28,9 +30,10 @@ const buttonSizeMap = {
     [INPUT_SIZE.LG]: BUTTON_SIZE.LG,
 };
 const DEFAULT_WIDTH = '16rem';
-export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
+export function Select({ size: sizeParam, placeholder, leftIcon, value, label, onSelectOption, options, renderOption, renderOptionLabel: renderOptionLabelParam, sx, }) {
     const theme = useTheme();
     const listboxId = useUniqueHtmlId('select-list-box');
+    const inputId = useUniqueHtmlId('select-input');
     const [isOpen, setIsOpen] = useState(false);
     const [stagedOptionValue, setStagedOptionValue] = useState();
     const currentOption = useMemo(() => {
@@ -113,7 +116,16 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
     const renderOptionLabel = renderOptionLabelParam || defaultRenderOptionLabel;
-    return (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ ref: refs.setReference, 
+    return (_jsxs(Box, Object.assign({ sx: { position: 'relative' } }, { children: [_jsx(Label, Object.assign({ htmlFor: inputId, typography: labelTypographyMap[size], sx: {
+                    position: 'absolute',
+                    color: COLOR.ND_PROVOST_BLUE,
+                    backgroundColor: COLOR.WHITE,
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: theme.zIndex.LABEL,
+                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    top: labelOffsetMap[size],
+                } }, { children: label })), _jsx(Button, Object.assign({ ref: refs.setReference, 
                 // A11y attributes
                 role: "combobox", "aria-controls": listboxId, "aria-expanded": isOpen, "aria-autocomplete": "none", "aria-activedescendant": isOpen && stagedOptionValue
                     ? getOptionId(stagedOptionValue)
@@ -133,5 +145,7 @@ export function Select({ size: sizeParam, placeholder, leftIcon, value, onSelect
                     } }, typographyStyles), sx), leftIcon: leftIcon, rightIcon: ArrowDropDownIcon }, { children: currentOption ? renderOptionLabel(currentOption) : placeholder })), isOpen && (_jsx(ListBox, { id: listboxId, options: options, selected: value, focused: stagedOptionValue, selectOption: (option) => {
                     onSelectOption && onSelectOption(option.value);
                     close();
-                }, ref: refs.setFloating, renderOption: renderOption, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] }));
+                }, ref: refs.setFloating, renderOption: renderOption, sx: {
+                    zIndex: theme.zIndex.DROPDOWN,
+                }, style: Object.assign(Object.assign({ minWidth: dropdownMinWidth }, floatingStyles), { zIndex: 1 }) }))] })));
 }

package/dist/components/elements/Fields/TextInput/TextInput.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof TextInput>;
 export default meta;
 type Story = StoryObj<typeof TextInput>;
 export declare const Default: Story;
+export declare const WithLabel: Story;

package/dist/components/elements/Fields/TextInput/TextInput.stories.js

@@ -18,8 +18,11 @@ const sizes = [
 ];
 const StatefulInput = (props) => {
     const [value, setValue] = useState('');
-    return (_jsx(TextInput, Object.assign({ value: value, onChange: setValue, placeholder: "test" }, props)));
+    return _jsx(TextInput, Object.assign({ value: value, onChange: setValue }, props));
 };
 export const Default = {
-    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 1 } })] }))) })),
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, placeholder: "Placeholder", sx: { mt: 2 } })] }))) })),
+};
+export const WithLabel = {
+    render: () => (_jsx(Column, { children: sizes.map((size) => (_jsxs(Group, { children: [_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, { children: size.label })), _jsx(StatefulInput, { size: size.size, leftIcon: SearchIcon, label: "Search", sx: { mt: 2 } })] }))) })),
 };

package/dist/components/elements/Fields/TextInput/index.d.ts

@@ -1,15 +1,27 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';
 export declare enum INPUT_SIZE {
     SM = "sm",
     MD = "md",
     LG = "lg"
 }
+export declare const labelTypographyMap: {
+    sm: TYPOGRAPHY_TYPE;
+    md: TYPOGRAPHY_TYPE;
+    lg: TYPOGRAPHY_TYPE;
+};
+export declare const labelOffsetMap: {
+    sm: string;
+    md: string;
+    lg: string;
+};
 export type TextInputProps = StyledElementProps<HTMLInputElement, {
     size?: INPUT_SIZE;
     leftIcon?: React.FC<any>;
     inline?: boolean;
+    label?: string;
     value: string;
     onChange?: (value: string) => void;
     onChangeRaw?: (e: string | React.ChangeEvent) => void;
@@ -21,7 +33,10 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: INPUT_SIZE | undefined;
     leftIcon?: React.FC<any> | undefined;
     inline?: boolean | undefined;
+    label?: string | undefined;
     value: string;
     onChange?: ((value: string) => void) | undefined;
     onChangeRaw?: ((e: string | React.ChangeEvent) => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & React.RefAttributes<any>>;

package/dist/components/elements/Fields/TextInput/index.js

@@ -16,6 +16,8 @@ import { TYPOGRAPHY_TYPE, getIconSize, getTypographyStyles, } from '../../../../
 import { useTheme } from '../../../../theme';
 import { Icon } from '../../Icon';
 import { COLOR } from '../../../../theme/colors';
+import { Label } from '../../text/Label';
+import { useUniqueHtmlId } from '../../../../utils/hooks/useUniqueHtmlId';
 export var INPUT_SIZE;
 (function (INPUT_SIZE) {
     INPUT_SIZE["SM"] = "sm";
@@ -27,18 +29,29 @@ const typographyMap = {
     [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
     [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
+export const labelTypographyMap = {
+    [INPUT_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUT_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [INPUT_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+};
+export const labelOffsetMap = {
+    [INPUT_SIZE.SM]: '-0.375rem',
+    [INPUT_SIZE.MD]: '-0.45rem',
+    [INPUT_SIZE.LG]: '-0.5rem',
+};
 const defaultPaddingX = {
     [INPUT_SIZE.SM]: 2,
     [INPUT_SIZE.MD]: 3,
     [INPUT_SIZE.LG]: 3,
 };
 const defaultHeight = {
-    [INPUT_SIZE.SM]: '2rem',
+    [INPUT_SIZE.SM]: '2.25rem',
     [INPUT_SIZE.MD]: '2.5rem',
     [INPUT_SIZE.LG]: '3rem',
 };
 export const TextInput = React.forwardRef((_a, ref) => {
-    var { value, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
+    var { value, label, onChange, onChangeRaw, onClick, inline, size: sizeParam, leftIcon, sx } = _a, rest = __rest(_a, ["value", "label", "onChange", "onChangeRaw", "onClick", "inline", "size", "leftIcon", "sx"]);
+    const id = useUniqueHtmlId('text-input');
     const theme = useTheme();
     const size = sizeParam || INPUT_SIZE.MD;
     const display = inline === false ? 'flex' : 'inline-flex';
@@ -46,8 +59,8 @@ export const TextInput = React.forwardRef((_a, ref) => {
     const height = defaultHeight[size];
     const typography = typographyMap[size];
     const typographyStyles = getTypographyStyles(typography);
-    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, sx: Object.assign(Object.assign({ height,
-            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', alignItems: 'center', ':hover': {
+    return (_jsxs("div", Object.assign({ ref: ref, onClick: onClick, id: id, sx: Object.assign(Object.assign({ height,
+            display, px: paddingX, border: 'solid 1px', borderColor: COLOR.GRAY, borderRadius: '4px', flexDirection: 'row', position: 'relative', alignItems: 'center', ':hover': {
                 boxShadow: theme.boxShadow.NORMAL,
             }, ':focus': {
                 boxShadow: theme.boxShadow.NORMAL,
@@ -57,7 +70,16 @@ export const TextInput = React.forwardRef((_a, ref) => {
                 } })), _jsx("input", Object.assign({ value: value, onChange: (event) => {
                     onChange && onChange(event.target.value);
                     onChangeRaw && onChangeRaw(event);
-                }, sx: Object.assign(Object.assign({ px: 0, py: 0, border: 'none' }, typographyStyles), { ':focus': {
+                }, sx: Object.assign(Object.assign({ px: 0, py: 0, width: '100%', border: 'none' }, typographyStyles), { ':focus': {
                         outline: 'none',
-                    } }) }, rest))] })));
+                    } }) }, rest)), label && (_jsx(Label, Object.assign({ htmlFor: id, typography: labelTypographyMap[size], sx: {
+                    position: 'absolute',
+                    color: COLOR.ND_PROVOST_BLUE,
+                    backgroundColor: COLOR.WHITE,
+                    left: '0.5rem',
+                    lineHeight: 1,
+                    zIndex: theme.zIndex.LABEL,
+                    px: size === INPUT_SIZE.SM ? 1 : 2,
+                    top: labelOffsetMap[size],
+                } }, { children: label })))] })));
 });

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

@@ -13,10 +13,20 @@ import { jsx as _jsx } from "theme-ui/jsx-runtime";
 /** @jsxImportSource theme-ui */
 import React from 'react';
 import { COLOR, colors } from '../../../theme/colors';
+import { useEnvironment } from '../../providers/env';
 export const Icon = (_a) => {
-    var { icon, size, color, sx } = _a, rest = __rest(_a, ["icon", "size", "color", "sx"]);
+    var { icon, size, color, sx, onClick } = _a, rest = __rest(_a, ["icon", "size", "color", "sx", "onClick"]);
     const InnerComponent = icon;
-    return (_jsx("div", Object.assign({}, rest, { sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }) }, { children: React.createElement(InnerComponent, {
+    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', sx: Object.assign(Object.assign({}, sx), { fontSize: size, display: 'flex', alignItems: 'center', justifyContent: 'center', ':hover': onClick
+                ? {
+                    cursor: 'pointer',
+                    transform: 'scale(1.05)',
+                }
+                : {} }) }, rest, { children: React.createElement(InnerComponent, {
             fontSize: 'inherit',
             style: {
                 color: colors[color || COLOR.PRIMARY],

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

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const Sizes: Story;
 export declare const Ordered: Story;
 export declare const CustomIcon: Story;
+export declare const CustomIconPerItem: Story;

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
 import { LIST_SIZE, List, ListItem } from './index';
 import { Row } from '../layout/Row';
 import { Column } from '../layout/Column';
 import { HEADING_SIZE, Heading } from '../text/Heading';
 import { GROUP_TYPE, Group } from '../Group';
 import { COLOR } from '../../..';
+import { FONT_SIZE } from '../../../theme/typography';
 const meta = {
     title: 'Elements/List',
     component: List,
@@ -29,3 +32,6 @@ export const Ordered = {
 export const CustomIcon = {
     render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ icon: ChevronRightIcon, iconColor: COLOR.PRIMARY }, { children: [_jsx(ListItem, Object.assign({ index: 0 }, { children: "List Item 1" })), _jsx(ListItem, Object.assign({ index: 1 }, { children: "List Item 2" })), _jsx(ListItem, Object.assign({ index: 2 }, { children: "List Item 3" }))] })) })),
 };
+export const CustomIconPerItem = {
+    render: () => (_jsx(Row, { children: _jsxs(List, Object.assign({ iconSize: FONT_SIZE.ML }, { children: [_jsx(ListItem, Object.assign({ index: 0, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Unfavorite" }, { children: "Favorite 1" })), _jsx(ListItem, Object.assign({ index: 1, icon: BookmarkIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Favorited 2" })), _jsx(ListItem, Object.assign({ index: 2, icon: BookmarkBorderIcon, onIconClick: () => { }, iconLabel: "Favorite" }, { children: "Not Favorited" }))] })) })),
+};

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

@@ -2,11 +2,13 @@
 import React from 'react';
 import { StyledElementProps } from '../../../theme';
 import { COLOR } from '../../..';
+import { FONT_SIZE } from '../../../theme/typography';
 type ListProps = StyledElementProps<HTMLUListElement, {
     ordered?: boolean;
     size?: LIST_SIZE;
     icon?: React.FC<any>;
     iconColor?: COLOR;
+    iconSize?: FONT_SIZE;
 }>;
 export declare enum LIST_SIZE {
     SM = "sm",
@@ -16,6 +18,11 @@ export declare enum LIST_SIZE {
 export declare const List: React.FC<ListProps>;
 type ListItemProps = StyledElementProps<HTMLLIElement, {
     index: number;
+    icon?: React.FC<any>;
+    iconSize?: FONT_SIZE;
+    iconColor?: COLOR;
+    iconLabel?: string;
+    onIconClick?: () => void;
 }>;
 export declare const ListItem: React.FC<ListItemProps>;
 export {};

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

@@ -20,6 +20,9 @@ import { COLOR, Label, TYPOGRAPHY_TYPE } from '../../..';
 import { FONT_SIZE, getTypographyStyles } from '../../../theme/typography';
 import { Icon } from '../Icon';
 import { importedDefaultComponentShim } from '../../../utils/misc';
+import { useLinesHeight } from '../text/ReadMore';
+import { Column } from '../layout/Column';
+import { useEnvironment } from '../../providers/env';
 const CircleIcon = importedDefaultComponentShim(_CircleIcon);
 const CircleOutlinedIcon = importedDefaultComponentShim(_CircleOutlinedIcon);
 const SquareIcon = importedDefaultComponentShim(_SquareIcon);
@@ -35,6 +38,11 @@ const marginSizeMap = {
     [LIST_SIZE.MD]: 3,
     [LIST_SIZE.LG]: 4,
 };
+const iconSizeMap = {
+    [LIST_SIZE.SM]: FONT_SIZE.XXS,
+    [LIST_SIZE.MD]: FONT_SIZE.XXS,
+    [LIST_SIZE.LG]: FONT_SIZE.XS,
+};
 const defaultIcons = [
     CircleIcon,
     CircleOutlinedIcon,
@@ -42,39 +50,53 @@ const defaultIcons = [
     SquareOutlinedIcon,
 ];
 const sizeTypographyMap = {
-    [LIST_SIZE.SM]: TYPOGRAPHY_TYPE.PARAGRAPH_SMALL,
-    [LIST_SIZE.MD]: TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM,
-    [LIST_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
+    [LIST_SIZE.SM]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_SMALL,
+    [LIST_SIZE.MD]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM,
+    [LIST_SIZE.LG]: TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE,
 };
 const ListConfigContext = React.createContext({
     size: LIST_SIZE.MD,
     ordered: false,
     icon: CircleIcon,
     iconColor: COLOR.TEXT,
+    iconSize: undefined,
     depth: -1,
 });
 const useListConfig = () => React.useContext(ListConfigContext);
-export const List = ({ sx, size, ordered, icon, iconColor, children, }) => {
-    const { depth: parentDepth, size: parentSize, iconColor: parentIconColor, } = useListConfig();
+export const List = ({ sx, size: sizeParam, ordered, icon, iconSize: iconSizeParam, iconColor: iconColorParam, children, }) => {
+    const { depth: parentDepth, size: parentSize, iconColor: parentIconColor, iconSize: parentIconSize, } = useListConfig();
     const depth = parentDepth + 1;
     const defaultStyles = Object.assign({ listStyleType: 'none' }, getTypographyStyles());
     const defaultIcon = defaultIcons[depth] || CircleIcon;
+    const size = sizeParam || parentSize || LIST_SIZE.MD;
+    const iconSize = iconSizeParam || parentIconSize || iconSizeMap[size];
+    const iconColor = iconColorParam || parentIconColor || COLOR.TEXT;
     return (_jsx(ListConfigContext.Provider, Object.assign({ value: {
-            size: size || parentSize || LIST_SIZE.MD,
+            size,
             icon: icon || defaultIcon,
-            iconColor: iconColor || parentIconColor || COLOR.TEXT,
+            iconColor,
+            iconSize,
             ordered: ordered || false,
             depth,
         } }, { children: ordered ? (_jsx("ul", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) : (_jsx("ol", Object.assign({ sx: Object.assign(Object.assign({}, defaultStyles), sx) }, { children: children }))) })));
 };
 export const ListItem = (_a) => {
-    var { index, sx, children } = _a, rest = __rest(_a, ["index", "sx", "children"]);
-    const { ordered, icon, iconColor, size, depth } = useListConfig();
+    var { index, sx, icon: iconParam, iconSize: iconSizeParam, iconColor: iconColorParam, onIconClick, onClick, children, iconLabel } = _a, rest = __rest(_a, ["index", "sx", "icon", "iconSize", "iconColor", "onIconClick", "onClick", "children", "iconLabel"]);
+    const { ordered, icon: listIcon, iconColor: listIconColor, iconSize: listIconSize, size, depth, } = useListConfig();
+    const { flagInDevelopment } = useEnvironment();
+    if (onIconClick && !iconLabel) {
+        flagInDevelopment('ListItem component with onIconClick should have an iconLabel prop for accessibility');
+    }
+    const icon = iconParam || listIcon;
+    const iconSize = iconSizeParam || listIconSize;
+    const iconColor = iconColorParam || listIconColor;
+    const typography = sizeTypographyMap[size];
     const typographyStyles = getTypographyStyles(sizeTypographyMap[size]);
-    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx) }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Icon, { icon: icon, color: iconColor, size: FONT_SIZE.XS, css: {
-                    marginTop: '7px',
-                }, sx: {
-                    mr: 3,
-                    alignItems: 'flex-start',
-                } })), _jsx("div", { children: children })] })));
+    const lineHeight = useLinesHeight({ typography, lines: 1 });
+    return (_jsxs("li", Object.assign({ sx: Object.assign(Object.assign({ depth, display: 'flex', mt: index === 0 && depth === 0 ? 0 : marginSizeMap[size], ml: 1 }, typographyStyles), sx) }, rest, { children: [ordered ? (_jsxs(Label, Object.assign({ standalone: true, sx: { mr: 2 } }, { children: [index + 1, "."] }))) : (_jsx(Column, Object.assign({ sx: { height: lineHeight }, justify: "center" }, { children: _jsx(Icon, { icon: icon, color: iconColor, size: iconSize, onClick: onIconClick, "aria-label": iconLabel, sx: {
+                        mr: 3,
+                        alignItems: 'flex-start',
+                    } }) }))), _jsx("div", Object.assign({ sx: {
+                    cursor: onClick ? 'pointer' : 'default',
+                }, tabIndex: onClick ? 0 : undefined }, { children: children }))] })));
 };

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

@@ -26,6 +26,8 @@ export declare const ListBox: <Value extends React.Key = string, Option extends
     onUpPress?: (() => void) | undefined;
     onSelect?: (() => void) | undefined;
     onBlur?: (() => void) | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & {
     ref?: React.ForwardedRef<HTMLDivElement> | undefined;
 }) => any;

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

@@ -17,4 +17,6 @@ export declare const Pill: React.ForwardRefExoticComponent<{
     type?: PILL_TYPE | undefined;
     color?: COLOR | undefined;
     icon?: React.FC<any> | undefined;
+} & {
+    htmlFor?: string | undefined;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/elements/text/Label/index.d.ts

@@ -14,6 +14,7 @@ export declare const SIZE_TYPOGRAPHY_MAP: {
 };
 type LabelProps = StyledElementProps<HTMLLabelElement, {
     size?: LABEL_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
     standalone?: boolean;
 }>;
 export declare const Label: React.FC<LabelProps>;

package/dist/components/elements/text/Label/index.js

@@ -25,10 +25,10 @@ export const SIZE_TYPOGRAPHY_MAP = {
     [LABEL_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
 };
 export const Label = (_a) => {
-    var { sx, size, standalone } = _a, rest = __rest(_a, ["sx", "size", "standalone"]);
+    var { sx, size, standalone, typography: typographyParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "typography"]);
     const { labelId, labelTargetId, type: groupType } = useGroup();
     const { flagInDevelopment } = useEnvironment();
-    const typography = SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
     if (groupType !== GROUP_TYPE.GROUP && !standalone) {
         flagInDevelopment('Label component should be used within a Group component with property type={GROUP_TYPE.GROUP} or given the standalone flag');
     }

package/dist/components/elements/text/Paragraph/index.d.ts

@@ -1,8 +1,10 @@
 /** @jsxImportSource theme-ui */
 import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
 import { StyledElementProps } from '../../../../theme';
 type ParagraphProps = StyledElementProps<HTMLSpanElement, {
     size?: PARAGRAPH_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
 }>;
 export declare enum PARAGRAPH_SIZE {
     SM = "sm",

package/dist/components/elements/text/Paragraph/index.js

@@ -23,7 +23,7 @@ const SIZE_TYPOGRAPHY_MAP = {
     [PARAGRAPH_SIZE.LG]: TYPOGRAPHY_TYPE.PARAGRAPH_LARGE,
 };
 export const Paragraph = (_a) => {
-    var { size, sx } = _a, rest = __rest(_a, ["size", "sx"]);
-    const typography = SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
+    var { size, typography: typographyParam, sx } = _a, rest = __rest(_a, ["size", "typography", "sx"]);
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || PARAGRAPH_SIZE.MD];
     return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { my: 1 }), sx) }, rest)));
 };

package/dist/components/elements/text/ReadMore/index.d.ts

@@ -2,6 +2,10 @@
 import React from 'react';
 import { StyledElementProps } from '../../../../theme';
 import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+export declare const useLinesHeight: (args: {
+    lines: number;
+    typography: TYPOGRAPHY_TYPE;
+}) => string;
 export declare const ReadMore: React.FC<StyledElementProps<HTMLDivElement, {
     typography: TYPOGRAPHY_TYPE;
     lines: number;

package/dist/components/elements/text/ReadMore/index.js

@@ -33,7 +33,7 @@ const ReadMoreLink = (props) => {
                 cursor: 'pointer',
             } }, { children: "Read More..." })) })));
 };
-const useLinesHeight = (args) => {
+export const useLinesHeight = (args) => {
     const theme = useTheme();
     const styles = getTypographyStyles(args.typography);
     const fontSize = styles.fontSize;

package/dist/components/providers/ui.js

@@ -6,5 +6,6 @@ import { AlertsProvider } from './alerts';
 import { FontLoader } from '../../FontLoader';
 import { GlobalStyles } from '../../theme/GlobalStyles';
 export const UiProvider = ({ env, components, alertsConfig, children, loadFonts, loadGlobalStyles, }) => {
+    console.log('here');
     return (_jsxs(EnvironmentProvider, Object.assign({ env: env }, { children: [_jsx(ComponentConfigProvider, Object.assign({ config: components || {} }, { children: _jsx(ThemeProvider, { children: _jsx(AlertsProvider, Object.assign({}, alertsConfig, { children: children })) }) })), loadGlobalStyles && _jsx(GlobalStyles, {}), loadFonts && _jsx(FontLoader, {})] })));
 };

package/dist/theme/custom.d.ts

@@ -2,3 +2,8 @@ export declare enum BOX_SHADOW {
     NORMAL = "0 0 8px #dfdfdf",
     EMPHASIZED = "0 0 12px #d3d3d3"
 }
+export declare enum Z_INDEX {
+    NORMAL = 1,
+    LABEL = 2,
+    DROPDOWN = 3
+}

package/dist/theme/custom.js

@@ -4,3 +4,9 @@ export var BOX_SHADOW;
     BOX_SHADOW["NORMAL"] = "0 0 8px #dfdfdf";
     BOX_SHADOW["EMPHASIZED"] = "0 0 12px #d3d3d3";
 })(BOX_SHADOW || (BOX_SHADOW = {}));
+export var Z_INDEX;
+(function (Z_INDEX) {
+    Z_INDEX[Z_INDEX["NORMAL"] = 1] = "NORMAL";
+    Z_INDEX[Z_INDEX["LABEL"] = 2] = "LABEL";
+    Z_INDEX[Z_INDEX["DROPDOWN"] = 3] = "DROPDOWN";
+})(Z_INDEX || (Z_INDEX = {}));

package/dist/theme/index.d.ts

@@ -2,7 +2,7 @@ import { PropsWithChildren } from 'react';
 import { ThemeUICSSObject } from 'theme-ui';
 import { FONT, FONT_SIZE, FONT_WEIGHT, LINE_HEIGHT } from './typography';
 import { COLOR } from './colors';
-import { BOX_SHADOW } from './custom';
+import { BOX_SHADOW, Z_INDEX } from './custom';
 export declare const BREAKPOINTS: string[];
 export declare const SPACING: string[];
 export declare const theme: {
@@ -57,6 +57,7 @@ export declare const theme: {
     space: string[];
     boxShadow: typeof BOX_SHADOW;
     breakpoints: string[];
+    zIndex: typeof Z_INDEX;
     fonts: {
         branded: string;
         branded2: string;
@@ -64,6 +65,7 @@ export declare const theme: {
         normal: string;
     };
     fontSizes: {
+        xxs: string;
         xs: string;
         sm: string;
         ms: string;
@@ -91,13 +93,15 @@ export type StylesProp = ThemeUICSSObject & {
     fontSize?: FONT_SIZE;
     font?: FONT;
     fontWeight?: FONT_WEIGHT;
-    lineHeight?: LINE_HEIGHT;
+    lineHeight?: LINE_HEIGHT | number;
     boxShadow?: BOX_SHADOW;
 };
 export type StyledElementProps<E extends Element, CustomProps = object, Children = React.ReactNode> = {
     sx?: StylesProp;
     children?: Children;
-} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps;
+} & Omit<React.HTMLAttributes<E>, 'children' | 'onChange'> & CustomProps & {
+    htmlFor?: string;
+};
 export declare const useTheme: () => {
     colors: {
         text: string;
@@ -150,6 +154,7 @@ export declare const useTheme: () => {
     space: string[];
     boxShadow: typeof BOX_SHADOW;
     breakpoints: string[];
+    zIndex: typeof Z_INDEX;
     fonts: {
         branded: string;
         branded2: string;
@@ -157,6 +162,7 @@ export declare const useTheme: () => {
         normal: string;
     };
     fontSizes: {
+        xxs: string;
         xs: string;
         sm: string;
         ms: string;

package/dist/theme/index.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeUIProvider, useThemeUI } from 'theme-ui';
 import { fontStyles, } from './typography';
 import { colors } from './colors';
-import { BOX_SHADOW } from './custom';
+import { BOX_SHADOW, Z_INDEX } from './custom';
 export const BREAKPOINTS = ['576px', '768px', '992px', '1200px', '1400px'];
 export const SPACING = [
     '0rem',
@@ -15,7 +15,7 @@ export const SPACING = [
     '3rem',
     '4rem',
 ];
-export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS });
+export const theme = Object.assign(Object.assign({}, fontStyles), { colors, space: SPACING, boxShadow: BOX_SHADOW, breakpoints: BREAKPOINTS, zIndex: Z_INDEX });
 export const useTheme = () => {
     const { theme } = useThemeUI();
     return theme;

package/dist/theme/typography.d.ts

@@ -6,6 +6,7 @@ export declare enum FONT {
     NORMAL = "normal"
 }
 export declare enum FONT_SIZE {
+    XXS = "xxs",
     XS = "xs",
     SM = "sm",
     MS = "ms",
@@ -26,6 +27,7 @@ export declare enum LINE_HEIGHT {
     CONDENSED = "condensed"
 }
 export declare const fontSizeMap: {
+    xxs: string;
     xs: string;
     sm: string;
     ms: string;
@@ -43,6 +45,7 @@ export declare const fontStyles: {
         normal: string;
     };
     fontSizes: {
+        xxs: string;
         xs: string;
         sm: string;
         ms: string;
@@ -67,6 +70,10 @@ export declare enum TYPOGRAPHY_TYPE {
     PARAGRAPH_SMALL = "paragraphSmall",
     PARAGRAPH_MEDIUM = "paragraphMedium",
     PARAGRAPH_LARGE = "paragraphLarge",
+    CONDENSED_TEXT_XSMALL = "condensedTextXSmall",
+    CONDENSED_TEXT_SMALL = "condensedTextSmall",
+    CONDENSED_TEXT_MEDIUM = "condensedTextMedium",
+    CONDENSED_TEXT_LARGE = "condensedTextLarge",
     HEADING_SMALL = "headingSmall",
     HEADING_MEDIUM = "headingMedium",
     HEADING_LARGE = "headingLarge",

package/dist/theme/typography.js

@@ -8,6 +8,7 @@ export var FONT;
 })(FONT || (FONT = {}));
 export var FONT_SIZE;
 (function (FONT_SIZE) {
+    FONT_SIZE["XXS"] = "xxs";
     FONT_SIZE["XS"] = "xs";
     FONT_SIZE["SM"] = "sm";
     FONT_SIZE["MS"] = "ms";
@@ -19,12 +20,13 @@ export var FONT_SIZE;
 })(FONT_SIZE || (FONT_SIZE = {}));
 export const getIconSize = (fontSize) => {
     return {
-        [FONT_SIZE.XS]: FONT_SIZE.MD,
-        [FONT_SIZE.SM]: FONT_SIZE.LG,
-        [FONT_SIZE.MS]: FONT_SIZE.XL,
-        [FONT_SIZE.MD]: FONT_SIZE.XL,
-        [FONT_SIZE.ML]: FONT_SIZE.XL,
-        [FONT_SIZE.LG]: FONT_SIZE.XXL,
+        [FONT_SIZE.XXS]: FONT_SIZE.XS,
+        [FONT_SIZE.XS]: FONT_SIZE.SM,
+        [FONT_SIZE.SM]: FONT_SIZE.SM,
+        [FONT_SIZE.MS]: FONT_SIZE.MD,
+        [FONT_SIZE.MD]: FONT_SIZE.MD,
+        [FONT_SIZE.ML]: FONT_SIZE.LG,
+        [FONT_SIZE.LG]: FONT_SIZE.LG,
         [FONT_SIZE.XL]: FONT_SIZE.XXL,
         [FONT_SIZE.XXL]: FONT_SIZE.XXL,
     }[fontSize];
@@ -41,6 +43,7 @@ export var LINE_HEIGHT;
     LINE_HEIGHT["CONDENSED"] = "condensed";
 })(LINE_HEIGHT || (LINE_HEIGHT = {}));
 export const fontSizeMap = {
+    [FONT_SIZE.XXS]: '0.675rem',
     [FONT_SIZE.XS]: '0.75rem',
     [FONT_SIZE.SM]: '0.875rem',
     [FONT_SIZE.MS]: '1rem',
@@ -78,6 +81,10 @@ export var TYPOGRAPHY_TYPE;
     TYPOGRAPHY_TYPE["PARAGRAPH_SMALL"] = "paragraphSmall";
     TYPOGRAPHY_TYPE["PARAGRAPH_MEDIUM"] = "paragraphMedium";
     TYPOGRAPHY_TYPE["PARAGRAPH_LARGE"] = "paragraphLarge";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_XSMALL"] = "condensedTextXSmall";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_SMALL"] = "condensedTextSmall";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_MEDIUM"] = "condensedTextMedium";
+    TYPOGRAPHY_TYPE["CONDENSED_TEXT_LARGE"] = "condensedTextLarge";
     TYPOGRAPHY_TYPE["HEADING_SMALL"] = "headingSmall";
     TYPOGRAPHY_TYPE["HEADING_MEDIUM"] = "headingMedium";
     TYPOGRAPHY_TYPE["HEADING_LARGE"] = "headingLarge";
@@ -114,6 +121,30 @@ export const typographyStyleMap = {
         lineHeight: LINE_HEIGHT.NORMAL,
         fontWeight: FONT_WEIGHT.NORMAL,
     },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_XSMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.XS,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_SMALL]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.SM,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MS,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
+    [TYPOGRAPHY_TYPE.CONDENSED_TEXT_LARGE]: {
+        fontFamily: FONT.NORMAL,
+        fontSize: FONT_SIZE.MD,
+        lineHeight: LINE_HEIGHT.CONDENSED,
+        fontWeight: FONT_WEIGHT.NORMAL,
+    },
     [TYPOGRAPHY_TYPE.HEADING_SMALL]: {
         fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.MD,
@@ -142,19 +173,19 @@ export const typographyStyleMap = {
         fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.SM,
         fontWeight: FONT_WEIGHT.BOLD,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.CONTROL_MEDIUM]: {
         fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.MS,
         fontWeight: FONT_WEIGHT.BOLD,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.CONTROL_LARGE]: {
         fontFamily: FONT.NORMAL,
         fontSize: FONT_SIZE.ML,
         fontWeight: FONT_WEIGHT.BOLD,
-        lineHeight: LINE_HEIGHT.NORMAL,
+        lineHeight: LINE_HEIGHT.CONDENSED,
     },
     [TYPOGRAPHY_TYPE.HEADLINE_SMALL]: {
         fontFamily: FONT.SERIF,

package/package.json

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