@apify/ui-library 1.170.0 → 1.170.2-uilibraryversion2candida-85b55e.17

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

@@ -1,56 +0,0 @@
-import type { FC } from 'react';
-import type React from 'react';
-import type { ValueOf } from '../../internal_type_utils';
-import type { RegularBoxProps } from '../box';
-export declare const CHIP_SIZES: {
-    readonly EXTRA_SMALL: "XS";
-    readonly SMALL: "S";
-    readonly MEDIUM: "M";
-    readonly LARGE: "L";
-};
-type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
-export declare const CHIP_TYPES: {
-    readonly DEFAULT: "DEFAULT";
-    readonly PRIMARY: "PRIMARY";
-    readonly SUCCESS: "SUCCESS";
-    readonly WARNING: "WARNING";
-    readonly DANGER: "DANGER";
-};
-export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
-export declare const classNames: {
-    BODY: string;
-};
-export type ChipProps = RegularBoxProps & {
-    type?: CHIP_TYPES;
-    size?: CHIP_SIZES;
-    icon?: React.ReactNode;
-    clickable?: boolean;
-};
-/**
- * Component for displaying status and for labelling other components.
- * @deprecated Use Tag or Badge
- */
-export declare const Chip: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-    onClick?: (e: React.MouseEvent) => void;
-    id?: string;
-    title?: string;
-    role?: React.AriaRole;
-} & {
-    as?: React.ElementType;
-} & {
-    type?: CHIP_TYPES;
-    size?: CHIP_SIZES;
-    icon?: React.ReactNode;
-    clickable?: boolean;
-} & React.RefAttributes<unknown>>;
-type SpecificChipProps = Omit<ChipProps, 'type'>;
-export declare const PrimaryChip: FC<SpecificChipProps>;
-export declare const NeutralChip: FC<SpecificChipProps>;
-export declare const SuccessChip: FC<SpecificChipProps>;
-export declare const DangerChip: FC<SpecificChipProps>;
-export declare const WarningChip: FC<SpecificChipProps>;
-export {};
-//# sourceMappingURL=chip.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../../src/components/chip/chip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAChC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE9C,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AACX,KAAK,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAE7C,eAAO,MAAM,UAAU;;;;;;CAMb,CAAC;AACX,MAAM,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,UAAU,CAAC,CAAC;AAEpD,eAAO,MAAM,UAAU;;CAEtB,CAAC;AA8FF,MAAM,MAAM,SAAS,GAAG,eAAe,GAAG;IACtC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;WAVN,UAAU;WACV,UAAU;WACV,KAAK,CAAC,SAAS;gBACV,OAAO;iCA6BtB,CAAC;AAIF,KAAK,iBAAiB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AAEjD,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC;AAC3G,eAAO,MAAM,UAAU,EAAE,EAAE,CAAC,iBAAiB,CAA2D,CAAC;AACzG,eAAO,MAAM,WAAW,EAAE,EAAE,CAAC,iBAAiB,CAA4D,CAAC"}

package/dist/src/components/chip/chip.js

