@toptal/picasso-button 1.0.13 → 2.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonAction.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AAIjD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,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;CACxB;AAYD,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CAkEnD,CAAA;AAQF,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ButtonAction.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAa,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAG/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA0BjD,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,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;CACxB;AAID,eAAO,MAAM,YAAY,EAAE,oBAAoB,CAAC,KAAK,CA0CnD,CAAA;AAQF,eAAe,YAAY,CAAA"}

package/dist-package/src/ButtonAction/ButtonAction.js

@@ -11,40 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
 import { Loader } from '@toptal/picasso-loader';
-import { Button } from '../Button';
-import styles from './styles';
-// Using { index: -1 } to inject CSS link to the bottom of the head
-// in order to prevent Button's styles to override ButtonAction's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles(styles, {
-    name: 'PicassoButtonAction',
-    index: -1,
-});
+import { ButtonBase } from '../ButtonBase';
+import { createRootClassNames, createIconClassNames } from './styles';
+const getIcon = ({ children, icon, iconPosition, }) => {
+    if (!icon) {
+        return null;
+    }
+    const iconClassNames = createIconClassNames({
+        iconPosition: children && iconPosition ? iconPosition : undefined,
+    });
+    return React.cloneElement(icon, {
+        className: cx(iconClassNames, icon.props.className),
+    });
+};
 const loaderIcon = React.createElement(Loader, { size: 'small', variant: 'inherit' });
 export const ButtonAction = forwardRef(function ButtonAction(props, ref) {
     const { className, active, focused, hovered, disabled, loading, icon, iconPosition, onClick } = props, rest = __rest(props, ["className", "active", "focused", "hovered", "disabled", "loading", "icon", "iconPosition", "onClick"]);
-    const classes = useStyles();
-    const { root: rootClass, content, icon: iconClassName, iconLeft, iconRight, small, } = classes;
-    const rootClassName = cx({
-        [classes.active]: active,
-        [classes.focused]: focused,
-        [classes.hovered]: hovered,
-        [classes.disabled]: disabled,
-        [classes.loading]: loading,
-        [classes.iconless]: !icon,
-    }, rootClass);
     const usedIcon = loading ? loaderIcon : icon;
     const usedIconPosition = icon ? iconPosition : 'right';
-    return (React.createElement(Button, Object.assign({}, rest, { ref: ref, icon: usedIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, variant: 'secondary', classes: {
-            root: rootClassName,
-            content,
-            icon: iconClassName,
-            iconLeft,
-            iconRight,
-            small,
-        }, className: className, size: 'small', active: active, hovered: hovered, focused: focused, disabled: disabled })));
+    const finalClassName = cx(createRootClassNames(props), className);
+    const finalIcon = getIcon({
+        children: rest.children,
+        icon: usedIcon,
+        iconPosition: usedIconPosition,
+    });
+    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, icon: finalIcon, iconPosition: usedIconPosition, onClick: loading ? undefined : onClick, className: finalClassName, contentClassName: 'font-semibold text-blue-500 text-md', active: active, hovered: hovered, focused: focused, disabled: disabled })));
 });
 ButtonAction.defaultProps = {
     iconPosition: 'left',

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonAction.js","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAMrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAyB7B,mEAAmE;AACnE,sEAAsE;AACtE,uEAAuE;AACvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,qBAAqB;IAC3B,KAAK,EAAE,CAAC,CAAC;CACV,CAAC,CAAA;AAEF,MAAM,UAAU,GAAG,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,GAAG,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAgC,UAAU,CAGjE,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EACJ,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,uGAWL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EACJ,IAAI,EAAE,SAAS,EACf,OAAO,EACP,IAAI,EAAE,aAAa,EACnB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,GAAG,OAAO,CAAA;IAEX,MAAM,aAAa,GAAG,EAAE,CACtB;QACE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM;QACxB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;QAC5B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI;KAC1B,EACD,SAAS,CACV,CAAA;IAED,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;IAC5C,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,OAAO;YACP,IAAI,EAAE,aAAa;YACnB,QAAQ;YACR,SAAS;YACT,KAAK;SACN,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,YAAY,EAAE,MAAM;CACrB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}
+{"version":3,"file":"ButtonAction.js","sourceRoot":"","sources":["../../../src/ButtonAction/ButtonAction.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAM3B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAG/C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAErE,MAAM,OAAO,GAAG,CAAC,EACf,QAAQ,EACR,IAAI,EACJ,YAAY,GAKb,EAAE,EAAE;IACH,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,cAAc,GAAG,oBAAoB,CAAC;QAC1C,YAAY,EAAE,QAAQ,IAAI,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS;KAClE,CAAC,CAAA;IAEF,OAAO,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;QAC9B,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;KACpD,CAAC,CAAA;AACJ,CAAC,CAAA;AAyBD,MAAM,UAAU,GAAG,oBAAC,MAAM,IAAC,IAAI,EAAC,OAAO,EAAC,OAAO,EAAC,SAAS,GAAG,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAgC,UAAU,CAGjE,SAAS,YAAY,CAAC,KAAK,EAAE,GAAG;IAChC,MAAM,EACJ,SAAS,EACT,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAXH,uGAWL,CAAQ,CAAA;IAET,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAA;IAC5C,MAAM,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,OAAO,CAAA;IAEtD,MAAM,cAAc,GAAG,EAAE,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC,CAAA;IACjE,MAAM,SAAS,GAAG,OAAO,CAAC;QACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,QAAQ;QACd,YAAY,EAAE,gBAAgB;KAC/B,CAAC,CAAA;IAEF,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,SAAS,EACf,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EACtC,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAC,qCAAqC,EACtD,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,YAAY,GAAG;IAC1B,YAAY,EAAE,MAAM;CACrB,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,eAAe,YAAY,CAAA"}

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

@@ -1,4 +1,12 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette, typography }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "content" | "small" | "icon" | "active" | "disabled" | "hovered" | "focused" | "iconLeft" | "iconRight" | "loading">;
-export default _default;
+import type { IconPositionType } from '../ButtonBase';
+export declare const createRootClassNames: ({ disabled, focused, hovered, active, loading, }: {
+    disabled?: boolean | undefined;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+    active?: boolean | undefined;
+    loading?: boolean | undefined;
+}) => string[];
+export declare const createIconClassNames: ({ iconPosition, }: {
+    iconPosition?: IconPositionType | undefined;
+}) => string[];
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;kDAGZ,KAAK;AAA9C,wBAsDI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAErD,eAAO,MAAM,oBAAoB;;;;;;cAyChC,CAAA;AAED,eAAO,MAAM,oBAAoB;;MAI7B,MAAM,EAQT,CAAA"}

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

