@apify/ui-library 1.148.0 → 1.148.1-featuremigrateapifyuilibrary-48563e.13

package/dist/components/floating/tooltip.d.ts

@@ -0,0 +1,43 @@
+import { ComponentType, ElementType, ReactNode } from 'react';
+import { FloatingComponentBaseProps } from './floating_component_base';
+export declare const TOOLTIP_TEXT_ALIGNS: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+};
+export type TooltipTextAlign = (typeof TOOLTIP_TEXT_ALIGNS)[keyof typeof TOOLTIP_TEXT_ALIGNS];
+export declare const TOOLTIP_SIZES: {
+    readonly XSMALL: "xsmall";
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+    readonly XLARGE: "xlarge";
+};
+export type TooltipSize = (typeof TOOLTIP_SIZES)[keyof typeof TOOLTIP_SIZES];
+export interface TooltipProps extends Omit<FloatingComponentBaseProps, 'isOpen' | 'size' | 'triggerRef' | 'CloseButtonComponent'> {
+    as?: ElementType;
+    className?: string;
+    delayShow?: number;
+    delayHide?: number;
+    shortcuts?: string[];
+    imageUrl?: string;
+    subtleText?: string;
+    size?: TooltipSize;
+    textAlign?: TooltipTextAlign;
+}
+interface WithTooltipProps {
+    tooltipProps?: TooltipProps;
+}
+/**
+ * Tooltip appears on hover, for onclick use Popover.
+ *
+ * Reference (the trigger wrapper) and floating (the popup) are rendered as separate DOM subtrees
+ * — the popup is portaled (or rendered as a sibling fragment when `showInPortal={false}`), never
+ * nested inside the trigger. floating-ui's `useHover` resolves open/close state by tracking the
+ * cursor across distinct reference and floating elements; nesting them causes their bounding
+ * rects to overlap and the state machine flips unpredictably (see floating-ui docs on the
+ * reference/floating element separation requirement).
+ */
+export declare const Tooltip: ({ as, className, delayShow, delayHide, shortcuts, imageUrl, subtleText, size, textAlign, placement, autoPlacements, strategy, offsetPx, contentWrapClassName, showInPortal, content, children, }: TooltipProps) => ReactNode;
+export declare function withTooltip<TProps extends Record<string, unknown> = Record<string, unknown>>(Component: ComponentType<TProps>): import('react').ForwardRefExoticComponent<import('react').PropsWithoutRef<TProps & WithTooltipProps> & import('react').RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=tooltip.d.ts.map

package/dist/components/floating/tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,WAAW,EAAc,KAAK,SAAS,EAAY,MAAM,OAAO,CAAC;AAKnG,OAAO,EACH,KAAK,0BAA0B,EAIlC,MAAM,2BAA2B,CAAC;AAGnC,eAAO,MAAM,mBAAmB;;;CAGtB,CAAC;AAEX,MAAM,MAAM,gBAAgB,GAAG,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;CAMhB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,OAAO,aAAa,CAAC,CAAC;AAE7E,MAAM,WAAW,YAAa,SAAQ,IAAI,CACtC,0BAA0B,EAC1B,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CAC5D;IACG,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED,UAAU,gBAAgB;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC/B;AA0BD;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,kMAkBrB,YAAY,KAAG,SAgDjB,CAAC;AAEF,wBAAgB,WAAW,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACxF,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,sJAcnC"}

package/dist/components/floating/tooltip.js

