@apify/ui-library 1.155.1 → 1.156.0

package/dist/components/button/button.d.ts

@@ -1,11 +1,11 @@
 import { AriaAttributes, default as React } from 'react';
-import { IconSize } from '@apify/ui-icons';
 import { WithRequired } from '../../type_utils';
 import { MarginSpacingProps, RegularBoxProps } from '../box';
 import { LinkProps } from '../link';
+export { BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, getButtonColorStyles, getButtonSizeStyles, } from './button.style';
 export type ButtonSize = 'extraLarge' | 'large' | 'medium' | 'small' | 'extraSmall';
-type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+export type ButtonColor = 'default' | 'success' | 'danger' | 'primaryBlack';
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonType = 'button' | 'submit';
 export interface TransientButtonProps {
     size?: ButtonSize;
@@ -21,37 +21,10 @@ export interface RegularButtonProps {
     type?: ButtonType;
 }
 type ButtonAriaProps = Pick<AriaAttributes, 'aria-label' | 'aria-labelledby'>;
-export type CommonButtonProps = RegularButtonProps & ButtonAriaProps & TransientButtonProps & MarginSpacingProps;
+export type CommonButtonProps = RegularButtonProps & ButtonAriaProps & TransientButtonProps & MarginSpacingProps & {
+    animated?: boolean;
+};
 export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onClick'>;
 export type AnchorButtonProps = CommonButtonProps & RegularBoxProps & LinkProps;
-type ButtonColorCombinations = {
-    [Type in ButtonVariant]: {
-        [Size in ButtonColor]: {
-            textColor: string;
-            borderColor: string;
-            backgroundColor: string;
-            actionTextColor?: string;
-            actionBorderColor?: string;
-            hoverColor?: string;
-            hoverGradient?: string;
-            activeColor?: string;
-            activeTextColor?: string;
-        };
-    };
-};
-type ButtonSizeCombinations = {
-    [Size in ButtonSize]: {
-        typography: string;
-        size: number;
-        horizontalPadding: number;
-        borderRadius: string;
-        iconSize: IconSize;
-    };
-};
-export declare const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations;
-export declare const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations;
-export declare const getButtonColorStyles: (variant?: ButtonVariant, color?: ButtonColor) => import('styled-components').RuleSet<object>;
-export declare const getButtonSizeStyles: (size?: ButtonSize) => import('styled-components').RuleSet<object>;
 export declare const Button: React.ForwardRefExoticComponent<(ButtonProps | AnchorButtonProps) & React.RefAttributes<HTMLElement>>;
-export {};
 //# sourceMappingURL=button.d.ts.map

package/dist/components/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EAAE,KAAK,YAAY,EAA2B,MAAM,kBAAkB,CAAC;AAE9E,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAE9D,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AACpF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AACrE,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AAC1D,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtC,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAG9E,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,eAAe,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAEjH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC;AAOhF,KAAK,uBAAuB,GAAG;KAC1B,IAAI,IAAI,aAAa,GAAG;SACpB,IAAI,IAAI,WAAW,GAAG;YACnB,SAAS,EAAE,MAAM,CAAC;YAClB,WAAW,EAAE,MAAM,CAAC;YACpB,eAAe,EAAE,MAAM,CAAC;YAGxB,eAAe,CAAC,EAAE,MAAM,CAAC;YAEzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAG3B,UAAU,CAAC,EAAE,MAAM,CAAC;YAEpB,aAAa,CAAC,EAAE,MAAM,CAAC;YAGvB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,eAAe,CAAC,EAAE,MAAM,CAAC;SAC5B;KACJ;CACJ,CAAC;AAEF,KAAK,sBAAsB,GAAG;KACzB,IAAI,IAAI,UAAU,GAAG;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,QAAQ,CAAC;KACtB;CACJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,uBAgGvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,sBAoCtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAS,aAAyB,EAAE,QAAO,WAAuB,gDA8CtG,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAM,UAAqB,gDAU9D,CAAC;AA8BF,eAAO,MAAM,MAAM,uGAiEjB,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AACvE,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAG9D,OAAO,EACH,yBAAyB,EACzB,wBAAwB,EACxB,oBAAoB,EACpB,mBAAmB,GACtB,MAAM,gBAAgB,CAAC;AAExB,MAAM,MAAM,UAAU,GAAG,YAAY,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AAC5E,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,CAAC;AACjE,KAAK,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;AAEtC,MAAM,WAAW,oBAAoB;IACjC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC;CAC3B;AAED,MAAM,WAAW,kBAAkB;IAC/B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACvC,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,KAAK,eAAe,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,GAAG,iBAAiB,CAAC,CAAC;AAG9E,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAC9C,eAAe,GACf,oBAAoB,GACpB,kBAAkB,GAAG;IAEjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEN,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC;AAOhF,eAAO,MAAM,MAAM,uGA6FjB,CAAC"}

package/dist/components/button/button.js

@@ -1,8 +1,6 @@
-import { theme } from "../../design_system/theme.js";
-import { Box } from "../box/box.js";
 import { useSharedUiDependencies } from "../../ui_dependency_provider.js";
 import { Link, isUrlExternal } from "../link/link.js";
-import styled, { css } from "styled-components";
+import { AnimatedBorder, BUTTON_SIZE_VARIANTS_CSS, StyledButton } from "./button.style.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ExternalLinkIcon } from "@apify/ui-icons";
@@ -10,252 +8,69 @@ import { ExternalLinkIcon } from "@apify/ui-icons";
 function isAnchorButton(props) {
 	return props.to !== void 0;
 }
-var BUTTON_COLOR_VARIANTS_CSS = {
-	primary: {
-		default: {
-			textColor: theme.color.neutral.textOnPrimary,
-			backgroundColor: theme.color.primary.action,
-			borderColor: theme.color.primary.action,
-			hoverColor: theme.color.primary.actionHover,
-			activeColor: theme.color.primary.actionActive
-		},
-		success: {
-			textColor: theme.color.neutral.textOnPrimary,
-			backgroundColor: theme.color.success.action,
-			borderColor: theme.color.success.action,
-			hoverColor: theme.color.success.actionHover,
-			activeColor: theme.color.success.actionActive
-		},
-		danger: {
-			textColor: theme.color.neutral.textOnPrimary,
-			backgroundColor: theme.color.danger.action,
-			borderColor: theme.color.danger.action,
-			hoverColor: theme.color.danger.actionHover,
-			activeColor: theme.color.danger.actionActive
-		},
-		primaryBlack: {
-			textColor: theme.color.neutral.textOnPrimary,
-			backgroundColor: theme.color.primaryBlack.action,
-			borderColor: theme.color.primaryBlack.action,
-			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
-			activeColor: theme.color.primaryBlack.actionActive
-		}
-	},
-	secondary: {
-		default: {
-			textColor: theme.color.neutral.text,
-			backgroundColor: theme.color.neutral.backgroundMuted,
-			borderColor: theme.color.neutral.border,
-			hoverColor: theme.color.neutral.actionSecondaryHover,
-			activeColor: theme.color.neutral.actionSecondaryActive,
-			actionBorderColor: theme.color.neutral.border
-		},
-		success: {
-			textColor: theme.color.success.text,
-			backgroundColor: theme.color.neutral.backgroundMuted,
-			borderColor: theme.color.neutral.border,
-			hoverColor: theme.color.success.actionHover,
-			activeColor: theme.color.success.actionActive,
-			actionTextColor: theme.color.neutral.background
-		},
-		danger: {
-			textColor: theme.color.danger.text,
-			backgroundColor: theme.color.neutral.backgroundMuted,
-			borderColor: theme.color.neutral.border,
-			hoverColor: theme.color.danger.backgroundHover,
-			actionBorderColor: theme.color.danger.borderSubtle,
-			activeColor: theme.color.danger.actionActive,
-			activeTextColor: theme.color.neutral.textOnPrimary
-		},
-		primaryBlack: {
-			textColor: theme.color.neutral.textOnPrimary,
-			backgroundColor: theme.color.primaryBlack.action,
-			borderColor: theme.color.primaryBlack.action,
-			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
-			activeColor: theme.color.primaryBlack.actionActive
-		}
-	},
-	tertiary: {
-		default: {
-			textColor: theme.color.neutral.text,
-			backgroundColor: "transparent",
-			borderColor: "transparent",
-			hoverColor: theme.color.neutral.hover,
-			activeColor: theme.color.neutral.actionSecondaryActive
-		},
-		success: {
-			textColor: theme.color.success.text,
-			backgroundColor: "transparent",
-			borderColor: "transparent",
-			hoverColor: theme.color.success.backgroundSubtleHover,
-			activeColor: theme.color.success.backgroundSubtleActive
-		},
-		danger: {
-			textColor: theme.color.danger.text,
-			backgroundColor: "transparent",
-			borderColor: "transparent",
-			hoverColor: theme.color.danger.backgroundSubtleHover,
-			activeColor: theme.color.danger.backgroundSubtleActive
-		},
-		primaryBlack: {
-			textColor: theme.color.neutral.textOnPrimary,
-			backgroundColor: theme.color.primaryBlack.action,
-			borderColor: theme.color.primaryBlack.action,
-			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
-			activeColor: theme.color.primaryBlack.actionActive
-		}
-	}
-};
-var BUTTON_SIZE_VARIANTS_CSS = {
-	extraLarge: {
-		typography: theme.typography.shared.mobile.bodyMMedium,
-		size: 40,
-		horizontalPadding: 12,
-		borderRadius: theme.radius.radius8,
-		iconSize: "20"
-	},
-	large: {
-		typography: theme.typography.shared.mobile.bodyMMedium,
-		size: 36,
-		horizontalPadding: 12,
-		borderRadius: theme.radius.radius6,
-		iconSize: "20"
-	},
-	medium: {
-		typography: theme.typography.shared.mobile.bodyMMedium,
-		size: 32,
-		horizontalPadding: 12,
-		borderRadius: theme.radius.radius6,
-		iconSize: "20"
-	},
-	small: {
-		typography: theme.typography.shared.mobile.bodySMedium,
-		size: 28,
-		horizontalPadding: 8,
-		borderRadius: theme.radius.radius6,
-		iconSize: "16"
-	},
-	extraSmall: {
-		typography: theme.typography.shared.mobile.bodySMedium,
-		size: 24,
-		horizontalPadding: 6,
-		borderRadius: theme.radius.radius6,
-		iconSize: "16"
-	}
-};
-var getButtonColorStyles = (variant = "primary", color = "default") => {
-	const { backgroundColor, borderColor, textColor, actionBorderColor, actionTextColor, hoverColor, hoverGradient, activeColor, activeTextColor } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
-	return css`
-        color: ${textColor};
-        background-color: ${backgroundColor};
-        border-color: ${borderColor};
-
-        &:hover {
-            color: ${actionTextColor || textColor};
-            ${hoverGradient ? css`
-                      background-image: ${hoverGradient};
-                      background-color: ${backgroundColor};
-                  ` : css`
-                      background-color: ${hoverColor};
-                  `}
-            border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
-        }
-
-        &:active {
-            color: ${activeTextColor || actionTextColor || textColor};
-            background-color: ${activeColor};
-            ${hoverGradient && "background-image: none;"}
-            border-color: ${actionBorderColor || activeColor};
-        }
-
-        &:disabled {
-            color: ${theme.color.neutral.textDisabled};
-            background-color: ${variant === "tertiary" ? "transparent" : theme.color.neutral.disabled};
-            border-color: ${variant === "tertiary" ? "transparent" : theme.color.neutral.disabled};
-
-            cursor: default;
-        }
-    `;
-};
-var getButtonSizeStyles = (size = "medium") => {
-	const { typography, size: height, horizontalPadding, borderRadius } = BUTTON_SIZE_VARIANTS_CSS[size];
-	return css`
-        ${typography};
-        height: ${height}px;
-        /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
-        padding: 0 ${horizontalPadding}px;
-        border-radius: ${borderRadius};
-    `;
-};
-var StyledButton = styled(Box)`
-    /* Basic positioning */
-    display: inline-flex;
-    align-items: center;
-    /* NOT sure about this. It needs to be set when we want 100% width button */
-    /* Maybe we can add block property */
-    justify-content: center;
-    gap: ${theme.space.space4};
-
-    /* Basic styles */
-    white-space: nowrap;
-    cursor: pointer;
-    transition:
-        border-color ${theme.transition.fastEaseOut},
-        background-color ${theme.transition.fastEaseOut};
-
-    /* Border is always defined, but it can be set to transparent */
-    border-style: solid;
-    border-width: 1px;
-    border-color: transparent;
-
-    /* Colors */
-    ${(props) => getButtonColorStyles(props.$variant, props.$color)}
-
-    /* Paddings & font size */
-    ${(props) => getButtonSizeStyles(props.$size)}
-`;
 var Button = forwardRef((props, ref) => {
-	const { as, children, size = "medium", color = "default", variant = "primary", type = "button", LeftIcon, RightIcon, onClick, trackingId, trackingData, ...rest } = props;
+	const { as, children, size = "medium", color = "default", variant = "primary", animated = false, type = "button", LeftIcon, RightIcon, onClick, trackingId, trackingData, className, m, mt, mb, ml, mr, mx, my, ...rest } = props;
 	const { trackClick, windowLocationHost } = useSharedUiDependencies();
 	const trackedOnClick = (e) => {
 		if (trackClick && trackingId) trackClick(trackingId, trackingData);
 		if (onClick) onClick(e);
 	};
-	const { iconSize } = BUTTON_SIZE_VARIANTS_CSS[size];
-	if (isAnchorButton(props)) {
-		const EffectiveRightIcon = isUrlExternal(props.to, windowLocationHost) && !props.hideExternalIcon ? ExternalLinkIcon : RightIcon;
+	const { iconSize, borderRadius } = BUTTON_SIZE_VARIANTS_CSS[size];
+	const layoutProps = {
+		className,
+		m,
+		mt,
+		mb,
+		ml,
+		mr,
+		mx,
+		my
+	};
+	const renderButton = (buttonLayoutProps = {}) => {
+		if (isAnchorButton(props)) {
+			const EffectiveRightIcon = isUrlExternal(props.to, windowLocationHost) && !props.hideExternalIcon ? ExternalLinkIcon : RightIcon;
+			return /* @__PURE__ */ jsxs(StyledButton, {
+				$size: size,
+				$color: color,
+				$variant: variant,
+				forwardedAs: props.disabled ? "button" : Link,
+				ref,
+				onClick: trackedOnClick,
+				to: props.to,
+				...rest,
+				...buttonLayoutProps,
+				hideExternalIcon: true,
+				children: [
+					LeftIcon && /* @__PURE__ */ jsx(LeftIcon, { size: iconSize }),
+					children,
+					EffectiveRightIcon && /* @__PURE__ */ jsx(EffectiveRightIcon, { size: iconSize })
+				]
+			});
+		}
 		return /* @__PURE__ */ jsxs(StyledButton, {
 			$size: size,
 			$color: color,
 			$variant: variant,
-			forwardedAs: props.disabled ? "button" : Link,
+			forwardedAs: as || "button",
 			ref,
 			onClick: trackedOnClick,
-			to: props.to,
+			type,
 			...rest,
-			hideExternalIcon: true,
+			...buttonLayoutProps,
 			children: [
 				LeftIcon && /* @__PURE__ */ jsx(LeftIcon, { size: iconSize }),
 				children,
-				EffectiveRightIcon && /* @__PURE__ */ jsx(EffectiveRightIcon, { size: iconSize })
+				RightIcon && /* @__PURE__ */ jsx(RightIcon, { size: iconSize })
 			]
 		});
-	}
-	return /* @__PURE__ */ jsxs(StyledButton, {
-		$size: size,
-		$color: color,
-		$variant: variant,
-		forwardedAs: as || "button",
-		ref,
-		onClick: trackedOnClick,
-		type,
-		...rest,
-		children: [
-			LeftIcon && /* @__PURE__ */ jsx(LeftIcon, { size: iconSize }),
-			children,
-			RightIcon && /* @__PURE__ */ jsx(RightIcon, { size: iconSize })
-		]
+	};
+	if (animated && variant === "primary" && !props.disabled) return /* @__PURE__ */ jsx(AnimatedBorder, {
+		forwardedAs: "span",
+		$radius: borderRadius,
+		...layoutProps,
+		children: renderButton()
 	});
+	return renderButton(layoutProps);
 });
 //#endregion
-export { BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, Button, getButtonColorStyles, getButtonSizeStyles };
+export { Button };

package/dist/components/button/button.style.d.ts

@@ -0,0 +1,37 @@
+import { IconSize } from '@apify/ui-icons';
+import { WithTransientProps } from '../../type_utils';
+import { ButtonColor, ButtonSize, ButtonVariant, TransientButtonProps } from './button';
+type ButtonColorCombinations = {
+    [Type in ButtonVariant]: {
+        [Size in ButtonColor]: {
+            textColor: string;
+            borderColor: string;
+            backgroundColor: string;
+            actionTextColor?: string;
+            actionBorderColor?: string;
+            hoverColor?: string;
+            hoverGradient?: string;
+            activeColor?: string;
+            activeTextColor?: string;
+        };
+    };
+};
+type ButtonSizeCombinations = {
+    [Size in ButtonSize]: {
+        typography: string;
+        size: number;
+        horizontalPadding: number;
+        borderRadius: string;
+        iconSize: IconSize;
+    };
+};
+export declare const BUTTON_COLOR_VARIANTS_CSS: ButtonColorCombinations;
+export declare const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations;
+export declare const getButtonColorStyles: (variant?: ButtonVariant, color?: ButtonColor) => import('styled-components').RuleSet<object>;
+export declare const getButtonSizeStyles: (size?: ButtonSize) => import('styled-components').RuleSet<object>;
+export declare const StyledButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(import('..').BoxProps & import('react').RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, WithTransientProps<Required<TransientButtonProps>>>> & string & Omit<import('react').ForwardRefExoticComponent<import('..').BoxProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export declare const AnimatedBorder: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(import('..').BoxProps & import('react').RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, {
+    $radius: string;
+}>> & string & Omit<import('react').ForwardRefExoticComponent<import('..').BoxProps & import('react').RefAttributes<HTMLElement>>, keyof import('react').Component<any, {}, any>>;
+export {};
+//# sourceMappingURL=button.style.d.ts.map

package/dist/components/button/button.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.style.d.ts","sourceRoot":"","sources":["../../../src/components/button/button.style.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAGhD,OAAO,EAAE,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAE7F,KAAK,uBAAuB,GAAG;KAC1B,IAAI,IAAI,aAAa,GAAG;SACpB,IAAI,IAAI,WAAW,GAAG;YACnB,SAAS,EAAE,MAAM,CAAC;YAClB,WAAW,EAAE,MAAM,CAAC;YACpB,eAAe,EAAE,MAAM,CAAC;YAGxB,eAAe,CAAC,EAAE,MAAM,CAAC;YAEzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;YAG3B,UAAU,CAAC,EAAE,MAAM,CAAC;YAEpB,aAAa,CAAC,EAAE,MAAM,CAAC;YAGvB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,eAAe,CAAC,EAAE,MAAM,CAAC;SAC5B;KACJ;CACJ,CAAC;AAEF,KAAK,sBAAsB,GAAG;KACzB,IAAI,IAAI,UAAU,GAAG;QAClB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,iBAAiB,EAAE,MAAM,CAAC;QAC1B,YAAY,EAAE,MAAM,CAAC;QACrB,QAAQ,EAAE,QAAQ,CAAC;KACtB;CACJ,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,uBAgGvC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,sBAoCtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,UAAS,aAAyB,EAAE,QAAO,WAAuB,gDA8CtG,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAM,UAAqB,gDAU9D,CAAC;AAEF,eAAO,MAAM,YAAY,mdA0BxB,CAAC;AAWF,eAAO,MAAM,cAAc;aAA0B,MAAM;iLAkC1D,CAAC"}

package/dist/components/button/button.style.js

@@ -0,0 +1,250 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import styled, { css, keyframes } from "styled-components";
+import "@apify/ui-icons";
+//#region src/components/button/button.style.ts
+var BUTTON_COLOR_VARIANTS_CSS = {
+	primary: {
+		default: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primary.action,
+			borderColor: theme.color.primary.action,
+			hoverColor: theme.color.primary.actionHover,
+			activeColor: theme.color.primary.actionActive
+		},
+		success: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.success.action,
+			borderColor: theme.color.success.action,
+			hoverColor: theme.color.success.actionHover,
+			activeColor: theme.color.success.actionActive
+		},
+		danger: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.danger.action,
+			borderColor: theme.color.danger.action,
+			hoverColor: theme.color.danger.actionHover,
+			activeColor: theme.color.danger.actionActive
+		},
+		primaryBlack: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primaryBlack.action,
+			borderColor: theme.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: theme.color.primaryBlack.actionActive
+		}
+	},
+	secondary: {
+		default: {
+			textColor: theme.color.neutral.text,
+			backgroundColor: theme.color.neutral.backgroundMuted,
+			borderColor: theme.color.neutral.border,
+			hoverColor: theme.color.neutral.actionSecondaryHover,
+			activeColor: theme.color.neutral.actionSecondaryActive,
+			actionBorderColor: theme.color.neutral.border
+		},
+		success: {
+			textColor: theme.color.success.text,
+			backgroundColor: theme.color.neutral.backgroundMuted,
+			borderColor: theme.color.neutral.border,
+			hoverColor: theme.color.success.actionHover,
+			activeColor: theme.color.success.actionActive,
+			actionTextColor: theme.color.neutral.background
+		},
+		danger: {
+			textColor: theme.color.danger.text,
+			backgroundColor: theme.color.neutral.backgroundMuted,
+			borderColor: theme.color.neutral.border,
+			hoverColor: theme.color.danger.backgroundHover,
+			actionBorderColor: theme.color.danger.borderSubtle,
+			activeColor: theme.color.danger.actionActive,
+			activeTextColor: theme.color.neutral.textOnPrimary
+		},
+		primaryBlack: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primaryBlack.action,
+			borderColor: theme.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: theme.color.primaryBlack.actionActive
+		}
+	},
+	tertiary: {
+		default: {
+			textColor: theme.color.neutral.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			hoverColor: theme.color.neutral.hover,
+			activeColor: theme.color.neutral.actionSecondaryActive
+		},
+		success: {
+			textColor: theme.color.success.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			hoverColor: theme.color.success.backgroundSubtleHover,
+			activeColor: theme.color.success.backgroundSubtleActive
+		},
+		danger: {
+			textColor: theme.color.danger.text,
+			backgroundColor: "transparent",
+			borderColor: "transparent",
+			hoverColor: theme.color.danger.backgroundSubtleHover,
+			activeColor: theme.color.danger.backgroundSubtleActive
+		},
+		primaryBlack: {
+			textColor: theme.color.neutral.textOnPrimary,
+			backgroundColor: theme.color.primaryBlack.action,
+			borderColor: theme.color.primaryBlack.action,
+			hoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${theme.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+			activeColor: theme.color.primaryBlack.actionActive
+		}
+	}
+};
+var BUTTON_SIZE_VARIANTS_CSS = {
+	extraLarge: {
+		typography: theme.typography.shared.mobile.bodyMMedium,
+		size: 40,
+		horizontalPadding: 12,
+		borderRadius: theme.radius.radius8,
+		iconSize: "20"
+	},
+	large: {
+		typography: theme.typography.shared.mobile.bodyMMedium,
+		size: 36,
+		horizontalPadding: 12,
+		borderRadius: theme.radius.radius6,
+		iconSize: "20"
+	},
+	medium: {
+		typography: theme.typography.shared.mobile.bodyMMedium,
+		size: 32,
+		horizontalPadding: 12,
+		borderRadius: theme.radius.radius6,
+		iconSize: "20"
+	},
+	small: {
+		typography: theme.typography.shared.mobile.bodySMedium,
+		size: 28,
+		horizontalPadding: 8,
+		borderRadius: theme.radius.radius6,
+		iconSize: "16"
+	},
+	extraSmall: {
+		typography: theme.typography.shared.mobile.bodySMedium,
+		size: 24,
+		horizontalPadding: 6,
+		borderRadius: theme.radius.radius6,
+		iconSize: "16"
+	}
+};
+var getButtonColorStyles = (variant = "primary", color = "default") => {
+	const { backgroundColor, borderColor, textColor, actionBorderColor, actionTextColor, hoverColor, hoverGradient, activeColor, activeTextColor } = BUTTON_COLOR_VARIANTS_CSS[variant][color];
+	return css`
+        color: ${textColor};
+        background-color: ${backgroundColor};
+        border-color: ${borderColor};
+
+        &:hover {
+            color: ${actionTextColor || textColor};
+            ${hoverGradient ? css`
+                      background-image: ${hoverGradient};
+                      background-color: ${backgroundColor};
+                  ` : css`
+                      background-color: ${hoverColor};
+                  `}
+            border-color: ${actionBorderColor || (hoverGradient ? borderColor : hoverColor)};
+        }
+
+        &:active {
+            color: ${activeTextColor || actionTextColor || textColor};
+            background-color: ${activeColor};
+            ${hoverGradient && "background-image: none;"}
+            border-color: ${actionBorderColor || activeColor};
+        }
+
+        &:disabled {
+            color: ${theme.color.neutral.textDisabled};
+            background-color: ${variant === "tertiary" ? "transparent" : theme.color.neutral.disabled};
+            border-color: ${variant === "tertiary" ? "transparent" : theme.color.neutral.disabled};
+
+            cursor: default;
+        }
+    `;
+};
+var getButtonSizeStyles = (size = "medium") => {
+	const { typography, size: height, horizontalPadding, borderRadius } = BUTTON_SIZE_VARIANTS_CSS[size];
+	return css`
+        ${typography};
+        height: ${height}px;
+        /* We just want to ensure padding on the sides. Height is set the the hard way for simplicity */
+        padding: 0 ${horizontalPadding}px;
+        border-radius: ${borderRadius};
+    `;
+};
+var StyledButton = styled(Box)`
+    /* Basic positioning */
+    display: inline-flex;
+    align-items: center;
+    /* NOT sure about this. It needs to be set when we want 100% width button */
+    /* Maybe we can add block property */
+    justify-content: center;
+    gap: ${theme.space.space4};
+
+    /* Basic styles */
+    white-space: nowrap;
+    cursor: pointer;
+    transition:
+        border-color ${theme.transition.fastEaseOut},
+        background-color ${theme.transition.fastEaseOut};
+
+    /* Border is always defined, but it can be set to transparent */
+    border-style: solid;
+    border-width: 1px;
+    border-color: transparent;
+
+    /* Colors */
+    ${(props) => getButtonColorStyles(props.$variant, props.$color)}
+
+    /* Paddings & font size */
+    ${(props) => getButtonSizeStyles(props.$size)}
+`;
+var shine = keyframes`
+    0% { transform: translateX(-100%) skewX(-20deg); }
+    50%, 100% { transform: translateX(200%) skewX(-20deg); }
+`;
+var AnimatedBorder = styled(Box)`
+    position: relative;
+    display: inline-flex;
+    align-self: center;
+    border-radius: ${(props) => props.$radius};
+    overflow: hidden;
+    isolation: isolate;
+
+    /* Stretch the inner button to fill the wrapper, so full-width buttons (e.g. on small screens)
+       don't leave a gap between the button and the overlay. The overlay is aria-hidden. */
+    & > :not([aria-hidden]) {
+        flex: 1;
+    }
+
+    /* Diagonal highlight sweeping across the button - width is relative so it scales to any button */
+    &::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        width: 50%;
+        z-index: 2;
+        pointer-events: none;
+        background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
+        animation: ${shine} 3s linear infinite;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        &::after {
+            animation: none;
+            display: none;
+        }
+    }
+`;
+//#endregion
+export { AnimatedBorder, BUTTON_COLOR_VARIANTS_CSS, BUTTON_SIZE_VARIANTS_CSS, StyledButton, getButtonColorStyles, getButtonSizeStyles };

package/dist/components/icon_button/icon_button.js

@@ -1,6 +1,7 @@
 import { theme } from "../../design_system/theme.js";
 import { Link } from "../link/link.js";
-import { BUTTON_SIZE_VARIANTS_CSS, Button } from "../button/button.js";
+import { BUTTON_SIZE_VARIANTS_CSS } from "../button/button.style.js";
+import { Button } from "../button/button.js";
 import { Tooltip } from "../floating/tooltip.js";
 import { InlineSpinner, spinnerClassNames } from "../spinner/spinner.js";
 import styled, { css } from "styled-components";