@apify/ui-library 0.51.6-featurepublishuilibrary-0a4729.38266

package/README.md

@@ -0,0 +1,15 @@
+# Shared UI components library
+
+ The principle of this library is to provide a set of components that can be used across multiple projects, and to ensure that the components are consistent in terms of design and functionality. The components are built using React and styled-components.
+
+## Development
+
+1. **This is a public package** - it shouldn't have any relation or dependency to Apify internal logic - we want to use it across our repositories and some of them might be public.
+
+2. **Shared logic with web and docs** - If you’re changing any shared logic with the web that might affect the behavior, performance, or SEO, you need to always test it on both applications before it’s merged and published as a new version of the packages and after it’s done it’s your duty to make sure there are the latest versions within both repositories.
+
+3. **Purpose and documentation** - there should be a clear purpose for each component and the component should be properly documented - both code and storybook.
+
+4. **Architecture design and dependencies** - No technology-specific logic. We don’t want to use anything technology or codebase-specific (such as Meteor, React router, Next …) as there might be different approaches for the technology where the component is used (examples as linking logic - in Next.js there is Next Link component, same of Next Image instead of using normal <img /> tag). This kind of behavior should not happen on the component level. Browser vs. server - some of the components might be used on the web with SSR (Server Side Renderings) and such a component can’t be using browser-specific features (such as accessing window.location)
+
+5. **Supernova tokens update** - New supernova tokens are available in `supernova_color_tokens.ts` and `supernova_typography_tokens.json`, specific code is generated with `npm run generate-theme` command

package/dist/src/components/action_link.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { type LinkProps } from './link';
+export declare const ActionLink: React.FC<LinkProps>;
+export declare const BackLink: React.FC<LinkProps>;
+//# sourceMappingURL=action_link.d.ts.map

package/dist/src/components/action_link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action_link.d.ts","sourceRoot":"","sources":["../../../src/components/action_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAmB9C,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAe1C,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAexC,CAAC"}

package/dist/src/components/action_link.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ArrowLeft16, ArrowRight16 } from '@apify/icons';
+import { theme } from '../design_system/theme';
+import { Box } from './box';
+import { Link } from './link';
+import { Heading } from './text';
+const StyledGuidepost = styled(Box) `
+    display: inline-flex;
+    align-items: center;
+    color: ${theme.color.neutral.text};
+
+    svg {
+        transition: transform 0.2s ease-in-out;
+    }
+
+    &:hover {
+        svg {
+            transform: translate(${({ $isBackLink }) => ($isBackLink ? -3 : 3)}px, 0);
+        }
+    }
+`;
+export const ActionLink = ({ children, as, ...rest }) => {
+    return (<StyledGuidepost forwardedAs={as || Link} $isBackLink={false} {...rest}>
+            <Heading as='span' type='titleM'>{children}</Heading>
+            <ArrowRight16 />
+        </StyledGuidepost>);
+};
+export const BackLink = ({ children, as, ...rest }) => {
+    return (<StyledGuidepost forwardedAs={as || Link} $isBackLink={true} {...rest}>
+            <ArrowLeft16 />
+            <Heading as='span' type='titleM'>{children}</Heading>
+        </StyledGuidepost>);
+};
+//# sourceMappingURL=action_link.jsx.map

package/dist/src/components/action_link.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"action_link.jsx","sourceRoot":"","sources":["../../../src/components/action_link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAA0B;;;aAGhD,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;;;;;;;mCAQF,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;CAG7E,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAwB,CAAC,EAC5C,QAAQ,EACR,EAAE,EACF,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,CAAC,eAAe,CACZ,WAAW,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CACxB,WAAW,CAAC,CAAC,KAAK,CAAC,CACnB,IAAI,IAAI,CAAC,CAET;YAAA,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CACpD;YAAA,CAAC,YAAY,CAAC,AAAD,EACjB;QAAA,EAAE,eAAe,CAAC,CACrB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAwB,CAAC,EAC1C,QAAQ,EACR,EAAE,EACF,GAAG,IAAI,EACV,EAAE,EAAE;IACD,OAAO,CACH,CAAC,eAAe,CACZ,WAAW,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,CACxB,WAAW,CAAC,CAAC,IAAI,CAAC,CAClB,IAAI,IAAI,CAAC,CAET;YAAA,CAAC,WAAW,CAAC,AAAD,EACZ;YAAA,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,EAAE,OAAO,CACxD;QAAA,EAAE,eAAe,CAAC,CACrB,CAAC;AACN,CAAC,CAAC"}

