@ndlib/component-library 0.0.93 → 0.0.95

package/dist/components/elements/Alerts/Alert.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const InformationalAlert: Story;
 export declare const YellowAlert: Story;
 export declare const WarningAlert: Story;
+export declare const SuccessAlert: Story;

package/dist/components/elements/Alerts/Alert.stories.js

@@ -39,3 +39,11 @@ export const WarningAlert = {
         description: 'This is a warning alert',
     },
 };
+export const SuccessAlert = {
+    render: (args) => _jsx(Alert, Object.assign({}, args)),
+    args: {
+        title: 'Success Alert',
+        type: ALERT_TYPE.SUCCESS,
+        description: 'This is a success alert',
+    },
+};

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

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "theme-ui/jsx-runtime";
 import _WarningIcon from '@mui/icons-material/Warning';
 import _InfoIcon from '@mui/icons-material/Info';
+import _SuccessIcon from '@mui/icons-material/CheckCircle';
 import { COLOR } from '../../../theme/colors';
 import { Markdown } from '../Markdown';
 import { Row } from '../layout/Row';
@@ -23,6 +24,7 @@ import { BUTTON_TYPE, Button } from '../Button';
 import { importedDefaultComponentShim } from '../../../utils/misc';
 const WarningIcon = importedDefaultComponentShim(_WarningIcon);
 const InfoIcon = importedDefaultComponentShim(_InfoIcon);
+const SuccessIcon = importedDefaultComponentShim(_SuccessIcon);
 export const Alerts = (_a) => {
     var { pageAlerts } = _a, rest = __rest(_a, ["pageAlerts"]);
     const { alerts, dismiss } = useAlerts(pageAlerts);
@@ -55,19 +57,25 @@ export const Alert = (_a) => {
         style.backgroundColor = COLOR.ALERT_WARNING_BG;
         style.borderColor = COLOR.ALERT_WARNING_BORDER;
     }
+    else if (type === ALERT_TYPE.SUCCESS) {
+        style.backgroundColor = COLOR.ALERT_SUCCESS_BG;
+        style.borderColor = COLOR.ALERT_SUCCESS_BORDER;
+    }
     const icon = {
         [ALERT_TYPE.WARNING]: WarningIcon,
         [ALERT_TYPE.INFORMATIONAL_YELLOW]: InfoIcon,
         [ALERT_TYPE.INFORMATIONAL]: InfoIcon,
+        [ALERT_TYPE.SUCCESS]: SuccessIcon,
     }[type];
     return (_jsx(Row, Object.assign({ sx: Object.assign({}, style) }, rest, { centered: true }, { children: _jsxs(Row, Object.assign({ sx: {
                 boxSizing: 'border-box',
                 margin: '0 auto',
                 pl: '.5rem',
                 pr: '.5rem',
+                width: '100%',
                 '@media screen and (min-width: 1212px)': {
                     maxWidth: '1200px',
                     padding: '0',
                 },
-            } }, { children: [icon && _jsx(Icon, { icon: icon, sx: { mr: 4 }, size: FONT_SIZE.LG }), _jsx(Markdown, { content: description, sx: { mt: 1, flexGrow: 1 } }), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: dismiss, sx: { ml: 4 } }, { children: "Dismiss" }))] })) })));
+            } }, { children: [icon && _jsx(Icon, { icon: icon, sx: { mr: 4 }, size: FONT_SIZE.LG }), _jsx(Row, Object.assign({ sx: { flexGrow: 1, justifyContent: 'center' } }, { children: _jsx(Markdown, { content: description }) })), _jsx(Button, Object.assign({ type: BUTTON_TYPE.TEXT, onClick: dismiss, sx: { ml: 4 } }, { children: "Dismiss" }))] })) })));
 };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { StyledElementProps } from '../../../theme';
+type BlockQuoteProps = StyledElementProps<HTMLQuoteElement>;
+export declare const BlockQuote: React.FC<BlockQuoteProps>;
+export {};

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

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { COLOR } from '../../../theme/colors';
+import { TYPOGRAPHY_TYPE, getTypographyStyles } from '../../../theme/typography';
+export const BlockQuote = (_a) => {
+    var { sx } = _a, props = __rest(_a, ["sx"]);
+    return (_jsx("blockquote", Object.assign({}, props, { sx: Object.assign(Object.assign({ ml: 5, borderLeft: '8px solid', borderColor: COLOR.ND_BLUE_BRIGHT, p: 4, color: COLOR.GRAY }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_LARGE)), sx) })));
+};

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

