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

package/dist/components/badge/badge.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { IconComponent } from '@apify/ui-icons';
+import { MarginSpacingProps, RegularBoxProps } from '../box';
+import { SharedTextType } from '../text';
+export type BadgeSize = 'large' | 'regular' | 'small' | 'extra_small';
+export declare const BADGE_SIZES: BadgeSize[];
+export type BadgeVariant = 'neutral' | 'neutral_muted' | 'neutral_subtle' | 'primary_black' | 'primary_blue' | 'success' | 'warning' | 'danger';
+export declare const BADGE_VARIANTS: BadgeVariant[];
+type SharedBadgeProps = Omit<RegularBoxProps, 'as' | 'onClick'> & MarginSpacingProps;
+export type BadgeProps = SharedBadgeProps & {
+    as?: Exclude<React.ElementType, 'a' | 'button'>;
+    size?: BadgeSize;
+    type?: SharedTextType;
+    variant?: BadgeVariant;
+    inline?: boolean;
+    LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
+};
+/**
+ * Component for displaying non-interactive chip descendant.
+ */
+export declare const Badge: React.ForwardRefExoticComponent<Omit<RegularBoxProps, "onClick" | "as"> & MarginSpacingProps & {
+    as?: Exclude<React.ElementType, "a" | "button">;
+    size?: BadgeSize;
+    type?: SharedTextType;
+    variant?: BadgeVariant;
+    inline?: boolean;
+    LeadingIcon?: IconComponent;
+    TrailingIcon?: IconComponent;
+} & React.RefAttributes<unknown>>;
+export {};
+//# sourceMappingURL=badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAK/D,OAAO,EAAO,KAAK,kBAAkB,EAAE,KAAK,eAAe,EAAE,MAAM,QAAQ,CAAC;AAC5E,OAAO,KAAK,EAAkB,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AACtE,eAAO,MAAM,WAAW,EAAE,SAAS,EAAiD,CAAC;AAgBrF,MAAM,MAAM,YAAY,GAClB,SAAS,GACT,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,cAAc,GACd,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AACf,eAAO,MAAM,cAAc,EAAE,YAAY,EAS/B,CAAC;AAEX,KAAK,gBAAgB,GAAG,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,CAAC,GAAG,kBAAkB,CAAC;AACrF,MAAM,MAAM,UAAU,GAAG,gBAAgB,GAAG;IACxC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,YAAY,CAAC,EAAE,aAAa,CAAC;CAChC,CAAC;AAwFF;;GAEG;AACH,eAAO,MAAM,KAAK;SAlGT,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC;WACxC,SAAS;WACT,cAAc;cACX,YAAY;aACb,OAAO;kBACF,aAAa;mBACZ,aAAa;iCAsH/B,CAAC"}

package/dist/components/badge/badge.js

