@mezzanine-ui/react 0.16.0 → 1.0.0-beta.0

package/Transition/Rotate.js

@@ -0,0 +1,30 @@
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { forwardRef, cloneElement } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+
+/**
+ * The react component for `mezzanine` transition rotate.
+ * Unlike other transition components, Rotate does not unmount the element.
+ * It simply rotates the element based on the `in` state.
+ *
+ * Common use case: arrow indicators that rotate to indicate expand/collapse state.
+ */
+const Rotate = forwardRef(function Rotate(props, ref) {
+    const { children, degrees = 180, duration = MOTION_DURATION.fast, easing = MOTION_EASING.standard, in: inProp = false, transformOrigin = 'center', } = props;
+    const childRef = 'ref' in children ? children.ref : undefined;
+    const composedRef = useComposeRefs([ref, childRef]);
+    const childProps = children.props;
+    const style = {
+        transform: inProp ? `rotate(${degrees}deg)` : 'rotate(0deg)',
+        transformOrigin,
+        transition: `transform ${duration}ms ${easing}`,
+        ...(childProps.style || {}),
+    };
+    return cloneElement(children, {
+        ...childProps,
+        ref: composedRef,
+        style,
+    });
+});
+
+export { Rotate as default };

package/Transition/Scale.d.ts

@@ -0,0 +1,13 @@
+import { TransitionImplementationProps } from './Transition';
+export interface ScaleProps extends TransitionImplementationProps {
+    /**
+     * The transform origin for child element.
+     * @default 'center'
+     */
+    transformOrigin?: string;
+}
+/**
+ * The react component for `mezzanine` transition scale.
+ */
+declare const Scale: import("react").ForwardRefExoticComponent<ScaleProps & import("react").RefAttributes<HTMLElement>>;
+export default Scale;

package/Transition/{Grow.js → Scale.js}