@@ -0,0 +1,86 @@
+import { theme as e } from "../../design_system/theme.js";
+import { useSharedUiDependencies as t } from "../../ui_dependency_provider.js";
+import { FloatingComponentWrapper as n, getFloatingPopupStyle as r, useFloatingPopup as i } from "./floating_component_base.js";
+import { TooltipContent as a } from "./tooltip_content.js";
+import o, { css as s } from "styled-components";
+import { forwardRef as c, useState as l } from "react";
+import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
+import { FloatingPortal as p, useHover as m, useInteractions as h } from "@floating-ui/react";
+//#region src/components/floating/tooltip.tsx
+var g = {
+	LEFT: "left",
+	CENTER: "center"
+}, _ = {
+	XSMALL: "xsmall",
+	SMALL: "small",
+	MEDIUM: "medium",
+	LARGE: "large",
+	XLARGE: "xlarge"
+}, v = o.span``, y = o(n)`
+    color: ${e.colorPalette.dark.neutral0};
+    background-color: ${e.colorPalette.dark.neutral900};
+    padding: ${e.space.space8};
+
+    a {
+        color: ${e.colorPalette.dark.blue100};
+
+        &:hover {
+            color: ${e.colorPalette.dark.blue75};
+        }
+    }
+
+    ${({ $isDarkTheme: t }) => t && s`
+            box-shadow: ${e.shadow.shadow2};
+            border: 1px solid ${e.color.neutral.smallTooltipBorder};
+        `}
+`, b = ({ as: e, className: n, delayShow: o = 500, delayHide: s = 50, shortcuts: c = [], imageUrl: b, subtleText: x, size: S = _.SMALL, textAlign: C = g.LEFT, placement: w, autoPlacements: T, strategy: E, offsetPx: D, contentWrapClassName: O, showInPortal: k = !1, content: A, children: j }) => {
+	let { uiTheme: M, tooltipSafeHtml: N } = t(), [P, F] = l(!1), I = i({
+		open: P,
+		onOpenChange: F,
+		placement: w,
+		strategy: E,
+		autoPlacements: T,
+		offsetPx: D
+	}), { getReferenceProps: L, getFloatingProps: R } = h([m(I.context, { delay: {
+		open: o,
+		close: s
+	} })]);
+	if (!A && !c?.length && !b && !x) return j;
+	let z = /* @__PURE__ */ d(y, {
+		ref: I.refs.setFloating,
+		className: O,
+		$isDarkTheme: M === "DARK",
+		style: r(I),
+		...R(),
+		children: /* @__PURE__ */ d(a, {
+			content: N(A),
+			shortcuts: c,
+			imageUrl: b,
+			subtleText: x,
+			size: S,
+			textAlign: C
+		})
+	});
+	return /* @__PURE__ */ f(u, { children: [/* @__PURE__ */ d(v, {
+		as: e,
+		className: n,
+		ref: I.refs.setReference,
+		...L(),
+		children: j
+	}), I.isMounted && (k ? /* @__PURE__ */ d(p, { children: z }) : z)] });
+};
+function x(e) {
+	let t = c(({ tooltipProps: t, ...n }, r) => t ? /* @__PURE__ */ d(b, {
+		...t,
+		children: /* @__PURE__ */ d(e, {
+			...n,
+			ref: r
+		})
+	}) : /* @__PURE__ */ d(e, {
+		...n,
+		ref: r
+	}));
+	return t.displayName = `WithTooltip:${e.displayName || e.name}`, t;
+}
+//#endregion
+export { _ as TOOLTIP_SIZES, g as TOOLTIP_TEXT_ALIGNS, b as Tooltip, x as withTooltip };

package/dist/components/floating/tooltip_content.d.ts