@@ -0,0 +1,143 @@
+import { theme } from "../../design_system/theme.js";
+import { Box } from "../box/box.js";
+import { TextShared } from "../text/text_shared.js";
+import styled, { css } from "styled-components";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/badge/badge.tsx
+var BADGE_SIZES = [
+	"large",
+	"regular",
+	"small",
+	"extra_small"
+];
+var BADGE_ICON_SIZES = {
+	large: "16",
+	regular: "12",
+	small: "12",
+	extra_small: "12"
+};
+var BADGE_TEXT_SIZES = {
+	large: "regular",
+	regular: "small",
+	small: "small",
+	extra_small: "small"
+};
+var BADGE_VARIANTS = [
+	"neutral",
+	"neutral_muted",
+	"neutral_subtle",
+	"primary_black",
+	"primary_blue",
+	"success",
+	"warning",
+	"danger"
+];
+var badgeSizeStyle = {
+	large: css`
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius6};
+    `,
+	regular: css`
+        padding: ${theme.space.space4} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+    `,
+	small: css`
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+    `,
+	extra_small: css`
+        height: ${theme.space.space16};
+        padding: 0 ${theme.space.space4};
+        border-radius: ${theme.radius.radius4};
+    `
+};
+var badgeVariantStyle = {
+	neutral: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.background};
+        box-shadow: inset 0 0 0 1px ${theme.color.neutral.border};
+    `,
+	neutral_muted: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.text};
+        background: ${theme.color.neutral.chipBackground};
+    `,
+	neutral_subtle: css`
+        color: ${theme.color.neutral.text};
+        fill: ${theme.color.neutral.textSubtle};
+        background: ${theme.color.neutral.backgroundSubtle};
+    `,
+	primary_black: css`
+        color: ${theme.color.primaryBlack.chipText};
+        fill: ${theme.color.primaryBlack.chipText};
+        background: ${theme.color.primaryBlack.background};
+    `,
+	primary_blue: css`
+        color: ${theme.color.primary.chipText};
+        fill: ${theme.color.primaryBlack.chipText};
+        background: ${theme.color.primary.background};
+    `,
+	success: css`
+        color: ${theme.color.success.chipText};
+        fill: ${theme.color.success.chipText};
+        background: ${theme.color.success.background};
+    `,
+	warning: css`
+        color: ${theme.color.warning.chipText};
+        fill: ${theme.color.warning.chipText};
+        background: ${theme.color.warning.background};
+    `,
+	danger: css`
+        color: ${theme.color.danger.chipText};
+        fill: ${theme.color.danger.chipText};
+        background: ${theme.color.danger.background};
+    `
+};
+var StyledBadge = styled(Box)`
+    ${({ $size }) => badgeSizeStyle[$size]};
+    ${({ $variant }) => badgeVariantStyle[$variant]};
+
+    /* Static styles */
+    width: fit-content;
+    border: none;
+    outline: none;
+    display: ${({ $inline }) => $inline ? "inline-flex" : "flex"};
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+    gap: ${theme.space.space4};
+
+    svg {
+        flex-shrink: 0;
+    }
+`;
+/**
+* Component for displaying non-interactive chip descendant.
+*/
+var Badge = forwardRef(({ size = "small", type = "body", variant = "neutral", inline = false, LeadingIcon, TrailingIcon, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(StyledBadge, {
+		ref,
+		$size: size,
+		$variant: variant,
+		$inline: inline,
+		forwardedAs: "span",
+		...props,
+		children: [
+			LeadingIcon && /* @__PURE__ */ jsx(LeadingIcon, { size: BADGE_ICON_SIZES[size] }),
+			children && /* @__PURE__ */ jsx(TextShared, {
+				size: BADGE_TEXT_SIZES[size],
+				type,
+				weight: "medium",
+				as: "span",
+				children
+			}),
+			TrailingIcon && /* @__PURE__ */ jsx(TrailingIcon, { size: BADGE_ICON_SIZES[size] })
+		]
+	});
+});
+Badge.displayName = "Badge";
+//#endregion
+export { BADGE_SIZES, BADGE_VARIANTS, Badge };

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

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

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

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

package/dist/components/banner/banner.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface BannerProps {
+    background?: string;
+    useGradientBackground?: boolean;
+    width?: string;
+    className?: string;
+    children: React.ReactNode;
+}
+export declare const Banner: React.FC<BannerProps>;
+export {};
+//# sourceMappingURL=banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoD/B,UAAU,WAAW;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAuBD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CASxC,CAAC"}

package/dist/components/banner/banner.js

@@ -0,0 +1,76 @@
+import { theme } from "../../design_system/theme.js";
+import styled, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/banner/banner.tsx
+var BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_2285_34756)">
+    <g filter="url(#filter0_f_2285_34756)">
+    <path d="M-39.7702 191.085C-55.0622 193.205 -68.8864 201.311 -78.2029 213.621C-87.5194 225.932 -91.5654 241.438 -89.4512 256.731L-55.0077 502.652L89.8852 173L-39.7702 191.085Z" fill="url(#paint0_linear_2285_34756)"/>
+    </g>
+    <g filter="url(#filter1_f_2285_34756)">
+    <path d="M1267.53 398.062L1253.99 209.002C1252.85 193.626 1245.67 179.327 1234.01 169.234C1222.36 159.14 1207.18 154.073 1191.8 155.14C1190.5 155.19 1189.2 155.331 1187.92 155.564L1132 163.289L1254.84 438.685C1264.05 427.236 1268.59 412.721 1267.53 398.062Z" fill="url(#paint1_linear_2285_34756)"/>
+    </g>
+    <g filter="url(#filter2_f_2285_34756)">
+    <path d="M561 29.7691C570.917 30.4746 580.956 29.5571 590.142 27.1057L801.075 -28.7862L700.682 -170L561 29.7691Z" fill="url(#paint2_linear_2285_34756)"/>
+    </g>
+    </g>
+    <defs>
+    <filter id="filter0_f_2285_34756" x="-170" y="93" width="339.885" height="489.652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <filter id="filter1_f_2285_34756" x="1052" y="75" width="295.683" height="443.686" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <filter id="filter2_f_2285_34756" x="481" y="-250" width="400.074" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+    <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+    <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
+    </filter>
+    <linearGradient id="paint0_linear_2285_34756" x1="-0.0574112" y1="173" x2="-0.0574112" y2="502.652" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#00FF85"/>
+    <stop offset="1" stop-color="#00FF47" stop-opacity="0"/>
+    </linearGradient>
+    <linearGradient id="paint1_linear_2285_34756" x1="1146.02" y1="174.549" x2="1333.1" y2="293.915" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#00FFF0"/>
+    <stop offset="1" stop-color="#1672EB"/>
+    </linearGradient>
+    <linearGradient id="paint2_linear_2285_34756" x1="681.037" y1="-170" x2="681.037" y2="30" gradientUnits="userSpaceOnUse">
+    <stop stop-color="#F5B315"/>
+    <stop offset="1" stop-color="#FF2CC4"/>
+    </linearGradient>
+    <clipPath id="clip0_2285_34756">
+    <rect width="1200" height="1791.08" rx="16" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>
+`;
+var getBannerBackground = (background, useGradientBackground) => {
+	return css`
+        background-color: ${background || theme.color.neutral.backgroundSubtle};
+        ${useGradientBackground && `
+            background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            `}
+    `;
+};
+var StyledBanner = styled.div`
+    width: ${(props) => props.width || "100%"};
+    padding: ${theme.space.space40} ${theme.space.space80};
+    border-radius: ${theme.radius.radius16};
+
+    ${({ $background, $useGradientBackground }) => getBannerBackground($background, $useGradientBackground)};
+`;
+var Banner = ({ useGradientBackground = true, background, children, ...otherProps }) => /* @__PURE__ */ jsx(StyledBanner, {
+	$background: background,
+	$useGradientBackground: useGradientBackground,
+	...otherProps,
+	children
+});
+//#endregion
+export { Banner };

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

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

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

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

package/dist/components/blog_article/blog_article.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+interface BlogArticleProps {
+    imageNode: React.ReactNode;
+    title: string;
+    ctaTitle?: string;
+}
+export declare function BlogArticle({ imageNode, title, ctaTitle }: BlogArticleProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=blog_article.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"blog_article.d.ts","sourceRoot":"","sources":["../../../src/components/blog_article/blog_article.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAqE/B,UAAU,gBAAgB;IACtB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAsB,EAAE,EAAE,gBAAgB,2CAWzF"}

package/dist/components/blog_article/blog_article.js

@@ -0,0 +1,87 @@
+import { theme } from "../../design_system/theme.js";
+import styled from "styled-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon } from "@apify/ui-icons";
+//#region src/components/blog_article/blog_article.tsx
+var classNames = {
+	IMAGE_WRAPPER: "ImageWrapper",
+	TEXT: "Text",
+	READ_POST: "ReadPost"
+};
+var BlogArticleWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    &:hover {
+        .${classNames.READ_POST} {
+            color: ${theme.color.primary.action};
+        }
+    }
+
+    .${classNames.IMAGE_WRAPPER} {
+        margin-bottom: ${theme.space.space16};
+        border-radius: ${theme.radius.radius12};
+        border: 1px solid ${theme.color.neutral.backgroundSubtle};
+        aspect-ratio: 16/9;
+    }
+
+    .${classNames.TEXT} {
+        padding-bottom: ${theme.space.space16};
+        color: ${theme.color.neutral.text};
+        ${theme.typography.shared.mobile.titleL}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.titleL}
+        }
+
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.titleL}
+        }
+    }
+
+    .${classNames.READ_POST} {
+        display: flex;
+        align-items: center;
+        gap: ${theme.space.space4};
+        color: ${theme.color.neutral.textMuted};
+        ${theme.typography.shared.mobile.titleM}
+
+        @media (min-width: ${theme.layout.tablet}) {
+            ${theme.typography.shared.tablet.titleM}
+        }
+
+        @media (min-width: ${theme.layout.desktop}) {
+            ${theme.typography.shared.desktop.titleM}
+        }
+
+        svg {
+            transition: margin-right 0.5s;
+        }
+
+        &:hover svg {
+            margin-right: ${theme.space.space4};
+        }
+    }
+`;
+function BlogArticle({ imageNode, title, ctaTitle = "Read more" }) {
+	return /* @__PURE__ */ jsxs(BlogArticleWrapper, { children: [
+		/* @__PURE__ */ jsx("div", {
+			className: classNames.IMAGE_WRAPPER,
+			children: imageNode
+		}),
+		/* @__PURE__ */ jsx("div", {
+			className: classNames.TEXT,
+			children: title
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: classNames.READ_POST,
+			children: [ctaTitle, /* @__PURE__ */ jsx(ArrowRightIcon, {
+				size: "16",
+				title: "",
+				titleId: ""
+			})]
+		})
+	] });
+}
+//#endregion
+export { BlogArticle };

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

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

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

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