@@ -1,6 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, cloneElement } from 'react';
-import { MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
 import { useComposeRefs } from '../hooks/useComposeRefs.js';
 import Transition from './Transition.js';
 import { getAutoSizeDuration } from './getAutoSizeDuration.js';
@@ -9,7 +9,7 @@ import { useAutoTransitionDuration } from './useAutoTransitionDuration.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
 function getScale(value) {
-    return `scale(${value}, ${value ** 2})`;
+    return `scale(${value})`;
 }
 function getStyle(state) {
     if (state === 'entering') {
@@ -26,19 +26,24 @@ function getStyle(state) {
     }
     return {
         opacity: 0,
-        transform: getScale(0.75),
+        transform: getScale(0.95),
     };
 }
+const defaultDuration = {
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
+};
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.entrance,
+    exit: MOTION_EASING.exit,
 };
 /**
- * The react component for `mezzanine` transition grow.
+ * The react component for `mezzanine` transition scale.
  */
-const Grow = forwardRef(function Grow(props, ref) {
-    const { appear, children, delay = 0, duration = 'auto', easing = defaultEasing, in: inProp, onEnter, onEntered, onExit, onExited, transformOrigin, ...rest } = props;
-    const { autoTransitionDuration, addEndListener } = useAutoTransitionDuration(duration);
+const Scale = forwardRef(function Scale(props, ref) {
+    const { appear, children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp, onEnter, onEntered, onExit, onExited, transformOrigin = 'center', ...rest } = props;
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const { autoTransitionDurationRef, addEndListener } = useAutoTransitionDuration(duration);
     const nodeRef = useRef(null);
     const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
         delay,
@@ -48,12 +53,12 @@ const Grow = forwardRef(function Grow(props, ref) {
             'opacity',
             [
                 'transform',
-                (transitionProps, mode) => {
+                (transitionProps) => {
                     const { delay: delayProp, duration: durationProp } = transitionProps;
                     return {
                         ...transitionProps,
-                        delay: mode === 'exit' ? delayProp || durationProp * 0.333 : delayProp,
-                        duration: durationProp * 0.666,
+                        delay: delayProp,
+                        duration: durationProp,
                     };
                 },
             ],
@@ -61,7 +66,7 @@ const Grow = forwardRef(function Grow(props, ref) {
         resolveAutoDuration: () => {
             var _a, _b;
             const autoSizeDuration = getAutoSizeDuration((_b = (_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
-            autoTransitionDuration.current = autoSizeDuration;
+            autoTransitionDurationRef.current = autoSizeDuration;
             return autoSizeDuration;
         },
     }, children === null || children === void 0 ? void 0 : children.props.style);
@@ -73,7 +78,6 @@ const Grow = forwardRef(function Grow(props, ref) {
         duration,
         in: inProp,
         nodeRef,
-        /* eslint-disable no-param-reassign */
         onEnter(node, isAppearing) {
             setNodeTransition(node, 'enter');
             reflow(node);
@@ -99,7 +103,6 @@ const Grow = forwardRef(function Grow(props, ref) {
                 onExited(node);
             }
         },
-        /* eslint-enable no-param-reassign */
     };
     return (jsx(Transition, { ...transitionProps, children: children &&
             ((state) => cloneElement(children, {
@@ -114,4 +117,4 @@ const Grow = forwardRef(function Grow(props, ref) {
             })) }));
 });
 
-export { Grow as default };
+export { Scale as default };

package/Transition/Slide.d.ts

@@ -0,0 +1,7 @@
+import { TransitionImplementationProps } from './Transition';
+export type SlideProps = TransitionImplementationProps;
+/**
+ * The react component for `mezzanine` transition slide in/out.
+ */
+declare const Slide: import("react").ForwardRefExoticComponent<TransitionImplementationProps & import("react").RefAttributes<HTMLElement>>;
+export default Slide;

package/Transition/{Zoom.js → Slide.js}

@@ -7,29 +7,31 @@ import { reflow } from './reflow.js';
 import { useSetNodeTransition } from './useSetNodeTransition.js';
 
 function getStyle(state, inProp) {
-    const style = {
-        transform: 'scale(0)',
-    };
     if (state === 'entering' || state === 'entered') {
-        style.transform = 'none';
+        return {
+            transform: 'translate3d(0, 0, 0)',
+        };
     }
-    else if (state === 'exited' && !inProp) {
+    const style = {
+        transform: 'translate3d(100%, 0, 0)',
+    };
+    if (state === 'exited' && !inProp) {
         style.visibility = 'hidden';
     }
     return style;
 }
 const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
+    enter: MOTION_DURATION.slow,
+    exit: MOTION_DURATION.slow,
 };
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.standard,
+    exit: MOTION_EASING.standard,
 };
 /**
- * The react component for `mezzanine` transition zoom.
+ * The react component for `mezzanine` transition slide in/out.
  */
-const Zoom = forwardRef(function Zoom(props, ref) {
+const Slide = forwardRef(function Slide(props, ref) {
     const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
     const duration = durationProp === 'auto' ? defaultDuration : durationProp;
     const nodeRef = useRef(null);
@@ -82,4 +84,4 @@ const Zoom = forwardRef(function Zoom(props, ref) {
             })) }));
 });
 
-export { Zoom as default };
+export { Slide as default };

package/Transition/SlideFade.d.ts

@@ -1,5 +1,7 @@
 import { TransitionImplementationProps } from './Transition';
+/** @deprecated use Translate instead */
 export type SlideFadeDirection = 'left' | 'right' | 'up' | 'down';
+/** @deprecated use Translate instead */
 export interface SlideFadeProps extends TransitionImplementationProps {
     /**
      * The direction of child element will enter to.
@@ -9,6 +11,7 @@ export interface SlideFadeProps extends TransitionImplementationProps {
 }
 /**
  * The react component for `mezzanine` transition slide fade.
+ * @deprecated use Translate instead
  */
 declare const SlideFade: import("react").ForwardRefExoticComponent<SlideFadeProps & import("react").RefAttributes<HTMLElement>>;
 export default SlideFade;

package/Transition/SlideFade.js

@@ -28,15 +28,16 @@ function getStyle(state, inProp, direction) {
     return style;
 }
 const defaultDuration = {
-    enter: MOTION_DURATION.short,
-    exit: MOTION_DURATION.shorter,
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
 };
 const defaultEasing = {
-    enter: MOTION_EASING.decelerated,
-    exit: MOTION_EASING.accelerated,
+    enter: MOTION_EASING.standard,
+    exit: MOTION_EASING.standard,
 };
 /**
  * The react component for `mezzanine` transition slide fade.
+ * @deprecated use Translate instead
  */
 const SlideFade = forwardRef(function SlideFade(props, ref) {
     const { children, direction = 'down', delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;

package/Transition/Transition.d.ts

@@ -1,7 +1,7 @@
 import { RefObject, CSSProperties, ReactElement, JSXElementConstructor, Ref } from 'react';
-import { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
+import type { TransitionStatus as TransitionState, TransitionChildren } from 'react-transition-group/Transition';
 import { NativeElementTag } from '../utils/jsx-types';
-export { TransitionState };
+export type { TransitionState };
 export type TransitionMode = 'enter' | 'exit';
 export type TransitionDuration = 'auto' | number | {
     [mode in TransitionMode]?: number;

package/Transition/Translate.d.ts

@@ -0,0 +1,14 @@
+import { TransitionImplementationProps } from './Transition';
+export type TranslateFrom = 'top' | 'bottom' | 'left' | 'right';
+export interface TranslateProps extends TransitionImplementationProps {
+    /**
+     * The position of child element will enter from.
+     * @default 'top'
+     */
+    from?: TranslateFrom;
+}
+/**
+ * The react component for `mezzanine` transition translate in/out.
+ */
+declare const Translate: import("react").ForwardRefExoticComponent<TranslateProps & import("react").RefAttributes<HTMLElement>>;
+export default Translate;

package/Transition/Translate.js

@@ -0,0 +1,94 @@
+import { jsx } from 'react/jsx-runtime';
+import { MOTION_DURATION, MOTION_EASING } from '@mezzanine-ui/system/motion';
+import { forwardRef, useRef, cloneElement } from 'react';
+import { useComposeRefs } from '../hooks/useComposeRefs.js';
+import Transition from './Transition.js';
+import { reflow } from './reflow.js';
+import { useSetNodeTransition } from './useSetNodeTransition.js';
+
+function getStyle(state, inProp, from) {
+    if (state === 'entering' || state === 'entered') {
+        return {
+            opacity: 1,
+            transform: 'translate3d(0, 0, 0)',
+        };
+    }
+    const style = {
+        opacity: 0,
+        transform: {
+            top: 'translate3d(0, -4px, 0)',
+            right: 'translate3d(4px, 0, 0)',
+            bottom: 'translate3d(0, 4px, 0)',
+            left: 'translate3d(-4px, 0, 0)',
+        }[from],
+    };
+    if (state === 'exited' && !inProp) {
+        style.visibility = 'hidden';
+    }
+    return style;
+}
+const defaultDuration = {
+    enter: MOTION_DURATION.moderate,
+    exit: MOTION_DURATION.moderate,
+};
+const defaultEasing = {
+    enter: MOTION_EASING.standard,
+    exit: MOTION_EASING.standard,
+};
+/**
+ * The react component for `mezzanine` transition translate in/out.
+ */
+const Translate = forwardRef(function Translate(props, ref) {
+    const { children, delay = 0, duration: durationProp = defaultDuration, easing = defaultEasing, from = 'top', in: inProp = false, onEnter, onEntered, onExit, onExited, ...rest } = props;
+    const duration = durationProp === 'auto' ? defaultDuration : durationProp;
+    const nodeRef = useRef(null);
+    const composedNodeRef = useComposeRefs([ref, nodeRef]);
+    const [setNodeTransition, resetNodeTransition] = useSetNodeTransition({
+        delay,
+        duration,
+        easing,
+        properties: ['opacity', 'transform'],
+    }, children === null || children === void 0 ? void 0 : children.props.style);
+    const transitionProps = {
+        ...rest,
+        duration,
+        in: inProp,
+        nodeRef,
+        onEnter(node, isAppearing) {
+            setNodeTransition(node, 'enter');
+            reflow(node);
+            if (onEnter) {
+                onEnter(node, isAppearing);
+            }
+        },
+        onEntered(node, isAppearing) {
+            resetNodeTransition(node);
+            if (onEntered) {
+                onEntered(node, isAppearing);
+            }
+        },
+        onExit(node) {
+            setNodeTransition(node, 'exit');
+            if (onExit) {
+                onExit(node);
+            }
+        },
+        onExited(node) {
+            resetNodeTransition(node);
+            if (onExited) {
+                onExited(node);
+            }
+        },
+    };
+    return (jsx(Transition, { ...transitionProps, children: children &&
+            ((state) => cloneElement(children, {
+                ...children.props,
+                ref: composedNodeRef,
+                style: {
+                    ...getStyle(state, inProp, from),
+                    ...children.props.style,
+                },
+            })) }));
+});
+
+export { Translate as default };

package/Transition/index.d.ts

@@ -1,6 +1,16 @@
-export { TransitionState, TransitionMode, TransitionDelay, TransitionDuration, TransitionEasing, TransitionImplementationChildProps, TransitionImplementationProps, TransitionProps, default, } from './Transition';
-export { CollapseProps, default as Collapse } from './Collapse';
-export { FadeProps, default as Fade } from './Fade';
-export { GrowProps, default as Grow } from './Grow';
-export { SlideFadeDirection, SlideFadeProps, default as SlideFade, } from './SlideFade';
-export { ZoomProps, default as Zoom } from './Zoom';
+export { default } from './Transition';
+export type { TransitionState, TransitionMode, TransitionDelay, TransitionDuration, TransitionEasing, TransitionImplementationChildProps, TransitionImplementationProps, TransitionProps, } from './Transition';
+export type { CollapseProps } from './Collapse';
+export { default as Collapse } from './Collapse';
+export type { FadeProps } from './Fade';
+export { default as Fade } from './Fade';
+export type { RotateProps } from './Rotate';
+export { default as Rotate } from './Rotate';
+export type { ScaleProps } from './Scale';
+export { default as Scale } from './Scale';
+export { default as Slide } from './Slide';
+export type { SlideProps } from './Slide';
+export { default as SlideFade } from './SlideFade';
+export type { SlideFadeDirection, SlideFadeProps } from './SlideFade';
+export { default as Translate } from './Translate';
+export type { TranslateFrom, TranslateProps } from './Translate';

package/Transition/index.js

@@ -1,6 +1,8 @@
 export { default } from './Transition.js';
 export { default as Collapse } from './Collapse.js';
 export { default as Fade } from './Fade.js';
-export { default as Grow } from './Grow.js';
+export { default as Rotate } from './Rotate.js';
+export { default as Scale } from './Scale.js';
+export { default as Slide } from './Slide.js';
 export { default as SlideFade } from './SlideFade.js';
-export { default as Zoom } from './Zoom.js';
+export { default as Translate } from './Translate.js';

package/Transition/useAutoTransitionDuration.d.ts

@@ -1,5 +1,5 @@
 import { TransitionDuration } from './Transition';
 export declare function useAutoTransitionDuration(duration?: TransitionDuration): {
-    autoTransitionDuration: import("react").RefObject<number>;
+    autoTransitionDurationRef: import("react").RefObject<number>;
     addEndListener: (node: HTMLElement, next: VoidFunction) => void;
 };

package/Transition/useAutoTransitionDuration.js

@@ -2,14 +2,14 @@ import { useRef, useEffect } from 'react';
 
 function useAutoTransitionDuration(duration) {
     const timer = useRef(NaN);
-    const autoTransitionDuration = useRef(NaN);
+    const autoTransitionDurationRef = useRef(NaN);
     const addEndListener = (_, next) => {
         if (duration === 'auto') {
-            timer.current = window.setTimeout(() => next(), autoTransitionDuration.current || 0);
+            timer.current = window.setTimeout(() => next(), autoTransitionDurationRef.current || 0);
         }
     };
     useEffect(() => () => window.clearTimeout(timer.current), []);
-    return { autoTransitionDuration, addEndListener };
+    return { autoTransitionDurationRef, addEndListener };
 }
 
 export { useAutoTransitionDuration };

package/Transition/useSetNodeTransition.js

@@ -1,7 +1,6 @@
 import { getTransitionStyleProps } from './getTransitionStyleProps.js';
 
 function useSetNodeTransition(props, style) {
-    /* eslint-disable no-param-reassign */
     const setNodeTransition = (node, mode) => {
         const transitionProps = getTransitionStyleProps(mode, props);
         const { properties } = props;
@@ -28,7 +27,6 @@ function useSetNodeTransition(props, style) {
             node.style.transition = transition;
         }
     };
-    /* eslint-enable no-param-reassign */
     return [setNodeTransition, resetNodeTransition];
 }
 

package/Tree/TreeNode.js

@@ -1,12 +1,13 @@
+'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { treeClasses } from '@mezzanine-ui/core/tree';
 import { CaretRightIcon } from '@mezzanine-ui/icons';
 import { forwardRef, useContext, useMemo } from 'react';
+import Checkbox from '../Checkbox/Checkbox.js';
 import Typography from '../Typography/Typography.js';
 import { MezzanineConfig } from '../Provider/context.js';
-import Loading from '../Loading/Loading.js';
+import Spin from '../Spin/Spin.js';
 import Icon from '../Icon/Icon.js';
-import Checkbox from '../Checkbox/Checkbox.js';
 import Collapse from '../Transition/Collapse.js';
 import cx from 'clsx';
 
@@ -18,12 +19,12 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
     const { children, className, disabled, dynamicNodesFetching, expanded, indeterminate, label, multiple = false, onExpand: onExpandProp, onSelect: onSelectProp, selectable = false, selected, size = globalSize, value, ...restRootProps } = props;
     const variant = useMemo(() => {
         if (size === 'small') {
-            return 'input3';
+            return 'input';
         }
         if (size === 'large') {
-            return 'input1';
+            return 'input';
         }
-        return 'input2';
+        return 'input';
     }, [size]);
     const onExpand = onExpandProp
         ? () => {
@@ -43,7 +44,7 @@ const TreeNode = forwardRef(function TreeNode(props, ref) {
                             [treeClasses.nodeLabelIndeterminate]: indeterminate,
                             [treeClasses.nodeLabelActive]: selected,
                             [treeClasses.nodeLabelDisabled]: disabled,
-                        }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Loading, { loading: true, iconProps: { size: 16 } }) }))] }));
+                        }), children: label }))] }), mayHaveChildren && (jsx(Collapse, { in: expanded, appear: false, children: children || jsx(Spin, { loading: true, iconProps: { size: 16 } }) }))] }));
 });
 
 export { TreeNode as default };

