@mackin.com/styleguide 8.2.3 → 8.4.0

package/index.d.ts

@@ -86,7 +86,7 @@ declare const Backdrop: (p: {
     __debug?: boolean;
 }) => JSX.Element;
 
-declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+declare type ButtonVariant = 'label' | 'circle' | 'icon' | 'link' | 'inlineLink' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative' | 'text';
 interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     /** As round as can be. */
@@ -254,6 +254,7 @@ declare const ICONS: {
 };
 declare const Icon: (props: {
     id: string;
+    title?: string | undefined;
     className?: string | undefined;
     spin?: boolean | undefined;
     style?: React.CSSProperties | undefined;
@@ -432,6 +433,8 @@ declare const List: React.ForwardRefExoticComponent<Pick<ListProps, "altRowColor
 interface ListItemProps extends React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement> {
     /** For variant 'full', the content will take up the entire space of the parent (no padding applied by this component). */
     variant?: 'full';
+    /** By default (and not a good idea in hindsight), ListItem applies styles to child Button or OmniLink elements when the variant is 'full'. Use this to remove these styles. */
+    noContentStyling?: boolean;
 }
 declare const ListItem: (props: ListItemProps) => JSX.Element;
 
@@ -445,10 +448,13 @@ interface ModalProps {
     noBackground?: boolean;
     closeButton?: boolean;
     heading?: string;
+    /** Use to override default heading styling. */
+    headerClassName?: string;
     /** Selector of the element to focus on initial show. */
     focusSelector?: string;
     scrollable?: boolean;
     id?: string;
+    /** Applied to the modal body. */
     className?: string;
     __debug?: boolean;
     onClick?: () => void;
@@ -462,6 +468,8 @@ declare const Nav: (props: {
     children?: React.ReactNode;
     responsive?: boolean | undefined;
     className?: string | undefined;
+    /** Duration of the slide animation in ms.  Defaults to `theme.timings.nav.slideMs`. */
+    slideMs?: number | undefined;
     __debug?: boolean | undefined;
 }) => JSX.Element;
 
@@ -809,6 +817,11 @@ interface MackinTheme {
         desktop: string;
         tablet: string;
     };
+    timings: {
+        nav: {
+            slideMs: number;
+        };
+    };
 }
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
 declare const calcDynamicThemeProps: <T extends MackinTheme>(theme: T) => void;
@@ -1039,7 +1052,7 @@ interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.Anch
     /** Full width with max space between the text and the icon */
     iconBlock?: boolean;
     /** Corresponds to the button variants of the same name. */
-    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative';
+    variant?: 'button' | 'label' | 'icon' | 'circle' | 'primary' | 'secondary' | 'omg' | 'primary2' | 'positive' | 'negative' | 'text';
     /** Only for button variants. */
     round?: boolean;
     /** Only for button variants. */
@@ -1055,4 +1068,4 @@ interface ThemeRendererProps extends MackinTheme {
 }
 declare const ThemeRenderer: (p: ThemeRendererProps) => JSX.Element;
 
-export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+export { Accordian, AccordianProps, Alignment, Autocomplete, AutocompleteProps, AutocompleteValue, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DateInput, DateInputProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, FormProps, GlobalStyles, Header, Highlight, ICONS, Icon, Image, ImageProps, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, Link, LinkProps, List, ListItem, ListItemProps, ListProps, MackinTheme, Modal, ModalProps, Nav, NormalizeCss, NumberInput, NumberInputProps, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerOption, PickerProps, PickerValue, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Th, ThSort, ThemeProvider, ThemeRenderer, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };

package/index.js

@@ -67,7 +67,7 @@ function __rest(s, e) {
     return t;
 }
 
-//TB: will need to update.  the versions of fa are at 6 now.
+//TB: FUTURE will need to update.  the versions of fa are at 6 now.
 // major version
 const ICONS = {
     add: proSolidSvgIcons.faPlus,
@@ -107,7 +107,7 @@ const ICONS = {
 const Icon = (props) => {
     var _a;
     const icon = (_a = ICONS[props.id]) !== null && _a !== void 0 ? _a : ICONS['noIcon'];
-    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', props.className), icon: icon });
+    return React__namespace.createElement(reactFontawesome.FontAwesomeIcon, { title: props.title, style: props.style, onClick: props.onClick, spin: props.spin, className: css.cx('icon', css.css({ label: 'Icon' }), props.className), icon: icon });
 };
 
 /** Call this on your theme after messing with the props.  It will re-build things that depend on sizes and colors. */
@@ -218,6 +218,11 @@ const defaultTheme = {
     mediaQueries: {
         desktop: '',
         tablet: '' // set in calcDynamicThemeProps
+    },
+    timings: {
+        nav: {
+            slideMs: 250
+        }
     }
 };
 calcDynamicThemeProps(defaultTheme);
@@ -238,9 +243,70 @@ const useThemeSafely = () => {
     return defaultTheme;
 };
 
+const getTagStyles = (theme, tag) => {
+    switch (tag) {
+        case 'p': return {
+            marginTop: theme.controls.paragraphPadding,
+            marginBottom: theme.controls.paragraphPadding
+        };
+        case 'h1': return {
+            fontSize: theme.fonts.sizeH1
+        };
+        case 'h2': return {
+            fontSize: theme.fonts.sizeH2
+        };
+        case 'h3': return {
+            fontSize: theme.fonts.sizeH3
+        };
+        case 'h4': return {
+            fontSize: theme.fonts.sizeH4
+        };
+        default: return undefined;
+    }
+};
+const headerRegex = /h1|h2|h3|h4/;
+const alignStyles = {
+    'center': { textAlign: 'center' },
+    'left': { textAlign: 'left' },
+    'right': { textAlign: 'right' }
+};
+/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
+const Text = (props) => {
+    var _a, _b;
+    const theme = useThemeSafely();
+    const tagChoice = props.tag || 'p';
+    const style = props.style || {};
+    if (props.lineClamp) {
+        style.WebkitLineClamp = props.lineClamp;
+    }
+    if (props.leftPad) {
+        style.paddingLeft = props.leftPad;
+    }
+    const styles = css.css(getTagStyles(theme, tagChoice), {
+        userSelect: 'text',
+        label: 'Text',
+        fontSize: props.fontSize ? props.fontSize : undefined
+    }, alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    }, props.lineClamp && {
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box'
+    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
+        fontFamily: theme.fonts.headerFamily
+    });
+    return React__namespace.createElement(tagChoice, {
+        style: style,
+        className: css.cx('text', styles, props.className)
+    }, props.children);
+};
+
 const Button = React__namespace.forwardRef((props, ref) => {
     var _a;
-    const nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
+    const { variant, round, rightIcon, leftIcon, iconBlock, small, readOnly, waiting, enforceMinWidth, controlAlign } = props, nativeProps = __rest(props, ["variant", "round", "rightIcon", "leftIcon", "iconBlock", "small", "readOnly", "waiting", "enforceMinWidth", "controlAlign"]);
     const theme = useThemeSafely();
     const buttonStyles = css.css `
 		padding-left: ${theme.controls.padding};
@@ -301,17 +367,32 @@ const Button = React__namespace.forwardRef((props, ref) => {
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			background-color: transparent;
 			${props.small && `
 				width: ${theme.controls.heightSmall};
 				min-width: ${theme.controls.heightSmall};
 				font-size: 1.3rem;
 			`}
 		`}
-		${props.variant === 'label' && `
+		${(props.variant === 'label') && `
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+			background-color: transparent;
+		`}
+		${(props.variant === 'text') && `
+			background-color: transparent;
+			font-weight: normal;
+			cursor: auto;
 			display: inline-block;
 			width: auto;
 			box-shadow: none;
 			border: none;
+			line-height: ${theme.controls.height};
+			&:hover:not(:disabled) {
+				filter: none;
+			}
 		`}
 		${props.variant === 'link' && `
 			padding: 0;
@@ -402,18 +483,24 @@ const Button = React__namespace.forwardRef((props, ref) => {
 		`}
 	`;
     const disabled = props.disabled || props.waiting;
-    const button = (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : 'button' }),
-        props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
-        props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
-        props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
+    let content;
+    if (variant === 'text') {
+        content = React__namespace.createElement(Text, { className: css.cx(styles, props.className), tag: "div" }, props.children);
+    }
+    else {
+        content = (React__namespace.createElement("button", Object.assign({}, nativeProps, { ref: ref, disabled: disabled, className: css.cx('button', styles, props.className), type: (_a = props.type) !== null && _a !== void 0 ? _a : 'button' }),
+            props.leftIcon && React__namespace.createElement("span", { className: css.css({ marginRight: '0.5rem' }) }, props.leftIcon),
+            props.waiting ? React__namespace.createElement(Icon, { id: "waiting", spin: true }) : props.children,
+            props.rightIcon && React__namespace.createElement("span", { className: css.css({ marginLeft: '0.5rem' }) }, props.rightIcon)));
+    }
     if (props.controlAlign) {
         return (React__namespace.createElement("span", { className: css.css({
                 display: 'inline-block',
                 width: '100%',
                 paddingBottom: theme.controls.inputErrorMinHeight
-            }) }, button));
+            }) }, content));
     }
-    return button;
+    return content;
 });
 
 const accordianExpandTimeMs = 250;