package/dist/components/box/box.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { Size } from '../../design_system/tokens';
+import { ResponsiveValue } from '../../utils/css_utils';
+type ExtendedSize = Size | 'none' | 'auto';
+export interface MarginSpacingProps {
+    m?: ResponsiveValue<ExtendedSize>;
+    mt?: ResponsiveValue<ExtendedSize>;
+    mb?: ResponsiveValue<ExtendedSize>;
+    ml?: ResponsiveValue<ExtendedSize>;
+    mr?: ResponsiveValue<ExtendedSize>;
+    mx?: ResponsiveValue<ExtendedSize>;
+    my?: ResponsiveValue<ExtendedSize>;
+}
+export interface PaddingSpacingProps {
+    p?: ResponsiveValue<ExtendedSize>;
+    pt?: ResponsiveValue<ExtendedSize>;
+    pb?: ResponsiveValue<ExtendedSize>;
+    pl?: ResponsiveValue<ExtendedSize>;
+    pr?: ResponsiveValue<ExtendedSize>;
+    px?: ResponsiveValue<ExtendedSize>;
+    py?: ResponsiveValue<ExtendedSize>;
+}
+type SharedBoxProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    id?: string;
+    title?: string;
+};
+export type RegularBoxProps = SharedBoxProps & {
+    as?: React.ElementType;
+};
+type OlBoxProps = SharedBoxProps & {
+    as: 'ol';
+    start?: number;
+};
+/** Combines together RegularBoxProps and props for specific elements. */
+type AnyBoxProps = RegularBoxProps | OlBoxProps;
+export type BoxProps = MarginSpacingProps & PaddingSpacingProps & AnyBoxProps;
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/components/box/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAEvD,OAAO,EAAuB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElF,KAAK,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IAC/B,CAAC,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAClC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,mBAAmB;IAChC,CAAC,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAClC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACnC,EAAE,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACtC;AAED,KAAK,cAAc,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAGF,MAAM,MAAM,eAAe,GAAG,cAAc,GAAG;IAAE,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;CAAE,CAAC;AAE1E,KAAK,UAAU,GAAG,cAAc,GAAG;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,yEAAyE;AACzE,KAAK,WAAW,GAAG,eAAe,GAAG,UAAU,CAAC;AAEhD,MAAM,MAAM,QAAQ,GAAG,kBAAkB,GAAG,mBAAmB,GAAG,WAAW,CAAC;AA4B9E,eAAO,MAAM,GAAG,8EAsBf,CAAC"}

