@aurora-ds/components 1.1.0 → 1.1.2

package/dist/esm/index.js

@@ -559,11 +559,11 @@ const ICON_SIZE$2 = {
 /**
  * Theme-aware button built on `createVariants`.
  *
- * @example <Button onClick={save}>Save</Button>
- * @example <Button variant='outlined' color='error' startIcon={IconRegistry.CloseIcon}>Delete</Button>
- * @example <Button color='success' isLoading width='100%'>Submitting…</Button>
+ * @example <Button label='Save' onClick={save} />
+ * @example <Button label='Delete' variant='outlined' color='error' startIcon={IconRegistry.CloseIcon} />
+ * @example <Button label='Submitting…' color='success' isLoading width='100%' />
  */
-const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, children, className, type = 'button', disabled, style, ...rest }) => {
+const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', width, flexGrow, flexShrink, isLoading = false, startIcon: StartIcon, endIcon: EndIcon, label, className, type = 'button', disabled, style, ...rest }) => {
     const isDisabled = disabled || isLoading;
     const iconSize = ICON_SIZE$2[size];
     const rootClassName = BUTTON_VARIANTS({ variant, color, size }, className);
@@ -573,7 +573,7 @@ const Button = ({ ref, variant = 'contained', color = 'primary', size = 'md', wi
         ...(flexGrow !== undefined ? { flexGrow } : {}),
         ...(flexShrink !== undefined ? { flexShrink } : {}),
     };
-    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-busy": isLoading || undefined, style: mergedStyle, ...rest, children: [isLoading && (jsx("span", { className: BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: BUTTON_STYLES.spinnerIcon }) })), jsxs("span", { className: cx(BUTTON_STYLES.content, isLoading && BUTTON_STYLES.contentHidden), children: [StartIcon && (jsx(Icon, { icon: StartIcon, size: iconSize })), children !== undefined && children !== null && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE$1[size], fontWeight: 'medium', lineHeight: 'none', children: children })), EndIcon && (jsx(Icon, { icon: EndIcon, size: iconSize }))] })] }));
+    return (jsxs("button", { ref: ref, type: type, className: rootClassName, disabled: isDisabled, "aria-busy": isLoading || undefined, style: mergedStyle, ...rest, children: [isLoading && (jsx("span", { className: BUTTON_STYLES.spinnerWrap, children: jsx(Icon, { icon: SpinnerIcon, size: iconSize, className: BUTTON_STYLES.spinnerIcon }) })), jsxs("span", { className: cx(BUTTON_STYLES.content, isLoading && BUTTON_STYLES.contentHidden), children: [StartIcon && (jsx(Icon, { icon: StartIcon, size: iconSize })), label && (jsx(Text, { variant: 'span', fontSize: LABEL_FONT_SIZE$1[size], fontWeight: 'medium', lineHeight: 'none', children: label })), EndIcon && (jsx(Icon, { icon: EndIcon, size: iconSize }))] })] }));
 };
 Button.displayName = 'Button';
 
@@ -2289,9 +2289,8 @@ const CardBody = ({ children, py = 'md', px = 'md', }) => {
 };
 CardBody.displayName = 'Card.Body';
 
-const CardBase = ({ ref, variant = 'outlined', padding, className, style, children, ...rest }) => {
-    const theme = useTheme();
-    return (jsx("div", { ref: ref, className: cx(CARD_VARIANTS({ variant }), className), style: padding !== undefined ? { padding: theme.spacing[padding], ...style } : style, ...rest, children: children }));
+const CardBase = ({ ref, variant = 'outlined', className, children, ...rest }) => {
+    return (jsx(Box, { ref: ref, className: cx(CARD_VARIANTS({ variant }), className), ...rest, children: children }));
 };
 CardBase.displayName = 'Card';
 const Card = CardBase;