@@ -1,56 +1,37 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, typography }) => createStyles({
-    root: {
-        border: 'none',
-        minWidth: 'unset',
-        paddingLeft: '0',
-        paddingRight: '0',
-        backgroundColor: 'transparent',
-        '&:active, &$active, &:hover, &$hovered': {
-            backgroundColor: 'transparent',
-            color: palette.blue.main,
-            textDecoration: 'underline',
-        },
-        '&$loading': {
-            textDecoration: 'none',
-            cursor: 'default',
-        },
-        '&$disabled': {
-            backgroundColor: 'transparent',
-            opacity: 0.48,
-        },
-    },
-    content: {
-        fontWeight: typography.fontWeights.semibold,
-        color: palette.blue.main,
-    },
-    small: {
-        '& $content': {
-            fontSize: '0.875rem',
-            lineHeight: '1.375rem',
-        },
-        '& $iconLeft': {
-            marginLeft: 0,
-        },
-        '& $iconRight': {
-            marginRight: 0,
-        },
-    },
-    icon: {
-        width: '1rem',
-        height: '1rem',
-        color: palette.grey.dark,
-    },
-    iconLeft: {
-        marginRight: '0.5rem',
-    },
-    iconRight: {
-        marginLeft: '0.5rem',
-    },
-    active: {},
-    disabled: {},
-    hovered: {},
-    focused: {},
-    loading: {},
-});
+export const createRootClassNames = ({ disabled, focused, hovered, active, loading, }) => {
+    const classNames = ['border-none', 'px-0', 'bg-transparent', 'h-[1.5em]'];
+    if (disabled) {
+        classNames.push('opacity-[.48]');
+    }
+    else if (loading) {
+        classNames.push('no-underline');
+        classNames.push('!cursor-default');
+    }
+    else {
+        classNames.push('hover:text-blue-500');
+        classNames.push('hover:underline');
+        classNames.push('active:text-blue-500');
+        classNames.push('active:underline');
+        if (hovered || active) {
+            classNames.push('text-blue-500');
+            classNames.push('underline');
+        }
+        classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
+        classNames.push('focus-visible:rounded-sm');
+        if (focused) {
+            classNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
+            classNames.push('rounded-sm');
+        }
+    }
+    return classNames;
+};
+export const createIconClassNames = ({ iconPosition, }) => {
+    return [
+        'w-4',
+        'h-4',
+        'text-graphite-700',
+        iconPosition === 'left' ? 'mr-[0.5rem]' : '',
+        iconPosition === 'right' ? 'ml-[0.5rem]' : '',
+    ];
+};
 //# sourceMappingURL=styles.js.map

