@apify/ui-library 1.171.0 → 1.171.1-uilibraryversion2candida-85b55e.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (115) hide show
  1. package/README.md +1 -1
  2. package/dist/components/code/code_block/code_block.d.ts +1 -3
  3. package/dist/components/code/code_block/code_block.d.ts.map +1 -1
  4. package/dist/components/code/code_block/code_block.js +1 -7
  5. package/dist/components/code/code_block/code_block.styled.d.ts +0 -1
  6. package/dist/components/code/code_block/code_block.styled.d.ts.map +1 -1
  7. package/dist/components/code/code_block/code_block.styled.js +0 -10
  8. package/dist/components/code/inline_code/inline_code.d.ts.map +1 -1
  9. package/dist/components/index.d.ts +0 -3
  10. package/dist/components/index.d.ts.map +1 -1
  11. package/dist/components/simple_markdown/simple_markdown.d.ts.map +1 -1
  12. package/dist/components/simple_markdown/simple_markdown.js +1 -1
  13. package/dist/components/simple_markdown/simple_markdown_components.d.ts +5 -2
  14. package/dist/components/simple_markdown/simple_markdown_components.d.ts.map +1 -1
  15. package/dist/components/simple_markdown/simple_markdown_components.js +2 -3
  16. package/dist/components/tag/tag.d.ts +1 -1
  17. package/dist/components/tag/tag.d.ts.map +1 -1
  18. package/dist/components/text/index.d.ts +0 -1
  19. package/dist/components/text/index.d.ts.map +1 -1
  20. package/dist/components/text/text_content.d.ts +1 -1
  21. package/dist/components/text/text_content.js +1 -1
  22. package/dist/files_hash_at_build.txt +1 -1
  23. package/dist/index.js +1 -5
  24. package/dist/src/components/code/code_block/code_block.d.ts +1 -3
  25. package/dist/src/components/code/code_block/code_block.d.ts.map +1 -1
  26. package/dist/src/components/code/code_block/code_block.js +2 -3
  27. package/dist/src/components/code/code_block/code_block.js.map +1 -1
  28. package/dist/src/components/code/code_block/code_block.styled.d.ts +0 -1
  29. package/dist/src/components/code/code_block/code_block.styled.d.ts.map +1 -1
  30. package/dist/src/components/code/code_block/code_block.styled.js +0 -10
  31. package/dist/src/components/code/code_block/code_block.styled.js.map +1 -1
  32. package/dist/src/components/code/inline_code/inline_code.d.ts.map +1 -1
  33. package/dist/src/components/code/inline_code/inline_code.js +0 -1
  34. package/dist/src/components/code/inline_code/inline_code.js.map +1 -1
  35. package/dist/src/components/index.d.ts +0 -3
  36. package/dist/src/components/index.d.ts.map +1 -1
  37. package/dist/src/components/index.js +0 -3
  38. package/dist/src/components/index.js.map +1 -1
  39. package/dist/src/components/simple_markdown/simple_markdown.d.ts.map +1 -1
  40. package/dist/src/components/simple_markdown/simple_markdown.js +2 -1
  41. package/dist/src/components/simple_markdown/simple_markdown.js.map +1 -1
  42. package/dist/src/components/simple_markdown/simple_markdown_components.d.ts +5 -4
  43. package/dist/src/components/simple_markdown/simple_markdown_components.d.ts.map +1 -1
  44. package/dist/src/components/simple_markdown/simple_markdown_components.js +4 -4
  45. package/dist/src/components/simple_markdown/simple_markdown_components.js.map +1 -1
  46. package/dist/src/components/tag/tag.d.ts +1 -1
  47. package/dist/src/components/tag/tag.d.ts.map +1 -1
  48. package/dist/src/components/text/index.d.ts +0 -1
  49. package/dist/src/components/text/index.d.ts.map +1 -1
  50. package/dist/src/components/text/index.js +0 -1
  51. package/dist/src/components/text/index.js.map +1 -1
  52. package/dist/src/components/text/text_content.d.ts +1 -1
  53. package/dist/src/components/text/text_content.js +1 -1
  54. package/dist/tsconfig.build.tsbuildinfo +1 -1
  55. package/package.json +2 -2
  56. package/src/components/code/code_block/code_block.stories.jsx +6 -13
  57. package/src/components/code/code_block/code_block.styled.tsx +0 -11
  58. package/src/components/code/code_block/code_block.tsx +0 -8
  59. package/src/components/code/inline_code/inline_code.tsx +0 -1
  60. package/src/components/index.ts +0 -3
  61. package/src/components/simple_markdown/simple_markdown.tsx +2 -1
  62. package/src/components/simple_markdown/simple_markdown_components.tsx +8 -14
  63. package/src/components/skeleton/skeleton.stories.tsx +4 -0
  64. package/src/components/tag/tag.tsx +1 -1
  65. package/src/components/text/index.ts +0 -1
  66. package/src/components/text/text_content.tsx +1 -1
  67. package/dist/components/banner/banner.d.ts +0 -11
  68. package/dist/components/banner/banner.d.ts.map +0 -1
  69. package/dist/components/banner/banner.js +0 -76
  70. package/dist/components/banner/index.d.ts +0 -2
  71. package/dist/components/banner/index.d.ts.map +0 -1
  72. package/dist/components/chip/chip.d.ts +0 -55
  73. package/dist/components/chip/chip.d.ts.map +0 -1
  74. package/dist/components/chip/chip.js +0 -144
  75. package/dist/components/chip/index.d.ts +0 -2
  76. package/dist/components/chip/index.d.ts.map +0 -1
  77. package/dist/components/color_wheel_gradient/color_wheel_gradient.d.ts +0 -9
  78. package/dist/components/color_wheel_gradient/color_wheel_gradient.d.ts.map +0 -1
  79. package/dist/components/color_wheel_gradient/color_wheel_gradient.js +0 -27
  80. package/dist/components/color_wheel_gradient/index.d.ts +0 -2
  81. package/dist/components/color_wheel_gradient/index.d.ts.map +0 -1
  82. package/dist/src/components/banner/banner.d.ts +0 -11
  83. package/dist/src/components/banner/banner.d.ts.map +0 -1
  84. package/dist/src/components/banner/banner.js +0 -70
  85. package/dist/src/components/banner/banner.js.map +0 -1
  86. package/dist/src/components/banner/index.d.ts +0 -2
  87. package/dist/src/components/banner/index.d.ts.map +0 -1
  88. package/dist/src/components/banner/index.js +0 -2
  89. package/dist/src/components/banner/index.js.map +0 -1
  90. package/dist/src/components/chip/chip.d.ts +0 -56
  91. package/dist/src/components/chip/chip.d.ts.map +0 -1
  92. package/dist/src/components/chip/chip.js +0 -123
  93. package/dist/src/components/chip/chip.js.map +0 -1
  94. package/dist/src/components/chip/index.d.ts +0 -2
  95. package/dist/src/components/chip/index.d.ts.map +0 -1
  96. package/dist/src/components/chip/index.js +0 -2
  97. package/dist/src/components/chip/index.js.map +0 -1
  98. package/dist/src/components/color_wheel_gradient/color_wheel_gradient.d.ts +0 -9
  99. package/dist/src/components/color_wheel_gradient/color_wheel_gradient.d.ts.map +0 -1
  100. package/dist/src/components/color_wheel_gradient/color_wheel_gradient.js +0 -25
  101. package/dist/src/components/color_wheel_gradient/color_wheel_gradient.js.map +0 -1
  102. package/dist/src/components/color_wheel_gradient/index.d.ts +0 -2
  103. package/dist/src/components/color_wheel_gradient/index.d.ts.map +0 -1
  104. package/dist/src/components/color_wheel_gradient/index.js +0 -2
  105. package/dist/src/components/color_wheel_gradient/index.js.map +0 -1
  106. package/src/components/banner/banner.stories.tsx +0 -238
  107. package/src/components/banner/banner.tsx +0 -91
  108. package/src/components/banner/index.ts +0 -1
  109. package/src/components/chip/chip.stories.tsx +0 -311
  110. package/src/components/chip/chip.tsx +0 -167
  111. package/src/components/chip/index.ts +0 -1
  112. package/src/components/color_wheel_gradient/color_wheel_gradient.stories.tsx +0 -152
  113. package/src/components/color_wheel_gradient/color_wheel_gradient.tsx +0 -33
  114. package/src/components/color_wheel_gradient/index.ts +0 -1
  115. package/src/components/text/text_content.stories.tsx +0 -194