package/Tree/index.d.ts

@@ -1,8 +1,13 @@
 export * from './typings';
 export { uniqueArray, toggleValue, toggleValueWithStatusControl, } from './toggleValue';
 export { traverseTree } from './traverseTree';
-export { UseTreeExpandedValueProps, useTreeExpandedValue, } from './useTreeExpandedValue';
-export { GetTreeNodeEntitiesProps, getTreeNodeEntities, } from './getTreeNodeEntities';
-export { TreeNodeElementProps, TreeNodeProps, default as TreeNode, } from './TreeNode';
-export { TreeNodeListElementProps, TreeNodeListProps, default as TreeNodeList, } from './TreeNodeList';
-export { TreeProps, default } from './Tree';
+export { useTreeExpandedValue } from './useTreeExpandedValue';
+export type { UseTreeExpandedValueProps } from './useTreeExpandedValue';
+export { getTreeNodeEntities } from './getTreeNodeEntities';
+export type { GetTreeNodeEntitiesProps } from './getTreeNodeEntities';
+export { default as TreeNode } from './TreeNode';
+export type { TreeNodeElementProps, TreeNodeProps } from './TreeNode';
+export { default as TreeNodeList } from './TreeNodeList';
+export type { TreeNodeListElementProps, TreeNodeListProps, } from './TreeNodeList';
+export type { TreeProps } from './Tree';
+export { default } from './Tree';

