@toptal/picasso-button 4.0.24-alpha-1757603192867.0 → 4.0.24-alpha-1757603777486.0

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

@@ -0,0 +1,39 @@
+import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
+import type { StandardProps, SizeType, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
+export declare type VariantType = 'primary' | 'negative' | 'positive' | 'secondary' | 'transparent';
+export declare type IconPositionType = 'left' | 'right';
+export interface Props extends StandardProps, TextLabelProps, ButtonOrAnchorProps {
+    /** Show button in the active state (left mouse button down) */
+    active?: boolean;
+    as?: ElementType;
+    /** Disables button */
+    disabled?: boolean;
+    /** Content of Button component */
+    children?: ReactNode;
+    focused?: boolean;
+    /** Take the full width of a container */
+    fullWidth?: boolean;
+    /** Set hovered style for the button */
+    hovered?: boolean;
+    /** 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;
+    /** A button can have different sizes */
+    size?: SizeType<'small' | 'medium' | 'large'>;
+    /** The variant to use */
+    variant?: VariantType;
+    /** 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 Button: OverridableComponent<Props>;
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAI7E,OAAO,KAAK,EACV,aAAa,EACb,QAAQ,EACR,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAiB/B,oBAAY,WAAW,GACnB,SAAS,GACT,UAAU,GACV,UAAU,GACV,WAAW,GACX,aAAa,CAAA;AAEjB,oBAAY,gBAAgB,GAAG,MAAM,GAAG,OAAO,CAAA;AAE/C,MAAM,WAAW,KACf,SAAQ,aAAa,EACnB,cAAc,EACd,mBAAmB;IACrB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,EAAE,CAAC,EAAE,WAAW,CAAA;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,yCAAyC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,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,wCAAwC;IACxC,IAAI,CAAC,EAAE,QAAQ,CAAC,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IAC7C,yBAAyB;IACzB,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB,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;AA2BD,eAAO,MAAM,MAAM,EAAE,oBAAoB,CAAC,KAAK,CA2E7C,CAAA;AAoBF,eAAe,MAAM,CAAA"}

package/dist-package/src/Button/Button.js

@@ -0,0 +1,83 @@
+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 cx from 'classnames';
+import { twMerge } from '@toptal/picasso-tailwind-merge';
+import { noop } from '@toptal/picasso-utils';
+// we need to ensure the correct order of styles import
+// TODO: [FX-4614] To be removed when Link component is migrated to tailwind
+import { Link } from '@toptal/picasso-link';
+import { ButtonBase } from '../ButtonBase';
+import { createVariantClassNames, createCoreClassNames, createSizeClassNames, createIconClassNames, } from './styles';
+// HACK: This statement is only used to prevent webpack from tree shaking the import
+void Link;
+const getIcon = ({ children, icon, iconPosition, size, }) => {
+    if (!icon) {
+        return undefined;
+    }
+    const iconClassNames = createIconClassNames({
+        size,
+        iconPosition: children && iconPosition ? iconPosition : undefined,
+    });
+    return React.cloneElement(icon, {
+        className: twMerge(iconClassNames, icon.props.className),
+    });
+};
+export const Button = forwardRef(function Button(props, ref) {
+    const { icon, iconPosition, loading, className, fullWidth, variant = 'primary', size = 'medium', focused, hovered, disabled, active } = props, rest = __rest(props, ["icon", "iconPosition", "loading", "className", "fullWidth", "variant", "size", "focused", "hovered", "disabled", "active"]);
+    const iconComponent = getIcon({
+        children: rest.children,
+        icon,
+        iconPosition,
+        size,
+    });
+    const coreClassNames = createCoreClassNames({
+        disabled,
+        focused,
+        hovered,
+        active,
+    });
+    const variantClassNames = createVariantClassNames(variant, {
+        disabled,
+        focused,
+        hovered,
+        active,
+        loading,
+    });
+    const sizeClassNames = createSizeClassNames(size);
+    const finalClassName = twMerge(coreClassNames, variantClassNames, sizeClassNames, fullWidth ? 'w-full' : '', className);
+    const contentSizeClassNames = {
+        small: ['text-button-small'],
+        medium: ['text-button-medium'],
+        large: ['text-button-large'],
+    };
+    const contentClassName = cx('font-semibold whitespace-nowrap', contentSizeClassNames[size], loading ? 'opacity-0' : '');
+    return (React.createElement(ButtonBase, Object.assign({}, rest, { ref: ref, className: finalClassName, contentClassName: contentClassName, icon: iconComponent, iconPosition: iconPosition, loading: loading, disabled: disabled })));
+});
+Button.defaultProps = {
+    active: false,
+    as: 'button',
+    children: null,
+    disabled: false,
+    focused: false,
+    fullWidth: false,
+    hovered: false,
+    iconPosition: 'left',
+    loading: false,
+    onClick: noop,
+    size: 'medium',
+    type: 'button',
+    variant: 'primary',
+};
+Button.displayName = 'Button';
+export default Button;
+//# sourceMappingURL=Button.js.map

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

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

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

@@ -0,0 +1,6 @@
+import type { Props } from './Button';
+export { default as Button } from './Button';
+export declare type ButtonProps = Props;
+export * from './Button';
+export * from './styles';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAA;AAC5C,oBAAY,WAAW,GAAG,KAAK,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA"}

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

@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export * from './Button';
+export * from './styles';
+//# sourceMappingURL=index.js.map

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

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

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

@@ -0,0 +1,21 @@
+import type { SizeType } from '@toptal/picasso-shared';
+import type { IconPositionType, VariantType } from './Button';
+export declare const createSizeClassNames: (size: 'small' | 'medium' | 'large') => string[];
+export declare const createVariantClassNames: (variant: VariantType, { disabled, focused, hovered, active, loading, }: {
+    disabled?: boolean | undefined;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+    active?: boolean | undefined;
+    loading?: boolean | undefined;
+}) => string[];
+export declare const createCoreClassNames: ({ disabled, focused, active, }: {
+    disabled?: boolean | undefined;
+    focused?: boolean | undefined;
+    hovered?: boolean | undefined;
+    active?: boolean | undefined;
+}) => string[];
+export declare const createIconClassNames: ({ iconPosition, size, }: {
+    iconPosition?: IconPositionType | undefined;
+    size: SizeType<'small' | 'medium' | 'large'>;
+}) => string[];
+//# sourceMappingURL=styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEtD,OAAO,KAAK,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE7D,eAAO,MAAM,oBAAoB,SACzB,OAAO,GAAG,QAAQ,GAAG,OAAO,KACjC,MAAM,EAWR,CAAA;AAED,eAAO,MAAM,uBAAuB,YACzB,WAAW;;;;;;MAcnB,MAAM,EAoIR,CAAA;AAED,eAAO,MAAM,oBAAoB;;;;;MAS7B,MAAM,EAsBT,CAAA;AAED,eAAO,MAAM,oBAAoB;;UAKzB,SAAS,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;MAC1C,MAAM,EAeT,CAAA"}

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

@@ -0,0 +1,169 @@
+export const createSizeClassNames = (size) => {
+    const sizeClassNames = {
+        small: ['min-w-14', 'h-6', 'py-0', 'px-3'],
+        medium: ['min-w-16', 'h-8', 'py-0', 'px-4'],
+        large: ['min-w-24', 'h-12', 'py-0', 'px-8'],
+    };
+    return sizeClassNames[size];
+};
+export const createVariantClassNames = (variant, { disabled, focused, hovered, active, loading, }) => {
+    const variantClassNames = [];
+    switch (variant) {
+        case 'primary':
+            variantClassNames.push('border-none');
+            variantClassNames.push('text-white');
+            variantClassNames.push('visited:text-white');
+            if (disabled && !loading) {
+                variantClassNames.push('bg-gray-400');
+            }
+            else {
+                variantClassNames.push('hover:bg-[#4269D6]');
+                variantClassNames.push('active:bg-[#1A41AB]');
+                if (hovered) {
+                    variantClassNames.push('bg-[#4269D6]');
+                }
+                else if (active) {
+                    variantClassNames.push('bg-[#1A41AB]');
+                }
+                else {
+                    variantClassNames.push('bg-blue-500');
+                }
+            }
+            break;
+        case 'negative':
+            variantClassNames.push('border-none');
+            variantClassNames.push('text-white');
+            variantClassNames.push('visited:text-white');
+            if (disabled && !loading) {
+                variantClassNames.push('bg-gray-400');
+            }
+            else {
+                variantClassNames.push('hover:bg-[#DB466B]');
+                variantClassNames.push('active:bg-[#B01F43]');
+                if (hovered) {
+                    variantClassNames.push('bg-[#DB466B]');
+                }
+                else if (active) {
+                    variantClassNames.push('bg-[#B01F43]');
+                }
+                else {
+                    variantClassNames.push('bg-red-500');
+                }
+            }
+            break;
+        case 'positive':
+            variantClassNames.push('border-none');
+            variantClassNames.push('text-white');
+            variantClassNames.push('visited:text-white');
+            if (disabled && !loading) {
+                variantClassNames.push('bg-gray-400');
+            }
+            else {
+                variantClassNames.push('hover:bg-[#27D496]');
+                variantClassNames.push('active:bg-[#00A96C]');
+                if (hovered) {
+                    variantClassNames.push('bg-[#27D496]');
+                }
+                else if (active) {
+                    variantClassNames.push('bg-[#00A96C]');
+                }
+                else {
+                    variantClassNames.push('bg-green-500');
+                }
+            }
+            break;
+        case 'secondary':
+            variantClassNames.push('border border-solid');
+            if (disabled && !loading) {
+                variantClassNames.push('text-gray-500');
+                variantClassNames.push('visited:text-gray-500');
+                variantClassNames.push('border-gray-500');
+                variantClassNames.push('bg-white');
+            }
+            else {
+                variantClassNames.push('text-black');
+                variantClassNames.push('hover:border-black');
+                variantClassNames.push('visited:text-black');
+                variantClassNames.push('active:bg-gray-200');
+                variantClassNames.push('active:border-black');
+                if (hovered) {
+                    variantClassNames.push('border-black');
+                    variantClassNames.push('bg-white');
+                }
+                else if (active) {
+                    variantClassNames.push('border-black');
+                    variantClassNames.push('bg-gray-200');
+                }
+                else {
+                    variantClassNames.push('bg-white');
+                    variantClassNames.push('border-gray-400');
+                }
+            }
+            break;
+        case 'transparent':
+            variantClassNames.push('border border-solid');
+            if (disabled && !loading) {
+                variantClassNames.push('text-white/[0.32]');
+                variantClassNames.push('border-white/[0.32]');
+                variantClassNames.push('bg-transparent');
+            }
+            else {
+                variantClassNames.push('text-white');
+                variantClassNames.push('visited:text-white');
+                variantClassNames.push('border-solid');
+                variantClassNames.push('hover:border-white');
+                variantClassNames.push('active:border-white');
+                variantClassNames.push('active:bg-white/[.16]');
+                variantClassNames.push('focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)]');
+                if (hovered) {
+                    variantClassNames.push('border-white');
+                    variantClassNames.push('bg-transparent');
+                }
+                else if (active) {
+                    variantClassNames.push('border-white');
+                    variantClassNames.push('bg-white/[.16]');
+                }
+                else {
+                    variantClassNames.push('border-white/[0.32]');
+                    variantClassNames.push('bg-transparent');
+                }
+                if (focused) {
+                    variantClassNames.push('shadow-[0_0_0_3px_rgba(255,255,255,0.48)]');
+                }
+            }
+            break;
+    }
+    return variantClassNames;
+};
+export const createCoreClassNames = ({ disabled, focused, active, }) => {
+    const classNames = [
+        'no-underline hover:no-underline',
+        'rounded-sm',
+        'shadow-none',
+    ];
+    if (!disabled) {
+        classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
+        classNames.push('focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
+        if (focused) {
+            classNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]');
+        }
+        if (active) {
+            classNames.push('shadow-none');
+            classNames.push('z-[1]');
+        }
+    }
+    return classNames;
+};
+export const createIconClassNames = ({ iconPosition, size, }) => {
+    const sizeClassNames = {
+        small: [iconPosition === 'left' ? 'ml-[-0.125em]' : 'mr-[-0.125em]'],
+        medium: [iconPosition === 'left' ? 'ml-[-0.25em]' : 'mr-[-0.25em]'],
+        large: [iconPosition === 'left' ? 'ml-[-0.5em]' : 'mr-[-0.5em]'],
+    };
+    return [
+        sizeClassNames[size].join(' '),
+        iconPosition === 'left' ? 'mr-[0.5em]' : '',
+        iconPosition === 'right' ? 'ml-[0.5em]' : '',
+    ];
+};
+//# sourceMappingURL=styles.js.map

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

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

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

@@ -0,0 +1,28 @@
+import type { ReactElement, MouseEvent, ElementType } from 'react';
+import type { BaseProps, ButtonOrAnchorProps, OverridableComponent } from '@toptal/picasso-shared';
+import type { IconPositionType } from '../Button';
+export interface Props extends BaseProps, ButtonOrAnchorProps {
+    /** Show button in the active state (left mouse button down) */
+    active?: boolean;
+    /** The component used for the root node. Either a string to use a DOM element or a component. */
+    as?: ElementType;
+    /** Disables button */
+    disabled?: boolean;
+    /** Set focused style for the button */
+    focused?: boolean;
+    /** Set hovered style for the button */
+    hovered?: boolean;
+    /** 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;
+}
+export declare const ButtonAction: OverridableComponent<Props>;
+export default ButtonAction;
+//# sourceMappingURL=ButtonAction.d.ts.map

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

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

@@ -0,0 +1,51 @@
+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 cx from 'classnames';
+import { Loader } from '@toptal/picasso-loader';
+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 { 
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    // We use these props only to determine styles
+    active, focused, hovered, 
+    /* eslint-enable @typescript-eslint/no-unused-vars */
+    className, disabled, loading, icon, iconPosition, onClick } = props, rest = __rest(props, ["active", "focused", "hovered", "className", "disabled", "loading", "icon", "iconPosition", "onClick"]);
+    const usedIcon = loading ? loaderIcon : icon;
+    const usedIconPosition = icon ? iconPosition : 'right';
+    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', disabled: disabled })));
+});
+ButtonAction.defaultProps = {
+    iconPosition: 'left',
+};
+ButtonAction.displayName = 'ButtonAction';
+export default ButtonAction;
+//# sourceMappingURL=ButtonAction.js.map

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