package/dist-package/src/ButtonAction/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAE,UAAU,EAAS,EAAE,EAAE,CAChD,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,GAAG;QAChB,YAAY,EAAE,GAAG;QACjB,eAAe,EAAE,aAAa;QAC9B,wCAAwC,EAAE;YACxC,eAAe,EAAE,aAAa;YAC9B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,cAAc,EAAE,WAAW;SAC5B;QACD,WAAW,EAAE;YACX,cAAc,EAAE,MAAM;YACtB,MAAM,EAAE,SAAS;SAClB;QACD,YAAY,EAAE;YACZ,eAAe,EAAE,aAAa;YAC9B,OAAO,EAAE,IAAI;SACd;KACF;IACD,OAAO,EAAE;QACP,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,QAAQ;QAC3C,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,KAAK,EAAE;QACL,YAAY,EAAE;YACZ,QAAQ,EAAE,UAAU;YACpB,UAAU,EAAE,UAAU;SACvB;QACD,aAAa,EAAE;YACb,UAAU,EAAE,CAAC;SACd;QACD,cAAc,EAAE;YACd,WAAW,EAAE,CAAC;SACf;KACF;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;KACzB;IACD,QAAQ,EAAE;QACR,WAAW,EAAE,QAAQ;KACtB;IACD,SAAS,EAAE;QACT,UAAU,EAAE,QAAQ;KACrB;IACD,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,EAAE;IACZ,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;IACX,OAAO,EAAE,EAAE;CACZ,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonAction/styles.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,EACP,OAAO,EACP,MAAM,EACN,OAAO,GAOR,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,aAAa,EAAE,MAAM,EAAE,gBAAgB,EAAE,WAAW,CAAC,CAAA;IAEzE,IAAI,QAAQ,EAAE;QACZ,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;KACjC;SAAM,IAAI,OAAO,EAAE;QAClB,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;QAC/B,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;KACnC;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;QACtC,UAAU,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAA;QAClC,UAAU,CAAC,IAAI,CAAC,sBAAsB,CAAC,CAAA;QACvC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;QAEnC,IAAI,OAAO,IAAI,MAAM,EAAE;YACrB,UAAU,CAAC,IAAI,CAAC,eAAe,CAAC,CAAA;YAChC,UAAU,CAAC,IAAI,CAAC,WAAW,CAAC,CAAA;SAC7B;QAED,UAAU,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAA;QACxE,UAAU,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAA;QAE3C,IAAI,OAAO,EAAE;YACX,UAAU,CAAC,IAAI,CAAC,yCAAyC,CAAC,CAAA;YAC1D,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;SAC9B;KACF;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,YAAY,GAGb,EAAY,EAAE;IACb,OAAO;QACL,KAAK;QACL,KAAK;QACL,mBAAmB;QACnB,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;QAC5C,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;KAC9C,CAAA;AACH,CAAC,CAAA"}

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1 @@
+{"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,CAgGjD,CAAA;AAcF,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,82 @@
+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];
+    /*
+     Workaround for the case: <Button as={Link} href='' /> (with empty href!), we have to determine "rootElementName" like below
+     Mui/base throws an error when "href" or "to" are empty
+     */
+    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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,29 @@
+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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonBase/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,QAAQ,EACR,OAAO,GAKR,EAAY,EAAE;IACb,MAAM,UAAU,GAAG;QACjB,SAAS;QACT,aAAa;QACb,cAAc;QACd,gBAAgB;QAChB,aAAa;QACb,iBAAiB;QACjB,KAAK;QACL,UAAU;QACV,aAAa;QACb,cAAc;QACd,mBAAmB;QACnB,cAAc;QACd,UAAU;QACV,UAAU;QACV,cAAc;QACd,YAAY;KACb,CAAA;IAED,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE;QACzB,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;KAClC;SAAM;QACL,UAAU,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;QACjC,UAAU,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAA;KACvC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonCircular.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAKlE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAM/B,oBAAY,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,CAAA;AAE5D,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,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,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAUD,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CAgDrD,CAAA;AAQF,eAAe,cAAc,CAAA"}
+{"version":3,"file":"ButtonCircular.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGlE,OAAO,KAAK,EACV,SAAS,EACT,mBAAmB,EACnB,oBAAoB,EACrB,MAAM,wBAAwB,CAAA;AAK/B,oBAAY,WAAW,GAAG,SAAS,GAAG,MAAM,GAAG,aAAa,CAAA;AAE5D,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,mBAAmB;IAC3D,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,iGAAiG;IACjG,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,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,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,2DAA2D;IAC3D,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED,eAAO,MAAM,cAAc,EAAE,oBAAoB,CAAC,KAAK,CA4CrD,CAAA;AAQF,eAAe,cAAc,CAAA"}

