@mackin.com/styleguide 8.2.1 → 8.3.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;
@@ -1039,7 +1045,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. */
@@ -1049,4 +1055,10 @@ interface LinkProps extends LinkContentProps, React.DetailedHTMLProps<React.Anch
 }
 declare const Link: (props: LinkProps) => 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, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, enumToEntities, getCurrencyDisplay, getFileSizeDisplay, useAccordianState, useBooleanChanged, useIgnoreMount, useMediaQuery, useScrollbarSize, useThemeSafely, useWaiting };
+interface ThemeRendererProps extends MackinTheme {
+    backgroundColor?: string;
+    color?: string;
+}
+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 };

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', 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. */
@@ -118,7 +118,6 @@ const calcDynamicThemeProps = (theme) => {
     theme.controls.focusOutlineRequiredShadow = `0px 0px 4px 2px ${theme.colors.focusOutlineRequired}`;
     theme.controls.dividerBorder = `${theme.controls.dividerThickness} solid ${theme.colors.divider}`;
     theme.controls.inputErrorMinHeight = `calc(${theme.fonts.sizeSmall} * 1.5 + 4px)`;
-    theme.controls.buttonBoxShadow = theme.controls.boxShadow;
     theme.mediaQueries.desktop = `@media(min-width:${theme.breakpoints.desktop})`;
     theme.mediaQueries.tablet = `@media(min-width:${theme.breakpoints.tablet})`;
 };
@@ -181,6 +180,8 @@ const defaultTheme = {
         height: '44px',
         heightSmall: '34px',
         boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
+        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
+        buttonBoxShadow: '2px 2px 4px rgba(0, 0, 0, 0.25)',
         hoverBrightness: 'brightness(0.75)',
         transitionDuration: '0.25s',
         transitionEasing: 'ease-in-out',
@@ -194,8 +195,6 @@ const defaultTheme = {
         dividerMargin: '1rem',
         dividerBorder: '',
         dividerThickness: '2px',
-        headerBoxShadow: '0px 2px 12px 6px rgba(0, 0, 0, 0.2)',
-        buttonBoxShadow: '',
         inputErrorMinHeight: '',
         paragraphPadding: '1rem'
     },
@@ -239,9 +238,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};
@@ -308,11 +368,22 @@ const Button = React__namespace.forwardRef((props, ref) => {
 				font-size: 1.3rem;
 			`}
 		`}
-		${props.variant === 'label' && `
+		${(props.variant === 'label') && `
+			display: inline-block;
+			width: auto;
+			box-shadow: none;
+			border: none;
+		`}
+		${(props.variant === 'text') && `
+			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;
@@ -403,18 +474,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;
@@ -727,30 +804,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)));
 };
@@ -786,67 +863,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';
@@ -1557,14 +1573,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%',
@@ -3071,6 +3087,11 @@ const generateLinkStyles = (props, theme) => {
 		box-shadow: none;
 		border: none;
 	`}
+	${props.variant === 'text' && `
+		box-shadow: none;
+		border: none;
+		cursor: auto;
+	`}
 	${props.variant === 'icon' && `
 		box-shadow: none;
 		border: none;
@@ -3100,10 +3121,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));
@@ -3111,7 +3135,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
@@ -4430,7 +4453,7 @@ select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
-  line-height: 1; /* 1 Mackin changed this from 1.15 to 1 which seems to be the Chrome default for buttons. */
+  /* line-height: 1.15; This causes issues with Chrome buttons. */
   margin: 0; /* 2 */
 }
 
@@ -4604,14 +4627,70 @@ 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))));
 };
 
+const ThemeRenderer = (p) => {
+    const { backgroundColor, color } = p, theme = __rest(p, ["backgroundColor", "color"]);
+    const flatTheme = flatten(theme);
+    const entries = lodash.orderBy(Object.entries(flatTheme), x => x[0]);
+    return (React__namespace.createElement(Table, { caption: (React__namespace.createElement("div", null,
+            React__namespace.createElement(Text, { tag: "h1", align: "center" }, "Theme"),
+            React__namespace.createElement(Text, { tag: "p", align: "center", italics: true }, "Background color applied to show colors with alpha ('rgba(X, X, X, 0.X)')"))), className: css.css({
+            backgroundColor: backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : '#eee7ca',
+            color: color !== null && color !== void 0 ? color : 'black'
+        }) },
+        React__namespace.createElement("thead", null,
+            React__namespace.createElement(Tr, null,
+                React__namespace.createElement(Th, { align: "left" }, "Property"),
+                React__namespace.createElement(Th, { align: "left" }, "Value"))),
+        React__namespace.createElement("tbody", null, entries.map(([key, value]) => {
+            let colorBox;
+            if (/color/i.test(key)) {
+                colorBox = (React__namespace.createElement("span", { className: css.css({
+                        display: 'block',
+                        border: '1px solid black',
+                        width: '100%',
+                        height: 24,
+                        background: value
+                    }) }));
+            }
+            return (React__namespace.createElement(Tr, { key: key },
+                React__namespace.createElement(Td, { align: "left" }, key),
+                React__namespace.createElement(Td, { align: "left" },
+                    React__namespace.createElement("div", { className: css.css({
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '1rem'
+                        }) },
+                        React__namespace.createElement("span", { className: css.css({ flexShrink: 1 }) }, value),
+                        " ",
+                        colorBox))));
+        }))));
+};
+const flatten = (obj, parent, path = 'theme') => {
+    const flatObj = parent !== null && parent !== void 0 ? parent : {};
+    for (const prop in obj) {
+        const value = obj[prop];
+        const fullPath = `${path}.${prop}`;
+        if (typeof value !== 'object') {
+            flatObj[fullPath] = value;
+        }
+        else {
+            flatten(value, flatObj, fullPath);
+        }
+    }
+    return flatObj;
+};
+
 exports.Accordian = Accordian;
 exports.Autocomplete = Autocomplete;
 exports.Backdrop = Backdrop$1;
@@ -4668,6 +4747,7 @@ exports.TextInput = TextInput;
 exports.Th = Th;
 exports.ThSort = ThSort;
 exports.ThemeProvider = ThemeProvider;
+exports.ThemeRenderer = ThemeRenderer;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TogglePasswordInput = TogglePasswordInput;

package/package.json

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