promote-email-templates 0.1.6 → 0.1.8
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.mts +8 -1
- package/dist/index.d.ts +8 -1
- package/dist/index.js +27 -3
- package/dist/index.mjs +20 -0
- package/package.json +17 -14
- package/.react-email/.eslintrc.js +0 -52
- package/.react-email/.prettierignore +0 -3
- package/.react-email/.prettierrc.js +0 -8
- package/.react-email/license.md +0 -7
- package/.react-email/next.config.js +0 -36
- package/.react-email/package.json +0 -1
- package/.react-email/postcss.config.js +0 -8
- package/.react-email/readme.md +0 -44
- package/.react-email/src/actions/get-email-path-from-slug.ts +0 -26
- package/.react-email/src/actions/get-emails-directory-metadata.spec.ts +0 -73
- package/.react-email/src/actions/get-emails-directory-metadata.ts +0 -91
- package/.react-email/src/actions/render-email-by-path.tsx +0 -59
- package/.react-email/src/app/favicon.ico +0 -0
- package/.react-email/src/app/globals.css +0 -35
- package/.react-email/src/app/inter.ts +0 -7
- package/.react-email/src/app/layout.tsx +0 -36
- package/.react-email/src/app/logo.png +0 -0
- package/.react-email/src/app/page.tsx +0 -47
- package/.react-email/src/app/preview/[...slug]/page.tsx +0 -65
- package/.react-email/src/app/preview/[...slug]/preview.tsx +0 -141
- package/.react-email/src/app/preview/[...slug]/rendering-error.tsx +0 -40
- package/.react-email/src/components/button.tsx +0 -90
- package/.react-email/src/components/code-container.tsx +0 -145
- package/.react-email/src/components/code.tsx +0 -112
- package/.react-email/src/components/heading.tsx +0 -113
- package/.react-email/src/components/icons/icon-arrow-down.tsx +0 -16
- package/.react-email/src/components/icons/icon-base.tsx +0 -24
- package/.react-email/src/components/icons/icon-button.tsx +0 -23
- package/.react-email/src/components/icons/icon-check.tsx +0 -19
- package/.react-email/src/components/icons/icon-clipboard.tsx +0 -40
- package/.react-email/src/components/icons/icon-download.tsx +0 -19
- package/.react-email/src/components/icons/icon-file.tsx +0 -19
- package/.react-email/src/components/icons/icon-folder-open.tsx +0 -19
- package/.react-email/src/components/icons/icon-folder.tsx +0 -18
- package/.react-email/src/components/icons/icon-hide-sidebar.tsx +0 -23
- package/.react-email/src/components/icons/icon-monitor.tsx +0 -19
- package/.react-email/src/components/icons/icon-phone.tsx +0 -26
- package/.react-email/src/components/icons/icon-source.tsx +0 -19
- package/.react-email/src/components/index.ts +0 -7
- package/.react-email/src/components/logo.tsx +0 -64
- package/.react-email/src/components/send.tsx +0 -135
- package/.react-email/src/components/shell.tsx +0 -115
- package/.react-email/src/components/sidebar/index.ts +0 -1
- package/.react-email/src/components/sidebar/sidebar-directory-children.tsx +0 -134
- package/.react-email/src/components/sidebar/sidebar-directory.tsx +0 -106
- package/.react-email/src/components/sidebar/sidebar.tsx +0 -45
- package/.react-email/src/components/text.tsx +0 -99
- package/.react-email/src/components/tooltip-content.tsx +0 -32
- package/.react-email/src/components/tooltip.tsx +0 -19
- package/.react-email/src/components/topbar.tsx +0 -161
- package/.react-email/src/contexts/emails.tsx +0 -127
- package/.react-email/src/hooks/use-hot-reload.ts +0 -35
- package/.react-email/src/hooks/use-rendering-metadata.ts +0 -36
- package/.react-email/src/utils/cn.ts +0 -6
- package/.react-email/src/utils/constants.ts +0 -6
- package/.react-email/src/utils/copy-text-to-clipboard.ts +0 -7
- package/.react-email/src/utils/emails-directory-absolute-path.ts +0 -34
- package/.react-email/src/utils/get-email-component.ts +0 -108
- package/.react-email/src/utils/improve-error-with-sourcemap.ts +0 -55
- package/.react-email/src/utils/index.ts +0 -5
- package/.react-email/src/utils/language-map.ts +0 -7
- package/.react-email/src/utils/static-node-modules-for-vm.ts +0 -92
- package/.react-email/src/utils/types/as.ts +0 -26
- package/.react-email/src/utils/types/email-template.ts +0 -8
- package/.react-email/src/utils/types/error-object.ts +0 -11
- package/.react-email/src/utils/types/hot-reload-change.ts +0 -6
- package/.react-email/src/utils/types/hot-reload-event.ts +0 -6
- package/.react-email/src/utils/unreachable.ts +0 -8
- package/.react-email/tailwind.config.ts +0 -94
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
import { LayoutGroup, motion } from 'framer-motion';
|
|
2
|
-
import type { Language } from 'prism-react-renderer';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { copyTextToClipboard } from '../utils';
|
|
5
|
-
import languageMap from '../utils/language-map';
|
|
6
|
-
import { tabTransition } from '../utils/constants';
|
|
7
|
-
import { Code } from './code';
|
|
8
|
-
import { IconButton } from './icons/icon-button';
|
|
9
|
-
import { IconCheck } from './icons/icon-check';
|
|
10
|
-
import { IconClipboard } from './icons/icon-clipboard';
|
|
11
|
-
import { IconDownload } from './icons/icon-download';
|
|
12
|
-
import { Tooltip } from './tooltip';
|
|
13
|
-
|
|
14
|
-
interface CodeContainerProps {
|
|
15
|
-
markups: MarkupProps[];
|
|
16
|
-
activeLang: string;
|
|
17
|
-
setActiveLang: (lang: string) => void;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
interface MarkupProps {
|
|
21
|
-
language: Language;
|
|
22
|
-
content: string;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
|
|
26
|
-
markups,
|
|
27
|
-
activeLang,
|
|
28
|
-
setActiveLang,
|
|
29
|
-
}) => {
|
|
30
|
-
const [isCopied, setIsCopied] = React.useState(false);
|
|
31
|
-
|
|
32
|
-
const renderDownloadIcon = () => {
|
|
33
|
-
const value = markups.filter((markup) => markup.language === activeLang);
|
|
34
|
-
if (typeof value[0] === 'undefined') return;
|
|
35
|
-
const file = new File([value[0].content], `email.${value[0].language}`);
|
|
36
|
-
const url = URL.createObjectURL(file);
|
|
37
|
-
|
|
38
|
-
return (
|
|
39
|
-
<a
|
|
40
|
-
className="text-slate-11 transition ease-in-out duration-200 hover:text-slate-12"
|
|
41
|
-
download={file.name}
|
|
42
|
-
href={url}
|
|
43
|
-
>
|
|
44
|
-
<IconDownload />
|
|
45
|
-
</a>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
const renderClipboardIcon = () => {
|
|
50
|
-
const handleClipboard = async () => {
|
|
51
|
-
const activeContent = markups.filter(({ language }) => {
|
|
52
|
-
return activeLang === language;
|
|
53
|
-
});
|
|
54
|
-
setIsCopied(true);
|
|
55
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
56
|
-
await copyTextToClipboard(activeContent[0]!.content);
|
|
57
|
-
setTimeout(() => {
|
|
58
|
-
setIsCopied(false);
|
|
59
|
-
}, 3000);
|
|
60
|
-
};
|
|
61
|
-
|
|
62
|
-
return (
|
|
63
|
-
<IconButton onClick={() => void handleClipboard()}>
|
|
64
|
-
{isCopied ? <IconCheck /> : <IconClipboard />}
|
|
65
|
-
</IconButton>
|
|
66
|
-
);
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
React.useEffect(() => {
|
|
70
|
-
setIsCopied(false);
|
|
71
|
-
}, [activeLang]);
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<div
|
|
75
|
-
className="border-slate-6 relative w-full items-center whitespace-pre rounded-md border text-sm backdrop-blur-md"
|
|
76
|
-
style={{
|
|
77
|
-
lineHeight: '130%',
|
|
78
|
-
background:
|
|
79
|
-
'linear-gradient(145.37deg, rgba(255, 255, 255, 0.09) -8.75%, rgba(255, 255, 255, 0.027) 83.95%)',
|
|
80
|
-
boxShadow: 'rgb(0 0 0 / 10%) 0px 5px 30px -5px',
|
|
81
|
-
}}
|
|
82
|
-
>
|
|
83
|
-
<div className="h-9 border-b border-slate-6">
|
|
84
|
-
<div className="flex">
|
|
85
|
-
<LayoutGroup id="code">
|
|
86
|
-
{markups.map(({ language }) => {
|
|
87
|
-
const isCurrentLang = activeLang === language;
|
|
88
|
-
return (
|
|
89
|
-
<motion.button
|
|
90
|
-
className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 hover:text-slate-12 ${
|
|
91
|
-
activeLang !== language ? 'text-slate-11' : 'text-slate-12'
|
|
92
|
-
}`}
|
|
93
|
-
key={language}
|
|
94
|
-
onClick={() => {
|
|
95
|
-
setActiveLang(language);
|
|
96
|
-
}}
|
|
97
|
-
>
|
|
98
|
-
{isCurrentLang ? (
|
|
99
|
-
<motion.span
|
|
100
|
-
animate={{ opacity: 1 }}
|
|
101
|
-
className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
|
|
102
|
-
exit={{ opacity: 0 }}
|
|
103
|
-
initial={{ opacity: 0 }}
|
|
104
|
-
layoutId="code"
|
|
105
|
-
transition={tabTransition}
|
|
106
|
-
/>
|
|
107
|
-
) : null}
|
|
108
|
-
{languageMap[language]}
|
|
109
|
-
</motion.button>
|
|
110
|
-
);
|
|
111
|
-
})}
|
|
112
|
-
</LayoutGroup>
|
|
113
|
-
</div>
|
|
114
|
-
<Tooltip>
|
|
115
|
-
<Tooltip.Trigger
|
|
116
|
-
asChild
|
|
117
|
-
className="absolute top-2 right-2 hidden md:block"
|
|
118
|
-
>
|
|
119
|
-
{renderClipboardIcon()}
|
|
120
|
-
</Tooltip.Trigger>
|
|
121
|
-
<Tooltip.Content>Copy to Clipboard</Tooltip.Content>
|
|
122
|
-
</Tooltip>
|
|
123
|
-
<Tooltip>
|
|
124
|
-
<Tooltip.Trigger
|
|
125
|
-
asChild
|
|
126
|
-
className="text-gray-11 absolute top-2 right-8 hidden md:block"
|
|
127
|
-
>
|
|
128
|
-
{renderDownloadIcon()}
|
|
129
|
-
</Tooltip.Trigger>
|
|
130
|
-
<Tooltip.Content>Download</Tooltip.Content>
|
|
131
|
-
</Tooltip>
|
|
132
|
-
</div>
|
|
133
|
-
{markups.map(({ language, content }) => {
|
|
134
|
-
return (
|
|
135
|
-
<div
|
|
136
|
-
className={`${activeLang !== language && 'hidden'}`}
|
|
137
|
-
key={language}
|
|
138
|
-
>
|
|
139
|
-
<Code language={language}>{content}</Code>
|
|
140
|
-
</div>
|
|
141
|
-
);
|
|
142
|
-
})}
|
|
143
|
-
</div>
|
|
144
|
-
);
|
|
145
|
-
};
|
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
import type { Language } from 'prism-react-renderer';
|
|
2
|
-
import { Highlight } from 'prism-react-renderer';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { cn } from '../utils';
|
|
5
|
-
|
|
6
|
-
interface CodeProps {
|
|
7
|
-
children: string;
|
|
8
|
-
className?: string;
|
|
9
|
-
language?: Language;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const theme = {
|
|
13
|
-
plain: {
|
|
14
|
-
color: '#EDEDEF',
|
|
15
|
-
fontSize: 13,
|
|
16
|
-
fontFamily: 'MonoLisa, Menlo, monospace',
|
|
17
|
-
},
|
|
18
|
-
styles: [
|
|
19
|
-
{
|
|
20
|
-
types: ['comment'],
|
|
21
|
-
style: {
|
|
22
|
-
color: '#706F78',
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
types: ['atrule', 'keyword', 'attr-name', 'selector'],
|
|
27
|
-
style: {
|
|
28
|
-
color: '#7E7D86',
|
|
29
|
-
},
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
types: ['punctuation', 'operator'],
|
|
33
|
-
style: {
|
|
34
|
-
color: '#706F78',
|
|
35
|
-
},
|
|
36
|
-
},
|
|
37
|
-
{
|
|
38
|
-
types: ['class-name', 'function', 'tag', 'key-white'],
|
|
39
|
-
style: {
|
|
40
|
-
color: '#EDEDEF',
|
|
41
|
-
},
|
|
42
|
-
},
|
|
43
|
-
],
|
|
44
|
-
};
|
|
45
|
-
|
|
46
|
-
export const Code: React.FC<Readonly<CodeProps>> = ({
|
|
47
|
-
children,
|
|
48
|
-
language = 'html',
|
|
49
|
-
}) => {
|
|
50
|
-
const value = children.trim();
|
|
51
|
-
|
|
52
|
-
return (
|
|
53
|
-
<Highlight code={value} language={language} theme={theme}>
|
|
54
|
-
{({ tokens, getLineProps, getTokenProps }) => (
|
|
55
|
-
<>
|
|
56
|
-
<div
|
|
57
|
-
className="absolute right-0 top-0 h-px w-[200px]"
|
|
58
|
-
style={{
|
|
59
|
-
background:
|
|
60
|
-
'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
|
|
61
|
-
}}
|
|
62
|
-
/>
|
|
63
|
-
<pre className="p-4 h-[650px] overflow-auto">
|
|
64
|
-
{tokens.map((line, i) => {
|
|
65
|
-
const lineProps = getLineProps({
|
|
66
|
-
line,
|
|
67
|
-
key: i,
|
|
68
|
-
});
|
|
69
|
-
return (
|
|
70
|
-
<div
|
|
71
|
-
key={i}
|
|
72
|
-
{...lineProps}
|
|
73
|
-
className={cn('whitespace-pre', {
|
|
74
|
-
"before:text-slate-11 before:mr-2 before:content-['$']":
|
|
75
|
-
language === 'bash' && tokens.length === 1,
|
|
76
|
-
})}
|
|
77
|
-
>
|
|
78
|
-
{line.map((token, key) => {
|
|
79
|
-
const tokenProps = getTokenProps({
|
|
80
|
-
token,
|
|
81
|
-
key,
|
|
82
|
-
});
|
|
83
|
-
const isException =
|
|
84
|
-
token.content === 'from' &&
|
|
85
|
-
line[key + 1]?.content === ':';
|
|
86
|
-
const newTypes = isException
|
|
87
|
-
? [...token.types, 'key-white']
|
|
88
|
-
: token.types;
|
|
89
|
-
token.types = newTypes;
|
|
90
|
-
|
|
91
|
-
return (
|
|
92
|
-
<React.Fragment key={key}>
|
|
93
|
-
<span {...tokenProps} />
|
|
94
|
-
</React.Fragment>
|
|
95
|
-
);
|
|
96
|
-
})}
|
|
97
|
-
</div>
|
|
98
|
-
);
|
|
99
|
-
})}
|
|
100
|
-
</pre>
|
|
101
|
-
<div
|
|
102
|
-
className="absolute left-0 bottom-0 h-px w-[200px]"
|
|
103
|
-
style={{
|
|
104
|
-
background:
|
|
105
|
-
'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
|
|
106
|
-
}}
|
|
107
|
-
/>
|
|
108
|
-
</>
|
|
109
|
-
)}
|
|
110
|
-
</Highlight>
|
|
111
|
-
);
|
|
112
|
-
};
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
import * as SlotPrimitive from '@radix-ui/react-slot';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { type As, unreachable, cn } from '../utils';
|
|
4
|
-
|
|
5
|
-
export type HeadingSize =
|
|
6
|
-
| '1'
|
|
7
|
-
| '2'
|
|
8
|
-
| '3'
|
|
9
|
-
| '4'
|
|
10
|
-
| '5'
|
|
11
|
-
| '6'
|
|
12
|
-
| '7'
|
|
13
|
-
| '8'
|
|
14
|
-
| '9'
|
|
15
|
-
| '10';
|
|
16
|
-
export type HeadingColor = 'white' | 'gray';
|
|
17
|
-
export type HeadingWeight = 'medium' | 'bold';
|
|
18
|
-
|
|
19
|
-
interface HeadingOwnProps {
|
|
20
|
-
size?: HeadingSize;
|
|
21
|
-
color?: HeadingColor;
|
|
22
|
-
weight?: HeadingWeight;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
type HeadingProps = As<'h1', 'h2', 'h3', 'h4', 'h5', 'h6'> & HeadingOwnProps;
|
|
26
|
-
|
|
27
|
-
export const Heading = React.forwardRef<
|
|
28
|
-
HTMLHeadingElement,
|
|
29
|
-
Readonly<HeadingProps>
|
|
30
|
-
>(
|
|
31
|
-
(
|
|
32
|
-
{
|
|
33
|
-
as: Tag = 'h1',
|
|
34
|
-
size = '3',
|
|
35
|
-
className,
|
|
36
|
-
color = 'white',
|
|
37
|
-
children,
|
|
38
|
-
weight = 'bold',
|
|
39
|
-
...props
|
|
40
|
-
},
|
|
41
|
-
forwardedRef,
|
|
42
|
-
) => (
|
|
43
|
-
<SlotPrimitive.Slot
|
|
44
|
-
className={cn(
|
|
45
|
-
className,
|
|
46
|
-
getSizesClassNames(size),
|
|
47
|
-
getColorClassNames(color),
|
|
48
|
-
getWeightClassNames(weight),
|
|
49
|
-
)}
|
|
50
|
-
ref={forwardedRef}
|
|
51
|
-
{...props}
|
|
52
|
-
>
|
|
53
|
-
<Tag>{children}</Tag>
|
|
54
|
-
</SlotPrimitive.Slot>
|
|
55
|
-
),
|
|
56
|
-
);
|
|
57
|
-
|
|
58
|
-
const getSizesClassNames = (size: HeadingSize | undefined) => {
|
|
59
|
-
switch (size) {
|
|
60
|
-
case '1':
|
|
61
|
-
return 'text-xs';
|
|
62
|
-
case '2':
|
|
63
|
-
return 'text-sm';
|
|
64
|
-
case undefined:
|
|
65
|
-
case '3':
|
|
66
|
-
return 'text-base';
|
|
67
|
-
case '4':
|
|
68
|
-
return 'text-lg';
|
|
69
|
-
case '5':
|
|
70
|
-
return 'text-xl tracking-[-0.16px]';
|
|
71
|
-
case '6':
|
|
72
|
-
return 'text-2xl tracking-[-0.288px]';
|
|
73
|
-
case '7':
|
|
74
|
-
return 'text-[28px] leading-[34px] tracking-[-0.416px]';
|
|
75
|
-
case '8':
|
|
76
|
-
return 'text-[35px] leading-[42px] tracking-[-0.64px]';
|
|
77
|
-
case '9':
|
|
78
|
-
return 'text-6xl leading-[73px] tracking-[-0.896px]';
|
|
79
|
-
case '10':
|
|
80
|
-
return [
|
|
81
|
-
'text-[38px] leading-[46px]',
|
|
82
|
-
'md:text-[70px] md:leading-[85px] tracking-[-1.024px;]',
|
|
83
|
-
];
|
|
84
|
-
default:
|
|
85
|
-
return unreachable(size);
|
|
86
|
-
}
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
const getColorClassNames = (color: HeadingColor | undefined) => {
|
|
90
|
-
switch (color) {
|
|
91
|
-
case 'gray':
|
|
92
|
-
return 'text-slate-11';
|
|
93
|
-
case 'white':
|
|
94
|
-
case undefined:
|
|
95
|
-
return 'text-slate-12';
|
|
96
|
-
default:
|
|
97
|
-
return unreachable(color);
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
const getWeightClassNames = (weight: HeadingWeight | undefined) => {
|
|
102
|
-
switch (weight) {
|
|
103
|
-
case 'medium':
|
|
104
|
-
return 'font-medium';
|
|
105
|
-
case 'bold':
|
|
106
|
-
case undefined:
|
|
107
|
-
return 'font-bold';
|
|
108
|
-
default:
|
|
109
|
-
return unreachable(weight);
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
Heading.displayName = 'Heading';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconArrowDown = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M12 16L6 9.85966L6.84 9L12 14.2808L17.16 9L18 9.85966L12 16Z"
|
|
10
|
-
fill="currentColor"
|
|
11
|
-
/>
|
|
12
|
-
</IconBase>
|
|
13
|
-
),
|
|
14
|
-
);
|
|
15
|
-
|
|
16
|
-
IconArrowDown.displayName = 'IconArrowDown';
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
export type IconElement = React.ElementRef<'svg'>;
|
|
4
|
-
export type RootProps = React.ComponentPropsWithoutRef<'svg'>;
|
|
5
|
-
|
|
6
|
-
export interface IconProps extends RootProps {
|
|
7
|
-
size?: number;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
export const IconBase = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
11
|
-
({ size = 20, ...props }, forwardedRef) => (
|
|
12
|
-
<svg
|
|
13
|
-
fill="none"
|
|
14
|
-
height={size}
|
|
15
|
-
ref={forwardedRef}
|
|
16
|
-
viewBox="0 0 24 24"
|
|
17
|
-
width={size}
|
|
18
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
-
{...props}
|
|
20
|
-
/>
|
|
21
|
-
),
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
IconBase.displayName = 'IconBase';
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { cn } from '../../utils';
|
|
3
|
-
|
|
4
|
-
export type IconButtonProps = React.ComponentPropsWithoutRef<'button'>;
|
|
5
|
-
|
|
6
|
-
export const IconButton = React.forwardRef<
|
|
7
|
-
HTMLButtonElement,
|
|
8
|
-
Readonly<IconButtonProps>
|
|
9
|
-
>(({ children, className, ...props }, forwardedRef) => (
|
|
10
|
-
<button
|
|
11
|
-
type="button"
|
|
12
|
-
{...props}
|
|
13
|
-
className={cn(
|
|
14
|
-
'rounded text-slate-11 focus:text-slate-12 ease-in-out transition duration-200 focus:outline-none focus:ring-2 focus:ring-gray-8 hover:text-slate-12',
|
|
15
|
-
className,
|
|
16
|
-
)}
|
|
17
|
-
ref={forwardedRef}
|
|
18
|
-
>
|
|
19
|
-
{children}
|
|
20
|
-
</button>
|
|
21
|
-
));
|
|
22
|
-
|
|
23
|
-
IconButton.displayName = 'IconButton';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconCheck = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M16.25 8.75L10.406 15.25L7.75 12.75"
|
|
10
|
-
stroke="currentColor"
|
|
11
|
-
strokeLinecap="round"
|
|
12
|
-
strokeLinejoin="round"
|
|
13
|
-
strokeWidth="1.5"
|
|
14
|
-
/>
|
|
15
|
-
</IconBase>
|
|
16
|
-
),
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
IconCheck.displayName = 'IconCheck';
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconClipboard = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M9 6.75H7.75C6.64543 6.75 5.75 7.64543 5.75 8.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V8.75C18.25 7.64543 17.3546 6.75 16.25 6.75H15"
|
|
10
|
-
stroke="currentColor"
|
|
11
|
-
strokeLinecap="round"
|
|
12
|
-
strokeLinejoin="round"
|
|
13
|
-
strokeWidth="1.5"
|
|
14
|
-
/>
|
|
15
|
-
<path
|
|
16
|
-
d="M14 8.25H10C9.44772 8.25 9 7.80228 9 7.25V5.75C9 5.19772 9.44772 4.75 10 4.75H14C14.5523 4.75 15 5.19772 15 5.75V7.25C15 7.80228 14.5523 8.25 14 8.25Z"
|
|
17
|
-
stroke="currentColor"
|
|
18
|
-
strokeLinecap="round"
|
|
19
|
-
strokeLinejoin="round"
|
|
20
|
-
strokeWidth="1.5"
|
|
21
|
-
/>
|
|
22
|
-
<path
|
|
23
|
-
d="M9.75 12.25H14.25"
|
|
24
|
-
stroke="currentColor"
|
|
25
|
-
strokeLinecap="round"
|
|
26
|
-
strokeLinejoin="round"
|
|
27
|
-
strokeWidth="1.5"
|
|
28
|
-
/>
|
|
29
|
-
<path
|
|
30
|
-
d="M9.75 15.25H14.25"
|
|
31
|
-
stroke="currentColor"
|
|
32
|
-
strokeLinecap="round"
|
|
33
|
-
strokeLinejoin="round"
|
|
34
|
-
strokeWidth="1.5"
|
|
35
|
-
/>
|
|
36
|
-
</IconBase>
|
|
37
|
-
),
|
|
38
|
-
);
|
|
39
|
-
|
|
40
|
-
IconClipboard.displayName = 'IconClipboard';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconDownload = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M4.75 14.75v1.5a3 3 0 0 0 3 3h8.5a3 3 0 0 0 3-3v-1.5M12 14.25v-9.5M8.75 10.75l3.25 3.5 3.25-3.5"
|
|
10
|
-
stroke="currentColor"
|
|
11
|
-
strokeLinecap="round"
|
|
12
|
-
strokeLinejoin="round"
|
|
13
|
-
strokeWidth={1.5}
|
|
14
|
-
/>
|
|
15
|
-
</IconBase>
|
|
16
|
-
),
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
IconDownload.displayName = 'IconDownload';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconFile = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
clipRule="evenodd"
|
|
10
|
-
d="M7.75 4C6.23122 4 5 5.23122 5 6.75V17.25C5 18.7688 6.23122 20 7.75 20H16.25C17.7688 20 19 18.7688 19 17.25V9C19 8.80109 18.921 8.61032 18.7803 8.46967L14.5303 4.21967C14.3897 4.07902 14.1989 4 14 4H7.75ZM6.5 6.75C6.5 6.05964 7.05964 5.5 7.75 5.5H13V9.25C13 9.66421 13.3358 10 13.75 10H17.5V17.25C17.5 17.9404 16.9404 18.5 16.25 18.5H7.75C7.05964 18.5 6.5 17.9404 6.5 17.25V6.75ZM16.6893 8.5L14.5 6.31066V8.5H16.6893Z"
|
|
11
|
-
fill="currentColor"
|
|
12
|
-
fillOpacity="0.927"
|
|
13
|
-
fillRule="evenodd"
|
|
14
|
-
/>
|
|
15
|
-
</IconBase>
|
|
16
|
-
),
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
IconFile.displayName = 'IconFile';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconFolderOpen = React.forwardRef<
|
|
6
|
-
IconElement,
|
|
7
|
-
Readonly<IconProps>
|
|
8
|
-
>(({ ...props }, forwardedRef) => (
|
|
9
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
10
|
-
<path
|
|
11
|
-
clipRule="evenodd"
|
|
12
|
-
d="M6.75 4C5.23122 4 4 5.23122 4 6.75V17.25V17.5C4 17.5933 4.01702 17.6825 4.04812 17.7649C4.28918 19.0376 5.4072 20 6.75 20H17.25C17.9905 20 18.6283 19.7404 19.111 19.2387C19.5681 18.7636 19.836 18.1241 19.9792 17.4279L21.4711 12.206C21.4903 12.139 21.5 12.0697 21.5 12C21.5 10.652 20.5301 9.53047 19.25 9.29534V8.5C19.25 7.5335 18.4665 6.75 17.5 6.75H13.9452L13.227 5.43322C12.7451 4.54965 11.819 4 10.8127 4H6.75ZM17.75 9.25V8.5C17.75 8.36193 17.6381 8.25 17.5 8.25H13.5C13.2255 8.25 12.973 8.10009 12.8416 7.85915L11.9101 6.15145L11.91 6.15138C11.6911 5.74989 11.2702 5.5 10.8127 5.5H6.75C6.05964 5.5 5.5 6.05964 5.5 6.75V13.158L6.79875 9.73401C6.90926 9.44267 7.1884 9.25 7.5 9.25H17.75ZM5.50587 17.372L8.01766 10.75H18.5H18.75C19.4091 10.75 19.949 11.26 19.9966 11.9069L18.5289 17.044C18.5233 17.0634 18.5185 17.0831 18.5146 17.1029C18.4062 17.6448 18.2275 17.9934 18.03 18.1988C17.8513 18.3846 17.6141 18.5 17.25 18.5H6.75C6.10079 18.5 5.56718 18.0051 5.50587 17.372Z"
|
|
13
|
-
fill="currentColor"
|
|
14
|
-
fillRule="evenodd"
|
|
15
|
-
/>
|
|
16
|
-
</IconBase>
|
|
17
|
-
));
|
|
18
|
-
|
|
19
|
-
IconFolderOpen.displayName = 'IconFolderOpen';
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconFolder = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
clipRule="evenodd"
|
|
10
|
-
d="M6.75 4C5.23122 4 4 5.23122 4 6.75V7.75V8V17.25C4 18.7688 5.23122 20 6.75 20H17.25C18.7688 20 20 18.7688 20 17.25V9.75C20 8.23122 18.7688 7 17.25 7H14.0816L13.227 5.43322C12.7451 4.54965 11.819 4 10.8127 4H6.75ZM12.3729 7L11.9101 6.15145L11.91 6.15138C11.6911 5.74989 11.2702 5.5 10.8127 5.5H6.75C6.05964 5.5 5.5 6.05964 5.5 6.75V7H12.3729ZM5.5 17.25V8.5H17.25C17.9404 8.5 18.5 9.05964 18.5 9.75V17.25C18.5 17.9404 17.9404 18.5 17.25 18.5H6.75C6.05964 18.5 5.5 17.9404 5.5 17.25Z"
|
|
11
|
-
fill="currentColor"
|
|
12
|
-
fillRule="evenodd"
|
|
13
|
-
/>
|
|
14
|
-
</IconBase>
|
|
15
|
-
),
|
|
16
|
-
);
|
|
17
|
-
|
|
18
|
-
IconFolder.displayName = 'IconFolder';
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconHideSidebar = React.forwardRef<
|
|
6
|
-
IconElement,
|
|
7
|
-
Readonly<IconProps>
|
|
8
|
-
>(({ ...props }, forwardedRef) => (
|
|
9
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
10
|
-
<path
|
|
11
|
-
d="M15.4697 15.5303C15.7626 15.8232 16.2374 15.8232 16.5303 15.5303C16.8232 15.2374 16.8232 14.7626 16.5303 14.4697L14.0607 12L16.5303 9.53033C16.8232 9.23744 16.8232 8.76256 16.5303 8.46967C16.2374 8.17678 15.7626 8.17678 15.4697 8.46967L12.4697 11.4697C12.1768 11.7626 12.1768 12.2374 12.4697 12.5303L15.4697 15.5303Z"
|
|
12
|
-
fill="currentColor"
|
|
13
|
-
/>
|
|
14
|
-
<path
|
|
15
|
-
clipRule="evenodd"
|
|
16
|
-
d="M19 2.25H5C3.48122 2.25 2.25 3.48122 2.25 5V19C2.25 20.5188 3.48122 21.75 5 21.75L19 21.75C20.5188 21.75 21.75 20.5188 21.75 19L21.75 5C21.75 3.48122 20.5188 2.25 19 2.25ZM19 20.25C19.6904 20.25 20.25 19.6904 20.25 19L20.25 5C20.25 4.30964 19.6904 3.75 19 3.75L9.75 3.75L9.75 20.25L19 20.25ZM8.25 20.25L8.25 3.75L5 3.75C4.30965 3.75 3.75 4.30965 3.75 5L3.75 19C3.75 19.6904 4.30965 20.25 5 20.25H8.25Z"
|
|
17
|
-
fill="currentColor"
|
|
18
|
-
fillRule="evenodd"
|
|
19
|
-
/>
|
|
20
|
-
</IconBase>
|
|
21
|
-
));
|
|
22
|
-
|
|
23
|
-
IconHideSidebar.displayName = 'IconHideSidebar';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconMonitor = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M9.75 15.25H17.25C18.3546 15.25 19.25 14.3546 19.25 13.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V13.25C4.75 14.3546 5.64543 15.25 6.75 15.25H9.75ZM9.75 15.25C9.75 15.25 10 18.25 8 19.25H16C14 18.25 14.25 15.25 14.25 15.25"
|
|
10
|
-
stroke="currentColor"
|
|
11
|
-
strokeLinecap="round"
|
|
12
|
-
strokeLinejoin="round"
|
|
13
|
-
strokeWidth="1.5"
|
|
14
|
-
/>
|
|
15
|
-
</IconBase>
|
|
16
|
-
),
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
IconMonitor.displayName = 'IconMonitor';
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconPhone = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M6.75 6.75C6.75 5.64543 7.64543 4.75 8.75 4.75H15.25C16.3546 4.75 17.25 5.64543 17.25 6.75V17.25C17.25 18.3546 16.3546 19.25 15.25 19.25H8.75C7.64543 19.25 6.75 18.3546 6.75 17.25V6.75Z"
|
|
10
|
-
stroke="currentColor"
|
|
11
|
-
strokeLinecap="round"
|
|
12
|
-
strokeLinejoin="round"
|
|
13
|
-
strokeWidth="1.5"
|
|
14
|
-
/>
|
|
15
|
-
<path
|
|
16
|
-
d="M12.25 16.75H11.75"
|
|
17
|
-
stroke="currentColor"
|
|
18
|
-
strokeLinecap="round"
|
|
19
|
-
strokeLinejoin="round"
|
|
20
|
-
strokeWidth="1.5"
|
|
21
|
-
/>
|
|
22
|
-
</IconBase>
|
|
23
|
-
),
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
IconPhone.displayName = 'IconPhone';
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import type { IconElement, IconProps } from './icon-base';
|
|
3
|
-
import { IconBase } from './icon-base';
|
|
4
|
-
|
|
5
|
-
export const IconSource = React.forwardRef<IconElement, Readonly<IconProps>>(
|
|
6
|
-
({ ...props }, forwardedRef) => (
|
|
7
|
-
<IconBase ref={forwardedRef} {...props}>
|
|
8
|
-
<path
|
|
9
|
-
d="M17.4 15L21 11.5L17.4 8M6.6 8L3 11.5L6.6 15M14.25 4.5L9.75 18.5"
|
|
10
|
-
stroke="currentColor"
|
|
11
|
-
strokeLinecap="round"
|
|
12
|
-
strokeLinejoin="round"
|
|
13
|
-
strokeWidth="1.5"
|
|
14
|
-
/>
|
|
15
|
-
</IconBase>
|
|
16
|
-
),
|
|
17
|
-
);
|
|
18
|
-
|
|
19
|
-
IconSource.displayName = 'IconSource';
|