@@ -3,6 +3,7 @@ import { StyledElementProps } from '../../../../theme';
 type CheckboxProps = StyledElementProps<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;
+    disabled?: boolean;
 }, string>;
 export declare const Checkbox: React.FC<CheckboxProps>;
 export {};

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

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { useTheme } from '../../../../theme';
 export const Checkbox = (_a) => {
-    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
     const theme = useTheme();
     return (_jsx("input", Object.assign({ type: "checkbox", onChange: (e) => {
             onChange(e.target.checked);
-        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
                 boxShadow: theme.boxShadow,
-            } }, sx) }, rest)));
+            } }, sx), disabled: disabled }, rest)));
 };

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

@@ -5,3 +5,4 @@ export default meta;
 type Story = StoryObj<typeof CheckboxGroup>;
 export declare const Default: Story;
 export declare const Columns: Story;
+export declare const Disabled: Story;

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

@@ -9,14 +9,14 @@ const meta = {
 };
 export default meta;
 const options = [
-    { value: 'orange', label: 'Orange' },
+    { value: 'orange', label: 'Orange', disabled: true },
     { value: 'apple', label: 'Apple' },
     { value: 'strawberry', label: 'Strawberry' },
     { value: 'pineapple', label: 'Pineapple' },
 ];
 const StatefulCheckboxGroup = (props) => {
-    const [checked, setChecked] = useState(new Set());
-    return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: options, onChange: setChecked })));
+    const [checked, setChecked] = useState(new Set(['orange']));
+    return (_jsx(CheckboxGroup, Object.assign({}, props, { checkedOptions: checked, options: props.options || options, onChange: setChecked })));
 };
 export const Default = {
     render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, {}) })),
@@ -24,3 +24,6 @@ export const Default = {
 export const Columns = {
     render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { columns: 2 }) })),
 };
+export const Disabled = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulCheckboxGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
+};

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

@@ -3,6 +3,7 @@ import { Key } from '../option';
 type Option<K extends Key = string> = {
     value: K;
     label: string;
+    disabled?: boolean;
 };
 type CheckboxGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
     onChange: (value: Set<K>) => void;

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

@@ -18,6 +18,7 @@ import { Group } from '../../Group';
 import { GROUP_TYPE } from '../../Group';
 import { Column } from '../../layout/Column';
 import { TYPOGRAPHY_TYPE, getTypographyStyles, } from '../../../../theme/typography';
+import { COLOR } from '../../../../theme/colors';
 export function CheckboxGroup(_a) {
     var { options, checkedOptions, columns: columnsProp, columnStyles, rowStyles, onChange } = _a, rest = __rest(_a, ["options", "checkedOptions", "columns", "columnStyles", "rowStyles", "onChange"]);
     const columns = columnsProp || 1;
@@ -42,8 +43,8 @@ export function CheckboxGroup(_a) {
                                     updatedSet.delete(option.value);
                                 }
                                 onChange(updatedSet);
-                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, sx: {
+                            }, checked: !!(checkedOptions === null || checkedOptions === void 0 ? void 0 : checkedOptions.has(option.value)), id: labelTargetId, disabled: option.disabled, sx: {
                                 mr: 2,
                                 flexShrink: 0,
-                            } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
+                            } }), _jsx(Label, Object.assign({ sx: Object.assign(Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.CONDENSED_TEXT_MEDIUM)), { color: option.disabled ? COLOR.GRAY : undefined }) }, { children: option.label }))] }))) }), option.value))) }), index))) })));
 }

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

@@ -3,6 +3,7 @@ import { StyledElementProps } from '../../../../theme';
 type RadioProps = StyledElementProps<HTMLInputElement, {
     checked: boolean;
     onChange: (value: boolean) => void;
+    disabled?: boolean;
 }, string>;
 export declare const Radio: React.FC<RadioProps>;
 export {};

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