@@ -718,7 +805,7 @@ const List = React__namespace.forwardRef((props, ref) => {
     return (React__namespace.createElement("ul", Object.assign({}, listProps, { ref: ref, className: css.cx('list', listStyles, props.className) }), children));
 });
 const ListItem = (props) => {
-    const liProps = __rest(props, ["variant"]);
+    const liProps = __rest(props, ["variant", "noContentStyling"]);
     const theme = useThemeSafely();
     const itemStyles = css.css `
 		border-bottom: ${theme.controls.border};
@@ -726,30 +813,30 @@ const ListItem = (props) => {
             border-bottom: none;
         }
 	`;
-    const contentStyle = css.css `
-		padding: calc(${theme.controls.padding} * 1.5);
-		${props.variant === 'full' && `
-			padding:0;
-			>.button {
-				padding: calc(${theme.controls.padding} * 1.5);
-				width: 100%;
-				border: none;
-			}
-			>.omniLink {
-				padding-left: calc(${theme.controls.padding} * 1.5);
-				padding-right: calc(${theme.controls.padding} * 1.5);
-				width: 100%;
-				line-height: ${theme.controls.height};
-				border: none;
-			}
-			>.button:not(:focus), >.omniLink:not(:focus) {
-				box-shadow: none;
-			}
-			>.omniLink:not(.omniLink--iconBlock){
-				display: block;
-			}
-		`}
-	`;
+    const contentStyle = css.css({
+        padding: `calc(${theme.controls.padding} * 1.5)`
+    }, props.variant === 'full' && {
+        padding: 0
+    }, !props.noContentStyling && {
+        '>.button': {
+            padding: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none'
+        },
+        '>.omniLink': {
+            paddingLeft: `calc(${theme.controls.padding} * 1.5)`,
+            paddingRight: `calc(${theme.controls.padding} * 1.5)`,
+            width: '100%',
+            border: 'none',
+            lineHeight: theme.controls.height
+        },
+        '>.button:not(:focus), >.omniLink:not(:focus)': {
+            boxShadow: 'none',
+        },
+        '>.omniLink:not(.omniLink--iconBlock)': {
+            display: 'block'
+        }
+    });
     return (React__namespace.createElement("li", Object.assign({}, liProps, { className: css.cx('listItem', itemStyles, props.className) }),
         React__namespace.createElement("div", { className: css.css(contentStyle) }, props.children)));
 };