@@ -1,123 +0,0 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import clsx from 'clsx';
-import { forwardRef } from 'react';
-import styled, { css } from 'styled-components';
-import { theme } from '../../design_system/theme';
-export const CHIP_SIZES = {
-    EXTRA_SMALL: 'XS',
-    SMALL: 'S',
-    MEDIUM: 'M',
-    LARGE: 'L',
-};
-export const CHIP_TYPES = {
-    DEFAULT: 'DEFAULT',
-    PRIMARY: 'PRIMARY',
-    SUCCESS: 'SUCCESS',
-    WARNING: 'WARNING',
-    DANGER: 'DANGER',
-};
-export const classNames = {
-    BODY: 'Chip-body',
-};
-const chipSizeStyle = {
-    [CHIP_SIZES.EXTRA_SMALL]: css `
-        font-size: 12px;
-        line-height: 16px;
-        padding: 0 4px;
-        border-radius: 6px;
-    `,
-    [CHIP_SIZES.SMALL]: css `
-        font-size: 12px;
-        line-height: 16px;
-        padding: 2px 4px;
-        border-radius: 6px;
-    `,
-    [CHIP_SIZES.MEDIUM]: css `
-        font-size: 14px;
-        line-height: 20px;
-        padding: 2px 8px;
-        border-radius: 100px;
-    `,
-    [CHIP_SIZES.LARGE]: css `
-        /* TODO: (typography-mismatch) 16px/20px does not match any canonical typography token — needs designer input. Blocks migrating chipSizeStyle to typography token interpolations (XS/S match bodyS, M matches bodyM). */
-        font-size: 16px;
-        line-height: 20px;
-        padding: 2px 8px;
-        border-radius: 100px;
-    `,
-};
-const chipTypeStyle = {
-    [CHIP_TYPES.DEFAULT]: css `
-        color: ${theme.color.neutral.text};
-        background: ${theme.color.neutral.chipBackground};
-    `,
-    [CHIP_TYPES.PRIMARY]: css `
-        color: ${theme.color.primary.chipText};
-        background: ${theme.color.primary.chipBackground};
-    `,
-    [CHIP_TYPES.SUCCESS]: css `
-        color: ${theme.color.success.chipText};
-        background: ${theme.color.success.chipBackground};
-    `,
-    [CHIP_TYPES.WARNING]: css `
-        color: ${theme.color.warning.chipText};
-        background: ${theme.color.warning.chipBackground};
-    `,
-    [CHIP_TYPES.DANGER]: css `
-        color: ${theme.color.danger.chipText};
-        background: ${theme.color.danger.chipBackground};
-    `,
-};
-const chipTypeHoverStyle = {
-    [CHIP_TYPES.DEFAULT]: css `
-        background: ${theme.color.neutral.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.PRIMARY]: css `
-        background: ${theme.color.primary.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.SUCCESS]: css `
-        background: ${theme.color.success.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.WARNING]: css `
-        background: ${theme.color.warning.chipBackgroundHover};
-    `,
-    [CHIP_TYPES.DANGER]: css `
-        background: ${theme.color.danger.chipBackgroundHover};
-    `,
-};
-const StyledChip = styled.span `
-    ${({ size }) => chipSizeStyle[size]};
-    ${({ type }) => chipTypeStyle[type]};
-    ${({ type, clickable }) => clickable &&
-    css `
-            &:hover {
-                ${chipTypeHoverStyle[type]};
-            }
-        `};
-    /* Static styles */
-    width: fit-content;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    /* TODO: (typography-keyword) 'normal' keyword used instead of numeric value (400) or typography token. */
-    font-weight: normal;
-    white-space: nowrap;
-    cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
-    gap: ${theme.space.space4};
-`;
-/**
- * Component for displaying status and for labelling other components.
- * @deprecated Use Tag or Badge
- */
-export const Chip = forwardRef(({ type = CHIP_TYPES.DEFAULT, size = CHIP_SIZES.MEDIUM, clickable = false, icon, children, className, ...passThroughProps }, ref) => {
-    const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
-    return (_jsxs(StyledChip, { ref: ref, ...otherProps, children: [children, icon] }));
-});
-Chip.displayName = 'Chip';
-export const PrimaryChip = (props) => _jsx(Chip, { type: CHIP_TYPES.PRIMARY, ...props });
-export const NeutralChip = (props) => _jsx(Chip, { type: CHIP_TYPES.DEFAULT, ...props });
-export const SuccessChip = (props) => _jsx(Chip, { type: CHIP_TYPES.SUCCESS, ...props });
-export const DangerChip = (props) => _jsx(Chip, { type: CHIP_TYPES.DANGER, ...props });
-export const WarningChip = (props) => _jsx(Chip, { type: CHIP_TYPES.WARNING, ...props });
-//# sourceMappingURL=chip.js.map

package/dist/src/components/chip/chip.js.map

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

package/dist/src/components/chip/index.d.ts

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

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

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

package/dist/src/components/chip/index.js

@@ -1,2 +0,0 @@
-export * from './chip';
-//# sourceMappingURL=index.js.map

package/dist/src/components/chip/index.js.map

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

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

@@ -1,9 +0,0 @@
-export interface ColorWheelGradientProps {
-    translateX?: number;
-    translateY?: number;
-    rotation?: number;
-    radius?: number;
-    blurSize?: number;
-}
-export declare const ColorWheelGradient: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ColorWheelGradientProps>> & string;
-//# sourceMappingURL=color_wheel_gradient.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"color_wheel_gradient.d.ts","sourceRoot":"","sources":["../../../../src/components/color_wheel_gradient/color_wheel_gradient.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,uBAAuB;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,4PAsB9B,CAAC"}

package/dist/src/components/color_wheel_gradient/color_wheel_gradient.js

@@ -1,25 +0,0 @@
-import styled from 'styled-components';
-export const ColorWheelGradient = styled.div `
-    ${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
-    z-index: 1;
-    position: absolute;
-    width: ${radius ? `${radius}px` : 'auto'};
-    height: ${radius ? `${radius}px` : 'auto'};
-    transform-origin: center;
-    transform: translate(${translateX}px, ${translateY}px) rotate(${rotation}deg);
-
-    opacity: 0.30;
-    background: conic-gradient(
-        rgba(93, 133, 225, 0.99) 0deg,
-        rgba(106, 20, 222, 0.99) 69deg,
-        rgba(228, 68, 103, 0.99) 150deg,
-        rgba(250, 129, 54, 0.99) 221deg,
-        rgba(240, 178, 27, 0.99) 287deg,
-        rgba(18, 150, 111, 0.99) 360deg
-    );
-
-    border-radius: 50%;
-    filter: blur(${blurSize}px)
-`}
-`;
-//# sourceMappingURL=color_wheel_gradient.js.map

package/dist/src/components/color_wheel_gradient/color_wheel_gradient.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"color_wheel_gradient.js","sourceRoot":"","sources":["../../../../src/components/color_wheel_gradient/color_wheel_gradient.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAUvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAyB;MAC/D,CAAC,EAAE,MAAM,EAAE,QAAQ,GAAG,CAAC,EAAE,QAAQ,GAAG,EAAE,EAAE,UAAU,GAAG,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC;;;aAGtE,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;cAC9B,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,MAAM;;2BAElB,UAAU,OAAO,UAAU,cAAc,QAAQ;;;;;;;;;;;;;mBAazD,QAAQ;CAC1B;CACA,CAAC"}

package/dist/src/components/color_wheel_gradient/index.d.ts

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

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

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

package/dist/src/components/color_wheel_gradient/index.js

@@ -1,2 +0,0 @@
-export * from './color_wheel_gradient';
-//# sourceMappingURL=index.js.map

package/dist/src/components/color_wheel_gradient/index.js.map

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

package/src/components/banner/banner.stories.tsx

@@ -1,238 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import type React from 'react';
-
-import { Banner } from './banner';
-
-interface BannerProps {
-    background?: string;
-    useGradientBackground?: boolean;
-    width?: string;
-    className?: string;
-    children: React.ReactNode;
-}
-
-export default {
-    title: 'UI-Library/Banner',
-    component: Banner,
-    argTypes: {
-        background: {
-            control: 'text',
-        },
-        useGradientBackground: {
-            control: 'boolean',
-        },
-        width: {
-            control: 'text',
-        },
-        className: {
-            control: 'text',
-        },
-        children: {
-            control: false,
-        },
-    },
-    parameters: {
-        design: {
-            type: 'figma',
-            url: 'TODO: Add Figma URL',
-        },
-    },
-} as Meta<BannerProps>;
-
-type Story = StoryObj<BannerProps>;
-
-/**
- * Default banner with gradient background enabled
- */
-export const Default: Story = {
-    args: {
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Welcome to Apify</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>Build reliable web scrapers. Fast.</p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with gradient background enabled (explicitly set to true)
- */
-export const WithGradientBackground: Story = {
-    args: {
-        useGradientBackground: true,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Gradient Background Banner</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
-                    This banner uses the beautiful gradient background with colorful shapes.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner without gradient background - shows solid background color
- */
-export const WithoutGradientBackground: Story = {
-    args: {
-        useGradientBackground: false,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px' }}>Simple Banner</h2>
-                <p style={{ margin: 0, opacity: 0.7 }}>
-                    This banner uses a simple solid background without gradient effects.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with custom background color
- */
-export const WithCustomBackground: Story = {
-    args: {
-        background: '#4CAF50',
-        useGradientBackground: false,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Green Background</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                    This banner has a custom green background color.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with custom background color and gradient overlay
- */
-export const WithCustomBackgroundAndGradient: Story = {
-    args: {
-        background: '#2196F3',
-        useGradientBackground: true,
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Blue Background with Gradient</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                    Custom blue background with gradient overlay effects.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with custom width
- */
-export const WithCustomWidth: Story = {
-    args: {
-        width: '600px',
-        children: (
-            <div>
-                <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Width Banner</h2>
-                <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
-                    This banner has a fixed width of 600px instead of 100%.
-                </p>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with minimal content
- */
-export const WithMinimalContent: Story = {
-    args: {
-        children: <p style={{ margin: 0, color: 'white', textAlign: 'center' }}>Simple announcement message</p>,
-    },
-};
-
-/**
- * Banner with rich content including buttons and links
- */
-export const WithRichContent: Story = {
-    args: {
-        children: (
-            <div>
-                <h1 style={{ margin: 0, marginBottom: '12px', color: 'white', fontSize: '2rem' }}>
-                    🚀 New Feature Launch
-                </h1>
-                <p style={{ margin: 0, marginBottom: '16px', color: 'rgba(255, 255, 255, 0.9)' }}>
-                    We&apos;ve just released our most powerful web scraping tools yet. Experience faster, more reliable
-                    data extraction with our enhanced platform.
-                </p>
-                <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
-                    <button
-                        type="button"
-                        style={{
-                            padding: '8px 16px',
-                            backgroundColor: 'white',
-                            color: '#333',
-                            border: 'none',
-                            borderRadius: '4px',
-                            fontWeight: 'bold',
-                            cursor: 'pointer',
-                        }}
-                    >
-                        Get Started
-                    </button>
-                    <a
-                        href="#"
-                        style={{
-                            color: 'white',
-                            textDecoration: 'underline',
-                        }}
-                    >
-                        Learn more
-                    </a>
-                </div>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with warning/alert styling
- */
-export const WarningBanner: Story = {
-    args: {
-        background: '#FF9800',
-        useGradientBackground: false,
-        children: (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <span style={{ fontSize: '1.5rem' }}>⚠️</span>
-                <div>
-                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Maintenance Notice</h3>
-                    <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                        Scheduled maintenance will occur on Sunday, 12:00-14:00 UTC.
-                    </p>
-                </div>
-            </div>
-        ),
-    },
-};
-
-/**
- * Banner with success/positive messaging
- */
-export const SuccessBanner: Story = {
-    args: {
-        background: '#4CAF50',
-        useGradientBackground: false,
-        children: (
-            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
-                <span style={{ fontSize: '1.5rem' }}>✅</span>
-                <div>
-                    <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Migration Complete</h3>
-                    <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
-                        Your account has been successfully migrated to our new platform.
-                    </p>
-                </div>
-            </div>
-        ),
-    },
-};

package/src/components/banner/banner.tsx

@@ -1,91 +0,0 @@
-import type React from 'react';
-import styled, { css } from 'styled-components';
-
-import { theme } from '../../design_system/theme';
-
-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>
-`;
-
-interface BannerProps {
-    background?: string;
-    useGradientBackground?: boolean;
-    width?: string;
-    className?: string;
-    children: React.ReactNode;
-}
-
-const getBannerBackground = (background?: string, useGradientBackground?: boolean) => {
-    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<{ $background?: string; $useGradientBackground?: boolean; width?: string }>`
-    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: React.FC<BannerProps> = ({
-    useGradientBackground = true,
-    background,
-    children,
-    ...otherProps
-}) => (
-    <StyledBanner $background={background} $useGradientBackground={useGradientBackground} {...otherProps}>
-        {children}
-    </StyledBanner>
-);

package/src/components/banner/index.ts

@@ -1 +0,0 @@
-export * from './banner';