@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-d11d10471.27 → 1.0.10-alpha-FX-5195-fix-button-css-precedence-cf39d169d.18

package/src/ButtonGroupItem/ButtonGroupItem.tsx

@@ -1,37 +1,28 @@
 import React from 'react'
-import { twMerge } from 'tailwind-merge'
+import type { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
+import cx from 'classnames'
 
 import type { ButtonProps } from '../Button'
 import { Button } from '../Button'
-import {
-  createButtonGroupItemClassNames,
-  createGroupVariantClassNames,
-} from './styles'
+import styles from './styles'
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoButtonGroupItem',
+})
 
 export interface Props extends ButtonProps {}
 
-const ButtonGroupItem = ({
-  active,
-  disabled,
-  focused,
-  hovered,
-  className,
-  ...rest
-}: Props) => {
-  const finalClassName = twMerge(
-    createButtonGroupItemClassNames({ active, disabled, focused, hovered }),
-    createGroupVariantClassNames({ active, disabled, hovered }),
-    className
-  )
+const ButtonGroupItem = (props: Props) => {
+  const classes = useStyles()
 
   return (
     <Button
-      {...rest}
-      active={active}
-      disabled={disabled}
-      focused={focused}
-      hovered={hovered}
-      className={finalClassName}
+      {...props}
+      className={cx(props.className, classes.root, classes.group, {
+        [classes.active]: props.active,
+        [classes.disabled]: props.disabled,
+      })}
       variant='secondary'
     />
   )

package/src/ButtonGroupItem/styles.ts

@@ -1,64 +1,30 @@
-export const createButtonGroupItemClassNames = ({
-  disabled,
-  focused,
-  hovered,
-  active,
-}: {
-  disabled?: boolean
-  focused?: boolean
-  hovered?: boolean
-  active?: boolean
-  loading?: boolean
-}) => {
-  const classNames = [
-    'border-solid',
-    'transition-[color,background]',
-    'active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1]',
-  ]
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
 
-  if (active || hovered || focused || disabled) {
-    classNames.push('z-[1]')
-  }
+import {
+  createOutlineCommons,
+  activeGroup,
+  disabledGroup,
+} from '../Button/styles'
 
-  return classNames
-}
-
-export const createGroupVariantClassNames = ({
-  disabled,
-  hovered,
-  active,
-}: {
-  disabled?: boolean
-  hovered?: boolean
-  active?: boolean
-  loading?: boolean
-}): string[] => {
-  const classNames = ['visited:text-black', 'border-solid']
-
-  if (disabled) {
-    classNames.push('cursor-not-allowed')
-    classNames.push('text-gray-500')
-
-    if (active) {
-      classNames.push('bg-graphite-700 border-graphite-700')
-    } else {
-      classNames.push('border-gray-500')
-    }
-  } else {
-    classNames.push(
-      'active:bg-graphite-700 active:border-graphite-700 active:text-white'
-    )
-    classNames.push('hover:border-black')
-
-    if (hovered) {
-      classNames.push('border-black text-black')
-    } else if (active) {
-      classNames.push('bg-graphite-700 border-graphite-700 text-white')
-      classNames.push('shadow-none')
-    } else {
-      classNames.push('border-gray-400 text-black')
-    }
-  }
-
-  return classNames
-}
+export default (theme: Theme) =>
+  createStyles({
+    root: {
+      '&:active, &$active, &:hover, &$hovered, &:focus, &$focused, &:disabled, &$disabled':
+        {
+          // border overlap to keep proper border width, but on state change
+          // we need to move up overlapped border
+          zIndex: 1,
+        },
+      '&$group': {
+        ...createOutlineCommons(theme),
+        '&:active, &$active': activeGroup(theme),
+        '&:disabled, &$disabled': disabledGroup(theme),
+      },
+    },
+    active: {},
+    hovered: {},
+    focused: {},
+    disabled: {},
+    group: {},
+  })

package/src/ButtonRadio/__snapshots__/test.tsx.snap

@@ -6,14 +6,14 @@ exports[`ButtonRadio renders 1`] = `
     class="Picasso-root"
   >
     <label
-      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4 PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
+      aria-disabled="false"
+      class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
       data-component-type="button"
       role="button"
       tabindex="0"
-      type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
       >
         <span
           aria-disabled="false"

package/src/ButtonSplit/ButtonSplit.tsx

@@ -1,18 +1,16 @@
 import type { ReactNode, MouseEvent, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import type { SizeType, BaseProps } from '@toptal/picasso-shared'
-import { twMerge } from 'tailwind-merge'
+import cx from 'classnames'
 import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons'
 import { Dropdown } from '@toptal/picasso-dropdown'
 
 import type { ButtonProps } from '../Button'
 import { Button } from '../Button'
 import { ButtonGroup } from '../ButtonGroup'
-import { createButtonGroupItemClassNames } from '../ButtonGroupItem/styles'
-import {
-  createActionButtonClassNames,
-  createMenuButtonClassNames,
-} from './styles'
+import styles from './styles'
 
 export interface Props
   extends BaseProps,
@@ -37,6 +35,13 @@ export interface Props
     menuButton?: string
   }
 }
+// Using { index: -1 } to inject CSS link to the bottom of the head
+// in order to prevent Button's styles to override ButtonSplit's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoButtonSplit',
+  index: -1,
+})
 
 const DropdownIcon = ({
   size,
@@ -78,35 +83,37 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
       testIds = {},
       ...rest
     } = props
+    const classes = useStyles()
 
-    const renderMenuButton = ({ isOpen }: { isOpen: boolean }) => {
-      const menuButtonClassName = twMerge(
-        createButtonGroupItemClassNames({
-          active: menuButtonProps?.active,
-          hovered: menuButtonProps?.hovered,
-          disabled: menuButtonProps?.disabled || disabled,
-          focused: menuButtonProps?.focused,
-        }),
-        createMenuButtonClassNames({
-          variant,
-          size,
-          disabled: menuButtonProps?.disabled || disabled,
-        }),
-        menuButtonProps?.className
-      )
-
-      const iconClassName = isOpen ? 'rotate-180' : ''
+    const commonClasses = cx(classes.button, {
+      [classes.primaryVariant]: variant === 'primary',
+      [classes.disabled]: disabled,
+    })
 
+    const renderMenuButton = ({
+      isOpen,
+      disabled,
+    }: {
+      isOpen: boolean
+      disabled?: boolean
+    }) => {
       const menuButton = (
         <Button
           {...menuButtonProps}
           variant={variant}
-          className={menuButtonClassName}
+          className={`${commonClasses} ${classes.menuButton} ${
+            classes[`${size}Size`]
+          }`}
           size={size}
           disabled={disabled}
           data-testid={testIds.menuButton}
         >
-          <DropdownIcon className={iconClassName} size={size} />
+          <DropdownIcon
+            className={cx({
+              [classes.rotated]: isOpen,
+            })}
+            size={size}
+          />
         </Button>
       )
 
@@ -117,29 +124,11 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
       )
     }
 
-    const actionButtonClassName = twMerge(
-      createButtonGroupItemClassNames({
-        active: actionButtonProps?.active,
-        hovered: actionButtonProps?.hovered,
-        disabled: actionButtonProps?.disabled || disabled,
-        focused: actionButtonProps?.focused,
-      }),
-      createActionButtonClassNames({
-        variant,
-      }),
-      actionButtonProps?.className
-    )
-
-    const dropdownClassName = twMerge(
-      'block cursor-pointer',
-      disabled && '[&>div]:cursor-auto'
-    )
-
     return (
       <ButtonGroup {...rest} ref={ref} style={style} className={className}>
         <Button
           {...actionButtonProps}
-          className={actionButtonClassName}
+          className={`${commonClasses} ${classes.actionButton}`}
           size={size}
           variant={variant}
           disabled={disabled}
@@ -148,8 +137,15 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
         >
           {children}
         </Button>
-        <Dropdown content={menu} className={dropdownClassName}>
-          {({ isOpen }: { isOpen: boolean }) => renderMenuButton({ isOpen })}
+        <Dropdown
+          content={menu}
+          className={cx(classes.dropdown, {
+            [classes.disabled]: disabled,
+          })}
+        >
+          {({ isOpen }: { isOpen: boolean }) =>
+            renderMenuButton({ isOpen, disabled })
+          }
         </Dropdown>
       </ButtonGroup>
     )

package/src/ButtonSplit/__snapshots__/test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`ButtonSplit closes menu on click to the item 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor24-root-172"
+  class="PicassoSvgArrowDownMinor24-root-206"
   style="min-width: 24px; min-height: 24px;"
   viewBox="0 0 24 24"
 >
@@ -18,34 +18,34 @@ exports[`ButtonSplit default render 1`] = `
     class="Picasso-root"
   >
     <div
-      class="flex justify-start [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
+      class="PicassoButtonGroup-root"
     >
       <button
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-actionButton"
         data-component-type="button"
         tabindex="0"
         type="button"
       >
         <span
-          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+          class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
         >
           Action
         </span>
       </button>
       <div
-        class="PicassoDropdown-root block cursor-pointer"
+        class="PicassoDropdown-root PicassoButtonSplit-dropdown"
       >
         <div
           class="PicassoDropdown-anchor"
         >
           <button
-            class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
+            class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-menuButton PicassoButtonSplit-mediumSize"
             data-component-type="button"
             tabindex="0"
             type="button"
           >
             <span
-              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+              class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
             >
               <svg
                 class="PicassoSvgArrowDownMinor16-root"
@@ -67,7 +67,7 @@ exports[`ButtonSplit default render 1`] = `
 
 exports[`ButtonSplit renders arrow down icon for a closed menu 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor16-root-172"
+  class="PicassoSvgArrowDownMinor16-root-206"
   style="min-width: 16px; min-height: 16px;"
   viewBox="0 0 16 16"
 >
@@ -79,7 +79,7 @@ exports[`ButtonSplit renders arrow down icon for a closed menu 1`] = `
 
 exports[`ButtonSplit renders arrow up icon for an opened menu 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor16-root-172 rotate-180"
+  class="PicassoSvgArrowDownMinor16-root-206 PicassoButtonSplit-rotated-12"
   style="min-width: 16px; min-height: 16px;"
   viewBox="0 0 16 16"
 >

package/src/ButtonSplit/styles.ts

@@ -1,40 +1,59 @@
-import type { SizeType } from '@toptal/picasso-shared'
-import { twMerge } from 'tailwind-merge'
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
 
-export const createActionButtonClassNames = ({
-  variant,
-}: {
-  variant?: 'primary' | 'secondary'
-}) => {
-  return twMerge(
-    'transition-[color,background]',
-    variant === 'primary' &&
-      'border-r border-l-0 border-y-0 border-solid border-blue-700'
-  )
-}
+export default ({ palette }: Theme) =>
+  createStyles({
+    actionButton: {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+    menuButton: {
+      minWidth: '2em',
+      paddingLeft: '0.5em',
+      paddingRight: '0.5em',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      marginLeft: 0,
+    },
 
-const menuButtonSizeClassNames: Record<
-  SizeType<'small' | 'medium' | 'large'>,
-  string
-> = {
-  small: 'min-w-[1.5em] px-[0.25em]',
-  medium: 'min-w-[2em] px-[0.5em]',
-  large: 'min-w-[3em] px-[0.75em]',
-}
+    primaryVariant: {
+      '&$actionButton': {
+        borderRight: `1px solid ${palette.blue.darker}`,
+      },
+      '&$menuButton': {
+        borderLeft: `1px solid ${palette.blue.darker}`,
 
-export const createMenuButtonClassNames = ({
-  variant,
-  size,
-  disabled,
-}: {
-  variant?: 'primary' | 'secondary'
-  size: SizeType<'small' | 'medium' | 'large'>
-  disabled?: boolean
-}) => {
-  return twMerge(
-    menuButtonSizeClassNames[size],
-    variant === 'primary' && 'border-l border-r-0 border-y-0 border-solid',
-    variant === 'primary' && disabled && 'border-gray-500',
-    variant === 'primary' && !disabled && 'border-blue-700'
-  )
-}
+        '&$disabled': {
+          borderLeftColor: palette.grey.main,
+        },
+      },
+    },
+
+    smallSize: {
+      minWidth: '1.5em',
+      paddingLeft: '0.25em',
+      paddingRight: '0.25em',
+    },
+    mediumSize: {},
+    largeSize: {
+      minWidth: '3em',
+      paddingLeft: '0.75em',
+      paddingRight: '0.75em',
+    },
+
+    dropdown: {
+      display: 'block',
+      cursor: 'pointer',
+    },
+
+    disabled: {
+      // override dropdown anchor styles
+      '& > div': {
+        cursor: 'auto',
+      },
+    },
+
+    rotated: {
+      transform: 'rotate(180deg)',
+    },
+  })

package/dist-package/src/ButtonBase/ButtonBase.d.ts

@@ -1,29 +0,0 @@
-import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
-import type { StandardProps, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
-export declare type IconPositionType = 'left' | 'right';
-export interface Props extends StandardProps, TextLabelProps, ButtonOrAnchorProps {
-    as?: ElementType;
-    /** Disables button */
-    disabled?: boolean;
-    /** Content of Button component */
-    children?: ReactNode;
-    /** ClassName for the content */
-    contentClassName?: string;
-    /** Add an `<Icon />` along Button's children */
-    icon?: ReactElement;
-    /** Icon can be positioned on the left or right */
-    iconPosition?: IconPositionType;
-    /** Shows a loading indicator and disables click events */
-    loading?: boolean;
-    /** Callback invoked when component is clicked */
-    onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void;
-    /** HTML Value of Button component */
-    value?: string | number;
-    /** HTML title of Button component */
-    title?: string;
-    /** HTML type of Button component */
-    type?: 'button' | 'reset' | 'submit';
-}
-export declare const ButtonBase: OverridableComponent<Props>;
-export default ButtonBase;
-//# sourceMappingURL=ButtonBase.d.ts.map

package/dist-package/src/ButtonBase/ButtonBase.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,SAAS,EACT,YAAY,EACZ,UAAU,EACV,WAAW,EAEZ,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAS/B,oBAAY,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,mBAAmB;IACrB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gCAAgC;IAChC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,kDAAkD;IAClD,YAAY,CAAC,EAAE,gBAAgB,CAAA;IAC/B,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,iDAAiD;IACjD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC5E,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oCAAoC;IACpC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CACrC;AAyBD,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,KAAK,CA4FjD,CAAA;AAcF,eAAe,UAAU,CAAA"}

package/dist-package/src/ButtonBase/ButtonBase.js

@@ -1,78 +0,0 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef } from 'react';
-import { twMerge } from 'tailwind-merge';
-import { useTitleCase } from '@toptal/picasso-shared';
-import { Button as MUIButtonBase } from '@mui/base/Button';
-import { Loader } from '@toptal/picasso-loader';
-import { Container } from '@toptal/picasso-container';
-import { noop, toTitleCase } from '@toptal/picasso-utils';
-import { createCoreClassNames } from './styles';
-const getClickHandler = (loading, handler) => loading ? noop : handler;
-const getIcon = ({ icon }) => {
-    if (!icon) {
-        return null;
-    }
-    return React.cloneElement(icon, {
-        className: twMerge('text-[1.2em] flex-1', icon.props.className),
-        key: 'button-icon',
-    });
-};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const isReactComponent = (component) => {
-    return (component &&
-        (component.$$typeof === Symbol.for('react.forward_ref') ||
-            typeof component === 'function'));
-};
-export const ButtonBase = forwardRef(function ButtonBase(props, ref) {
-    var _a, _b;
-    const { icon, iconPosition, loading, children, className, contentClassName, style, disabled, onClick, title, value, type, as = 'button', titleCase: propsTitleCase } = props, rest = __rest(props, ["icon", "iconPosition", "loading", "children", "className", "contentClassName", "style", "disabled", "onClick", "title", "value", "type", "as", "titleCase"]);
-    let RootElement = as;
-    if (isReactComponent(RootElement)) {
-        RootElement = forwardRef(
-        // We don't need to pass ownerState to the root component
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        (_a, rootRef) => {
-            var { ownerState } = _a, restProps = __rest(_a, ["ownerState"]);
-            const Root = as;
-            return React.createElement(Root, Object.assign({ ref: rootRef }, restProps));
-        });
-    }
-    const titleCase = useTitleCase(propsTitleCase);
-    const finalChildren = [titleCase ? toTitleCase(children) : children];
-    const rootElementName = as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined;
-    if (icon) {
-        const iconComponent = getIcon({ icon });
-        if (iconPosition === 'left') {
-            finalChildren.unshift(iconComponent);
-        }
-        else {
-            finalChildren.push(iconComponent);
-        }
-    }
-    const finalClassName = twMerge(createCoreClassNames({ disabled }), className);
-    return (React.createElement(MUIButtonBase, Object.assign({}, rest, { ref: ref, onClick: getClickHandler(loading, onClick), className: finalClassName, style: style, "aria-disabled": disabled, disabled: disabled, title: title, value: value, type: type, "data-component-type": 'button', tabIndex: ((_a = rest.tabIndex) !== null && _a !== void 0 ? _a : disabled) ? -1 : 0, role: (_b = rest.role) !== null && _b !== void 0 ? _b : 'button', rootElementName: rootElementName, slots: { root: RootElement } }),
-        React.createElement(Container, { as: 'span', inline: true, flex: true, direction: 'row', alignItems: 'center', className: contentClassName }, finalChildren),
-        loading && (React.createElement(Loader, { variant: 'inherit', className: 'absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]', inline: true, size: 'small' }))));
-});
-ButtonBase.defaultProps = {
-    as: 'button',
-    children: null,
-    disabled: false,
-    iconPosition: 'left',
-    loading: false,
-    onClick: noop,
-    type: 'button',
-};
-ButtonBase.displayName = 'ButtonBase';
-export default ButtonBase;
-//# sourceMappingURL=ButtonBase.js.map

package/dist-package/src/ButtonBase/ButtonBase.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonBase.js","sourceRoot":"","sources":["../../../src/ButtonBase/ButtonBase.tsx"],"names":[],"mappings":"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"}

package/dist-package/src/ButtonBase/index.d.ts

@@ -1,5 +0,0 @@
-import type { Props } from './ButtonBase';
-export { default as ButtonBase } from './ButtonBase';
-export type { IconPositionType } from './ButtonBase';
-export declare type ButtonBaseProps = Props;
-//# sourceMappingURL=index.d.ts.map

package/dist-package/src/ButtonBase/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAEzC,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA;AACpD,YAAY,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAA;AACpD,oBAAY,eAAe,GAAG,KAAK,CAAA"}

package/dist-package/src/ButtonBase/index.js

@@ -1,2 +0,0 @@
-export { default as ButtonBase } from './ButtonBase';
-//# sourceMappingURL=index.js.map

package/dist-package/src/ButtonBase/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ButtonBase/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAA"}

package/dist-package/src/ButtonBase/styles.d.ts

@@ -1,6 +0,0 @@
-export declare const createCoreClassNames: ({ disabled, loading, }: {
-    disabled?: boolean | undefined;
-    focused?: boolean | undefined;
-    loading?: boolean | undefined;
-}) => string[];
-//# sourceMappingURL=styles.d.ts.map

package/dist-package/src/ButtonBase/styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonBase/styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,oBAAoB;;;;MAO7B,MAAM,EA4BT,CAAA"}

package/dist-package/src/ButtonBase/styles.js

@@ -1,29 +0,0 @@
-export const createCoreClassNames = ({ disabled, loading, }) => {
-    const classNames = [
-        'text-lg',
-        'inline-flex',
-        'items-center',
-        'justify-center',
-        'select-none',
-        'appearance-none',
-        'm-0',
-        'relative',
-        'normal-case',
-        'align-middle',
-        'transition-colors',
-        'duration-350',
-        'ease-out',
-        'shrink-0',
-        'outline-none',
-        '[&+&]:ml-4',
-    ];
-    if (!disabled && !loading) {
-        classNames.push('cursor-pointer');
-    }
-    else {
-        classNames.push('cursor-default');
-        classNames.push('pointer-events-none');
-    }
-    return classNames;
-};
-//# sourceMappingURL=styles.js.map