@@ -12,11 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { useTheme } from '../../../../theme';
 export const Radio = (_a) => {
-    var { checked, onChange, sx } = _a, rest = __rest(_a, ["checked", "onChange", "sx"]);
+    var { checked, onChange, disabled, sx } = _a, rest = __rest(_a, ["checked", "onChange", "disabled", "sx"]);
     const theme = useTheme();
     return (_jsx("input", Object.assign({ type: "radio", onChange: (e) => {
             onChange(e.target.checked);
-        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: 'pointer', ':hover': {
+        }, checked: checked, sx: Object.assign({ margin: '0px', height: '1.25rem', width: '1.25rem', cursor: disabled ? 'not-allowed' : 'pointer', ':hover': {
                 boxShadow: theme.boxShadow,
-            } }, sx) }, rest)));
+            } }, sx), disabled: disabled }, rest)));
 };

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

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

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

@@ -16,8 +16,11 @@ const options = [
 ];
 const StatefulRadioGroup = (props) => {
     const [checked, setChecked] = useState(new Set());
-    return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: options, onChange: setChecked })));
+    return (_jsx(RadioGroup, Object.assign({}, props, { checked: checked, options: props.options || options, onChange: setChecked })));
 };
 export const Default = {
     render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, {}) })),
 };
+export const Disabled = {
+    render: () => (_jsx(Row, { children: _jsx(StatefulRadioGroup, { options: options.map((option, i) => (Object.assign(Object.assign({}, option), { disabled: i === 1 ? true : false }))) }) })),
+};

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

@@ -3,6 +3,7 @@ import { Key } from '../option';
 type Option<K extends Key = string> = {
     value: K;
     label: string;
+    disabled?: boolean;
 };
 type RadioGroupProps<K extends Key = string> = StyledElementProps<HTMLDivElement, {
     onChange: (value: K) => void;

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

@@ -24,5 +24,5 @@ export function RadioGroup(_a) {
                         }, checked: checked === option.value, id: labelTargetId, sx: {
                             mr: 2,
                             flexShrink: 0,
-                        } }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
+                        }, disabled: option.disabled }), _jsx(Label, Object.assign({ sx: Object.assign({ cursor: option.disabled ? 'not-allowed' : 'pointer' }, getTypographyStyles(TYPOGRAPHY_TYPE.PARAGRAPH_MEDIUM)) }, { children: option.label }))] }))) }), option.value))) })));
 }

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

