@mezzanine-ui/react 1.0.0-canary.0 → 1.0.0-canary.2

package/Accordion/AccordionSummary.js

@@ -35,11 +35,11 @@ const AccordionSummary = forwardRef(function AccordionSummary(props, ref) {
         }
         return result;
     }, [detailsId, expanded]);
-    const defaultIconElement = useMemo(() => (jsx(Icon, { color: disabled ? 'disabled' : 'primary', className: cx(accordionClasses.summaryIcon, {
+    const defaultIconElement = useMemo(() => (jsx(Icon, { color: disabled ? 'neutral-faint' : 'neutral', className: cx(accordionClasses.summaryIcon, {
             [accordionClasses.summaryIconExpanded]: expanded,
             [accordionClasses.summaryIconDisabled]: disabled,
         }, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" })), [disabled, expanded, iconClassNameProp, onToggle]);
-    const defaultIconWithPrefixClassName = useMemo(() => (jsx(Icon, { color: disabled ? 'disabled' : 'primary', className: cx(accordionClasses.summaryIcon, {
+    const defaultIconWithPrefixClassName = useMemo(() => (jsx(Icon, { color: disabled ? 'neutral-faint' : 'neutral', className: cx(accordionClasses.summaryIcon, {
             [accordionClasses.summaryIconExpanded]: expanded,
             [accordionClasses.summaryIconDisabled]: disabled,
         }, accordionClasses.summaryMainPartPrefix, iconClassNameProp), icon: ChevronDownIcon, onClick: onToggle, onMouseDown: (evt) => evt.preventDefault(), role: "button" })), [disabled, expanded, iconClassNameProp, onToggle]);

package/Button/Button.js

@@ -1,9 +1,8 @@
 'use client';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import { SpinnerIcon } from '@mezzanine-ui/icons';
 import { buttonClasses } from '@mezzanine-ui/core/button';
-import { MezzanineConfig } from '../Provider/context.js';
 import Icon from '../Icon/Icon.js';
 import cx from 'clsx';
 
@@ -11,30 +10,35 @@ import cx from 'clsx';
  * The react component for `mezzanine` button.
  */
 const Button = forwardRef(function Button(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { children, className, color = 'primary', component: Component = 'button', danger = false, disabled = false, loading = false, onClick, prefix: prefixProp, size = globalSize, suffix: suffixProp, variant = 'text', ...rest } = props;
-    let prefix = prefixProp;
-    let suffix = suffixProp;
-    if (loading) {
-        const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true });
-        if (suffix && !prefix) {
-            suffix = loadingIcon;
+    const { children, className, component: Component = 'button', disabled = false, icon, loading = false, onClick, size = 'main', variant = 'base-primary', ...rest } = props;
+    // 判斷是否為 icon-only 模式
+    const isIconOnly = (icon === null || icon === void 0 ? void 0 : icon.position) === 'icon-only' || (!!icon && !children);
+    // 判斷 icon 位置
+    const hasLeadingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'leading' && !isIconOnly;
+    const hasTrailingIcon = (icon === null || icon === void 0 ? void 0 : icon.position) === 'trailing' && !isIconOnly;
+    // Loading 狀態下的 icon
+    const loadingIcon = jsx(Icon, { icon: SpinnerIcon, spin: true });
+    // 渲染 icon 內容
+    const renderIcon = () => {
+        if (loading) {
+            return loadingIcon;
         }
-        else {
-            prefix = loadingIcon;
+        if (icon) {
+            return jsx(Icon, { icon: icon.src });
         }
-    }
-    const asIconBtn = children == null && !!(prefix || suffix);
-    return (jsxs(Component, { ...rest, ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.color(color), buttonClasses.size(size), {
-            [buttonClasses.danger]: danger,
+        return null;
+    };
+    return (jsx(Component, { ...rest, ref: ref, "aria-disabled": disabled, className: cx(buttonClasses.host, buttonClasses.variant(variant), buttonClasses.size(size), {
             [buttonClasses.disabled]: disabled,
-            [buttonClasses.icon]: asIconBtn,
             [buttonClasses.loading]: loading,
+            [buttonClasses.iconLeading]: hasLeadingIcon,
+            [buttonClasses.iconTrailing]: hasTrailingIcon,
+            [buttonClasses.iconOnly]: isIconOnly,
         }, className), disabled: disabled, onClick: (event) => {
             if (!disabled && !loading && onClick) {
                 onClick(event);
             }
-        }, children: [prefix, children && jsx("span", { className: buttonClasses.label, children: children }), suffix] }));
+        }, children: loading ? (renderIcon()) : (jsxs(Fragment, { children: [(hasLeadingIcon || isIconOnly) && renderIcon(), !isIconOnly && children, hasTrailingIcon && renderIcon()] })) }));
 });
 
 export { Button as default };

package/Button/ButtonGroup.d.ts

@@ -1,29 +1,13 @@
 import { ReactElement } from 'react';
-import { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { ButtonGroupOrientation, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
 import { NativeElementPropsWithoutKeyAndRef } from '../utils/jsx-types';
 import { ButtonProps } from './Button';
-import { IconButtonProps } from './IconButton';
-export type ButtonGroupChild = ReactElement<ButtonProps | IconButtonProps> | null | undefined | false;
+export type ButtonGroupChild = ReactElement<ButtonProps> | null | undefined | false;
 export interface ButtonGroupProps extends NativeElementPropsWithoutKeyAndRef<'div'> {
     /**
-     * If `true`, all buttons will not have spacing between each others.
-     * @default false
-     */
-    attached?: boolean;
-    /**
-     * Only accept button elements or icon button elements.
+     * Only accept button elements.
      */
     children: ButtonGroupChild | ButtonGroupChild[];
-    /**
-     * If the `color` of a button inside group not provided, the `color` of group will override it.
-     * @default 'primary'
-     */
-    color?: ButtonColor;
-    /**
-     * If the `danger` of a button inside group not provided, the `danger` of group will override it.
-     * @default false
-     */
-    danger?: boolean;
     /**
      * If the `disabled` of a button inside group not provided, the `disabled` of group will override it.
      * @default false
@@ -36,23 +20,17 @@ export interface ButtonGroupProps extends NativeElementPropsWithoutKeyAndRef<'di
     fullWidth?: boolean;
     /**
      * The orientation of button group.
-     * @default horizontal
+     * @default 'horizontal'
      */
     orientation?: ButtonGroupOrientation;
     /**
      * If the `size` of a button inside group not provided, the `size` of group will override it.
-     * @default 'medium'
+     * @default 'main'
      */
     size?: ButtonSize;
-    /**
-     * The spacing level of button gap between each buttons.
-     * Will be added on if `attached`=false.
-     * @default small:3,others:4
-     */
-    spacing?: ButtonGroupSpacing;
     /**
      * If the `variant` of a button inside group not provided, the `variant` of group will override it.
-     * @default 'text'
+     * @default 'base-primary'
      */
     variant?: ButtonVariant;
 }

package/Button/ButtonGroup.js

@@ -1,34 +1,24 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useContext, Children, cloneElement } from 'react';
-import { toButtonGroupCssVars, buttonGroupClasses } from '@mezzanine-ui/core/button';
-import { MezzanineConfig } from '../Provider/context.js';
+import { forwardRef, Children, cloneElement } from 'react';
+import { buttonGroupClasses } from '@mezzanine-ui/core/button';
 import cx from 'clsx';
 
 /**
  * The react component for `mezzanine` button group.
  */
 const ButtonGroup = forwardRef(function ButtonGroup(props, ref) {
-    const { size: globalSize } = useContext(MezzanineConfig);
-    const { attached = false, children, className, color = 'primary', danger = false, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = globalSize, spacing, style: styleProp, variant = 'text', ...rest } = props;
-    const cssVars = toButtonGroupCssVars({ size, spacing });
-    const style = {
-        ...styleProp,
-        ...cssVars,
-    };
+    const { children, className, disabled = false, fullWidth = false, orientation = 'horizontal', role = 'group', size = 'main', variant = 'base-primary', ...rest } = props;
     return (jsx("div", { ref: ref, ...rest, "aria-orientation": orientation, className: cx(buttonGroupClasses.host, buttonGroupClasses.orientation(orientation), {
             [buttonGroupClasses.fullWidth]: fullWidth,
-            [buttonGroupClasses.attached]: attached,
-        }, className), role: role, style: style, children: Children.map(children, (unknownChild) => {
-            var _a, _b;
+        }, className), role: role, children: Children.map(children, (unknownChild) => {
+            var _a;
             const child = unknownChild;
             if (!child) {
                 return null;
             }
             return cloneElement(child, {
-                color: child.props.color || color,
-                danger: (_a = child.props.danger) !== null && _a !== void 0 ? _a : danger,
-                disabled: (_b = child.props.disabled) !== null && _b !== void 0 ? _b : disabled,
+                disabled: (_a = child.props.disabled) !== null && _a !== void 0 ? _a : disabled,
                 size: child.props.size || size,
                 variant: child.props.variant || variant,
             });

package/Button/index.d.ts

@@ -1,17 +1,10 @@
 import { PropsWithoutRef, ReactElement, RefAttributes } from 'react';
 import { ButtonComponent, ButtonPropsBase } from './typings';
 import { ButtonProps } from './Button';
-import { IconButtonProps } from './IconButton';
-export type { ButtonColor, ButtonGroupOrientation, ButtonGroupSpacing, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
+export type { ButtonIcon, ButtonIconPosition, ButtonGroupOrientation, ButtonSize, ButtonVariant, } from '@mezzanine-ui/core/button';
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupChild, ButtonGroupProps } from './ButtonGroup';
-export type { ButtonComponent, ButtonProps, ButtonPropsBase, IconButtonProps };
-/**
- * @remark
- * Add type alias here for parsable to react docgen typescript.
- */
-type GenericIconButton = <C extends ButtonComponent = 'button'>(props: PropsWithoutRef<IconButtonProps<C>> & RefAttributes<HTMLElement>) => ReactElement<any>;
-export declare const IconButton: GenericIconButton;
+export type { ButtonComponent, ButtonProps, ButtonPropsBase };
 /**
  * @remark
  * Add type alias here for parsable to react docgen typescript.

package/Button/index.js

@@ -1,7 +1,6 @@
 import Button from './Button.js';
-import IconButton$1 from './IconButton.js';
 export { default as ButtonGroup } from './ButtonGroup.js';
 
-const IconButton = IconButton$1;
 
-export { IconButton, Button as default };
+
+export { Button as default };

package/Button/typings.d.ts

@@ -1,44 +1,29 @@
-import { JSXElementConstructor, ReactNode } from 'react';
-import { ButtonColor, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
+import { JSXElementConstructor } from 'react';
+import { ButtonIcon, ButtonSize, ButtonVariant } from '@mezzanine-ui/core/button';
 export type ButtonComponent = 'button' | 'a' | JSXElementConstructor<any>;
 export interface ButtonPropsBase {
     /**
-     * The color name provided by palette.
-     * @default 'primary'
+     * The variant of button.
+     * @default 'base-primary'
      */
-    color?: ButtonColor;
+    variant?: ButtonVariant;
     /**
-     * If true, will use error color instead of color from props.
-     * @default false
+     * The size of button.
+     * @default 'main'
      */
-    danger?: boolean;
+    size?: ButtonSize;
     /**
      * If true, button will be disabled
      * @default false
      */
     disabled?: boolean;
     /**
-     * If true, replace the original icon.
-     * Replace suffix if only suffix provided, or prefix.
+     * If true, show loading state with spinner icon.
      * @default false
      */
     loading?: boolean;
     /**
-     * The element placed on the start of button.
-     */
-    prefix?: ReactNode;
-    /**
-     * The size of button.
-     * @default 'medium'
+     * Icon configuration with position and icon source.
      */
-    size?: ButtonSize;
-    /**
-     * The element placed on the end of button.
-     */
-    suffix?: ReactNode;
-    /**
-     * The variant of button.
-     * @default 'text'
-     */
-    variant?: ButtonVariant;
+    icon?: ButtonIcon;
 }

package/Loading/Loading.js

@@ -15,7 +15,7 @@ const Loading = forwardRef(function Loading(props, ref) {
     const composedHostRef = useComposeRefs([ref, hostRef]);
     const spinElement = loading ? (jsxs("div", { ref: isNestedPattern ? null : ref, className: cx(iconClasses.spin, {
             [iconClasses.stretch]: stretch,
-        }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor || 'primary', icon: SpinnerIcon, spin: true, style: {
+        }), children: [jsx(Icon, { ...iconPropsRest, className: cx(iconClasses.icon, iconClassName), color: iconColor, icon: SpinnerIcon, spin: true, style: {
                     ...(iconSize ? { fontSize: `${iconSize}px` } : {}),
                     ...(iconStyle || {}),
                 } }), tip ? (jsx("span", { className: cx(iconClasses.tip, tipClassName), children: tip })) : null] })) : null;

package/Table/expandable/TableExpandable.js

@@ -18,7 +18,7 @@ const TableExpandable = forwardRef(function TableExpandable(props, ref) {
     };
     return (jsx("div", { ...rest, ref: ref, className: cx(tableClasses.collapseAction, className), children: jsx("div", { className: tableClasses.icon, children: showIcon ? (jsx(Icon, { className: cx(tableClasses.icon, {
                     [tableClasses.iconClickable]: expandable,
-                }), color: expandable ? 'primary' : 'disabled', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
+                }), color: expandable ? 'brand' : 'neutral-faint', icon: ChevronDownIcon, onClick: onClick, style: { transform: `rotate(${expanded ? '180deg' : '0'})` } })) : null }) }));
 });
 
 export { TableExpandable as default };

package/Table/rowSelection/TableRowSelection.js

@@ -87,7 +87,7 @@ const TableRowSelection = forwardRef(function TableRowSelection(props, ref) {
                         },
                     }, children: (dropdownRef) => (jsx(Icon, { ref: dropdownRef, className: cx(tableClasses.icon, {
                             [tableClasses.iconClickable]: isMenuAllowOpen,
-                        }), color: isMenuAllowOpen ? 'primary' : 'disabled', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
+                        }), color: isMenuAllowOpen ? 'brand' : 'neutral-faint', icon: MoreVerticalIcon, onClick: onIconClicked })) })) : null })) : null] }));
 });
 
 export { TableRowSelection as default };

package/Table/sorting/TableSortingIcon.js

@@ -15,7 +15,7 @@ const TableSortingIcon = forwardRef(function TableSortingIcon(props, ref) {
     /** styling */
     const currentType = (key === (sorting === null || sorting === void 0 ? void 0 : sorting.sortedOn) ? sorting.sortedType : 'none');
     const currentIconStyle = useMemo(() => ({
-        color: currentType === 'none' ? 'secondary' : 'primary',
+        color: currentType === 'none' ? 'neutral' : 'neutral-strong',
         style: {
             transform: `rotate(${90 * (currentType === 'asc' ? -1 : 1)}deg)`,
         },

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;

package/index.d.ts

@@ -32,8 +32,8 @@ export * from './Form/useSwitchControlValue';
 /**
  * General
  */
-export { default as Button, IconButton, ButtonGroup } from './Button';
-export type { ButtonColor, ButtonComponent, ButtonSize, ButtonVariant, ButtonProps, ButtonPropsBase, IconButtonProps, ButtonGroupChild, ButtonGroupOrientation, ButtonGroupSpacing, ButtonGroupProps, } from './Button';
+export { default as Button, ButtonGroup } from './Button';
+export type { ButtonComponent, ButtonSize, ButtonVariant, ButtonProps, ButtonPropsBase, ButtonGroupChild, ButtonGroupOrientation, ButtonGroupProps, } from './Button';
 export type { IconColor, IconProps } from './Icon';
 export { default as Icon } from './Icon';
 export { default as Typography } from './Typography';

package/index.js

@@ -23,10 +23,9 @@ export { useInputWithClearControlValue } from './Form/useInputWithClearControlVa
 export { useRadioControlValue } from './Form/useRadioControlValue.js';
 export { useSelectValueControl } from './Form/useSelectValueControl.js';
 export { useSwitchControlValue } from './Form/useSwitchControlValue.js';
-export { IconButton } from './Button/index.js';
-export { default as Typography } from './Typography/Typography.js';
 export { default as Button } from './Button/Button.js';
 export { default as ButtonGroup } from './Button/ButtonGroup.js';
+export { default as Typography } from './Typography/Typography.js';
 export { default as Icon } from './Icon/Icon.js';
 export { default as MenuDivider } from './Menu/MenuDivider.js';
 export { default as MenuItem } from './Menu/MenuItem.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mezzanine-ui/react",
-  "version": "1.0.0-canary.0",
+  "version": "1.0.0-canary.2",
   "description": "React components for mezzanine-ui",
   "author": "Mezzanine",
   "repository": {
@@ -29,9 +29,9 @@
   },
   "dependencies": {
     "@hello-pangea/dnd": "^18.0.1",
-    "@mezzanine-ui/core": "^1.0.0-canary.0",
-    "@mezzanine-ui/icons": "^1.0.0-canary.0",
-    "@mezzanine-ui/system": "^1.0.0-canary.0",
+    "@mezzanine-ui/core": "^1.0.0-canary.2",
+    "@mezzanine-ui/icons": "^1.0.0-canary.1",
+    "@mezzanine-ui/system": "^1.0.0-canary.1",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",

package/Button/IconButton.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import { ComponentOverridableForwardRefComponentPropsFactory } from '../utils/jsx-types';
-import { ButtonComponent, ButtonPropsBase } from './typings';
-export type IconButtonProps<C extends ButtonComponent = 'button'> = ComponentOverridableForwardRefComponentPropsFactory<ButtonComponent, C, Omit<ButtonPropsBase, 'prefix' | 'suffix'> & {
-    /**
-     * The icon element.
-     */
-    children?: ReactNode;
-}>;
-/**
- * The react component for `mezzanine` button only has icon.
- */
-declare const IconButton: import("react").ForwardRefExoticComponent<Omit<Omit<import("../utils/jsx-types").ComponentPropsWithoutKeyAndRef<"button">, "size" | "color" | "children" | "disabled" | "danger" | "loading" | "variant"> & Omit<ButtonPropsBase, "prefix" | "suffix"> & {
-    /**
-     * The icon element.
-     */
-    children?: ReactNode;
-}, "component"> & {
-    component?: ButtonComponent | undefined;
-} & import("react").RefAttributes<HTMLButtonElement>>;
-export default IconButton;

package/Button/IconButton.js

@@ -1,13 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import Button from './Button.js';
-
-/**
- * The react component for `mezzanine` button only has icon.
- */
-const IconButton = forwardRef(function IconButton(props, ref) {
-    const { children, ...rest } = props;
-    return jsx(Button, { ...rest, ref: ref, prefix: children });
-});
-
-export { IconButton as default };