@ndlib/component-library 0.0.120 → 0.0.122

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

@@ -20,6 +20,7 @@ import { firstChildAltSelector } from '../../../utils/misc';
 import sanitizeHtml from 'sanitize-html';
 import remarkGfm from 'remark-gfm';
 import { BlockQuote } from '../BlockQuote';
+import { Caption } from '../text/Caption';
 export const DEFAULT_ALLOWED_TAGS = sanitizeHtml.defaults.allowedTags.concat([
     'iframe',
     'img',
@@ -83,6 +84,7 @@ export const Markdown = (_a) => {
                 h4: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { level: props.level + headingLevelOffset, standalone: true, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h4) }))),
                 h5: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h5) }))),
                 h6: (props) => (_jsx(Heading, Object.assign({ size: HEADING_SIZE.SM }, props, { standalone: true, level: props.level + headingLevelOffset, sx: Object.assign(Object.assign({}, dynamicTopMarginStyles), customStyles.h6) }))),
+                code: (props) => _jsx(Caption, Object.assign({}, props)),
                 ol: (props) => (_jsx(List, Object.assign({}, props, { ordered: true, sx: Object.assign({ mt: 4 }, customStyles.ol) }))),
                 ul: (props) => (_jsx(List, Object.assign({}, props, { sx: Object.assign({ mt: 4 }, customStyles.ul) }))),
                 li: (_a) => {

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TYPOGRAPHY_TYPE } from '../../../../theme/typography';
+import { StyledElementProps } from '../../../../theme';
+export declare enum LABEL_SIZE {
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+export declare const SIZE_TYPOGRAPHY_MAP: {
+    sm: TYPOGRAPHY_TYPE;
+    md: TYPOGRAPHY_TYPE;
+    lg: TYPOGRAPHY_TYPE;
+};
+type LabelProps = StyledElementProps<HTMLDivElement, {
+    size?: LABEL_SIZE;
+    typography?: TYPOGRAPHY_TYPE;
+}>;
+export declare const Caption: React.FC<LabelProps>;
+export {};

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

@@ -0,0 +1,29 @@
+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 { getTypographyStyles, TYPOGRAPHY_TYPE, } from '../../../../theme/typography';
+export var LABEL_SIZE;
+(function (LABEL_SIZE) {
+    LABEL_SIZE["SM"] = "sm";
+    LABEL_SIZE["MD"] = "md";
+    LABEL_SIZE["LG"] = "lg";
+})(LABEL_SIZE || (LABEL_SIZE = {}));
+export const SIZE_TYPOGRAPHY_MAP = {
+    [LABEL_SIZE.SM]: TYPOGRAPHY_TYPE.CONTROL_SMALL,
+    [LABEL_SIZE.MD]: TYPOGRAPHY_TYPE.CONTROL_MEDIUM,
+    [LABEL_SIZE.LG]: TYPOGRAPHY_TYPE.CONTROL_LARGE,
+};
+export const Caption = (_a) => {
+    var { sx, size, typography: typographyParam } = _a, rest = __rest(_a, ["sx", "size", "typography"]);
+    const typography = typographyParam || SIZE_TYPOGRAPHY_MAP[size || LABEL_SIZE.MD];
+    return (_jsx("caption", Object.assign({ sx: Object.assign(Object.assign({ display: 'block', fontStyle: 'italic', fontWeight: '400' }, getTypographyStyles(typography)), sx) }, rest)));
+};

package/package.json

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