@@ -0,0 +1,5 @@
+import { TooltipProps } from './tooltip';
+type ContentProps = Pick<TooltipProps, 'content' | 'shortcuts' | 'imageUrl' | 'subtleText' | 'size' | 'textAlign'>;
+export declare const TooltipContent: ({ content, shortcuts, imageUrl, subtleText, size, textAlign, }: ContentProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tooltip_content.d.ts.map

package/dist/components/floating/tooltip_content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip_content.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip_content.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAiC,MAAM,WAAW,CAAC;AAG7E,KAAK,YAAY,GAAG,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,GAAG,WAAW,CAAC,CAAC;AAkEnH,eAAO,MAAM,cAAc,GAAI,gEAO5B,YAAY,4CAmBd,CAAC"}

package/dist/components/floating/tooltip_content.js

@@ -0,0 +1,91 @@
+import { theme as e } from "../../design_system/theme.js";
+import { Shortcut as t } from "../shortcut/shortcut.js";
+import { TOOLTIP_SIZES as n, TOOLTIP_TEXT_ALIGNS as r } from "./tooltip.js";
+import i, { css as a } from "styled-components";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/floating/tooltip_content.tsx
+var c = {
+	xsmall: "24rem",
+	small: "32rem",
+	medium: "40rem",
+	large: "48rem",
+	xlarge: "64rem"
+}, l = {
+	IMAGE: "Tooltip-image",
+	TEXT_CONTENT: "Tooltip-textContent",
+	SUBTLE_TEXT: "Tooltip-subtleText",
+	SHORTCUT_CONTAINER: "Tooltip-shortcutContainer"
+}, u = i.div`
+    display: flex;
+    flex-direction: column;
+    gap: ${e.space.space8};
+    /* Size - (tooltip padding + border) * 2 */
+    max-width: ${({ $size: t }) => a`calc(${c[t]} - (${e.space.space8} + 1px) * 2)`};
+    text-align: ${({ $textAlign: e }) => e || "left"};
+    align-items: ${({ $textAlign: e }) => e === "center" ? "center" : "flex-start"};
+
+    .${l.IMAGE} {
+        max-width: 100%;
+        max-height: 150px;
+        border-radius: 4px;
+        object-fit: contain;
+    }
+
+    .${l.TEXT_CONTENT} {
+        display: flex;
+        flex-direction: column;
+        gap: ${e.space.space8};
+        align-items: ${({ $textAlign: e }) => e === "center" ? "center" : "flex-start"};
+
+        /* When there is no child with subtleText class */
+        &:not(:has(.${l.SUBTLE_TEXT})) {
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+
+        /* When there is a child with subtleText class */
+        &:has(.${l.SUBTLE_TEXT}) {
+            text-align: left;
+        }
+
+        .${l.SUBTLE_TEXT} {
+            color: ${e.colorPalette.dark.neutral500};
+        }
+
+        .${l.SHORTCUT_CONTAINER} {
+            display: flex;
+            gap: ${e.space.space4};
+        }
+
+        /* To prevent <code /> from having scrollbars on windows */
+        code {
+            overflow: hidden;
+        }
+    }
+`, d = ({ content: e, shortcuts: i = [], imageUrl: a, subtleText: c, size: d = n.SMALL, textAlign: f = r.LEFT }) => /* @__PURE__ */ s(u, {
+	$size: d,
+	$textAlign: f,
+	children: [a && /* @__PURE__ */ o("img", {
+		src: a,
+		alt: "",
+		className: l.IMAGE
+	}), /* @__PURE__ */ s("div", {
+		className: l.TEXT_CONTENT,
+		children: [
+			e,
+			c && /* @__PURE__ */ o("div", {
+				className: l.SUBTLE_TEXT,
+				children: c
+			}),
+			i.length > 0 && /* @__PURE__ */ o("div", {
+				className: l.SHORTCUT_CONTAINER,
+				children: i.map((e, n) => /* @__PURE__ */ o(t, {
+					dark: !0,
+					children: e
+				}, `${e}-${n}`))
+			})
+		]
+	})]
+});
+//#endregion
+export { d as TooltipContent };

package/dist/components/icon_button/icon_button.d.ts

@@ -0,0 +1,57 @@
+import { IconComponent } from '@apify/ui-icons';
+import { ValueOf } from '@apify-packages/types';
+import { RegularBoxProps } from '../box';
+import { RegularButtonProps, TransientButtonProps } from '../button';
+import { RegularLinkProps } from '../link';
+export declare const ICON_BUTTON_VARIANTS: {
+    readonly DEFAULT: "DEFAULT";
+    readonly BORDERED: "BORDERED";
+    readonly DANGER: "DANGER";
+    readonly DANGER_BORDERED: "DANGER_BORDERED";
+    readonly PRIMARY_BLACK: "PRIMARY_BLACK";
+};
+export type ICON_BUTTON_VARIANTS = ValueOf<typeof ICON_BUTTON_VARIANTS>;
+type IconButtonNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type IconButtonNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: RegularButtonProps;
+    };
+};
+export type IconButtonProps<T extends IconButtonNodeType> = RegularBoxProps & Pick<TransientButtonProps, 'size'> & {
+    as?: T;
+    variant?: ICON_BUTTON_VARIANTS;
+    Icon: IconComponent;
+    disabled?: boolean;
+    isLoading?: boolean;
+    title?: string;
+    tooltipProps?: unknown;
+} & Omit<IconButtonNodePropsMap[T]['props'], 'size' | 'variant'>;
+/**
+ * Simplified button component that displays an icon.
+ * Has a tooltip and a loading state.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<{
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    id?: string;
+    title?: string;
+} & {
+    as?: React.ElementType;
+} & Pick<TransientButtonProps, "size"> & {
+    as?: IconButtonNodeType | undefined;
+    variant?: ICON_BUTTON_VARIANTS;
+    Icon: IconComponent;
+    disabled?: boolean;
+    isLoading?: boolean;
+    title?: string;
+    tooltipProps?: unknown;
+} & Omit<RegularLinkProps | RegularButtonProps, "size" | "variant"> & import('react').RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export {};
+//# sourceMappingURL=icon_button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon_button.d.ts","sourceRoot":"","sources":["../../../src/components/icon_button/icon_button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAE/D,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAIH,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EAC5B,MAAM,WAAW,CAAC;AAEnB,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGtD,eAAO,MAAM,oBAAoB;;;;;;CAMvB,CAAC;AACX,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAuKxE,KAAK,kBAAkB,GAAG,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;AACrE,KAAK,sBAAsB,GAAG;IAC1B,CAAC,EAAE;QACC,OAAO,EAAE,iBAAiB,CAAC;QAC3B,KAAK,EAAE,gBAAgB,CAAC;KAC3B,CAAC;IACF,MAAM,EAAE;QACJ,OAAO,EAAE,iBAAiB,CAAC;QAC3B,KAAK,EAAE,kBAAkB,CAAC;KAC7B,CAAC;CACL,CAAC;AAEF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,kBAAkB,IAAI,eAAe,GACvE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IACjC,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,IAAI,EAAE,aAAa,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B,GAAG,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;cAZL,oBAAoB;UACxB,aAAa;eACR,OAAO;gBACN,OAAO;YACX,MAAM;mBACC,OAAO;2IAoD7B,CAAC"}

package/dist/components/icon_button/icon_button.js

@@ -0,0 +1,165 @@
+import { theme as e } from "../../design_system/theme.js";
+import { Link as t } from "../link/link.js";
+import { BUTTON_SIZE_VARIANTS_CSS as n, Button as r } from "../button/button.js";
+import { Tooltip as i } from "../floating/tooltip.js";
+import { InlineSpinner as a, spinnerClassNames as o } from "../spinner/spinner.js";
+import s, { css as c } from "styled-components";
+import { forwardRef as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/icon_button/icon_button.tsx
+var d = {
+	DEFAULT: "DEFAULT",
+	BORDERED: "BORDERED",
+	DANGER: "DANGER",
+	DANGER_BORDERED: "DANGER_BORDERED",
+	PRIMARY_BLACK: "PRIMARY_BLACK"
+}, f = {
+	[d.DEFAULT]: {
+		backgroundColor: "transparent",
+		backgroundHoverColor: e.color.neutral.hover,
+		backgroundActiveColor: e.color.neutral.actionSecondaryActive,
+		backgroundDisabledColor: "transparent",
+		borderColor: "transparent",
+		borderHoverColor: "transparent",
+		borderActiveColor: e.color.neutral.actionSecondaryActive,
+		borderDisabledColor: "transparent",
+		iconColor: e.color.neutral.text
+	},
+	[d.BORDERED]: {
+		backgroundColor: e.color.neutral.backgroundMuted,
+		backgroundHoverColor: e.color.neutral.hover,
+		backgroundActiveColor: e.color.neutral.actionSecondaryActive,
+		backgroundDisabledColor: e.color.neutral.disabled,
+		borderColor: e.color.neutral.border,
+		borderHoverColor: e.color.neutral.border,
+		borderActiveColor: e.color.neutral.actionSecondaryActive,
+		borderDisabledColor: e.color.neutral.border,
+		iconColor: e.color.neutral.text
+	},
+	[d.DANGER_BORDERED]: {
+		backgroundColor: e.color.neutral.backgroundMuted,
+		backgroundHoverColor: e.color.danger.backgroundHover,
+		backgroundActiveColor: e.color.neutral.actionSecondaryActive,
+		backgroundDisabledColor: e.color.neutral.backgroundSubtle,
+		borderColor: e.color.neutral.border,
+		borderHoverColor: e.color.danger.borderSubtle,
+		borderActiveColor: e.color.neutral.actionSecondaryActive,
+		borderDisabledColor: e.color.neutral.border,
+		iconColor: e.color.danger.text
+	},
+	[d.DANGER]: {
+		backgroundColor: "transparent",
+		backgroundHoverColor: e.color.danger.backgroundHover,
+		backgroundActiveColor: e.color.neutral.actionSecondaryActive,
+		backgroundDisabledColor: e.color.neutral.backgroundSubtle,
+		borderColor: "transparent",
+		borderHoverColor: "transparent",
+		borderActiveColor: e.color.neutral.actionSecondaryActive,
+		borderDisabledColor: "transparent",
+		iconColor: e.color.danger.text
+	},
+	[d.PRIMARY_BLACK]: {
+		backgroundColor: e.color.primaryBlack.action,
+		backgroundHoverColor: e.color.primaryBlack.actionHover,
+		backgroundHoverGradient: `linear-gradient(to bottom, color-mix(in srgb, ${e.color.neutral.textOnPrimary} 16%, transparent), transparent)`,
+		backgroundActiveColor: e.color.primaryBlack.actionActive,
+		backgroundDisabledColor: e.color.neutral.disabled,
+		borderColor: e.color.primaryBlack.action,
+		borderHoverColor: e.color.primaryBlack.actionHover,
+		borderActiveColor: e.color.primaryBlack.actionActive,
+		borderDisabledColor: e.color.neutral.disabled,
+		iconColor: e.color.neutral.textOnPrimary
+	}
+}, p = {
+	extraLarge: {
+		iconSize: "20",
+		spinnerSize: "2rem"
+	},
+	large: {
+		iconSize: "20",
+		spinnerSize: "2rem"
+	},
+	medium: {
+		iconSize: "16",
+		spinnerSize: "1.6rem"
+	},
+	small: {
+		iconSize: "16",
+		spinnerSize: "1.6rem"
+	},
+	extraSmall: {
+		iconSize: "12",
+		spinnerSize: "1.2rem"
+	}
+}, m = (t) => {
+	let { backgroundColor: n, backgroundHoverColor: r, backgroundHoverGradient: i, backgroundActiveColor: a, backgroundDisabledColor: o, borderDisabledColor: s, borderColor: l, borderHoverColor: u, borderActiveColor: d, iconColor: p } = f[t];
+	return c`
+        color: ${p};
+        background-color: ${n};
+        border-color: ${l};
+
+        &:hover {
+            ${i ? c`
+                      background-image: ${i};
+                      background-color: ${n};
+                  ` : c`
+                      background-color: ${r};
+                  `}
+            border-color: ${u || l};
+            color: ${p};
+        }
+
+        &:focus {
+            border-color: ${e.color.primary.fieldBorderActive};
+        }
+
+        &:active {
+            background-color: ${a};
+            ${i && "background-image: none;"}
+            border-color: ${d || a};
+        }
+
+        &:disabled {
+            color: ${e.color.neutral.iconDisabled};
+            background-color: ${o};
+            border-color: ${s};
+
+            cursor: default;
+        }
+    `;
+}, h = s(r)`
+    ${({ $variant: e }) => m(e)}
+
+    /* Override default button styles */
+    box-sizing: border-box;
+    width: ${({ $size: e }) => n[e].size}px;
+    padding: 0;
+
+    .${o.SPINNER} .path {
+        stroke: ${e.color.neutral.icon};
+    }
+`, g = l(({ variant: e = d.DEFAULT, size: n = "medium", as: r = "button", title: o, disabled: s = !1, isLoading: c = !1, Icon: l, tooltipProps: f, ...m }, g) => {
+	let _ = {
+		...m,
+		size: n
+	}, v = r === "a" ? t : r, { iconSize: y, spinnerSize: b } = p[n], x = /* @__PURE__ */ u(h, {
+		forwardedAs: v,
+		ref: g,
+		disabled: s || c,
+		type: "button",
+		"aria-label": o,
+		LeftIcon: c ? () => /* @__PURE__ */ u(a, { size: b }) : () => /* @__PURE__ */ u(l, { size: y }),
+		variant: "tertiary",
+		$size: n,
+		$variant: e,
+		..._
+	});
+	return o ? /* @__PURE__ */ u(i, {
+		content: o,
+		...f,
+		children: x
+	}) : x;
+});
+g.displayName = "IconButton";
+//#endregion
+export { d as ICON_BUTTON_VARIANTS, g as IconButton };

package/dist/components/icon_button/index.d.ts

@@ -0,0 +1,2 @@
+export * from './icon_button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/icon_button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/icon_button/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/image/image.d.ts

@@ -0,0 +1,10 @@
+import { ImageProxyOptions } from '../../ui_dependency_provider';
+import { BoxProps } from '../box';
+export declare const Image: import('react').ForwardRefExoticComponent<{
+    src: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    loading?: "eager" | "lazy" | undefined;
+} & ImageProxyOptions & Omit<BoxProps, "as"> & import('react').RefAttributes<HTMLImageElement>>;
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../src/components/image/image.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAU5C,eAAO,MAAM,KAAK;SAPT,MAAM;UACL,MAAM;YACJ,MAAM;aACL,MAAM;cACL,OAAO,GAAG,MAAM,GAAG,SAAS;+FAMxC,CAAC"}

package/dist/components/image/image.js

@@ -0,0 +1,15 @@
+import { Box as e } from "../box/box.js";
+import { useSharedUiDependencies as t } from "../../ui_dependency_provider.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/image/image.tsx
+var i = n((n, i) => {
+	let { InternalImage: a } = t();
+	return /* @__PURE__ */ r(e, {
+		ref: i,
+		...n,
+		as: a
+	});
+});
+//#endregion
+export { i as Image };

package/dist/components/image/index.d.ts

@@ -0,0 +1,2 @@
+export * from './image';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/image/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,41 @@
+export * from './text';
+export * from './box';
+export * from './avatar';
+export * from './card_container';
+export * from './message';
+export * from './floating';
+export * from './button';
+export * from './link';
+export * from './action_link';
+export * from './simple_markdown';
+export * from './code';
+export * from './color_wheel_gradient';
+export * from './readme_renderer';
+export * from './card';
+export * from './markdown';
+export * from './pagination';
+export * from './tab_number_chip';
+export * from './tile';
+export * from './blog_article';
+export * from './banner';
+export * from './actor_template_card';
+export * from './chip';
+export * from './image';
+export * from './rating';
+export * from './badge';
+export * from './tag';
+export * from './tabs';
+export * from './shortcut';
+export * from './icon_button';
+export * from './spinner';
+export * from './store';
+export * from './checkbox';
+export * from './radio_button';
+export * from './browser_window';
+export * from './collapsible_card';
+export * from './select';
+export * from './switch';
+export * from './table';
+export * from './breadcrumb';
+export * from './dropdown';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,uBAAuB,CAAC;AACtC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC"}

package/dist/components/link/index.d.ts

@@ -0,0 +1,2 @@
+export * from './link';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/link/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/link/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/components/link/link.d.ts

@@ -0,0 +1,35 @@
+import { Path } from 'history';
+import { default as React } from 'react';
+import { BoxProps } from '../box';
+export type To = string | Partial<Path>;
+export interface RegularLinkProps {
+    to: To;
+    hideExternalIcon?: boolean;
+    showExternalIcon?: boolean;
+    rel?: string;
+    target?: string;
+    trackingId?: string;
+    trackingData?: object;
+    tabIndex?: number;
+    ariaHidden?: boolean;
+    ariaLabel?: string;
+}
+/**
+ * Checks if passed url is external
+ */
+export declare const isUrlExternal: (url: To, windowLocationHost: string) => boolean;
+/**
+ * Checks if passed url is email
+ */
+export declare const isUrlEmail: (url: To) => boolean;
+/**
+ * Omits the domain and protocol from a given URL string.
+ * @param rawUrlString The input URL string which may include protocol and domain.
+ * @returns The URL string without the domain and protocol, or if it's invalid URL then it returns the input param — `rawUrlString`.
+ */
+export declare function omitDomainAndProtocol(rawUrlString: string): string;
+export declare function hasUrlHttpProtocol(rawUrlString: string): boolean;
+export declare const StyledAsLink: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<(BoxProps & React.RefAttributes<HTMLElement>) & import('styled-components/dist/types').BaseObject, import('styled-components/dist/types').BaseObject>> & string & Omit<React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>, keyof React.Component<any, {}, any>>;
+export type LinkProps = RegularLinkProps & BoxProps;
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../../src/components/link/link.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAE5C,MAAM,MAAM,EAAE,GAAG,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AACxC,MAAM,WAAW,gBAAgB;IAC7B,EAAE,EAAE,EAAE,CAAC;IACP,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,EAAE,EAAE,oBAAoB,MAAM,YAIhE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,UAAU,GAAI,KAAK,EAAE,YAGjC,CAAC;AACF;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAOlE;AAED,wBAAgB,kBAAkB,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAGhE;AAkBD,eAAO,MAAM,YAAY,gZAkBxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,gBAAgB,GAAG,QAAQ,CAAC;AAEpD,eAAO,MAAM,IAAI,+EAyDhB,CAAC"}