package/dist/src/components/actor_template_card.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ActorTemplateCardProps {
+    id: string;
+    label: string;
+    description: string;
+    icons: React.ReactNode[];
+}
+export declare const ActorTemplateCard: React.FC<ActorTemplateCardProps>;
+export {};
+//# sourceMappingURL=actor_template_card.d.ts.map

package/dist/src/components/actor_template_card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_template_card.d.ts","sourceRoot":"","sources":["../../../src/components/actor_template_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,sBAAsB;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;CAC5B;AA6DD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyB9D,CAAC"}

package/dist/src/components/actor_template_card.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+import { theme } from '../design_system/theme';
+import { TextBaseComponent } from './text/text_base';
+import { VerticalTile } from './tile';
+const WrapperClasses = {
+    TEMPLATE_CARD_IMAGES: 'TemplateCard-Images',
+    TEMPLATE_CARD_TEXT: 'TemplateCard-Text',
+};
+const Text = styled(TextBaseComponent) `
+    ${theme.typography.marketing.mobile.bodyM}
+    color: ${theme.color.neutral.textMuted};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+
+    @media ${theme.layout.tablet} {
+        ${theme.typography.marketing.tablet.bodyM}
+    }
+
+    @media ${theme.layout.desktop} {
+        ${theme.typography.marketing.desktop.bodyM}
+    }
+`;
+const Heading = styled(TextBaseComponent) `
+    ${theme.typography.marketing.mobile.titleXs}
+    color: ${theme.color.neutral.text};
+
+    @media ${theme.layout.tablet} {
+        ${theme.typography.marketing.tablet.titleXs}
+    }
+
+    @media ${theme.layout.desktop} {
+        ${theme.typography.marketing.desktop.titleXs}
+    }
+`;
+const TemplateCardContentWrapper = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    align-self: stretch;
+    flex: 1 0 0;
+    gap: ${theme.space.space16};
+
+    .${WrapperClasses.TEMPLATE_CARD_IMAGES} {
+        display: flex;
+        align-items: flex-start;
+        gap: ${theme.space.space16};
+    }
+
+    .${WrapperClasses.TEMPLATE_CARD_TEXT} {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        align-self: stretch;
+        gap: ${theme.space.space4};
+    }
+`;
+export const ActorTemplateCard = ({ id, label, description, icons, }) => {
+    const templateCardContent = (<TemplateCardContentWrapper>
+            <div className={WrapperClasses.TEMPLATE_CARD_IMAGES}>
+                {icons}
+            </div>
+            <div className={WrapperClasses.TEMPLATE_CARD_TEXT}>
+                <Heading>{label}</Heading>
+                <Text>{description}</Text>
+            </div>
+        </TemplateCardContentWrapper>);
+    return (<VerticalTile id={`actor-template-card-${id}`} content={templateCardContent} isClickable/>);
+};
+//# sourceMappingURL=actor_template_card.jsx.map

package/dist/src/components/actor_template_card.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"actor_template_card.jsx","sourceRoot":"","sources":["../../../src/components/actor_template_card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,QAAQ,CAAC;AAStC,MAAM,cAAc,GAAG;IACnB,oBAAoB,EAAE,qBAAqB;IAC3C,kBAAkB,EAAE,mBAAmB;CAC1C,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;MAChC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK;aAChC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;;;;;;;aAO7B,KAAK,CAAC,MAAM,CAAC,MAAM;UACtB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,KAAK;;;aAGpC,KAAK,CAAC,MAAM,CAAC,OAAO;UACvB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,KAAK;;CAEjD,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,iBAAiB,CAAC,CAAA;MACnC,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;aAClC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;;aAExB,KAAK,CAAC,MAAM,CAAC,MAAM;UACtB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO;;;aAGtC,KAAK,CAAC,MAAM,CAAC,OAAO;UACvB,KAAK,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,CAAC,OAAO;;CAEnD,CAAC;AAEF,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;WAMlC,KAAK,CAAC,KAAK,CAAC,OAAO;;OAEvB,cAAc,CAAC,oBAAoB;;;eAG3B,KAAK,CAAC,KAAK,CAAC,OAAO;;;OAG3B,cAAc,CAAC,kBAAkB;;;;;eAKzB,KAAK,CAAC,KAAK,CAAC,MAAM;;CAEhC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAChE,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,GACR,EAAE,EAAE;IACD,MAAM,mBAAmB,GAAG,CACxB,CAAC,0BAA0B,CACvB;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,oBAAoB,CAAC,CAChD;gBAAA,CAAC,KAAK,CACV;YAAA,EAAE,GAAG,CACL;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,kBAAkB,CAAC,CAC9C;gBAAA,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CACzB;gBAAA,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,EAAE,IAAI,CAC7B;YAAA,EAAE,GAAG,CACT;QAAA,EAAE,0BAA0B,CAAC,CAChC,CAAC;IAEF,OAAO,CACH,CAAC,YAAY,CACT,EAAE,CAAC,CAAC,uBAAuB,EAAE,EAAE,CAAC,CAChC,OAAO,CAAC,CAAC,mBAAmB,CAAC,CAC7B,WAAW,EACb,CACL,CAAC;AACN,CAAC,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../../src/components/badge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,aAAa,EAAY,MAAM,iBAAiB,CAAC;AAI/D,OAAO,EAAE,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAO,MAAM,OAAO,CAAC;AAE3E,KAAK,SAAS,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAE5C,eAAO,MAAM,WAAW,8BAA+B,CAAC;AA2BxD,KAAK,YAAY,GAAG,OAAO,cAAc,CAAC,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,cAAc,0HAA2H,CAAC;AAkEvJ,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,GAAG,kBAAkB,GAAG;IAC/E,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC,CAAC;IAChD,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK;SAVX,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,GAAG,GAAG,QAAQ,CAAC;WACxC,SAAS;cACN,YAAY;kBACR,aAAa;WACpB,OAAO;iCA8Bf,CAAC"}

package/dist/src/components/badge.jsx

@@ -0,0 +1,96 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../design_system/theme';
+import { Box } from './box';
+export const BADGE_SIZES = ['medium', 'small'];
+const BADGE_ICON_SIZES = {
+    medium: '16',
+    small: '12',
+};
+const badgeSizeStyle = {
+    medium: ($code) => css `
+        padding: ${theme.space.space4} ${theme.space.space8};
+        border-radius: ${theme.radius.radius6};
+        ${$code
+        ? theme.typography.shared.desktop.codeMMedium
+        : theme.typography.shared.desktop.bodyMMedium}
+    `,
+    small: ($code) => css `
+        height: 2rem;
+        padding: ${theme.space.space2} ${theme.space.space6};
+        border-radius: ${theme.radius.radius4};
+        ${$code
+        ? theme.typography.shared.desktop.codeSMedium
+        : theme.typography.shared.desktop.bodySMedium}
+    `,
+};
+export const BADGE_VARIANTS = ['neutral', 'neutral_muted', 'neutral_subtle', 'primary_black', 'primary_blue', 'success', 'warning', 'danger'];
+const 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.textSubtle};
+      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};
+    `,
+};
+const StyledBadge = styled(Box) `
+  ${({ $size, $code }) => badgeSizeStyle[$size]($code)};
+  ${({ $variant }) => badgeVariantStyle[$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};
+`;
+/**
+ * Component for displaying non-interactive chip descendant.
+ */
+export const Badge = forwardRef(({ size = 'small', variant = 'neutral', LeadingIcon, children, code = false, ...props }, ref) => {
+    return (<StyledBadge ref={ref} $size={size} $variant={variant} $code={code} {...props}>
+                {LeadingIcon && <LeadingIcon size={BADGE_ICON_SIZES[size]}/>}
+                {children}
+            </StyledBadge>);
+});
+Badge.displayName = 'Badge';
+//# sourceMappingURL=badge.jsx.map