package/dist-package/src/ButtonCircular/ButtonCircular.js

@@ -11,33 +11,19 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React, { forwardRef } from 'react';
 import cx from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { kebabToCamelCase } from '@toptal/picasso-utils';
-import { Button } from '../Button';
-import styles from './styles';
-// Using { index: -1 } to inject CSS link to the bottom of the head
-// in order to prevent Button's styles to override ButtonCircular's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles(styles, {
-    name: 'PicassoButtonCircular',
-    index: -1,
-});
+import { ButtonBase } from '../ButtonBase';
+import { createRootClassNames, createVariantClassNames } from './styles';
 export const ButtonCircular = forwardRef(function ButtonCircular(props, ref) {
-    const { className, variant = 'primary', active, focused, hovered, disabled, responsive } = props, rest = __rest(props, ["className", "variant", "active", "focused", "hovered", "disabled", "responsive"]);
-    const classes = useStyles();
-    const { root: rootClass, focusVisible: focusVisibleClass } = classes;
-    const variantClassName = classes[kebabToCamelCase(variant)];
-    const rootClassName = cx({
-        [classes.active]: active,
-        [classes.focused]: focused,
-        [classes.hovered]: hovered,
-        [classes.disabled]: disabled,
-        [classes.responsive]: responsive,
-    }, variantClassName, rootClass);
-    return (React.createElement(Button, Object.assign({}, rest, { ref: ref, classes: {
-            root: rootClassName,
-            focusVisible: focusVisibleClass,
-        }, className: className, size: 'small', active: active, hovered: hovered, focused: focused, disabled: disabled })));
+    const { className, variant = 'primary', active, focused, hovered, disabled, responsive, loading } = props, rest = __rest(props, ["className", "variant", "active", "focused", "hovered", "disabled", "responsive", "loading"]);
+    const variantClassNames = createVariantClassNames(variant, {
+        disabled,
+        focused,
+        hovered,
+        active,
+    });
+    const finalClassName = cx(createRootClassNames({ responsive, active, disabled, focused, hovered }), variantClassNames, className);
+    const contentClassName = cx('font-semibold whitespace-nowrap', 'text-button-small', loading ? 'opacity-0' : '');
+    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, loading: loading, className: finalClassName, contentClassName: contentClassName, disabled: disabled })));
 });
 ButtonCircular.defaultProps = {
     variant: 'primary',

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonCircular.js","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAMrD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AA6B7B,mEAAmE;AACnE,wEAAwE;AACxE,uEAAuE;AACvE,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,uBAAuB;IAC7B,KAAK,EAAE,CAAC,CAAC;CACV,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,cAAc,GAAgC,UAAU,CAGnE,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,KAER,KAAK,EADJ,IAAI,UACL,KAAK,EATH,kFASL,CAAQ,CAAA;IACT,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,iBAAiB,EAAE,GAAG,OAAO,CAAA;IAEpE,MAAM,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;IAE3D,MAAM,aAAa,GAAG,EAAE,CACtB;QACE,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,MAAM;QACxB,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;QAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,QAAQ;QAC5B,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE,UAAU;KACjC,EACD,gBAAgB,EAChB,SAAS,CACV,CAAA;IAED,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE;YACP,IAAI,EAAE,aAAa;YACnB,YAAY,EAAE,iBAAiB;SAChC,EACD,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,OAAO,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,cAAc,CAAC,YAAY,GAAG;IAC5B,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}
+{"version":3,"file":"ButtonCircular.js","sourceRoot":"","sources":["../../../src/ButtonCircular/ButtonCircular.tsx"],"names":[],"mappings":";;;;;;;;;;;AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,MAAM,YAAY,CAAA;AAO3B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAA;AA6BxE,MAAM,CAAC,MAAM,cAAc,GAAgC,UAAU,CAGnE,SAAS,cAAc,CAAC,KAAK,EAAE,GAAG;IAClC,MAAM,EACJ,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,UAAU,EACV,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAVH,6FAUL,CAAQ,CAAA;IACT,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,OAAO,EAAE;QACzD,QAAQ;QACR,OAAO;QACP,OAAO;QACP,MAAM;KACP,CAAC,CAAA;IAEF,MAAM,cAAc,GAAG,EAAE,CACvB,oBAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,EACxE,iBAAiB,EACjB,SAAS,CACV,CAAA;IAED,MAAM,gBAAgB,GAAG,EAAE,CACzB,iCAAiC,EACjC,mBAAmB,EACnB,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAC3B,CAAA;IAED,OAAO,CACL,oBAAC,UAAU,oBACL,IAAI,IACR,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,cAAc,EACzB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,QAAQ,IAClB,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,cAAc,CAAC,YAAY,GAAG;IAC5B,OAAO,EAAE,SAAS;CACnB,CAAA;AAED,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAA;AAE7C,eAAe,cAAc,CAAA"}

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

@@ -1,4 +1,16 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "transparent" | "flat" | "active" | "disabled" | "primary" | "hovered" | "focused" | "focusVisible" | "responsive">;
-export default _default;
+import type { VariantType } from './ButtonCircular';
+export declare const createRootClassNames: ({ responsive, }: {
+    disabled?: boolean | undefined;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+    active?: boolean | undefined;
+    loading?: boolean | undefined;
+    responsive?: boolean | undefined;
+}) => string[];
+export declare const createVariantClassNames: (variant: VariantType, { disabled, focused, hovered, active, }: {
+    disabled?: boolean | undefined;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+    active?: boolean | undefined;
+}) => string[];
 //# sourceMappingURL=styles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAKxB,KAAK;AAAlC,wBAqEI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonCircular/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnD,eAAO,MAAM,oBAAoB;;;;;;;cAmBhC,CAAA;AAED,eAAO,MAAM,uBAAuB,YACzB,WAAW;;;;;MAYnB,MAAM,EA0FR,CAAA"}