@@ -785,67 +872,6 @@ const TabLocker = (props) => {
         } }, props.children));
 };
 
-const getTagStyles = (theme, tag) => {
-    switch (tag) {
-        case 'p': return {
-            marginTop: theme.controls.paragraphPadding,
-            marginBottom: theme.controls.paragraphPadding
-        };
-        case 'h1': return {
-            fontSize: theme.fonts.sizeH1
-        };
-        case 'h2': return {
-            fontSize: theme.fonts.sizeH2
-        };
-        case 'h3': return {
-            fontSize: theme.fonts.sizeH3
-        };
-        case 'h4': return {
-            fontSize: theme.fonts.sizeH4
-        };
-        default: return undefined;
-    }
-};
-const headerRegex = /h1|h2|h3|h4/;
-const alignStyles = {
-    'center': { textAlign: 'center' },
-    'left': { textAlign: 'left' },
-    'right': { textAlign: 'right' }
-};
-/** Wraps common needs for displaying text.  Use for all text-containing elements to save on duplicated styling.  */
-const Text = (props) => {
-    var _a, _b;
-    const theme = useThemeSafely();
-    const tagChoice = props.tag || 'p';
-    const style = props.style || {};
-    if (props.lineClamp) {
-        style.WebkitLineClamp = props.lineClamp;
-    }
-    if (props.leftPad) {
-        style.paddingLeft = props.leftPad;
-    }
-    const styles = css.css(getTagStyles(theme, tagChoice), {
-        userSelect: 'text',
-        label: 'Text',
-        fontSize: props.fontSize ? props.fontSize : undefined
-    }, alignStyles[(_a = props.align) !== null && _a !== void 0 ? _a : 'left'], props.smaller && { fontSize: theme.fonts.sizeSmall }, props.larger && { fontSize: theme.fonts.sizeLarge }, props.italics && { fontStyle: 'italic' }, props.ellipsis && {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
-    }, props.lineClamp && {
-        WebkitBoxOrient: 'vertical',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        display: '-webkit-box'
-    }, props.spacedOut && { lineHeight: '1.5rem' }, props.bold && { fontWeight: 'bold' }, props.noPad && { margin: 0, padding: 0 }, headerRegex.test((_b = props.tag) !== null && _b !== void 0 ? _b : '') && {
-        fontFamily: theme.fonts.headerFamily
-    });
-    return React__namespace.createElement(tagChoice, {
-        style: style,
-        className: css.cx('text', styles, props.className)
-    }, props.children);
-};
-
 //TB: FUTURE will need to use the new input
 const defaultMaxShownValues = 7;
 const buttonMarkerClass = 'ListItem__button';