package/Typography/Typography.d.ts

@@ -1,5 +1,6 @@
 import { JSXElementConstructor } from 'react';
-import { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight } from '@mezzanine-ui/core/typography';
+import { TypographyAlign, TypographyColor, TypographyDisplay } from '@mezzanine-ui/core/typography';
+import { TypographySemanticType } from '@mezzanine-ui/system/typography';
 import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
 export type TypographyComponent = `h${1 | 2 | 3 | 4 | 5 | 6}` | 'p' | 'span' | 'label' | 'div' | 'caption' | 'a' | JSXElementConstructor<any>;
 interface TypographyPropsBase {
@@ -8,7 +9,7 @@ interface TypographyPropsBase {
      */
     align?: TypographyAlign;
     /**
-     * The color name provided by palette.
+     * The text semantic color from the palette.
      */
     color?: TypographyColor;
     /**
@@ -28,14 +29,10 @@ interface TypographyPropsBase {
      */
     noWrap?: boolean;
     /**
-     * Applies the typography variant.
-     * @default 'body1'
+     * Applies the typography semantic type.
+     * @default 'body'
      */
-    variant?: TypographyVariant;
-    /**
-     * The css variable for customizing `font-weight`.
-     */
-    weight?: TypographyWeight;
+    variant?: TypographySemanticType;
 }
 export type TypographyProps<C extends TypographyComponent = 'p'> = ComponentOverridableForwardRefComponentPropsFactory<TypographyComponent, C, TypographyPropsBase>;
 /**

package/Typography/Typography.js

@@ -3,11 +3,11 @@ import { forwardRef } from 'react';
 import { toTypographyCssVars, typographyClasses } from '@mezzanine-ui/core/typography';
 import cx from 'clsx';
 
-function getComponentFromVariant(variant) {
-    if (variant.startsWith('h')) {
-        return variant;
+function getComponentFromType(type) {
+    if (type === 'h1' || type === 'h2' || type === 'h3') {
+        return type;
     }
-    if (variant.startsWith('body')) {
+    if (type.startsWith('body') || type.startsWith('text-link-body')) {
         return 'p';
     }
     return 'span';
@@ -16,26 +16,24 @@ function getComponentFromVariant(variant) {
  * The react component for `mezzanine` typography.
  */
 const Typography = forwardRef(function Typography(props, ref) {
-    const { align, children, className, color, component, display, ellipsis = false, noWrap = false, variant = 'body1', style: styleProp, weight, ...rest } = props;
-    const Component = component || getComponentFromVariant(variant);
+    const { align, children, className, color, component, display, ellipsis = false, noWrap = false, variant = 'body', style: styleProp, ...rest } = props;
+    const Component = component || getComponentFromType(variant);
     const cssVars = toTypographyCssVars({
         align,
         color,
         display,
-        weight,
     });
     const style = {
         ...cssVars,
         ...styleProp,
     };
     const title = ellipsis && typeof children === 'string' ? children : undefined;
-    return (jsx(Component, { ...rest, ref: ref, className: cx(typographyClasses.variant(variant), {
+    return (jsx(Component, { ...rest, ref: ref, className: cx(typographyClasses.type(variant), {
             [typographyClasses.align]: align,
             [typographyClasses.color]: color,
             [typographyClasses.display]: display,
             [typographyClasses.ellipsis]: ellipsis,
             [typographyClasses.noWrap]: noWrap,
-            [typographyClasses.weight]: weight,
         }, className), style: style, title: title, children: children }));
 });
 

package/Typography/index.d.ts

@@ -1,11 +1,8 @@
 import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { TypographyComponent, TypographyProps } from './Typography';
-export type { TypographyAlign, TypographyColor, TypographyDisplay, TypographyVariant, TypographyWeight, } from '@mezzanine-ui/core/typography';
+export type { TypographyAlign, TypographyColor, TypographyDisplay, } from '@mezzanine-ui/core/typography';
+export type { TypographySemanticType } from '@mezzanine-ui/system/typography';
 export type { TypographyComponent, TypographyProps };
-/**
- * @remark
- * Add type alias here for parsable to react docgen typescript.
- */
 type GenericTypography = <C extends TypographyComponent = 'p'>(props: PropsWithoutRef<TypographyProps<C>> & RefAttributes<HTMLElement>) => ReactElement<any>;
 declare const _default: GenericTypography;
 export default _default;