@ndlib/component-library 0.0.34 → 0.0.36

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/Fields/Select/index.js

@@ -20,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',
 };

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

@@ -30,7 +30,7 @@ export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { NavMenu } from './components/composites/NavMenu';
-export { EmptyState } from './components/composites/EmptyState';
+export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/index.js

@@ -30,7 +30,7 @@ export { Spinner, SPINNER_SIZE } from './components/elements/Spinner';
 export { Pill, PILL_SIZE, PILL_TYPE } from './components/elements/Pill';
 export { Card, CARD_SIZE, CARD_LAYOUT } from './components/composites/Card';
 export { NavMenu } from './components/composites/NavMenu';
-export { EmptyState } from './components/composites/EmptyState';
+export { EmptyState, EMPTY_STATE_SIZE, } from './components/composites/EmptyState';
 export { DropdownLinks } from './components/composites/DropdownLinks';
 export { UiProvider } from './components/providers/ui';
 export { MenuProvider, useMenu } from './components/providers/menu';

package/dist/theme/index.d.ts

@@ -65,6 +65,7 @@ export declare const theme: {
         normal: string;
     };
     fontSizes: {
+        xxs: string;
         xs: string;
         sm: string;
         ms: string;
@@ -161,6 +162,7 @@ export declare const useTheme: () => {
         normal: string;
     };
     fontSizes: {
+        xxs: string;
         xs: string;
         sm: string;
         ms: string;

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,6 +20,7 @@ export var FONT_SIZE;
 })(FONT_SIZE || (FONT_SIZE = {}));
 export const getIconSize = (fontSize) => {
     return {
+        [FONT_SIZE.XXS]: FONT_SIZE.XS,
         [FONT_SIZE.XS]: FONT_SIZE.SM,
         [FONT_SIZE.SM]: FONT_SIZE.SM,
         [FONT_SIZE.MS]: FONT_SIZE.MD,
@@ -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.34",
+  "version": "0.0.36",
   "type": "module",
   "sideEffects": false,
   "files": [