package/dist/components/box/box.js

@@ -0,0 +1,49 @@
+import { theme } from "../../design_system/theme.js";
+import { getResponsiveStyles } from "../../utils/css_utils.js";
+import styled from "styled-components";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/box/box.tsx
+var getSizeValue = (token) => {
+	if (!token || token === "none") return 0;
+	if (token === "auto") return "auto";
+	return theme.space[token] || 0;
+};
+var StyledBox = styled.div`
+    ${({ $mt, $my, $m }) => getResponsiveStyles("margin-top", getSizeValue, $mt, [$my, $m])}
+
+    ${({ $mb, $my, $m }) => getResponsiveStyles("margin-bottom", getSizeValue, $mb, [$my, $m])}
+
+    ${({ $mr, $mx, $m }) => getResponsiveStyles("margin-right", getSizeValue, $mr, [$mx, $m])}
+
+    ${({ $ml, $mx, $m }) => getResponsiveStyles("margin-left", getSizeValue, $ml, [$mx, $m])}
+
+    ${({ $pt, $py, $p }) => getResponsiveStyles("padding-top", getSizeValue, $pt, [$py, $p])}
+
+    ${({ $pb, $py, $p }) => getResponsiveStyles("padding-bottom", getSizeValue, $pb, [$py, $p])}
+
+    ${({ $pr, $px, $p }) => getResponsiveStyles("padding-right", getSizeValue, $pr, [$px, $p])}
+
+    ${({ $pl, $px, $p }) => getResponsiveStyles("padding-left", getSizeValue, $pl, [$px, $p])}
+`;
+var Box = forwardRef(({ m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, as, ...rest }, ref) => /* @__PURE__ */ jsx(StyledBox, {
+	$m: m,
+	$mt: mt,
+	$mb: mb,
+	$ml: ml,
+	$mr: mr,
+	$mx: mx,
+	$my: my,
+	$p: p,
+	$pt: pt,
+	$pb: pb,
+	$pl: pl,
+	$pr: pr,
+	$px: px,
+	$py: py,
+	as,
+	ref,
+	...rest
+}));
+//#endregion
+export { Box };

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

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

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

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

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export declare const breadcrumbClassNames: {
+    readonly WRAPPER: "Breadcrumbs__Wrapper";
+    readonly SEPARATOR: "Breadcrumbs__Separator";
+    readonly ITEM: "Breadcrumbs__Item";
+    readonly ITEM_ACTIVE: "Breadcrumbs__Item--active";
+};
+export type BreadcrumbItem = {
+    label: string;
+    url?: string;
+};
+export type BreadcrumbsProps = {
+    items: BreadcrumbItem[];
+    className?: string;
+};
+export declare const Breadcrumbs: React.FC<BreadcrumbsProps>;
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,eAAO,MAAM,oBAAoB;;;;;CAKvB,CAAC;AA4BX,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAC"}