@@ -0,0 +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;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;IACJ,sDAAsD;IACtD,8CAA8C;IAC9C,MAAM,EACN,OAAO,EACP,OAAO;IACP,qDAAqD;IACrD,SAAS,EACT,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAdH,uGAcL,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,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/index.d.ts

@@ -0,0 +1,4 @@
+import type { Props } from './ButtonAction';
+export { default as ButtonAction } from './ButtonAction';
+export declare type ButtonActionProps = Props;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ButtonAction/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAE3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACxD,oBAAY,iBAAiB,GAAG,KAAK,CAAA"}

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

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

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

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

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

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

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

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

@@ -0,0 +1 @@
+{"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":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAG7E,OAAO,KAAK,EACV,aAAa,EACb,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACf,MAAM,wBAAwB,CAAA;AAU/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,CA+EjD,CAAA;AAcF,eAAe,UAAU,CAAA"}

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

@@ -0,0 +1,68 @@
+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 '@toptal/picasso-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',
+    });
+};
+const RootElement = forwardRef((props, ref) => {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { ownerState, as: Root } = props, rest = __rest(props, ["ownerState", "as"]);
+    return React.createElement(Root, Object.assign({}, rest, { ref: ref }));
+});
+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"]);
+    const titleCase = useTitleCase(propsTitleCase);
+    const finalChildren = [titleCase ? toTitleCase(children) : children];
+    const finalRootElementName = typeof as === 'string' ? as : 'a';
+    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: finalRootElementName, slots: { root: RootElement }, 
+        // @ts-ignore
+        slotProps: { root: { as } } }),
+        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