@@ -1,70 +0,0 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import styled, { css } from 'styled-components';
3
- import { theme } from '../../design_system/theme';
4
- const BANNER_GRADIENT_BACKGROUND_SVG = `<svg width="1200" height="148" viewBox="0 0 1200 148" fill="none" xmlns="http://www.w3.org/2000/svg">
5
- <g clip-path="url(#clip0_2285_34756)">
6
- <g filter="url(#filter0_f_2285_34756)">
7
- <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)"/>
8
- </g>
9
- <g filter="url(#filter1_f_2285_34756)">
10
- <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)"/>
11
- </g>
12
- <g filter="url(#filter2_f_2285_34756)">
13
- <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)"/>
14
- </g>
15
- </g>
16
- <defs>
17
- <filter id="filter0_f_2285_34756" x="-170" y="93" width="339.885" height="489.652" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
18
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
19
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
20
- <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
21
- </filter>
22
- <filter id="filter1_f_2285_34756" x="1052" y="75" width="295.683" height="443.686" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
23
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
24
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
25
- <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
26
- </filter>
27
- <filter id="filter2_f_2285_34756" x="481" y="-250" width="400.074" height="360" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
28
- <feFlood flood-opacity="0" result="BackgroundImageFix"/>
29
- <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
30
- <feGaussianBlur stdDeviation="40" result="effect1_foregroundBlur_2285_34756"/>
31
- </filter>
32
- <linearGradient id="paint0_linear_2285_34756" x1="-0.0574112" y1="173" x2="-0.0574112" y2="502.652" gradientUnits="userSpaceOnUse">
33
- <stop stop-color="#00FF85"/>
34
- <stop offset="1" stop-color="#00FF47" stop-opacity="0"/>
35
- </linearGradient>
36
- <linearGradient id="paint1_linear_2285_34756" x1="1146.02" y1="174.549" x2="1333.1" y2="293.915" gradientUnits="userSpaceOnUse">
37
- <stop stop-color="#00FFF0"/>
38
- <stop offset="1" stop-color="#1672EB"/>
39
- </linearGradient>
40
- <linearGradient id="paint2_linear_2285_34756" x1="681.037" y1="-170" x2="681.037" y2="30" gradientUnits="userSpaceOnUse">
41
- <stop stop-color="#F5B315"/>
42
- <stop offset="1" stop-color="#FF2CC4"/>
43
- </linearGradient>
44
- <clipPath id="clip0_2285_34756">
45
- <rect width="1200" height="1791.08" rx="16" fill="white"/>
46
- </clipPath>
47
- </defs>
48
- </svg>
49
- `;
50
- const getBannerBackground = (background, useGradientBackground) => {
51
- return css `
52
- background-color: ${background || theme.color.neutral.backgroundSubtle};
53
- ${useGradientBackground &&
54
- `
55
- background-image: url("data:image/svg+xml,${encodeURIComponent(BANNER_GRADIENT_BACKGROUND_SVG)}");
56
- background-position: center;
57
- background-repeat: no-repeat;
58
- background-size: cover;
59
- `}
60
- `;
61
- };
62
- const StyledBanner = styled.div `
63
- width: ${(props) => props.width || '100%'};
64
- padding: ${theme.space.space40} ${theme.space.space80};
65
- border-radius: ${theme.radius.radius16};
66
-
67
- ${({ $background, $useGradientBackground }) => getBannerBackground($background, $useGradientBackground)};
68
- `;
69
- export const Banner = ({ useGradientBackground = true, background, children, ...otherProps }) => (_jsx(StyledBanner, { "$background": background, "$useGradientBackground": useGradientBackground, ...otherProps, children: children }));
70
- //# sourceMappingURL=banner.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"banner.js","sourceRoot":"","sources":["../../../../src/components/banner/banner.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAElD,MAAM,8BAA8B,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CtC,CAAC;AAUF,MAAM,mBAAmB,GAAG,CAAC,UAAmB,EAAE,qBAA+B,EAAE,EAAE;IACjF,OAAO,GAAG,CAAA;4BACc,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,gBAAgB;UACpE,qBAAqB;QACvB;wDACgD,kBAAkB,CAAC,8BAA8B,CAAC;;;;aAI7F;KACR,CAAC;AACN,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,KAAC,YAAY,mBAAc,UAAU,4BAA0B,qBAAqB,KAAM,UAAU,YAC/F,QAAQ,GACE,CAClB,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './banner';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './banner';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}
@@ -1,56 +0,0 @@
1
- import type { FC } from 'react';
2
- import type React from 'react';
3
- import type { ValueOf } from '../../internal_type_utils';
4
- import type { RegularBoxProps } from '../box';
5
- export declare const CHIP_SIZES: {
6
- readonly EXTRA_SMALL: "XS";
7
- readonly SMALL: "S";
8
- readonly MEDIUM: "M";
9
- readonly LARGE: "L";
10
- };
11
- type CHIP_SIZES = ValueOf<typeof CHIP_SIZES>;
12
- export declare const CHIP_TYPES: {
13
- readonly DEFAULT: "DEFAULT";
14
- readonly PRIMARY: "PRIMARY";
15
- readonly SUCCESS: "SUCCESS";
16
- readonly WARNING: "WARNING";
17
- readonly DANGER: "DANGER";
18
- };
19
- export type CHIP_TYPES = ValueOf<typeof CHIP_TYPES>;
20
- export declare const classNames: {
21
- BODY: string;
22
- };
23
- export type ChipProps = RegularBoxProps & {
24
- type?: CHIP_TYPES;
25
- size?: CHIP_SIZES;
26
- icon?: React.ReactNode;
27
- clickable?: boolean;
28
- };
29
- /**
30
- * Component for displaying status and for labelling other components.
31
- * @deprecated Use Tag or Badge
32
- */
33
- export declare const Chip: React.ForwardRefExoticComponent<{
34
- children?: React.ReactNode;
35
- className?: string;
36
- style?: React.CSSProperties;
37
- onClick?: (e: React.MouseEvent) => void;
38
- id?: string;
39
- title?: string;
40
- role?: React.AriaRole;
41
- } & {
42
- as?: React.ElementType;
43
- } & {
44
- type?: CHIP_TYPES;
45
- size?: CHIP_SIZES;
46
- icon?: React.ReactNode;
47
- clickable?: boolean;
48
- } & React.RefAttributes<unknown>>;
49
- type SpecificChipProps = Omit<ChipProps, 'type'>;
50
- export declare const PrimaryChip: FC<SpecificChipProps>;
51
- export declare const NeutralChip: FC<SpecificChipProps>;
52
- export declare const SuccessChip: FC<SpecificChipProps>;
53
- export declare const DangerChip: FC<SpecificChipProps>;
54
- export declare const WarningChip: FC<SpecificChipProps>;
55
- export {};
56
- //# sourceMappingURL=chip.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,123 +0,0 @@
1
- import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
- import clsx from 'clsx';
3
- import { forwardRef } from 'react';
4
- import styled, { css } from 'styled-components';
5
- import { theme } from '../../design_system/theme';
6
- export const CHIP_SIZES = {
7
- EXTRA_SMALL: 'XS',
8
- SMALL: 'S',
9
- MEDIUM: 'M',
10
- LARGE: 'L',
11
- };
12
- export const CHIP_TYPES = {
13
- DEFAULT: 'DEFAULT',
14
- PRIMARY: 'PRIMARY',
15
- SUCCESS: 'SUCCESS',
16
- WARNING: 'WARNING',
17
- DANGER: 'DANGER',
18
- };
19
- export const classNames = {
20
- BODY: 'Chip-body',
21
- };
22
- const chipSizeStyle = {
23
- [CHIP_SIZES.EXTRA_SMALL]: css `
24
- font-size: 12px;
25
- line-height: 16px;
26
- padding: 0 4px;
27
- border-radius: 6px;
28
- `,
29
- [CHIP_SIZES.SMALL]: css `
30
- font-size: 12px;
31
- line-height: 16px;
32
- padding: 2px 4px;
33
- border-radius: 6px;
34
- `,
35
- [CHIP_SIZES.MEDIUM]: css `
36
- font-size: 14px;
37
- line-height: 20px;
38
- padding: 2px 8px;
39
- border-radius: 100px;
40
- `,
41
- [CHIP_SIZES.LARGE]: css `
42
- /* 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). */
43
- font-size: 16px;
44
- line-height: 20px;
45
- padding: 2px 8px;
46
- border-radius: 100px;
47
- `,
48
- };
49
- const chipTypeStyle = {
50
- [CHIP_TYPES.DEFAULT]: css `
51
- color: ${theme.color.neutral.text};
52
- background: ${theme.color.neutral.chipBackground};
53
- `,
54
- [CHIP_TYPES.PRIMARY]: css `
55
- color: ${theme.color.primary.chipText};
56
- background: ${theme.color.primary.chipBackground};
57
- `,
58
- [CHIP_TYPES.SUCCESS]: css `
59
- color: ${theme.color.success.chipText};
60
- background: ${theme.color.success.chipBackground};
61
- `,
62
- [CHIP_TYPES.WARNING]: css `
63
- color: ${theme.color.warning.chipText};
64
- background: ${theme.color.warning.chipBackground};
65
- `,
66
- [CHIP_TYPES.DANGER]: css `
67
- color: ${theme.color.danger.chipText};
68
- background: ${theme.color.danger.chipBackground};
69
- `,
70
- };
71
- const chipTypeHoverStyle = {
72
- [CHIP_TYPES.DEFAULT]: css `
73
- background: ${theme.color.neutral.chipBackgroundHover};
74
- `,
75
- [CHIP_TYPES.PRIMARY]: css `
76
- background: ${theme.color.primary.chipBackgroundHover};
77
- `,
78
- [CHIP_TYPES.SUCCESS]: css `
79
- background: ${theme.color.success.chipBackgroundHover};
80
- `,
81
- [CHIP_TYPES.WARNING]: css `
82
- background: ${theme.color.warning.chipBackgroundHover};
83
- `,
84
- [CHIP_TYPES.DANGER]: css `
85
- background: ${theme.color.danger.chipBackgroundHover};
86
- `,
87
- };
88
- const StyledChip = styled.span `
89
- ${({ size }) => chipSizeStyle[size]};
90
- ${({ type }) => chipTypeStyle[type]};
91
- ${({ type, clickable }) => clickable &&
92
- css `
93
- &:hover {
94
- ${chipTypeHoverStyle[type]};
95
- }
96
- `};
97
- /* Static styles */
98
- width: fit-content;
99
- display: flex;
100
- flex-direction: row;
101
- justify-content: center;
102
- align-items: center;
103
- /* TODO: (typography-keyword) 'normal' keyword used instead of numeric value (400) or typography token. */
104
- font-weight: normal;
105
- white-space: nowrap;
106
- cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};
107
- gap: ${theme.space.space4};
108
- `;
109
- /**
110
- * Component for displaying status and for labelling other components.
111
- * @deprecated Use Tag or Badge
112
- */
113
- export const Chip = forwardRef(({ type = CHIP_TYPES.DEFAULT, size = CHIP_SIZES.MEDIUM, clickable = false, icon, children, className, ...passThroughProps }, ref) => {
114
- const otherProps = { ...passThroughProps, type, size, clickable, className: clsx(className, classNames.BODY) };
115
- return (_jsxs(StyledChip, { ref: ref, ...otherProps, children: [children, icon] }));
116
- });
117
- Chip.displayName = 'Chip';
118
- export const PrimaryChip = (props) => _jsx(Chip, { type: CHIP_TYPES.PRIMARY, ...props });
119
- export const NeutralChip = (props) => _jsx(Chip, { type: CHIP_TYPES.DEFAULT, ...props });
120
- export const SuccessChip = (props) => _jsx(Chip, { type: CHIP_TYPES.SUCCESS, ...props });
121
- export const DangerChip = (props) => _jsx(Chip, { type: CHIP_TYPES.DANGER, ...props });
122
- export const WarningChip = (props) => _jsx(Chip, { type: CHIP_TYPES.WARNING, ...props });
123
- //# sourceMappingURL=chip.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../../src/components/chip/chip.tsx"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- export * from './chip';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './chip';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/chip/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}
@@ -1,9 +0,0 @@
1
- export interface ColorWheelGradientProps {
2
- translateX?: number;
3
- translateY?: number;
4
- rotation?: number;
5
- radius?: number;
6
- blurSize?: number;
7
- }
8
- 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;
9
- //# sourceMappingURL=color_wheel_gradient.d.ts.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,25 +0,0 @@
1
- import styled from 'styled-components';
2
- export const ColorWheelGradient = styled.div `
3
- ${({ radius, rotation = 0, blurSize = 40, translateX = 0, translateY = 0 }) => `
4
- z-index: 1;
5
- position: absolute;
6
- width: ${radius ? `${radius}px` : 'auto'};
7
- height: ${radius ? `${radius}px` : 'auto'};
8
- transform-origin: center;
9
- transform: translate(${translateX}px, ${translateY}px) rotate(${rotation}deg);
10
-
11
- opacity: 0.30;
12
- background: conic-gradient(
13
- rgba(93, 133, 225, 0.99) 0deg,
14
- rgba(106, 20, 222, 0.99) 69deg,
15
- rgba(228, 68, 103, 0.99) 150deg,
16
- rgba(250, 129, 54, 0.99) 221deg,
17
- rgba(240, 178, 27, 0.99) 287deg,
18
- rgba(18, 150, 111, 0.99) 360deg
19
- );
20
-
21
- border-radius: 50%;
22
- filter: blur(${blurSize}px)
23
- `}
24
- `;
25
- //# sourceMappingURL=color_wheel_gradient.js.map
@@ -1 +0,0 @@
1
- {"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"}
@@ -1,2 +0,0 @@
1
- export * from './color_wheel_gradient';
2
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/color_wheel_gradient/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
@@ -1,2 +0,0 @@
1
- export * from './color_wheel_gradient';
2
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/color_wheel_gradient/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
@@ -1,238 +0,0 @@
1
- import type { Meta, StoryObj } from '@storybook/react-vite';
2
- import type React from 'react';
3
-
4
- import { Banner } from './banner';
5
-
6
- interface BannerProps {
7
- background?: string;
8
- useGradientBackground?: boolean;
9
- width?: string;
10
- className?: string;
11
- children: React.ReactNode;
12
- }
13
-
14
- export default {
15
- title: 'UI-Library/Banner',
16
- component: Banner,
17
- argTypes: {
18
- background: {
19
- control: 'text',
20
- },
21
- useGradientBackground: {
22
- control: 'boolean',
23
- },
24
- width: {
25
- control: 'text',
26
- },
27
- className: {
28
- control: 'text',
29
- },
30
- children: {
31
- control: false,
32
- },
33
- },
34
- parameters: {
35
- design: {
36
- type: 'figma',
37
- url: 'TODO: Add Figma URL',
38
- },
39
- },
40
- } as Meta<BannerProps>;
41
-
42
- type Story = StoryObj<BannerProps>;
43
-
44
- /**
45
- * Default banner with gradient background enabled
46
- */
47
- export const Default: Story = {
48
- args: {
49
- children: (
50
- <div>
51
- <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Welcome to Apify</h2>
52
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>Build reliable web scrapers. Fast.</p>
53
- </div>
54
- ),
55
- },
56
- };
57
-
58
- /**
59
- * Banner with gradient background enabled (explicitly set to true)
60
- */
61
- export const WithGradientBackground: Story = {
62
- args: {
63
- useGradientBackground: true,
64
- children: (
65
- <div>
66
- <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Gradient Background Banner</h2>
67
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
68
- This banner uses the beautiful gradient background with colorful shapes.
69
- </p>
70
- </div>
71
- ),
72
- },
73
- };
74
-
75
- /**
76
- * Banner without gradient background - shows solid background color
77
- */
78
- export const WithoutGradientBackground: Story = {
79
- args: {
80
- useGradientBackground: false,
81
- children: (
82
- <div>
83
- <h2 style={{ margin: 0, marginBottom: '8px' }}>Simple Banner</h2>
84
- <p style={{ margin: 0, opacity: 0.7 }}>
85
- This banner uses a simple solid background without gradient effects.
86
- </p>
87
- </div>
88
- ),
89
- },
90
- };
91
-
92
- /**
93
- * Banner with custom background color
94
- */
95
- export const WithCustomBackground: Story = {
96
- args: {
97
- background: '#4CAF50',
98
- useGradientBackground: false,
99
- children: (
100
- <div>
101
- <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Green Background</h2>
102
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
103
- This banner has a custom green background color.
104
- </p>
105
- </div>
106
- ),
107
- },
108
- };
109
-
110
- /**
111
- * Banner with custom background color and gradient overlay
112
- */
113
- export const WithCustomBackgroundAndGradient: Story = {
114
- args: {
115
- background: '#2196F3',
116
- useGradientBackground: true,
117
- children: (
118
- <div>
119
- <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Blue Background with Gradient</h2>
120
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
121
- Custom blue background with gradient overlay effects.
122
- </p>
123
- </div>
124
- ),
125
- },
126
- };
127
-
128
- /**
129
- * Banner with custom width
130
- */
131
- export const WithCustomWidth: Story = {
132
- args: {
133
- width: '600px',
134
- children: (
135
- <div>
136
- <h2 style={{ margin: 0, marginBottom: '8px', color: 'white' }}>Custom Width Banner</h2>
137
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.8)' }}>
138
- This banner has a fixed width of 600px instead of 100%.
139
- </p>
140
- </div>
141
- ),
142
- },
143
- };
144
-
145
- /**
146
- * Banner with minimal content
147
- */
148
- export const WithMinimalContent: Story = {
149
- args: {
150
- children: <p style={{ margin: 0, color: 'white', textAlign: 'center' }}>Simple announcement message</p>,
151
- },
152
- };
153
-
154
- /**
155
- * Banner with rich content including buttons and links
156
- */
157
- export const WithRichContent: Story = {
158
- args: {
159
- children: (
160
- <div>
161
- <h1 style={{ margin: 0, marginBottom: '12px', color: 'white', fontSize: '2rem' }}>
162
- 🚀 New Feature Launch
163
- </h1>
164
- <p style={{ margin: 0, marginBottom: '16px', color: 'rgba(255, 255, 255, 0.9)' }}>
165
- We&apos;ve just released our most powerful web scraping tools yet. Experience faster, more reliable
166
- data extraction with our enhanced platform.
167
- </p>
168
- <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
169
- <button
170
- type="button"
171
- style={{
172
- padding: '8px 16px',
173
- backgroundColor: 'white',
174
- color: '#333',
175
- border: 'none',
176
- borderRadius: '4px',
177
- fontWeight: 'bold',
178
- cursor: 'pointer',
179
- }}
180
- >
181
- Get Started
182
- </button>
183
- <a
184
- href="#"
185
- style={{
186
- color: 'white',
187
- textDecoration: 'underline',
188
- }}
189
- >
190
- Learn more
191
- </a>
192
- </div>
193
- </div>
194
- ),
195
- },
196
- };
197
-
198
- /**
199
- * Banner with warning/alert styling
200
- */
201
- export const WarningBanner: Story = {
202
- args: {
203
- background: '#FF9800',
204
- useGradientBackground: false,
205
- children: (
206
- <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
207
- <span style={{ fontSize: '1.5rem' }}>⚠️</span>
208
- <div>
209
- <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Maintenance Notice</h3>
210
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
211
- Scheduled maintenance will occur on Sunday, 12:00-14:00 UTC.
212
- </p>
213
- </div>
214
- </div>
215
- ),
216
- },
217
- };
218
-
219
- /**
220
- * Banner with success/positive messaging
221
- */
222
- export const SuccessBanner: Story = {
223
- args: {
224
- background: '#4CAF50',
225
- useGradientBackground: false,
226
- children: (
227
- <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
228
- <span style={{ fontSize: '1.5rem' }}>✅</span>
229
- <div>
230
- <h3 style={{ margin: 0, marginBottom: '4px', color: 'white' }}>Migration Complete</h3>
231
- <p style={{ margin: 0, color: 'rgba(255, 255, 255, 0.9)' }}>
232
- Your account has been successfully migrated to our new platform.
233
- </p>
234
- </div>
235
- </div>
236
- ),
237
- },
238
- };