package/dist/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,70 @@
+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 from "styled-components";
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx$1 from "clsx";
+//#region src/components/breadcrumb/breadcrumb.tsx
+var breadcrumbClassNames = {
+	WRAPPER: "Breadcrumbs__Wrapper",
+	SEPARATOR: "Breadcrumbs__Separator",
+	ITEM: "Breadcrumbs__Item",
+	ITEM_ACTIVE: "Breadcrumbs__Item--active"
+};
+var StyledBreadcrumbs = styled(Box)`
+    display: flex;
+    align-items: center;
+    gap: ${theme.space.space8};
+`;
+var StyledBreadcrumbLink = styled(Link)`
+    text-decoration: none;
+    padding: ${theme.space.space2} ${theme.space.space4};
+    border-radius: ${theme.radius.radius6};
+    color: ${theme.color.neutral.textSubtle};
+
+    &:hover {
+        color: ${theme.color.neutral.textMuted};
+        span {
+            /* TODO: (typography-partial) font-weight override without paired font-size/line-height — revisit to confirm intended typography token. */
+            font-weight: 500;
+        }
+    }
+`;
+var StyledBreadcrumbItemText = styled(TextShared)`
+    padding: ${theme.space.space2} ${theme.space.space4};
+    white-space: nowrap;
+`;
+var Breadcrumbs = ({ items, className }) => /* @__PURE__ */ jsx(StyledBreadcrumbs, {
+	className: clsx$1(breadcrumbClassNames.WRAPPER, className),
+	children: items.map((item, index) => {
+		const isActive = index === items.length - 1;
+		return /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(TextShared, {
+			as: "span",
+			size: "small",
+			weight: "medium",
+			color: theme.color.neutral.textSubtle,
+			className: breadcrumbClassNames.SEPARATOR,
+			children: "/"
+		}), /* @__PURE__ */ jsx("span", {
+			className: clsx$1(breadcrumbClassNames.ITEM, isActive && breadcrumbClassNames.ITEM_ACTIVE),
+			children: !isActive && item.url ? /* @__PURE__ */ jsx(StyledBreadcrumbLink, {
+				to: item.url,
+				children: /* @__PURE__ */ jsx(TextShared, {
+					as: "span",
+					size: "small",
+					weight: "normal",
+					children: item.label
+				})
+			}) : /* @__PURE__ */ jsx(StyledBreadcrumbItemText, {
+				size: "small",
+				weight: isActive ? "bold" : "normal",
+				color: isActive ? theme.color.neutral.text : theme.color.neutral.textSubtle,
+				children: item.label
+			})
+		})] }, item.label);
+	})
+});
+//#endregion
+export { Breadcrumbs, breadcrumbClassNames };

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

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

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

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

package/dist/components/browser_window/browser_window.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+declare const classNames: {
+    readonly ROOT: "browser-window";
+    readonly HEADER: "browser-window__header";
+    readonly DOTS: "browser-window__dots";
+    readonly DOT: "browser-window__dot";
+    readonly URL: "browser-window__url";
+    readonly TITLE: "browser-window__title";
+    readonly CONTAINER: "browser-window__container";
+    readonly CONTENT: "browser-window__content";
+};
+export { classNames as browserWindowClassNames };
+type Props = {
+    title: string;
+    url?: ReactNode;
+    children: ReactNode;
+    className?: string;
+};
+export declare const BrowserWindow: ({ title, url, children, className }: Props) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=browser_window.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"browser_window.d.ts","sourceRoot":"","sources":["../../../src/components/browser_window/browser_window.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMvC,QAAA,MAAM,UAAU;;;;;;;;;CASN,CAAC;AAEX,OAAO,EAAE,UAAU,IAAI,uBAAuB,EAAE,CAAC;AAuDjD,KAAK,KAAK,GAAG;IACT,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,qCAAqC,KAAK,4CA8BvE,CAAC"}