@@ -48,6 +48,13 @@ ${sampleParagraph}
 1. List item 1
 2. List item 2
 3. List item 3
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur.
 `;
 export const Default = {
     render: (args) => _jsx(Markdown, Object.assign({}, args)),

package/dist/components/elements/Markdown/Markdown.test.js

@@ -28,6 +28,13 @@ This paragraph has __bold content__ and **more bold content** and _italic conten
 1. List item 1
 2. List item 2
 3. List item 3
+
+> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+reprehenderit in voluptate velit esse cillum dolore eu fugiat
+nulla pariatur.
 `;
 const htmlMarkdown = `
   ## HTML Content
@@ -41,28 +48,30 @@ const htmlMarkdown = `
 describe('Markdown', () => {
     it('renders alert content', () => {
         const { getAllByRole, getByRole } = render(_jsx(Markdown, { content: testMarkdown }));
+        expect(() => {
+            getByRole('heading', {
+                name: 'Heading 1',
+                level: 1,
+            });
+        }).toThrow();
         expect(getByRole('heading', {
             name: 'Heading 1',
-            level: 1,
-        })).toBeInTheDocument();
-        expect(getByRole('heading', {
-            name: 'Heading 2',
             level: 2,
         })).toBeInTheDocument();
         expect(getByRole('heading', {
-            name: 'Heading 3',
+            name: 'Heading 2',
             level: 3,
         })).toBeInTheDocument();
         expect(getByRole('heading', {
-            name: 'Heading 4',
+            name: 'Heading 3',
             level: 4,
         })).toBeInTheDocument();
         expect(getByRole('heading', {
-            name: 'Heading 5',
+            name: 'Heading 4',
             level: 5,
         })).toBeInTheDocument();
         expect(getByRole('heading', {
-            name: 'Heading 6',
+            name: 'Heading 5',
             level: 6,
         })).toBeInTheDocument();
         expect(getAllByRole('list')).toHaveLength(3);

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

@@ -11,6 +11,7 @@ type MarkdownProps = StyledElementProps<HTMLDivElement, {
     content: string;
     enableHtml?: boolean;
     imageStyles?: React.CSSProperties;
+    headingLevelOffset?: number;
     sanitizeHtmlOptions?: {
         allowedTags?: string[];
         allowedIframeDomains?: string[];

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

@@ -18,6 +18,7 @@ import { HEADING_SIZE, Heading } from '../text/Heading';
 import { Bold, Italic } from '../text/Inline';
 import { firstChildAltSelector } from '../../../utils/misc';
 import sanitizeHtml from 'sanitize-html';
+import { BlockQuote } from '../BlockQuote';
 export const DEFAULT_ALLOWED_TAGS = sanitizeHtml.defaults.allowedTags.concat([
     'iframe',
 ]);
@@ -31,20 +32,13 @@ export const DEFAULT_ALLOWED_IFRAME_DOMAINS = [
     'youtube.com',
     'nd.edu',
 ];
-const headingStyles = {
-    mt: 4,
-    [firstChildAltSelector]: {
-        mt: 0,
-    },
-};
-const paragraphStyles = {
-    mt: 4,
+const dynamicTopMarginStyles = {
     [firstChildAltSelector]: {
         mt: 0,
     },
 };
 export const Markdown = (_a) => {
-    var { content, enableHtml, sanitizeHtmlOptions, imageStyles } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles"]);
+    var { content, enableHtml, sanitizeHtmlOptions, imageStyles, headingLevelOffset = 1 } = _a, rest = __rest(_a, ["content", "enableHtml", "sanitizeHtmlOptions", "imageStyles", "headingLevelOffset"]);
     let sanitizedContent = content;
     if (enableHtml) {
         sanitizedContent = sanitizeHtml(content, {
@@ -55,21 +49,22 @@ export const Markdown = (_a) => {
         });
     }
     return (_jsx("div", Object.assign({}, rest, { children: _jsx(ReactMarkdown, Object.assign({ rehypePlugins: enableHtml ? [rehypeRaw] : [], components: {
-                h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { standalone: true, sx: headingStyles, "aria-level": 1 }))),
-                h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { standalone: true, sx: headingStyles, "aria-level": 2 }))),
-                h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { standalone: true, sx: headingStyles, "aria-level": 3 }))),
-                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 4 }))),
-                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 5 }))),
-                h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, sx: headingStyles, "aria-level": 6 }))),
+                h1: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.XL }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
+                h2: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.LG }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
+                h3: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.MD }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
+                h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: dynamicTopMarginStyles }))),
+                h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
+                h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: dynamicTopMarginStyles }))),
                 ol: (props) => _jsx(List, Object.assign({}, props, { ordered: true, sx: { mt: 4 } })),
                 ul: (props) => _jsx(List, Object.assign({}, props, { sx: { mt: 4 } })),
                 li: (_a) => {
                     var { index, ordered } = _a, props = __rest(_a, ["index", "ordered"]);
                     return (_jsx(ListItem, Object.assign({ index: index }, props)));
                 },
-                p: (props) => _jsx(Paragraph, Object.assign({}, props, { sx: paragraphStyles })),
+                p: (props) => (_jsx(Paragraph, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { fontSize: 'inherit' }) }))),
                 strong: (props) => _jsx(Bold, Object.assign({}, props)),
                 em: (props) => _jsx(Italic, Object.assign({}, props)),
                 img: (props) => _jsx("img", Object.assign({}, props, { style: imageStyles })),
+                blockquote: (props) => (_jsx(BlockQuote, Object.assign({}, props, { sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), { my: 5 }) }))),
             } }, { children: sanitizedContent })) })));
 };

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

