@softwareone/spi-sv5-library 0.0.1
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/README.md +58 -0
- package/dist/Button/Button.svelte +169 -0
- package/dist/Button/Button.svelte.d.ts +9 -0
- package/dist/Modal/Modal.svelte +50 -0
- package/dist/Modal/Modal.svelte.d.ts +10 -0
- package/dist/Modal/ModalContent.svelte +92 -0
- package/dist/Modal/ModalContent.svelte.d.ts +7 -0
- package/dist/Modal/ModalFooter.svelte +71 -0
- package/dist/Modal/ModalFooter.svelte.d.ts +6 -0
- package/dist/Modal/ModalHeader.svelte +43 -0
- package/dist/Modal/ModalHeader.svelte.d.ts +5 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +4 -0
- package/package.json +62 -0
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# create-svelte
|
|
2
|
+
|
|
3
|
+
Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
|
4
|
+
|
|
5
|
+
Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
|
|
6
|
+
|
|
7
|
+
## Creating a project
|
|
8
|
+
|
|
9
|
+
If you're seeing this, you've probably already done this step. Congrats!
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
# create a new project in the current directory
|
|
13
|
+
npx sv create
|
|
14
|
+
|
|
15
|
+
# create a new project in my-app
|
|
16
|
+
npx sv create my-app
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Developing
|
|
20
|
+
|
|
21
|
+
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run dev
|
|
25
|
+
|
|
26
|
+
# or start the server and open the app in a new browser tab
|
|
27
|
+
npm run dev -- --open
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
|
|
31
|
+
|
|
32
|
+
## Building
|
|
33
|
+
|
|
34
|
+
To build your library:
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm run package
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
To create a production version of your showcase app:
|
|
41
|
+
|
|
42
|
+
```bash
|
|
43
|
+
npm run build
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
You can preview the production build with `npm run preview`.
|
|
47
|
+
|
|
48
|
+
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
|
49
|
+
|
|
50
|
+
## Publishing
|
|
51
|
+
|
|
52
|
+
Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
|
|
53
|
+
|
|
54
|
+
To publish your library to [npm](https://www.npmjs.com):
|
|
55
|
+
|
|
56
|
+
```bash
|
|
57
|
+
npm publish
|
|
58
|
+
```
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
interface ButtonProps {
|
|
3
|
+
type?: 'primary' | 'secondary' | 'outline'
|
|
4
|
+
variant?: 'primary' | 'danger';
|
|
5
|
+
disabled?: boolean
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
let { type, variant, disabled, onClick }: ButtonProps = $props();
|
|
10
|
+
|
|
11
|
+
type = type || 'primary';
|
|
12
|
+
variant = variant || 'primary';
|
|
13
|
+
disabled = disabled || false;
|
|
14
|
+
|
|
15
|
+
let className = `btn-${type}-${variant}`;
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<button class={className} disabled={disabled} onclick={onClick}>Button</button>
|
|
19
|
+
|
|
20
|
+
<style>
|
|
21
|
+
.btn-primary-primary,
|
|
22
|
+
.btn-secondary-primary,
|
|
23
|
+
.btn-outline-primary,
|
|
24
|
+
.btn-primary-danger,
|
|
25
|
+
.btn-secondary-danger,
|
|
26
|
+
.btn-outline-danger {
|
|
27
|
+
display: inline-flex;
|
|
28
|
+
padding: 8px 16px;
|
|
29
|
+
align-items: flex-start;
|
|
30
|
+
gap: 8px;
|
|
31
|
+
border-radius: 8px;
|
|
32
|
+
border: none;
|
|
33
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
34
|
+
font-size: 14px;
|
|
35
|
+
font-style: normal;
|
|
36
|
+
font-weight: 400;
|
|
37
|
+
line-height: 20px; /* 142.857% */
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.btn-primary-primary {
|
|
41
|
+
background: var(--brand-primary, #472aff);
|
|
42
|
+
color: var(--brand-white, #fff);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.btn-primary-primary:hover,
|
|
46
|
+
.btn-primary-primary:focus {
|
|
47
|
+
background: var(--brand-primary, #3520bf);
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.btn-primary-primary:focus {
|
|
52
|
+
box-shadow: 0px 0px 0px 3px #959bff;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.btn-primary-primary:disabled {
|
|
56
|
+
background: var(--brand-primary, #e0e5e8);
|
|
57
|
+
color: var(--brand-white, #6b7180);
|
|
58
|
+
cursor: not-allowed;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.btn-secondary-primary {
|
|
62
|
+
background: var(--brand-primary, #eaecff);
|
|
63
|
+
color: var(--brand-white, #472aff);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.btn-secondary-primary:hover,
|
|
67
|
+
.btn-secondary-primary:focus {
|
|
68
|
+
background: var(--brand-primary, #472aff);
|
|
69
|
+
color: var(--brand-white, #fff);
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.btn-secondary-primary:focus {
|
|
74
|
+
box-shadow: 0px 0px 0px 3px #959bff;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.btn-secondary-primary:disabled {
|
|
78
|
+
background: var(--brand-primary, #e0e5e8);
|
|
79
|
+
color: var(--brand-white, #6b7180);
|
|
80
|
+
cursor: not-allowed;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.btn-outline-primary {
|
|
84
|
+
border: 1px solid var(--brand-primary, #472aff);
|
|
85
|
+
background: var(--brand-primary, #fff);
|
|
86
|
+
color: var(--brand-primary, #472aff);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.btn-outline-primary:hover,
|
|
90
|
+
.btn-outline-primary:focus {
|
|
91
|
+
background: var(--brand-primary, #eaecff);
|
|
92
|
+
cursor: pointer;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.btn-outline-primary:focus {
|
|
96
|
+
box-shadow: 0px 0px 0px 3px #959bff;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.btn-outline-primary:disabled {
|
|
100
|
+
background: var(--brand-primary, #e0e5e8);
|
|
101
|
+
color: var(--brand-white, #6b7180);
|
|
102
|
+
cursor: not-allowed;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.btn-primary-danger {
|
|
106
|
+
background: var(--brand-primary, #DC182C);
|
|
107
|
+
color: var(--brand-white, #fff);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.btn-primary-danger:hover,
|
|
111
|
+
.btn-primary-danger:focus {
|
|
112
|
+
background: var(--brand-primary, #BB1425);
|
|
113
|
+
cursor: pointer;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.btn-primary-danger:focus {
|
|
117
|
+
box-shadow: 0px 0px 0px 3px #959bff;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
.btn-primary-danger:disabled {
|
|
121
|
+
background: var(--brand-primary, #e0e5e8);
|
|
122
|
+
color: var(--brand-white, #6b7180);
|
|
123
|
+
cursor: not-allowed;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.btn-secondary-danger {
|
|
127
|
+
background: var(--brand-primary, #FCE8EA);
|
|
128
|
+
color: var(--brand-white, #DC182C);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.btn-secondary-danger:hover,
|
|
132
|
+
.btn-secondary-danger:focus {
|
|
133
|
+
background: var(--brand-primary, #DC182C);
|
|
134
|
+
color: var(--brand-white, #fff);
|
|
135
|
+
cursor: pointer;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.btn-secondary-danger:focus {
|
|
139
|
+
box-shadow: 0px 0px 0px 3px #959bff;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.btn-secondary-danger:disabled {
|
|
143
|
+
background: var(--brand-primary, #e0e5e8);
|
|
144
|
+
color: var(--brand-white, #6b7180);
|
|
145
|
+
cursor: not-allowed;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
.btn-outline-danger {
|
|
149
|
+
border: 1px solid var(--brand-primary, #DC182C);
|
|
150
|
+
background: var(--brand-primary, #fff);
|
|
151
|
+
color: var(--brand-primary, #DC182C);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.btn-outline-danger:hover,
|
|
155
|
+
.btn-outline-danger:focus {
|
|
156
|
+
background: var(--brand-primary, #FCE8EA);
|
|
157
|
+
cursor: pointer;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.btn-outline-danger:focus {
|
|
161
|
+
box-shadow: 0px 0px 0px 3px #959bff;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.btn-outline-danger:disabled {
|
|
165
|
+
background: var(--brand-primary, #e0e5e8);
|
|
166
|
+
color: var(--brand-white, #6b7180);
|
|
167
|
+
cursor: not-allowed;
|
|
168
|
+
}
|
|
169
|
+
</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
interface ButtonProps {
|
|
2
|
+
type?: 'primary' | 'secondary' | 'outline';
|
|
3
|
+
variant?: 'primary' | 'danger';
|
|
4
|
+
disabled?: boolean;
|
|
5
|
+
onClick?: () => void;
|
|
6
|
+
}
|
|
7
|
+
declare const Button: import("svelte").Component<ButtonProps, {}, "">;
|
|
8
|
+
type Button = ReturnType<typeof Button>;
|
|
9
|
+
export default Button;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import ModalContent from './ModalContent.svelte';
|
|
3
|
+
import ModalFooter from './ModalFooter.svelte';
|
|
4
|
+
import ModalHeader from './ModalHeader.svelte';
|
|
5
|
+
|
|
6
|
+
let { headerTitle, contentTitle, contentMessage, contentCodeMessage, cancelButton, okButton } =
|
|
7
|
+
$props();
|
|
8
|
+
|
|
9
|
+
headerTitle = headerTitle || 'Modal title';
|
|
10
|
+
contentTitle = contentTitle || 'Error title';
|
|
11
|
+
contentMessage =
|
|
12
|
+
contentMessage ||
|
|
13
|
+
'The text displayed here serves as a placeholder for the error modal content.';
|
|
14
|
+
contentCodeMessage =
|
|
15
|
+
contentCodeMessage ||
|
|
16
|
+
`Placeholder error code:# Handle specific error: invalid value error_message = f"Error: Invalid value - {ve}" return {'error': error_message, 'error_code': 400}`;
|
|
17
|
+
cancelButton =
|
|
18
|
+
cancelButton ||
|
|
19
|
+
function () {
|
|
20
|
+
console.log('cancelButton');
|
|
21
|
+
};
|
|
22
|
+
okButton =
|
|
23
|
+
okButton ||
|
|
24
|
+
function () {
|
|
25
|
+
console.log('okButton');
|
|
26
|
+
};
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div class="modal">
|
|
30
|
+
<ModalHeader {headerTitle} />
|
|
31
|
+
<ModalContent {contentTitle} {contentMessage} {contentCodeMessage} />
|
|
32
|
+
<ModalFooter {cancelButton} {okButton} />
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<style>
|
|
36
|
+
.modal {
|
|
37
|
+
display: inline-flex;
|
|
38
|
+
min-width: 500px;
|
|
39
|
+
min-height: 250px;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
align-items: flex-start;
|
|
42
|
+
border-radius: var(--Card-radius, 16px);
|
|
43
|
+
background: var(--brand-white, #fff);
|
|
44
|
+
/* shadow/card-hover */
|
|
45
|
+
box-shadow:
|
|
46
|
+
0px 1px 10px 0px rgba(51, 56, 64, 0.12),
|
|
47
|
+
0px 2px 4px -1px rgba(51, 56, 64, 0.2),
|
|
48
|
+
0px 4px 5px 0px rgba(51, 56, 64, 0.14);
|
|
49
|
+
}
|
|
50
|
+
</style>
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Copy, Check } from 'lucide-svelte'
|
|
3
|
+
|
|
4
|
+
let { contentTitle, contentMessage, contentCodeMessage } = $props();
|
|
5
|
+
|
|
6
|
+
let copyCodeContent = $state(contentCodeMessage);
|
|
7
|
+
let copyCodeState = $state(false);
|
|
8
|
+
|
|
9
|
+
function copyCode() {
|
|
10
|
+
navigator.clipboard.writeText(copyCodeContent);
|
|
11
|
+
copyCodeState = true;
|
|
12
|
+
}
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<div class="modal-content">
|
|
16
|
+
<div class="modal-content-title">{contentTitle}</div>
|
|
17
|
+
<div class="modal-content-message">{contentMessage}</div>
|
|
18
|
+
<div class="modal-content-code-content">
|
|
19
|
+
<div class="modal-content-code-content-message">
|
|
20
|
+
{contentCodeMessage}
|
|
21
|
+
</div>
|
|
22
|
+
{#if copyCodeState === false}
|
|
23
|
+
<button class="modal-content-code-content-vector" aria-label="copy" onclick={copyCode}>
|
|
24
|
+
<Copy size="20"/>
|
|
25
|
+
</button>
|
|
26
|
+
{:else}
|
|
27
|
+
<Check size="20" color="#472aff" />
|
|
28
|
+
{/if}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
|
|
32
|
+
<style>
|
|
33
|
+
.modal-content {
|
|
34
|
+
display: flex;
|
|
35
|
+
padding: var(--Card-padding, 24px);
|
|
36
|
+
flex-direction: column;
|
|
37
|
+
align-items: flex-start;
|
|
38
|
+
gap: var(--spacing-3, 24px);
|
|
39
|
+
align-self: stretch;
|
|
40
|
+
background: var(--brand-white, #fff);
|
|
41
|
+
border-top: 1px solid var(--gray-3, #aeb1b9);
|
|
42
|
+
}
|
|
43
|
+
.modal-content-title {
|
|
44
|
+
align-self: stretch;
|
|
45
|
+
color: var(--brand-type, #000);
|
|
46
|
+
/* bold/2 */
|
|
47
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
font-style: normal;
|
|
50
|
+
font-weight: 600; /* changed from 700 to 600 since we use Neue Haas Grotesk Display Pro */
|
|
51
|
+
line-height: 20px; /* 142.857% */
|
|
52
|
+
}
|
|
53
|
+
.modal-content-message {
|
|
54
|
+
align-self: stretch;
|
|
55
|
+
color: var(--brand-type, #000);
|
|
56
|
+
/* regular/2 */
|
|
57
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
58
|
+
font-size: 14px;
|
|
59
|
+
font-style: normal;
|
|
60
|
+
font-weight: 400;
|
|
61
|
+
line-height: 20px; /* 142.857% */
|
|
62
|
+
}
|
|
63
|
+
.modal-content-code-content {
|
|
64
|
+
display: flex;
|
|
65
|
+
padding: 13px 14px 13px 28px;
|
|
66
|
+
align-items: flex-start;
|
|
67
|
+
gap: 20px;
|
|
68
|
+
border-radius: 4px;
|
|
69
|
+
background: var(--gray-1, #f4f6f8);
|
|
70
|
+
}
|
|
71
|
+
.modal-content-code-content-message {
|
|
72
|
+
width: 368px;
|
|
73
|
+
color: var(--gray-4, #6b7180);
|
|
74
|
+
|
|
75
|
+
/* regular/1 */
|
|
76
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
77
|
+
font-size: 12px;
|
|
78
|
+
font-style: normal;
|
|
79
|
+
font-weight: 400;
|
|
80
|
+
line-height: normal;
|
|
81
|
+
}
|
|
82
|
+
.modal-content-code-content-vector {
|
|
83
|
+
width: 17px;
|
|
84
|
+
height: 20px;
|
|
85
|
+
fill: #000;
|
|
86
|
+
border: none;
|
|
87
|
+
background: transparent;
|
|
88
|
+
}
|
|
89
|
+
.modal-content-code-content-vector:hover {
|
|
90
|
+
cursor: pointer;
|
|
91
|
+
}
|
|
92
|
+
</style>
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
|
|
3
|
+
let { cancelButton, okButton } = $props();
|
|
4
|
+
|
|
5
|
+
cancelButton =
|
|
6
|
+
cancelButton ||
|
|
7
|
+
function () {
|
|
8
|
+
console.log('cancelButton');
|
|
9
|
+
};
|
|
10
|
+
okButton =
|
|
11
|
+
okButton ||
|
|
12
|
+
function () {
|
|
13
|
+
console.log('okButton');
|
|
14
|
+
};
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<div class="modal-footer">
|
|
18
|
+
<button class="modal-footer-text-button" onclick={cancelButton}>Cancel</button>
|
|
19
|
+
<button class="modal-footer-primary-button" onclick={okButton}>Ok</button>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<style>
|
|
23
|
+
.modal-footer {
|
|
24
|
+
display: flex;
|
|
25
|
+
padding: var(--Card-padding, 24px);
|
|
26
|
+
justify-content: space-between;
|
|
27
|
+
align-items: flex-start;
|
|
28
|
+
align-self: stretch;
|
|
29
|
+
border-radius: 0px 0px var(--Card-radius, 16px) var(--Card-radius, 16px);
|
|
30
|
+
border-top: 1px solid var(--gray-3, #aeb1b9);
|
|
31
|
+
background: var(--brand-white, #fff);
|
|
32
|
+
}
|
|
33
|
+
.modal-footer-text-button {
|
|
34
|
+
display: inline-flex;
|
|
35
|
+
padding: 8px;
|
|
36
|
+
align-items: flex-start;
|
|
37
|
+
gap: 8px;
|
|
38
|
+
border-radius: 8px;
|
|
39
|
+
border: none;
|
|
40
|
+
background: var(--brand-white, #fff);
|
|
41
|
+
color: var(--brand-primary, #472aff);
|
|
42
|
+
/* regular/2 */
|
|
43
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
44
|
+
font-size: 14px;
|
|
45
|
+
font-style: normal;
|
|
46
|
+
font-weight: 400;
|
|
47
|
+
line-height: 20px; /* 142.857% */
|
|
48
|
+
}
|
|
49
|
+
.modal-footer-text-button:hover {
|
|
50
|
+
cursor: pointer;
|
|
51
|
+
}
|
|
52
|
+
.modal-footer-primary-button {
|
|
53
|
+
display: flex;
|
|
54
|
+
padding: 8px 16px;
|
|
55
|
+
align-items: flex-start;
|
|
56
|
+
gap: 8px;
|
|
57
|
+
border-radius: 8px;
|
|
58
|
+
border: none;
|
|
59
|
+
background: var(--brand-primary, #472aff);
|
|
60
|
+
color: var(--brand-primary, #fff);
|
|
61
|
+
/* regular/2 */
|
|
62
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
63
|
+
font-size: 14px;
|
|
64
|
+
font-style: normal;
|
|
65
|
+
font-weight: 400;
|
|
66
|
+
line-height: 20px; /* 142.857% */
|
|
67
|
+
}
|
|
68
|
+
.modal-footer-primary-button:hover {
|
|
69
|
+
cursor: pointer;
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { OctagonAlert } from "lucide-svelte";
|
|
3
|
+
|
|
4
|
+
let { headerTitle } = $props();
|
|
5
|
+
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<div class="modal-header">
|
|
9
|
+
<div class="modal-header-icon">
|
|
10
|
+
<OctagonAlert size="32"/>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="modal-header-title">{headerTitle}</div>
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
.modal-header {
|
|
17
|
+
display: flex;
|
|
18
|
+
padding: var(--Card-padding, 24px);
|
|
19
|
+
align-items: center;
|
|
20
|
+
gap: var(--spacing-2, 16px);
|
|
21
|
+
align-self: stretch;
|
|
22
|
+
border-radius: var(--Card-radius, 16px) var(--Card-radius, 16px) 0px 0px;
|
|
23
|
+
background: var(--brand-white, #fff);
|
|
24
|
+
}
|
|
25
|
+
.modal-header-icon {
|
|
26
|
+
color: var(--brand-danger, #dc182c);
|
|
27
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
28
|
+
font-size: 32px;
|
|
29
|
+
font-style: normal;
|
|
30
|
+
font-weight: 400;
|
|
31
|
+
line-height: normal;
|
|
32
|
+
}
|
|
33
|
+
.modal-header-title {
|
|
34
|
+
flex: 1 0 0;
|
|
35
|
+
color: var(--brand-type, #000);
|
|
36
|
+
/* medium/4 */
|
|
37
|
+
font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
|
|
38
|
+
font-size: 18px;
|
|
39
|
+
font-style: normal;
|
|
40
|
+
font-weight: 500;
|
|
41
|
+
line-height: 26px; /* 144.444% */
|
|
42
|
+
}
|
|
43
|
+
</style>
|
package/dist/index.d.ts
ADDED
package/dist/index.js
ADDED
package/package.json
ADDED
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@softwareone/spi-sv5-library",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"description": "Svelte components",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"svelte",
|
|
7
|
+
"sveltekit",
|
|
8
|
+
"components"
|
|
9
|
+
],
|
|
10
|
+
"homepage": "",
|
|
11
|
+
"license": "MIT",
|
|
12
|
+
"author": {
|
|
13
|
+
"name": "Frederik Lefevre"
|
|
14
|
+
},
|
|
15
|
+
"scripts": {
|
|
16
|
+
"dev": "vite dev",
|
|
17
|
+
"build": "vite build && npm run prepack",
|
|
18
|
+
"preview": "vite preview",
|
|
19
|
+
"prepare": "svelte-kit sync || echo ''",
|
|
20
|
+
"prepack": "svelte-kit sync && svelte-package && publint",
|
|
21
|
+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
|
22
|
+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
|
23
|
+
"format": "prettier --write .",
|
|
24
|
+
"lint": "prettier --check ."
|
|
25
|
+
},
|
|
26
|
+
"files": [
|
|
27
|
+
"dist",
|
|
28
|
+
"!dist/**/*.test.*",
|
|
29
|
+
"!dist/**/*.spec.*"
|
|
30
|
+
],
|
|
31
|
+
"sideEffects": [
|
|
32
|
+
"**/*.css"
|
|
33
|
+
],
|
|
34
|
+
"svelte": "./dist/index.js",
|
|
35
|
+
"types": "./dist/index.d.ts",
|
|
36
|
+
"type": "module",
|
|
37
|
+
"exports": {
|
|
38
|
+
".": {
|
|
39
|
+
"types": "./dist/index.d.ts",
|
|
40
|
+
"svelte": "./dist/index.js"
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"svelte": "^5.0.0"
|
|
45
|
+
},
|
|
46
|
+
"devDependencies": {
|
|
47
|
+
"@sveltejs/adapter-auto": "^4.0.0",
|
|
48
|
+
"@sveltejs/kit": "^2.16.0",
|
|
49
|
+
"@sveltejs/package": "^2.0.0",
|
|
50
|
+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
51
|
+
"prettier": "^3.4.2",
|
|
52
|
+
"prettier-plugin-svelte": "^3.3.3",
|
|
53
|
+
"publint": "^0.3.2",
|
|
54
|
+
"svelte": "^5.0.0",
|
|
55
|
+
"svelte-check": "^4.0.0",
|
|
56
|
+
"typescript": "^5.0.0",
|
|
57
|
+
"vite": "^6.0.0"
|
|
58
|
+
},
|
|
59
|
+
"dependencies": {
|
|
60
|
+
"lucide-svelte": "^0.475.0"
|
|
61
|
+
}
|
|
62
|
+
}
|