@codecademy/gamut-patterns 1.0.0-alpha.fb02a7.0 → 1.0.1-alpha.2a9038.0
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.
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/patterns/CheckerDense.d.ts +3 -0
- package/dist/patterns/CheckerDense.js +45 -0
- package/dist/patterns/CheckerLoose.d.ts +3 -0
- package/dist/patterns/CheckerLoose.js +45 -0
- package/dist/patterns/CheckerRegular.d.ts +3 -0
- package/dist/patterns/CheckerRegular.js +45 -0
- package/dist/patterns/DiagonalADense.d.ts +3 -0
- package/dist/patterns/DiagonalADense.js +79 -0
- package/dist/patterns/DiagonalALoose.d.ts +3 -0
- package/dist/patterns/DiagonalALoose.js +223 -0
- package/dist/patterns/DiagonalARegular.d.ts +3 -0
- package/dist/patterns/DiagonalARegular.js +127 -0
- package/dist/patterns/DiagonalBDense.d.ts +3 -0
- package/dist/patterns/DiagonalBDense.js +61 -0
- package/dist/patterns/DiagonalBLoose.d.ts +3 -0
- package/dist/patterns/DiagonalBLoose.js +129 -0
- package/dist/patterns/DiagonalBRegular.d.ts +3 -0
- package/dist/patterns/DiagonalBRegular.js +85 -0
- package/dist/patterns/DotDense.d.ts +3 -0
- package/dist/patterns/DotDense.js +40 -0
- package/dist/patterns/DotLoose.d.ts +3 -0
- package/dist/patterns/DotLoose.js +83 -0
- package/dist/patterns/DotRegular.d.ts +3 -0
- package/dist/patterns/DotRegular.js +40 -0
- package/dist/patterns/ExDense.d.ts +3 -0
- package/dist/patterns/ExDense.js +62 -0
- package/dist/patterns/ExLoose.d.ts +3 -0
- package/dist/patterns/ExLoose.js +62 -0
- package/dist/patterns/ExRegular.d.ts +3 -0
- package/dist/patterns/ExRegular.js +62 -0
- package/dist/patterns/FlowerDense.d.ts +3 -0
- package/dist/patterns/FlowerDense.js +56 -0
- package/dist/patterns/FlowerLoose.d.ts +3 -0
- package/dist/patterns/FlowerLoose.js +56 -0
- package/dist/patterns/FlowerRegular.d.ts +3 -0
- package/dist/patterns/FlowerRegular.js +56 -0
- package/dist/patterns/GridDense.d.ts +3 -0
- package/dist/patterns/GridDense.js +55 -0
- package/dist/patterns/GridLoose.d.ts +3 -0
- package/dist/patterns/GridLoose.js +55 -0
- package/dist/patterns/GridRegular.d.ts +3 -0
- package/dist/patterns/GridRegular.js +55 -0
- package/dist/patterns/Herringbone.d.ts +3 -0
- package/dist/patterns/Herringbone.js +73 -0
- package/dist/patterns/RainDense.d.ts +3 -0
- package/dist/patterns/RainDense.js +45 -0
- package/dist/patterns/RainLoose.d.ts +3 -0
- package/dist/patterns/RainLoose.js +45 -0
- package/dist/patterns/RainRegular.d.ts +3 -0
- package/dist/patterns/RainRegular.js +45 -0
- package/dist/patterns/StripeDense.d.ts +3 -0
- package/dist/patterns/StripeDense.js +77 -0
- package/dist/patterns/StripeLoose.d.ts +3 -0
- package/dist/patterns/StripeLoose.js +209 -0
- package/dist/patterns/StripeRegular.d.ts +3 -0
- package/dist/patterns/StripeRegular.js +121 -0
- package/dist/patterns/index.d.ts +28 -0
- package/dist/patterns/index.js +28 -0
- package/dist/props.d.ts +302 -0
- package/dist/props.js +17 -0
- package/dist/svg/CheckerDense.svg +14 -0
- package/dist/svg/CheckerLoose.svg +14 -0
- package/dist/svg/CheckerRegular.svg +14 -0
- package/dist/svg/DiagonalADense.svg +20 -0
- package/dist/svg/DiagonalALoose.svg +44 -0
- package/dist/svg/DiagonalARegular.svg +28 -0
- package/dist/svg/DiagonalBDense.svg +24 -0
- package/dist/svg/DiagonalBLoose.svg +28 -0
- package/dist/svg/DiagonalBRegular.svg +28 -0
- package/dist/svg/DotDense.svg +13 -0
- package/dist/svg/DotLoose.svg +40 -0
- package/dist/svg/DotRegular.svg +13 -0
- package/dist/svg/ExDense.svg +17 -0
- package/dist/svg/ExLoose.svg +17 -0
- package/dist/svg/ExRegular.svg +17 -0
- package/dist/svg/FlowerDense.svg +16 -0
- package/dist/svg/FlowerLoose.svg +16 -0
- package/dist/svg/FlowerRegular.svg +16 -0
- package/dist/svg/GridDense.svg +16 -0
- package/dist/svg/GridLoose.svg +16 -0
- package/dist/svg/GridRegular.svg +16 -0
- package/dist/svg/Herringbone.svg +19 -0
- package/dist/svg/RainDense.svg +14 -0
- package/dist/svg/RainLoose.svg +14 -0
- package/dist/svg/RainRegular.svg +14 -0
- package/dist/svg/StripeDense.svg +20 -0
- package/dist/svg/StripeLoose.svg +44 -0
- package/dist/svg/StripeRegular.svg +28 -0
- package/dist/types.d.ts +1 -0
- package/dist/types.js +1 -0
- package/dist/usePatternId.d.ts +1 -0
- package/dist/usePatternId.js +7 -0
- package/package.json +21 -38
- package/CHANGELOG.md +0 -15
- package/LICENSE +0 -21
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const FlowerLoose = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Flower Loose',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('FlowerLoose');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 16,
|
|
26
|
+
height: 16,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
x: 1,
|
|
34
|
+
y: 1,
|
|
35
|
+
width: 1,
|
|
36
|
+
height: 1,
|
|
37
|
+
fill: "currentColor"
|
|
38
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
39
|
+
y: 2,
|
|
40
|
+
width: 1,
|
|
41
|
+
height: 1,
|
|
42
|
+
fill: "currentColor"
|
|
43
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
44
|
+
x: 15,
|
|
45
|
+
y: 1,
|
|
46
|
+
width: 1,
|
|
47
|
+
height: 1,
|
|
48
|
+
fill: "currentColor"
|
|
49
|
+
})]
|
|
50
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
51
|
+
width: "100%",
|
|
52
|
+
height: "100%",
|
|
53
|
+
fill: `url(#${patternId})`
|
|
54
|
+
})]
|
|
55
|
+
});
|
|
56
|
+
});
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const FlowerRegular = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Flower Regular',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('FlowerRegular');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 8,
|
|
26
|
+
height: 8,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
x: 1,
|
|
34
|
+
y: 1,
|
|
35
|
+
width: 1,
|
|
36
|
+
height: 1,
|
|
37
|
+
fill: "currentColor"
|
|
38
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
39
|
+
y: 2,
|
|
40
|
+
width: 1,
|
|
41
|
+
height: 1,
|
|
42
|
+
fill: "currentColor"
|
|
43
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
44
|
+
x: 7,
|
|
45
|
+
y: 1,
|
|
46
|
+
width: 1,
|
|
47
|
+
height: 1,
|
|
48
|
+
fill: "currentColor"
|
|
49
|
+
})]
|
|
50
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
51
|
+
width: "100%",
|
|
52
|
+
height: "100%",
|
|
53
|
+
fill: `url(#${patternId})`
|
|
54
|
+
})]
|
|
55
|
+
});
|
|
56
|
+
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const GridDense = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Grid Dense',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('GridDense');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 4,
|
|
26
|
+
height: 4,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
y: 2,
|
|
34
|
+
width: 1,
|
|
35
|
+
height: 1,
|
|
36
|
+
fill: "currentColor"
|
|
37
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
38
|
+
x: 2,
|
|
39
|
+
width: 1,
|
|
40
|
+
height: 1,
|
|
41
|
+
fill: "currentColor"
|
|
42
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
43
|
+
x: 2,
|
|
44
|
+
y: 2,
|
|
45
|
+
width: 1,
|
|
46
|
+
height: 1,
|
|
47
|
+
fill: "currentColor"
|
|
48
|
+
})]
|
|
49
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
50
|
+
width: "100%",
|
|
51
|
+
height: "100%",
|
|
52
|
+
fill: `url(#${patternId})`
|
|
53
|
+
})]
|
|
54
|
+
});
|
|
55
|
+
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const GridLoose = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Grid Loose',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('GridLoose');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 16,
|
|
26
|
+
height: 16,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
y: 8,
|
|
34
|
+
width: 1,
|
|
35
|
+
height: 1,
|
|
36
|
+
fill: "currentColor"
|
|
37
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
38
|
+
x: 8,
|
|
39
|
+
width: 1,
|
|
40
|
+
height: 1,
|
|
41
|
+
fill: "currentColor"
|
|
42
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
43
|
+
x: 8,
|
|
44
|
+
y: 8,
|
|
45
|
+
width: 1,
|
|
46
|
+
height: 1,
|
|
47
|
+
fill: "currentColor"
|
|
48
|
+
})]
|
|
49
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
50
|
+
width: "100%",
|
|
51
|
+
height: "100%",
|
|
52
|
+
fill: `url(#${patternId})`
|
|
53
|
+
})]
|
|
54
|
+
});
|
|
55
|
+
});
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const GridRegular = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Grid Regular',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('GridRegular');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 8,
|
|
26
|
+
height: 8,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
y: 4,
|
|
34
|
+
width: 1,
|
|
35
|
+
height: 1,
|
|
36
|
+
fill: "currentColor"
|
|
37
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
38
|
+
x: 4,
|
|
39
|
+
width: 1,
|
|
40
|
+
height: 1,
|
|
41
|
+
fill: "currentColor"
|
|
42
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
43
|
+
x: 4,
|
|
44
|
+
y: 4,
|
|
45
|
+
width: 1,
|
|
46
|
+
height: 1,
|
|
47
|
+
fill: "currentColor"
|
|
48
|
+
})]
|
|
49
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
50
|
+
width: "100%",
|
|
51
|
+
height: "100%",
|
|
52
|
+
fill: `url(#${patternId})`
|
|
53
|
+
})]
|
|
54
|
+
});
|
|
55
|
+
});
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const Herringbone = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Herringbone',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('Herringbone');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 4,
|
|
26
|
+
height: 4,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
y: 1,
|
|
30
|
+
width: 1,
|
|
31
|
+
height: 1,
|
|
32
|
+
fill: "herringbone"
|
|
33
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
34
|
+
x: 1,
|
|
35
|
+
y: 2,
|
|
36
|
+
width: 1,
|
|
37
|
+
height: 1,
|
|
38
|
+
fill: "herringbone"
|
|
39
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
40
|
+
x: 3,
|
|
41
|
+
width: 1,
|
|
42
|
+
height: 1,
|
|
43
|
+
fill: "herringbone"
|
|
44
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
45
|
+
x: 2,
|
|
46
|
+
width: 1,
|
|
47
|
+
height: 1,
|
|
48
|
+
fill: "herringbone"
|
|
49
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
50
|
+
x: 3,
|
|
51
|
+
y: 1,
|
|
52
|
+
width: 1,
|
|
53
|
+
height: 1,
|
|
54
|
+
fill: "herringbone"
|
|
55
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
56
|
+
x: 3,
|
|
57
|
+
y: 3,
|
|
58
|
+
width: 1,
|
|
59
|
+
height: 1,
|
|
60
|
+
fill: "herringbone"
|
|
61
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
62
|
+
y: 3,
|
|
63
|
+
width: 1,
|
|
64
|
+
height: 1,
|
|
65
|
+
fill: "herringbone"
|
|
66
|
+
})]
|
|
67
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
68
|
+
width: "100%",
|
|
69
|
+
height: "100%",
|
|
70
|
+
fill: `url(#${patternId})`
|
|
71
|
+
})]
|
|
72
|
+
});
|
|
73
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const RainDense = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Rain Dense',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('RainDense');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 4,
|
|
26
|
+
height: 4,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
x: 1,
|
|
34
|
+
y: 1,
|
|
35
|
+
width: 1,
|
|
36
|
+
height: 1,
|
|
37
|
+
fill: "currentColor"
|
|
38
|
+
})]
|
|
39
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
40
|
+
width: "100%",
|
|
41
|
+
height: "100%",
|
|
42
|
+
fill: `url(#${patternId})`
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
45
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const RainLoose = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Rain Loose',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('RainLoose');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 16,
|
|
26
|
+
height: 16,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
x: 1,
|
|
34
|
+
y: 1,
|
|
35
|
+
width: 1,
|
|
36
|
+
height: 1,
|
|
37
|
+
fill: "currentColor"
|
|
38
|
+
})]
|
|
39
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
40
|
+
width: "100%",
|
|
41
|
+
height: "100%",
|
|
42
|
+
fill: `url(#${patternId})`
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
45
|
+
});
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const RainRegular = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Rain Regular',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('RainRegular');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 8,
|
|
26
|
+
height: 8,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
width: 1,
|
|
30
|
+
height: 1,
|
|
31
|
+
fill: "currentColor"
|
|
32
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
33
|
+
x: 1,
|
|
34
|
+
y: 1,
|
|
35
|
+
width: 1,
|
|
36
|
+
height: 1,
|
|
37
|
+
fill: "currentColor"
|
|
38
|
+
})]
|
|
39
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
40
|
+
width: "100%",
|
|
41
|
+
height: "100%",
|
|
42
|
+
fill: `url(#${patternId})`
|
|
43
|
+
})]
|
|
44
|
+
});
|
|
45
|
+
});
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Svg } from '../props';
|
|
3
|
+
import { usePatternId } from '../usePatternId';
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
|
+
export const StripeDense = /*#__PURE__*/React.forwardRef(({
|
|
6
|
+
title = 'Stripe Dense',
|
|
7
|
+
titleId,
|
|
8
|
+
...props
|
|
9
|
+
}, svgRef) => {
|
|
10
|
+
const patternId = usePatternId('StripeDense');
|
|
11
|
+
return /*#__PURE__*/_jsxs(Svg, {
|
|
12
|
+
fill: "currentColor",
|
|
13
|
+
role: "img",
|
|
14
|
+
"aria-hidden": "true",
|
|
15
|
+
ref: svgRef,
|
|
16
|
+
"aria-labelledby": titleId,
|
|
17
|
+
...props,
|
|
18
|
+
children: [title ? /*#__PURE__*/_jsx("title", {
|
|
19
|
+
id: titleId,
|
|
20
|
+
children: title
|
|
21
|
+
}) : null, /*#__PURE__*/_jsxs("pattern", {
|
|
22
|
+
id: patternId,
|
|
23
|
+
x: 0,
|
|
24
|
+
y: 0,
|
|
25
|
+
width: 4,
|
|
26
|
+
height: 4,
|
|
27
|
+
patternUnits: "userSpaceOnUse",
|
|
28
|
+
children: [/*#__PURE__*/_jsx("rect", {
|
|
29
|
+
x: 1,
|
|
30
|
+
width: 1,
|
|
31
|
+
height: 1,
|
|
32
|
+
fill: "currentColor"
|
|
33
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
34
|
+
width: 1,
|
|
35
|
+
height: 1,
|
|
36
|
+
fill: "currentColor"
|
|
37
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
38
|
+
x: 2,
|
|
39
|
+
width: 1,
|
|
40
|
+
height: 1,
|
|
41
|
+
fill: "currentColor"
|
|
42
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
43
|
+
x: 3,
|
|
44
|
+
width: 1,
|
|
45
|
+
height: 1,
|
|
46
|
+
fill: "currentColor"
|
|
47
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
48
|
+
x: 1,
|
|
49
|
+
y: 2,
|
|
50
|
+
width: 1,
|
|
51
|
+
height: 1,
|
|
52
|
+
fill: "currentColor"
|
|
53
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
54
|
+
y: 2,
|
|
55
|
+
width: 1,
|
|
56
|
+
height: 1,
|
|
57
|
+
fill: "currentColor"
|
|
58
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
59
|
+
x: 2,
|
|
60
|
+
y: 2,
|
|
61
|
+
width: 1,
|
|
62
|
+
height: 1,
|
|
63
|
+
fill: "currentColor"
|
|
64
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
65
|
+
x: 3,
|
|
66
|
+
y: 2,
|
|
67
|
+
width: 1,
|
|
68
|
+
height: 1,
|
|
69
|
+
fill: "currentColor"
|
|
70
|
+
})]
|
|
71
|
+
}), /*#__PURE__*/_jsx("rect", {
|
|
72
|
+
width: "100%",
|
|
73
|
+
height: "100%",
|
|
74
|
+
fill: `url(#${patternId})`
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
77
|
+
});
|