@@ -12,9 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
 import { useEffect } from 'react';
 import { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+import { useTheme } from '../../../../theme';
 import { GROUP_TYPE, useGroup } from '../../Group';
 import { COLOR } from '../../../../theme/colors';
 import { useEnvironment } from '../../../providers/env';
+import { multiplyRemSize } from '../../../../utils/misc';
 export var HEADING_SIZE;
 (function (HEADING_SIZE) {
     HEADING_SIZE["SM"] = "sm";
@@ -40,6 +42,7 @@ export const Heading = (_a) => {
     var { sx, size, standalone, underline, underlineColor, typography: typographyProp, level: levelParam } = _a, rest = __rest(_a, ["sx", "size", "standalone", "underline", "underlineColor", "typography", "level"]);
     const { level: groupLevel, labelId, type, trackHeadingRendered } = useGroup();
     const { flagInDevelopment } = useEnvironment();
+    const theme = useTheme();
     const level = levelParam || groupLevel;
     useEffect(() => {
         trackHeadingRendered();
@@ -55,8 +58,31 @@ export const Heading = (_a) => {
         typography =
             LEVEL_TYPOGRAPHY_MAP[level];
     }
+    const typographyStyles = getTypographyStyles(typography);
+    const marginHeightMultiple = theme.lineHeights[typographyStyles.lineHeight] * 0.375;
+    const fontSize = theme.fontSizes[typographyStyles.fontSize];
+    const topMargin = multiplyRemSize({
+        size: fontSize,
+        multiple: marginHeightMultiple,
+    });
     if (type !== GROUP_TYPE.REGION && !standalone) {
         flagInDevelopment('Heading component should be used within a Group component with property type={GROUP_TYPE.REGION} or given the standalone flag');
     }
-    return (_jsx("div", Object.assign({ id: labelId, role: "heading", "aria-level": level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: COLOR.PRIMARY }, getTypographyStyles(typography)), sx) }, rest)));
+    const headerProps = Object.assign({ id: labelId, role: 'heading', 'aria-level': level, sx: Object.assign(Object.assign({ py: 0, borderBottom: underline ? 'solid 2px' : undefined, borderBottomColor: underlineColor ? underlineColor : COLOR.SECONDARY, color: COLOR.PRIMARY, mt: topMargin }, getTypographyStyles(typography)), sx) }, rest);
+    switch (level) {
+        case 1:
+            return _jsx("h1", Object.assign({}, headerProps));
+        case 2:
+            return _jsx("h2", Object.assign({}, headerProps));
+        case 3:
+            return _jsx("h3", Object.assign({}, headerProps));
+        case 4:
+            return _jsx("h4", Object.assign({}, headerProps));
+        case 5:
+            return _jsx("h5", Object.assign({}, headerProps));
+        case 6:
+            return _jsx("h6", Object.assign({}, headerProps));
+        default:
+            return _jsx("h6", Object.assign({}, headerProps));
+    }
 };

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

@@ -35,5 +35,5 @@ export const Paragraph = (_a) => {
         size: fontSize,
         multiple: marginHeightMultiple,
     });
-    return (_jsx("div", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { display: clampLines ? '-webkit-box' : undefined, '-webkit-line-clamp': clampLines ? String(clampLines) : undefined, '-webkit-box-orient': 'vertical', overflow: clampLines ? 'hidden' : undefined, my: topMargin }), sx) }, rest)));
+    return (_jsx("p", Object.assign({ sx: Object.assign(Object.assign(Object.assign({}, getTypographyStyles(typography)), { display: clampLines ? '-webkit-box' : undefined, '-webkit-line-clamp': clampLines ? String(clampLines) : undefined, '-webkit-box-orient': 'vertical', overflow: clampLines ? 'hidden' : undefined, mt: topMargin }), sx) }, rest)));
 };

package/dist/components/providers/alerts.d.ts

