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

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

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

package/dist/components/tabs/tab.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { IconComponent } from '@apify/ui-icons';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { RegularLinkProps } from '../link';
+type SharedTabProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps & Omit<RegularLinkProps, 'hideExternalIcon' | 'showExternalIcon'>;
+export type TabVariant = 'default' | 'boxed' | 'buttoned';
+export type TabData = SharedTabProps & {
+    id: string;
+    title: string;
+    Icon?: IconComponent;
+    chip?: number | string;
+    rollout?: 'alpha' | 'beta';
+    disabled?: boolean;
+};
+export type TabProps = TabData & {
+    variant?: TabVariant;
+    active?: boolean;
+    onSelect?: (data: {
+        id: string;
+        href: string;
+        event: React.MouseEvent;
+    }) => void;
+};
+export declare const TAB_CLASSNAMES: {
+    ICON: string;
+    TITLE: string;
+};
+export declare const Tab: ({ variant, id, to, Icon, title, chip, rollout, className, onSelect, active, disabled, ...props }: TabProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tab.d.ts.map

package/dist/components/tabs/tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAOrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAClE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAKhD,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GACzD,kBAAkB,GAClB,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,GAAG,kBAAkB,CAAC,CAAC;AAEpE,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAE1D,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG;IAC7B,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AA4GF,eAAO,MAAM,cAAc;;;CAG1B,CAAC;AAoCF,eAAO,MAAM,GAAG,GAAI,kGAajB,QAAQ,4CA8BV,CAAC"}

package/dist/components/tabs/tab.js

@@ -0,0 +1,191 @@
+import { theme } from "../../design_system/theme.js";
+import { TextShared } from "../text/text_shared.js";
+import { Link } from "../link/link.js";
+import { Badge } from "../badge/badge.js";
+import styled, { css } from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+import { createPath } from "history";
+//#region src/components/tabs/tab.tsx
+var tabVariantTextSize = {
+	default: "regular",
+	boxed: "regular",
+	buttoned: "small"
+};
+var tabVariantBadgeSize = {
+	default: "small",
+	boxed: "small",
+	buttoned: "extra_small"
+};
+var tabVariantStyle = {
+	default: css`
+        height: 3.6rem;
+        padding: 0 ${theme.space.space8};
+        color: ${theme.color.neutral.textSubtle};
+
+        &:hover {
+            color: ${theme.color.primaryBlack.actionHover};
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                bottom: -${theme.space.space4};
+                right: 0;
+                left: 0;
+                height: 2px;
+                background-color: ${theme.color.primaryBlack.action};
+                border-radius: ${theme.radius.radiusFull};
+                content: '';
+                display: block;
+                pointer-events: none;
+                position: absolute;
+            }
+
+            &.disabled::after {
+                background-color: ${theme.color.neutral.textDisabled};
+            }
+        }
+    `,
+	boxed: css`
+        height: 3.6rem;
+        border: 1px solid transparent;
+        border-top-right-radius: ${theme.radius.radius6};
+        border-top-left-radius: ${theme.radius.radius6};
+        padding: 0 ${theme.space.space12};
+        color: ${theme.color.neutral.textMuted};
+
+        &::after {
+            inset: ${theme.space.space4};
+            background-color: transparent;
+            border-radius: ${theme.radius.radius6};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+            transition: background-color ${theme.transition.fastEaseOut};
+            z-index: -1;
+        }
+
+        &:hover {
+            color: ${theme.color.neutral.text};
+
+            &::after {
+                background-color: ${theme.color.neutral.hover};
+            }
+        }
+
+        &.active {
+            color: ${theme.color.neutral.text};
+            border-color: ${theme.color.neutral.border};
+            border-bottom-color: ${theme.color.neutral.background};
+
+            &::after {
+                background-color: transparent;
+            }
+        }
+    `,
+	buttoned: css`
+        height: 3.2rem;
+        padding: 0 ${theme.space.space8};
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: ${theme.radius.radius6};
+        color: ${theme.color.neutral.textMuted};
+
+        &:hover {
+            background-color: ${theme.color.neutral.hover};
+            color: ${theme.color.neutral.text};
+        }
+
+        &.active {
+            background-color: ${theme.color.neutral.background};
+            border-color: ${theme.color.neutral.border};
+            color: ${theme.color.neutral.text};
+        }
+    `
+};
+var TAB_CLASSNAMES = {
+	ICON: "Tab-icon",
+	TITLE: "Tab-title"
+};
+var TabWrapper = styled(Link)`
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${theme.space.space4};
+    flex-shrink: 0;
+    cursor: pointer;
+    position: relative;
+    transition:
+        background-color ${theme.transition.fastEaseOut},
+        border-color ${theme.transition.fastEaseOut},
+        color ${theme.transition.fastEaseOut};
+    z-index: 1;
+
+    ${({ $variant }) => tabVariantStyle[$variant]};
+
+    &.disabled {
+        color: ${theme.color.neutral.textDisabled};
+        pointer-events: none;
+    }
+
+    .${TAB_CLASSNAMES.ICON} {
+        color: inherit;
+        flex-shrink: 0;
+        transition: color ${theme.transition.fastEaseOut};
+    }
+
+    .${TAB_CLASSNAMES.TITLE} {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+`;
+var Tab = ({ variant = "default", id, to, Icon, title, chip, rollout, className, onSelect, active = false, disabled = false, ...props }) => {
+	const href = typeof to === "string" ? to : createPath(to);
+	return /* @__PURE__ */ jsxs(TabWrapper, {
+		"data-test": "tab",
+		...props,
+		id,
+		to,
+		role: "tab",
+		"data-test-url": href,
+		className: clsx$1(className, {
+			active,
+			disabled
+		}),
+		onClick: onSelect ? (event) => onSelect({
+			id,
+			href,
+			event
+		}) : void 0,
+		$variant: variant,
+		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, {
+				size: "16",
+				className: TAB_CLASSNAMES.ICON
+			}),
+			/* @__PURE__ */ jsx(TextShared, {
+				size: tabVariantTextSize[variant],
+				className: TAB_CLASSNAMES.TITLE,
+				weight: "bold",
+				as: "div",
+				children: title
+			}),
+			chip && /* @__PURE__ */ jsx(Badge, {
+				size: tabVariantBadgeSize[variant],
+				variant: active ? "primary_black" : "neutral_subtle",
+				children: chip
+			}),
+			rollout && /* @__PURE__ */ jsx(Badge, {
+				size: tabVariantBadgeSize[variant],
+				variant: "primary_blue",
+				children: rollout
+			})
+		]
+	});
+};
+//#endregion
+export { TAB_CLASSNAMES, Tab };

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { TabData, TabVariant } from './tab';
+type SharedTabsProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+export type TabsProps = SharedTabsProps & {
+    variant?: TabVariant;
+    tabs: TabData[];
+    activeTab?: string;
+    onSelect?: (data: {
+        id: string;
+        href: string;
+        event: React.MouseEvent;
+    }) => void;
+};
+export declare const Tabs: ({ variant, tabs, activeTab, onSelect, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAElE,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGjD,KAAK,eAAe,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AACpF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACtC,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAA;KAAE,KAAK,IAAI,CAAC;CACpF,CAAC;AA+HF,eAAO,MAAM,IAAI,GAAI,kDAA8D,SAAS,4CAoB3F,CAAC"}

package/dist/components/tabs/tabs.js

@@ -0,0 +1,155 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { useResizeObserverSsr } from "../../utils/resize_observer.js";
+import { Tab } from "./tab.js";
+import styled, { css } from "styled-components";
+import { createElement, useCallback, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tabs/tabs.tsx
+var tabsVariantStyle = {
+	default: css`
+        align-items: flex-start;
+        gap: ${theme.space.space8};
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.separatorSubtle};
+            border-radius: ${theme.radius.radiusFull};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+	boxed: css`
+        align-items: flex-end;
+
+        &::after {
+            bottom: 0;
+            right: 0;
+            left: 0;
+            height: 1px;
+            background-color: ${theme.color.neutral.border};
+            content: '';
+            display: block;
+            pointer-events: none;
+            position: absolute;
+        }
+    `,
+	buttoned: css`
+        align-items: center;
+        gap: ${theme.space.space4};
+    `
+};
+var TabsWrapper = styled(Box)`
+    height: 4rem;
+    display: flex;
+    position: relative;
+
+    [role='tablist'] {
+        min-width: 0;
+        display: flex;
+        flex-grow: 1;
+        overflow-x: auto;
+        ${({ $variant }) => tabsVariantStyle[$variant]};
+
+        /* Scrollbar */
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+
+        &::-webkit-scrollbar {
+            display: none; /* Chrome, Safari, Opera */
+        }
+    }
+
+    & > [role='cell'] {
+        position: sticky;
+        top: 0;
+        height: 100%;
+        width: 0;
+        margin-left: auto;
+        opacity: 0;
+        transition: opacity ${theme.transition.fastEaseOut};
+        z-index: 2;
+
+        &[aria-hidden='false'] {
+            opacity: 1;
+        }
+
+        &::after {
+            height: 100%;
+            width: ${theme.space.space32};
+            content: ' ';
+            pointer-events: none;
+            position: absolute;
+        }
+
+        &:first-of-type {
+            left: 0;
+
+            &::after {
+                left: 0;
+                background: linear-gradient(90deg, ${theme.color.neutral.background} 0%, rgba(255, 255, 255, 0) 100%);
+            }
+        }
+
+        &:last-of-type {
+            right: 0;
+
+            &::after {
+                right: 0;
+                background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, ${theme.color.neutral.background} 100%);
+            }
+        }
+    }
+`;
+var isTabsOverflowing = (node) => {
+	if (node.scrollWidth > node.clientWidth) return {
+		right: node.clientWidth + node.scrollLeft < node.scrollWidth,
+		left: node.scrollLeft > 0
+	};
+	return {
+		right: false,
+		left: false
+	};
+};
+var Tabs = ({ variant = "default", tabs, activeTab, onSelect, ...props }) => {
+	const ref = useRef(null);
+	const [overflowState, setOveflowState] = useState();
+	useResizeObserverSsr(ref, (entry) => setOveflowState(isTabsOverflowing(entry.target)));
+	const scrollHandler = useCallback((event) => {
+		setOveflowState(isTabsOverflowing(event.currentTarget));
+	}, []);
+	return /* @__PURE__ */ jsxs(TabsWrapper, {
+		...props,
+		"data-test": "tabs-wrapper",
+		$variant: variant,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "cell",
+				"aria-hidden": !overflowState?.left
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				role: "tablist",
+				onScroll: scrollHandler,
+				children: tabs.map((tab) => /* @__PURE__ */ createElement(Tab, {
+					...tab,
+					key: tab.id,
+					variant,
+					active: tab.id === activeTab,
+					onSelect
+				}))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				role: "cell",
+				"aria-hidden": !overflowState?.right
+			})
+		]
+	});
+};
+//#endregion
+export { Tabs };

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

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

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

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

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,43 @@
+import { default as React, ForwardedRef } from 'react';
+import { IconComponent } from '@apify/ui-icons';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { RegularButtonProps } from '../button';
+import { RegularLinkProps } from '../link';
+import { SharedTextSize, SharedTextType } from '../text';
+type TagSize = SharedTextSize;
+export declare const TAG_SIZES: TagSize[];
+export declare const TAG_VARIANTS: readonly ["primary", "secondary", "subtle", "accent", "success", "warning", "error"];
+export type TagVariant = (typeof TAG_VARIANTS)[number];
+type TagNodeType = Extract<React.ElementType, 'a' | 'button'>;
+type TagNodePropsMap = {
+    a: {
+        element: HTMLAnchorElement;
+        props: RegularLinkProps;
+    };
+    button: {
+        element: HTMLButtonElement;
+        props: RegularButtonProps;
+    };
+};
+type SharedTagProps = Omit<RegularBoxProps, 'as'> & MarginSpacingProps;
+export type TagProps<T extends TagNodeType> = SharedTagProps & ({
+    as?: T;
+    size?: TagSize;
+    type?: SharedTextType;
+    variant?: TagVariant;
+    LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
+    title?: string;
+} & Omit<TagNodePropsMap[T]['props'], 'size' | 'type'>);
+/**
+ * Component for displaying inherenly interactive chip descendant
+ */
+declare function TagWrapper<T extends TagNodeType>({ as, size, type, variant, LeadingIcon, TrailingIcon, children, ...props }: TagProps<T>, ref: ForwardedRef<TagNodePropsMap[T]['element']>): import("react/jsx-runtime").JSX.Element;
+declare namespace TagWrapper {
+    var displayName: string;
+}
+export declare const Tag: <T extends TagNodeType>(props: TagProps<T> & {
+    ref?: ForwardedRef<TagNodePropsMap[T]["element"]>;
+}) => ReturnType<typeof TagWrapper>;
+export {};
+//# sourceMappingURL=tag.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tag.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,YAAY,EAAc,MAAM,OAAO,CAAC;AAGtD,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAK/D,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AACpD,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,SAAS,CAAC;AAEnE,KAAK,OAAO,GAAG,cAAc,CAAC;AAC9B,eAAO,MAAM,SAAS,EAAE,OAAO,EAAgC,CAAC;AAQhE,eAAO,MAAM,YAAY,sFAAuF,CAAC;AACjH,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,KAAK,WAAW,GAAG,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;AAC9D,KAAK,eAAe,GAAG;IACnB,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,KAAK,cAAc,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,GAAG,kBAAkB,CAAC;AACvE,MAAM,MAAM,QAAQ,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,GACxD,CAAC;IACG,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;AAmH5D;;GAEG;AACH,iBAAS,UAAU,CAAC,CAAC,SAAS,WAAW,EACrC,EACI,EAAE,EACF,IAAc,EACd,IAAa,EACb,OAAmB,EACnB,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,QAAQ,CAAC,CAAC,CAAC,EACd,GAAG,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,2CAkBnD;kBA7BQ,UAAU;;;AAiCnB,eAAO,MAAM,GAAG,EAA6B,CAAC,CAAC,SAAS,WAAW,EAC/D,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAA;CAAE,KACzE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/dist/components/tag/tag.js

@@ -0,0 +1,163 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { TextShared } from "../text/text_shared.js";
+import { Link } from "../link/link.js";
+import styled, { css } from "styled-components";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tag/tag.tsx
+var TAG_SIZES = [
+	"big",
+	"regular",
+	"small"
+];
+var TAG_ICON_SIZES = {
+	big: "20",
+	regular: "16",
+	small: "12"
+};
+var TAG_VARIANTS = [
+	"primary",
+	"secondary",
+	"subtle",
+	"accent",
+	"success",
+	"warning",
+	"error"
+];
+var tagSizeStyle = {
+	big: css`
+        height: 4rem;
+        padding: ${theme.space.space8} ${theme.space.space12};
+        border-radius: ${theme.radius.radius12};
+    `,
+	regular: css`
+        height: 2.8rem;
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius8};
+    `,
+	small: css`
+        height: 2rem;
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+
+        &:has(> svg:last-child:nth-child(1)) {
+            padding: ${theme.space.space2} ${theme.space.space4};
+        }
+    `
+};
+var tagVariantStyle = {
+	primary: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: transparent;
+        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+	secondary: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: transparent;
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+	subtle: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.icon};
+        background: ${theme.color.neutral.backgroundSubtle};
+
+        &:hover {
+            background: ${theme.color.neutral.hover};
+        }
+    `,
+	accent: css`
+        color: ${theme.color.primary.chipText};
+        fill: ${theme.color.primary.chipText};
+        background: ${theme.color.primary.background};
+
+        &:hover {
+            background: ${theme.color.primary.backgroundHover};
+        }
+    `,
+	success: css`
+        color: ${theme.color.success.chipText};
+        fill: ${theme.color.success.chipText};
+        background: ${theme.color.success.background};
+
+        &:hover {
+            background: ${theme.color.success.backgroundHover};
+        }
+    `,
+	warning: css`
+        color: ${theme.color.warning.chipText};
+        fill: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.background};
+
+        &:hover {
+            background: ${theme.color.warning.backgroundHover};
+        }
+    `,
+	error: css`
+        color: ${theme.color.danger.chipText};
+        fill: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.background};
+
+        &:hover {
+            background: ${theme.color.danger.backgroundHover};
+        }
+    `
+};
+var StyledTag = styled(Box)`
+    ${({ $size }) => tagSizeStyle[$size]};
+    ${({ $variant }) => tagVariantStyle[$variant]};
+
+    /* Static styles */
+    width: fit-content;
+    border: none;
+    outline: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${theme.space.space4};
+    cursor: pointer;
+    transition: background ${theme.transition.fastEaseOut};
+
+    svg {
+        flex-shrink: 0;
+    }
+`;
+/**
+* Component for displaying inherenly interactive chip descendant
+*/
+function TagWrapper({ as, size = "small", type = "body", variant = "primary", LeadingIcon, TrailingIcon, children, ...props }, ref) {
+	const component = as === "a" ? Link : as ?? "button";
+	const textSize = size === "regular" ? "small" : size;
+	return /* @__PURE__ */ jsxs(StyledTag, {
+		as: component,
+		ref,
+		$variant: variant,
+		$size: size,
+		...props,
+		children: [
+			LeadingIcon && /* @__PURE__ */ jsx(LeadingIcon, { size: TAG_ICON_SIZES[size] }),
+			children && /* @__PURE__ */ jsx(TextShared, {
+				size: textSize,
+				type,
+				weight: "medium",
+				children
+			}),
+			TrailingIcon && /* @__PURE__ */ jsx(TrailingIcon, { size: TAG_ICON_SIZES[size] })
+		]
+	});
+}
+TagWrapper.displayName = "Tag";
+var Tag = forwardRef(TagWrapper);
+//#endregion
+export { TAG_SIZES, TAG_VARIANTS, Tag };

package/dist/components/tag.d.ts

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

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

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

package/dist/components/text/heading_content.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { TextBaseProps } from './text_base';
+type HeadingContentType = 'heading1' | 'heading2' | 'heading3' | 'heading4' | 'heading5' | 'heading6';
+interface HeadingContentTransientProps {
+    type?: HeadingContentType;
+}
+export type HeadingContentProps = HeadingContentTransientProps & TextBaseProps;
+/**
+ * @deprecated Use Heading or HeadingMarketing from ui-library
+ */
+export declare const HeadingContent: React.FC<HeadingContentProps>;
+export {};
+//# sourceMappingURL=heading_content.d.ts.map

package/dist/components/text/heading_content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading_content.d.ts","sourceRoot":"","sources":["../../../src/components/text/heading_content.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,KAAK,kBAAkB,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,GAAG,UAAU,CAAC;AAEtG,UAAU,4BAA4B;IAClC,IAAI,CAAC,EAAE,kBAAkB,CAAC;CAC7B;AAeD,MAAM,MAAM,mBAAmB,GAAG,4BAA4B,GAAG,aAAa,CAAC;AAe/E;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CASxD,CAAC"}