@@ -1540,6 +1566,8 @@ const Modal = (p) => {
         }
     }, [p.show]);
     const modalBodyStyles = css.css({
+        maxHeight: p.scrollable ? undefined : '99vh',
+        overflow: 'hidden',
         zIndex: theme.zIndexes.modal,
         cursor: 'default',
         margin: '1rem',
@@ -1556,14 +1584,14 @@ const Modal = (p) => {
             outline: 'none'
         }
     });
-    const modalHeaderStyles = css.css({
+    const modalHeaderStyles = css.cx(css.css({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
         backgroundColor: theme.colors.header,
         padding: '1rem',
         color: theme.colors.headerFont
-    });
+    }), p.headerClassName);
     const modalContainerStyles = css.css([{
             position: 'fixed',
             height: '100%',
@@ -2822,7 +2850,7 @@ const useMediaQuery = (query) => {
 };
 
 const Nav = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d;
     const nav = React__namespace.useRef(null);
     const theme = useThemeSafely();
     const totalNavOffset = `calc(${theme.layout.navWidth} + 20px)`;
@@ -2848,13 +2876,14 @@ const Nav = (props) => {
 		}
 	`;
     const classNavShowing = css.css `
-		animation: ${slideRight} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		animation: ${slideRight} ${(_c = props.slideMs) !== null && _c !== void 0 ? _c : theme.timings.nav.slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
     const classNavNotShowing = css.css `
-		animation: ${slideLeft} 0.250s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
+		animation: ${slideLeft} ${(_d = props.slideMs) !== null && _d !== void 0 ? _d : theme.timings.nav.slideMs}ms cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	`;
     // the padding-top here is to offset the navs' content from the header.  the shadow creeps over it.
     const navStyles = css.css `
+		label: Nav;
 		position: fixed;
 		top: 0;
 		left: calc(${totalNavOffset} * -1);
@@ -3070,12 +3099,19 @@ const generateLinkStyles = (props, theme) => {
 		box-shadow: none;
 		border: none;
 	`}
+	${props.variant === 'text' && `
+		font-weight: normal;
+		box-shadow: none;
+		border: none;
+		cursor: auto;
+	`}
 	${props.variant === 'icon' && `
 		box-shadow: none;
 		border: none;
 		border-radius: 100%;
 		width: ${theme.controls.height};
 		text-align: center;
+		font-size: 1.6rem;
 	`}
 	${props.block && `
 		display: block;
@@ -3099,10 +3135,13 @@ const generateLinkStyles = (props, theme) => {
 };
 
 const OmniLink = (props) => {
-    const linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const { noRouter, rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref } = props, linkProps = __rest(props, ["noRouter", "rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
     const theme = useThemeSafely();
     const linkStyles = generateLinkStyles(props, theme);
     const mainClassName = css.cx('omniLink', linkStyles, props.className);
+    if (variant === 'text') {
+        return React__namespace.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
     const content = React__namespace.createElement(LinkContent, Object.assign({}, props));
     if (props.noRouter) {
         return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }), content));
@@ -3110,7 +3149,6 @@ const OmniLink = (props) => {
     return (React__namespace.createElement(reactRouterDom.Link, Object.assign({}, linkProps, { className: mainClassName, to: props.href }), content));
 };
 
-//TB: test in safari with the new arrow
 const roundPxPadding = '4px';
 const Picker = (props) => {
     const selectProps = __rest(props
@@ -4603,10 +4641,13 @@ const enumToEntities = (enumObj) => {
 };
 
 const Link = (props) => {
-    const linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
+    const { rightIcon, leftIcon, block, iconBlock, variant, round, small, colorOverride, children, ref } = props, linkProps = __rest(props, ["rightIcon", "leftIcon", "block", "iconBlock", "variant", "round", "small", "colorOverride", "children", "ref"]);
     const theme = useThemeSafely();
     const linkStyles = generateLinkStyles(props, theme);
     const mainClassName = css.cx('link', linkStyles, props.className);
+    if (variant === 'text') {
+        return React__namespace.createElement(Text, { className: mainClassName, tag: "div" }, props.children);
+    }
     return (React__namespace.createElement("a", Object.assign({}, linkProps, { target: props.target, className: mainClassName }),
         React__namespace.createElement(LinkContent, Object.assign({}, props))));
 };
@@ -4629,11 +4670,11 @@ const ThemeRenderer = (p) => {
             let colorBox;
             if (/color/i.test(key)) {
                 colorBox = (React__namespace.createElement("span", { className: css.css({
-                        display: 'inline-block',
+                        display: 'block',
                         border: '1px solid black',
-                        width: 24,
+                        width: '100%',
                         height: 24,
-                        backgroundColor: value
+                        background: value
                     }) }));
             }
             return (React__namespace.createElement(Tr, { key: key },
@@ -4644,7 +4685,7 @@ const ThemeRenderer = (p) => {
                             alignItems: 'center',
                             gap: '1rem'
                         }) },
-                        value,
+                        React__namespace.createElement("span", { className: css.css({ flexShrink: 1 }) }, value),
                         " ",
                         colorBox))));
         }))));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "8.2.3",
+	"version": "8.4.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",