@@ -2,7 +2,8 @@ import React from 'react';
 export declare enum ALERT_TYPE {
     INFORMATIONAL = "Informational",
     INFORMATIONAL_YELLOW = "Informational_Yellow",
-    WARNING = "Warning"
+    WARNING = "Warning",
+    SUCCESS = "Success"
 }
 export declare enum ALERT_DOMAIN {
     LIBRARY = "library",

package/dist/components/providers/alerts.js

@@ -16,6 +16,7 @@ export var ALERT_TYPE;
     ALERT_TYPE["INFORMATIONAL"] = "Informational";
     ALERT_TYPE["INFORMATIONAL_YELLOW"] = "Informational_Yellow";
     ALERT_TYPE["WARNING"] = "Warning";
+    ALERT_TYPE["SUCCESS"] = "Success";
 })(ALERT_TYPE || (ALERT_TYPE = {}));
 export var ALERT_DOMAIN;
 (function (ALERT_DOMAIN) {

package/dist/theme/colors.d.ts

@@ -16,6 +16,7 @@ export declare enum COLOR {
     LIGHT_GRAY = "lightGray",
     EXTRA_LIGHT_GRAY = "extraLightGray",
     EXTRA_EXTRA_LIGHT_GRAY = "extraExtraLightGray",
+    SUCCESS = "ndTertiary1",
     ND_BLUE = "ndBlue",
     ND_BLUE_DARK = "ndBlueDark",
     ND_BLUE_LIGHT = "ndBlueLight",
@@ -44,7 +45,9 @@ export declare enum COLOR {
     ALERT_INFORMATIONAL_YELLOW_BG = "alertInformationalYellowBg",
     ALERT_INFORMATIONAL_YELLOW_BORDER = "alertInformationalYellowBorder",
     ALERT_WARNING_BG = "alertWarningBg",
-    ALERT_WARNING_BORDER = "alertWarningBorder"
+    ALERT_WARNING_BORDER = "alertWarningBorder",
+    ALERT_SUCCESS_BG = "alertSuccessBg",
+    ALERT_SUCCESS_BORDER = "ndTertiary1"
 }
 export declare const colors: {
     [key in COLOR]: string;

package/dist/theme/colors.js

@@ -17,6 +17,7 @@ export var COLOR;
     COLOR["LIGHT_GRAY"] = "lightGray";
     COLOR["EXTRA_LIGHT_GRAY"] = "extraLightGray";
     COLOR["EXTRA_EXTRA_LIGHT_GRAY"] = "extraExtraLightGray";
+    COLOR["SUCCESS"] = "ndTertiary1";
     COLOR["ND_BLUE"] = "ndBlue";
     COLOR["ND_BLUE_DARK"] = "ndBlueDark";
     COLOR["ND_BLUE_LIGHT"] = "ndBlueLight";
@@ -46,6 +47,8 @@ export var COLOR;
     COLOR["ALERT_INFORMATIONAL_YELLOW_BORDER"] = "alertInformationalYellowBorder";
     COLOR["ALERT_WARNING_BG"] = "alertWarningBg";
     COLOR["ALERT_WARNING_BORDER"] = "alertWarningBorder";
+    COLOR["ALERT_SUCCESS_BG"] = "alertSuccessBg";
+    COLOR["ALERT_SUCCESS_BORDER"] = "ndTertiary1";
 })(COLOR || (COLOR = {}));
 export const colors = {
     [COLOR.TEXT]: '#333333',
@@ -94,4 +97,5 @@ export const colors = {
     [COLOR.ALERT_INFORMATIONAL_YELLOW_BORDER]: '#b3a871',
     [COLOR.ALERT_WARNING_BG]: '#fc7279',
     [COLOR.ALERT_WARNING_BORDER]: '#ad5458',
+    [COLOR.ALERT_SUCCESS_BG]: '#edffea',
 };

package/dist/theme/index.d.ts

@@ -24,6 +24,7 @@ export declare const theme: {
         lightGray: string;
         extraLightGray: string;
         extraExtraLightGray: string;
+        ndTertiary1: string;
         ndBlue: string;
         ndBlueDark: string;
         ndBlueLight: string;
@@ -41,7 +42,6 @@ export declare const theme: {
         ndSecondary4: string;
         ndSecondary5: string;
         ndSecondary6: string;
-        ndTertiary1: string;
         ndTertiary2: string;
         ndTertiary3: string;
         ndTertiary4: string;
@@ -53,6 +53,7 @@ export declare const theme: {
         alertInformationalYellowBorder: string;
         alertWarningBg: string;
         alertWarningBorder: string;
+        alertSuccessBg: string;
     };
     space: string[];
     boxShadow: typeof BOX_SHADOW;
@@ -121,6 +122,7 @@ export declare const useTheme: () => {
         lightGray: string;
         extraLightGray: string;
         extraExtraLightGray: string;
+        ndTertiary1: string;
         ndBlue: string;
         ndBlueDark: string;
         ndBlueLight: string;
@@ -138,7 +140,6 @@ export declare const useTheme: () => {
         ndSecondary4: string;
         ndSecondary5: string;
         ndSecondary6: string;
-        ndTertiary1: string;
         ndTertiary2: string;
         ndTertiary3: string;
         ndTertiary4: string;
@@ -150,6 +151,7 @@ export declare const useTheme: () => {
         alertInformationalYellowBorder: string;
         alertWarningBg: string;
         alertWarningBorder: string;
+        alertSuccessBg: string;
     };
     space: string[];
     boxShadow: typeof BOX_SHADOW;

package/package.json

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