package/dist/src/components/badge.jsx.map

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

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

@@ -0,0 +1,11 @@
+import 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/src/components/banner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../../src/components/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqD1B,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;AAsBD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAaxC,CAAC"}

package/dist/src/components/banner.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../design_system/theme';
+/* eslint-disable max-len */
+const 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>
+`;
+;
+const 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;
+            `}
+        `;
+};
+const 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)};
+`;
+export const Banner = ({ useGradientBackground = true, background, children, ...otherProps }) => (<StyledBanner $background={background} $useGradientBackground={useGradientBackground} {...otherProps}>
+        {children}
+    </StyledBanner>);
+//# sourceMappingURL=banner.jsx.map

package/dist/src/components/banner.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"banner.jsx","sourceRoot":"","sources":["../../../src/components/banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,4BAA4B;AAC5B,MAAM,8BAA8B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtC,CAAC;AAQD,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAAC,UAAmB,EAAE,qBAA+B,EAAE,EAAE;IACjF,OAAO,GAAG,CAAA;gCACkB,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;cACpE,qBAAqB,IAAI;wDACiB,kBAAkB,CAAC,8BAA8B,CAAC;;;;aAI7F;SACJ,CAAC;AACV,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAA4E;aAC9F,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,IAAI,MAAM;eAC9B,KAAK,CAAC,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO;qBACpC,KAAK,CAAC,MAAM,CAAC,QAAQ;;MAEpC,CAAC,EAAE,WAAW,EAAE,sBAAsB,EAAE,EAAE,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,sBAAsB,CAAC;CAC1G,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC1C,qBAAqB,GAAG,IAAI,EAC5B,UAAU,EACV,QAAQ,EACR,GAAG,UAAU,EAChB,EAAE,EAAE,CAAC,CACF,CAAC,YAAY,CACT,WAAW,CAAC,CAAC,UAAU,CAAC,CACxB,sBAAsB,CAAC,CAAC,qBAAqB,CAAC,CAC9C,IAAI,UAAU,CAAC,CAEf;QAAA,CAAC,QAAQ,CACb;IAAA,EAAE,YAAY,CAAC,CAClB,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"blog_article.d.ts","sourceRoot":"","sources":["../../../src/components/blog_article.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsE1B,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,qBAQzF"}

package/dist/src/components/blog_article.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import styled from 'styled-components';
+import { ArrowRight16 } from '@apify/icons';
+import { theme } from '../design_system/theme';
+const classNames = {
+    IMAGE_WRAPPER: 'ImageWrapper',
+    TEXT: 'Text',
+    READ_POST: 'ReadPost',
+};
+const 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 .5s;
+        }
+
+        &:hover svg {
+            margin-right: ${theme.space.space4};
+        }
+    }
+`;
+export function BlogArticle({ imageNode, title, ctaTitle = 'Read more' }) {
+    return (<BlogArticleWrapper>
+            <div className={classNames.IMAGE_WRAPPER}>{imageNode}</div>
+            <div className={classNames.TEXT}>{title}</div>
+            <div className={classNames.READ_POST}>{ctaTitle}<ArrowRight16 title="" titleId=""/></div>
+        </BlogArticleWrapper>);
+}
+//# sourceMappingURL=blog_article.jsx.map

package/dist/src/components/blog_article.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"blog_article.jsx","sourceRoot":"","sources":["../../../src/components/blog_article.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,MAAM,UAAU,GAAG;IACf,aAAa,EAAE,cAAc;IAC7B,IAAI,EAAE,MAAM;IACZ,SAAS,EAAE,UAAU;CACxB,CAAC;AAEF,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;WAK1B,UAAU,CAAC,SAAS;yBACN,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM;;;;OAI5C,UAAU,CAAC,aAAa;yBACN,KAAK,CAAC,KAAK,CAAC,OAAO;yBACnB,KAAK,CAAC,MAAM,CAAC,QAAQ;4BAClB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;;;;OAIzD,UAAU,CAAC,IAAI;0BACI,KAAK,CAAC,KAAK,CAAC,OAAO;iBAC5B,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI;UAC/B,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;;6BAElB,KAAK,CAAC,MAAM,CAAC,MAAM;cAClC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;;;6BAGtB,KAAK,CAAC,MAAM,CAAC,OAAO;cACnC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;;;;OAI7C,UAAU,CAAC,SAAS;;;eAGZ,KAAK,CAAC,KAAK,CAAC,MAAM;iBAChB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS;UACpC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;;6BAElB,KAAK,CAAC,MAAM,CAAC,MAAM;cAClC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM;;;6BAGtB,KAAK,CAAC,MAAM,CAAC,OAAO;cACnC,KAAK,CAAC,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,MAAM;;;;;;;;;4BASxB,KAAK,CAAC,KAAK,CAAC,MAAM;;;CAG7C,CAAC;AAQF,MAAM,UAAU,WAAW,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,GAAG,WAAW,EAAoB;IACtF,OAAO,CACH,CAAC,kBAAkB,CACf;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,GAAG,CAC1D;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,CAC7C;YAAA,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,EAAG,EAAE,GAAG,CAC7F;QAAA,EAAE,kBAAkB,CAAC,CACxB,CAAC;AACN,CAAC"}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Size } from '../design_system/tokens';
+type ExtendedSize = Size | 'none' | 'auto';
+export interface MarginSpacingProps {
+    m?: ExtendedSize;
+    mt?: ExtendedSize;
+    mb?: ExtendedSize;
+    ml?: ExtendedSize;
+    mr?: ExtendedSize;
+    mx?: ExtendedSize;
+    my?: ExtendedSize;
+}
+export interface PaddingSpacingProps {
+    p?: ExtendedSize;
+    pt?: ExtendedSize;
+    pb?: ExtendedSize;
+    pl?: ExtendedSize;
+    pr?: ExtendedSize;
+    px?: ExtendedSize;
+    py?: ExtendedSize;
+}
+type SharedBoxProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+    onClick?: (e: React.MouseEvent) => void;
+    id?: 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/src/components/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../../src/components/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGpD,KAAK,YAAY,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,kBAAkB;IAC/B,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,mBAAmB;IAChC,CAAC,CAAC,EAAE,YAAY,CAAC;IACjB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,EAAE,CAAC,EAAE,YAAY,CAAC;CACrB;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,CAAA;IAC3B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,EAAE,CAAC,EAAE,MAAM,CAAC;CACf,CAAA;AAGD,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;AA4C9E,eAAO,MAAM,GAAG,8EAqCd,CAAC"}

package/dist/src/components/box.jsx

@@ -0,0 +1,48 @@
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../design_system/theme';
+const getSizeValue = (token) => {
+    if (!token || token === 'none')
+        return 0;
+    if (token === 'auto')
+        return 'auto';
+    return theme.space[token] || 0;
+};
+const StyledBox = styled.div `
+    ${({ $mt, $my, $m }) => ($mt || $my || $m) && css `
+        margin-top: ${getSizeValue($mt || $my || $m)};
+    `}
+
+    ${({ $mb, $my, $m }) => ($mb || $my || $m) && css `
+        margin-bottom: ${getSizeValue($mb || $my || $m)};
+    `}
+
+    ${({ $mr, $mx, $m }) => ($mr || $mx || $m) && css `
+        margin-right: ${getSizeValue($mr || $mx || $m)};
+    `}
+
+    ${({ $ml, $mx, $m }) => ($ml || $mx || $m) && css `
+        margin-left: ${getSizeValue($ml || $mx || $m)};
+    `}
+
+    ${({ $pt, $py, $p }) => ($pt || $py || $p) && css `
+        padding-top: ${getSizeValue($pt || $py || $p)};
+    `}
+
+    ${({ $pb, $py, $p }) => ($pb || $py || $p) && css `
+        padding-bottom: ${getSizeValue($pb || $py || $p)};
+    `}
+
+    ${({ $pr, $px, $p }) => ($pr || $px || $p) && css `
+        padding-right: ${getSizeValue($pr || $px || $p)};
+    `}
+
+    ${({ $pl, $px, $p }) => ($pl || $px || $p) && css `
+        padding-left: ${getSizeValue($pl || $px || $p)};
+    `}
+`;
+// This component should work as a base component for all low level components (Heading, Message, Card, ...) to make it easy to define spacing.
+// Right now, it's quite common to define some sort of spacing on these components already using css. Card = styled.div`margin-bottom: theme.space.space8`
+// We should get rid of it and define it using props for Box component Card = styled(Box).attrs({mb: 'space8'})
+export const Box = forwardRef(({ m, mt, mb, ml, mr, mx, my, p, pt, pb, pl, pr, px, py, as, ...rest }, ref) => (<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={as} ref={ref} {...rest}/>));
+//# sourceMappingURL=box.jsx.map

package/dist/src/components/box.jsx.map

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { type WithRequired } from '../type_utils';
+import { type RegularBoxProps, type MarginSpacingProps } from './box';
+import { type LinkProps } from './link';
+type ButtonSize = 'medium' | 'small';
+type ButtonColor = 'default' | 'success' | 'danger';
+type ButtonVariant = 'primary' | 'secondary' | 'text';
+export interface TransientButtonProps {
+    size?: ButtonSize;
+    color?: ButtonColor;
+    variant?: ButtonVariant;
+}
+export interface RegularButtonProps {
+    trackingId?: string;
+    trackingData?: object;
+    LeftIcon?: React.ElementType;
+    RightIcon?: React.ElementType;
+    disabled?: boolean;
+}
+export type CommonButtonProps = RegularButtonProps & TransientButtonProps & MarginSpacingProps;
+export type ButtonProps = CommonButtonProps & WithRequired<RegularBoxProps, 'onClick'>;
+export type AnchorButtonProps = CommonButtonProps & RegularBoxProps & LinkProps;
+type ButtonSizeCombinations = {
+    [Size in ButtonSize]: {
+        fontSize: number;
+        horizontalPadding: number;
+        height: number;
+    };
+};
+export declare const BUTTON_SIZE_VARIANTS_CSS: ButtonSizeCombinations;
+export declare const getButtonColorStyles: (variant?: ButtonVariant, color?: ButtonColor) => import("styled-components").FlattenSimpleInterpolation;
+export declare const getButtonSizeStyles: (size?: ButtonSize) => import("styled-components").FlattenSimpleInterpolation;
+export declare const Button: React.ForwardRefExoticComponent<(ButtonProps | AnchorButtonProps) & React.RefAttributes<HTMLElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAM1C,OAAO,EAAE,KAAK,YAAY,EAA2B,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAO,KAAK,eAAe,EAAE,KAAK,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAC;AAE7D,KAAK,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC;AACrC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACpD,KAAK,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,MAAM,CAAC;AAEtD,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;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC7B,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAGD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,GAAG,oBAAoB,GAAG,kBAAkB,CAAC;AAE/F,MAAM,MAAM,WAAW,GAAG,iBAAiB,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;AAEvF,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,GAAG,eAAe,GAAG,SAAS,CAAC;AAyBhF,KAAK,sBAAsB,GAAG;KACzB,IAAI,IAAI,UAAU,GAAG;QAClB,QAAQ,EAAE,MAAM,CAAC;QACjB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,MAAM,EAAE,MAAM,CAAC;KAClB;CACJ,CAAC;AA8EF,eAAO,MAAM,wBAAwB,EAAE,sBAWtC,CAAC;AAEF,eAAO,MAAM,oBAAoB,aAAa,aAAa,UAAqB,WAAW,2DAoC1F,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAU,UAAU,2DAanD,CAAC;AA8BF,eAAO,MAAM,MAAM,uGAiEjB,CAAC"}