siam-ui-utils 3.2.3 → 3.2.5

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.
@@ -1,29 +1,36 @@
1
+ @charset "UTF-8";
2
+
1
3
  /* ── Drop zone container ─────────────────────────────────────────── */
2
4
  .filepicker.dropzone {
3
5
  display: flex;
4
6
  flex-direction: column;
5
7
  align-items: stretch;
6
- min-height: 120px;
8
+ min-height: 160px;
7
9
  padding: 12px;
8
- border: 1px solid var(--dz-border, #D6D6D6);
10
+ border: 2px dashed var(--dz-border, #d6d6d6);
9
11
  border-radius: 12px;
10
12
  background-color: #fff;
11
13
  cursor: pointer;
12
- transition: border-color 0.2s ease, background-color 0.2s ease,
13
- box-shadow 0.2s ease;
14
+ transition: border-color 0.2s ease, background-color 0.2s ease;
14
15
  box-sizing: border-box;
15
- position: relative;
16
16
  overflow: hidden;
17
17
  }
18
18
 
19
+ .filepicker.dropzone.dz-started {
20
+ border-style: solid;
21
+ min-height: 0;
22
+ overflow-y: auto;
23
+ }
24
+
19
25
  .filepicker.dropzone.dz-clickable:hover {
20
- border-color: var(--dz-primary, #016E6C);
26
+ border-color: var(--dz-primary, #016e6c);
27
+ background-color: var(--dz-active-bg, #e6f1f1);
21
28
  }
22
29
 
23
30
  .filepicker.dropzone.dz-drag-hover {
24
- border-color: var(--dz-primary, #016E6C);
31
+ border-color: var(--dz-primary, #016e6c);
25
32
  border-style: dashed;
26
- background-color: var(--dz-active-bg, #E6F1F1);
33
+ background-color: var(--dz-active-bg, #e6f1f1);
27
34
  }
28
35
 
29
36
  .filepicker.dropzone.dz-disabled-zone {
@@ -38,36 +45,37 @@
38
45
  display: flex;
39
46
  flex-direction: column;
40
47
  align-items: center;
41
- justify-content: center;
42
- gap: 8px;
43
- min-height: 96px;
44
- color: var(--dz-primary, #016E6C);
48
+ gap: 10px;
49
+ text-align: center;
50
+ color: var(--dz-primary, #016e6c);
45
51
  pointer-events: none;
52
+ user-select: none;
46
53
  }
47
54
 
48
- /* Upload icon — circle bubble with upload arrow centered */
55
+ /* Upload icon — primary-colored circle with white arrow */
49
56
  .filepicker.dropzone .dz-message::before {
50
57
  content: '';
51
58
  display: block;
52
- width: 40px;
53
- height: 40px;
59
+ width: 48px;
60
+ height: 48px;
54
61
  flex-shrink: 0;
55
62
  border-radius: 50%;
56
- background-color: var(--dz-active-bg, #E6F1F1);
57
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23016E6C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
63
+ background-color: var(--dz-primary, #016e6c);
64
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='17 8 12 3 7 8'/%3E%3Cline x1='12' y1='3' x2='12' y2='15'/%3E%3C/svg%3E");
58
65
  background-repeat: no-repeat;
59
66
  background-position: center;
60
- background-size: 20px 20px;
67
+ background-size: 22px 22px;
61
68
  }
62
69
 
63
70
  .filepicker.dropzone .dz-message .dz-button {
64
71
  background: none;
65
72
  border: none;
66
73
  padding: 0;
67
- font-size: 12px;
74
+ font-size: 13px;
68
75
  font-weight: 600;
69
- color: var(--dz-primary, #016E6C);
76
+ color: var(--dz-primary, #016e6c);
70
77
  cursor: pointer;
78
+ pointer-events: none;
71
79
  }
72
80
 
73
81
  .filepicker.dropzone .dz-message .dz-button::after {
@@ -89,8 +97,14 @@
89
97
  }
90
98
 
91
99
  @keyframes dz-slide-in {
92
- from { opacity: 0; transform: translateY(6px); }
93
- to { opacity: 1; transform: translateY(0); }
100
+ from {
101
+ opacity: 0;
102
+ transform: translateY(4px);
103
+ }
104
+ to {
105
+ opacity: 1;
106
+ transform: translateY(0);
107
+ }
94
108
  }
95
109
 
96
110
  /* ── Preview row ─────────────────────────────────────────────────── */
@@ -99,7 +113,7 @@
99
113
  align-items: center;
100
114
  gap: 10px;
101
115
  padding: 8px 10px;
102
- border: 1px solid var(--dz-border, #D6D6D6);
116
+ border: 1px solid var(--dz-border, #d6d6d6);
103
117
  border-radius: 8px;
104
118
  background: #fff;
105
119
  position: relative;
@@ -107,7 +121,7 @@
107
121
  }
108
122
 
109
123
  .dz-preview.dz-error .dz-preview-inner {
110
- border-color: var(--dz-error, #FE4727);
124
+ border-color: var(--dz-error, #fe4727);
111
125
  }
112
126
 
113
127
  /* ── Thumbnail ───────────────────────────────────────────────────── */
@@ -117,7 +131,7 @@
117
131
  height: 44px;
118
132
  border-radius: 8px;
119
133
  overflow: hidden;
120
- background-color: var(--dz-active-bg, #E6F1F1);
134
+ background-color: var(--dz-active-bg, #e6f1f1);
121
135
  display: flex;
122
136
  align-items: center;
123
137
  justify-content: center;
@@ -144,7 +158,7 @@
144
158
  .dz-file-icon {
145
159
  width: 44px;
146
160
  height: 44px;
147
- background-color: var(--dz-primary, #016E6C);
161
+ background-color: var(--dz-primary, #016e6c);
148
162
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
149
163
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
150
164
  -webkit-mask-size: 18px 18px;
@@ -168,8 +182,12 @@
168
182
  pointer-events: none;
169
183
  }
170
184
 
171
- .dz-success-mark { background: rgba(1, 110, 108, 0.80); }
172
- .dz-error-mark { background: rgba(254, 71, 39, 0.80); }
185
+ .dz-success-mark {
186
+ background: rgba(1, 110, 108, 0.8);
187
+ }
188
+ .dz-error-mark {
189
+ background: rgba(254, 71, 39, 0.8);
190
+ }
173
191
 
174
192
  .dz-success-mark svg,
175
193
  .dz-error-mark svg {
@@ -187,7 +205,9 @@
187
205
  }
188
206
 
189
207
  @keyframes dz-fade-out {
190
- to { opacity: 0; }
208
+ to {
209
+ opacity: 0;
210
+ }
191
211
  }
192
212
 
193
213
  /* ── File info ───────────────────────────────────────────────────── */
@@ -210,25 +230,27 @@
210
230
 
211
231
  .dz-filesize {
212
232
  font-size: 11px;
213
- color: #A9A9A9;
233
+ color: #a9a9a9;
214
234
  }
215
235
 
216
236
  /* ── Progress bar ────────────────────────────────────────────────── */
217
237
  .dz-progress {
218
238
  height: 3px;
219
239
  border-radius: 2px;
220
- background: var(--dz-border, #D6D6D6);
240
+ background: var(--dz-border, #d6d6d6);
221
241
  overflow: hidden;
222
242
  margin-top: 4px;
223
243
  display: none;
224
244
  }
225
245
 
226
- .dz-preview.dz-processing .dz-progress { display: block; }
246
+ .dz-preview.dz-processing .dz-progress {
247
+ display: block;
248
+ }
227
249
 
228
250
  .dz-upload {
229
251
  display: block;
230
252
  height: 100%;
231
- background: var(--dz-primary, #016E6C);
253
+ background: var(--dz-primary, #016e6c);
232
254
  border-radius: 2px;
233
255
  width: 0;
234
256
  transition: width 300ms ease;
@@ -238,11 +260,13 @@
238
260
  .dz-error-message {
239
261
  display: none;
240
262
  font-size: 11px;
241
- color: var(--dz-error, #FE4727);
263
+ color: var(--dz-error, #fe4727);
242
264
  margin-top: 2px;
243
265
  }
244
266
 
245
- .dz-preview.dz-error .dz-error-message { display: block; }
267
+ .dz-preview.dz-error .dz-error-message {
268
+ display: block;
269
+ }
246
270
 
247
271
  /* ── Remove button ───────────────────────────────────────────────── */
248
272
  .dz-remove-btn {
@@ -255,7 +279,7 @@
255
279
  border: none;
256
280
  border-radius: 8px;
257
281
  background: transparent;
258
- color: var(--dz-error, #FE4727);
282
+ color: var(--dz-error, #fe4727);
259
283
  cursor: pointer;
260
284
  transition: background-color 0.15s ease;
261
285
  padding: 0;
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from "react/jsx-runtime";
2
2
  import { getDroppedOrSelectedFiles } from "html5-file-selector";
3
- import { useState, useRef } from "react";
3
+ import { useRef } from "react";
4
4
  import { useTheme } from "styled-components";
5
5
  import { Button } from "siam-ui";
6
6
  import { Dropzone } from "../../dropzone/index.js";
@@ -15,24 +15,27 @@ const DropzoneUploaderStyled = ({
15
15
  label = "Cargar Dni",
16
16
  maxFiles = 2,
17
17
  maxSize = 2,
18
- onMaxFileSizeError = () => {
19
- alert("El archivo supera el tamaño máximo");
18
+ onMaxFileSizeError = (fileName) => {
19
+ alert(`El archivo "${fileName}" supera el tamaño máximo de ${maxSize} MB`);
20
20
  }
21
21
  }) => {
22
22
  const theme = useTheme();
23
23
  const primaryColor = theme?.colors?.primary?.base ?? "#016E6C";
24
24
  const borderColor = theme?.colors?.neutral?.borderLight ?? "#D6D6D6";
25
25
  const surfaceHover = theme?.colors?.primary?.surfaceHover ?? "#E6F1F1";
26
- const [files, setFiles] = useState([]);
27
- const handleChangeStatus = ({ file }, status) => {
26
+ const filesRef = useRef([]);
27
+ const handleChangeStatus = ({ file, remove }, status) => {
28
28
  if (status === "done") {
29
- const filesTemp = [...files, file];
30
- setFiles(filesTemp);
31
- onChangeFiles(filesTemp);
29
+ if (file.size / (1024 * 1024) > maxSize) {
30
+ onMaxFileSizeError(file.name);
31
+ remove();
32
+ return;
33
+ }
34
+ filesRef.current = [...filesRef.current, file];
35
+ onChangeFiles(filesRef.current);
32
36
  } else if (status === "removed") {
33
- const filesTemp = files.filter((f) => f !== file);
34
- setFiles(filesTemp);
35
- onChangeFiles(filesTemp);
37
+ filesRef.current = filesRef.current.filter((f) => f !== file);
38
+ onChangeFiles(filesRef.current);
36
39
  }
37
40
  };
38
41
  const getFilesFromEvent = (e) => {
@@ -44,10 +47,6 @@ const DropzoneUploaderStyled = ({
44
47
  };
45
48
  const CustomPreview = ({ fileWithMeta }) => {
46
49
  const { meta, remove } = fileWithMeta;
47
- if (meta.size / (1024 * 1024) > maxSize) {
48
- onMaxFileSizeError();
49
- remove();
50
- }
51
50
  return /* @__PURE__ */ jsxs(
52
51
  "div",
53
52
  {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\nimport { useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { Button } from 'siam-ui';\nimport Dropzone from '../../dropzone';\nimport { IconButtonSvg, pdfImage } from '../../iconos';\nimport './index.css';\n\nexport const DropzoneUploaderStyled = ({\n accept = 'image/*, application/pdf',\n classNames = '',\n onChangeFiles,\n totalFiles,\n label = 'Cargar Dni',\n maxFiles = 2,\n maxSize = 2,\n onMaxFileSizeError = () => {\n alert('El archivo supera el tamaño máximo');\n },\n}) => {\n const theme = useTheme();\n const primaryColor = theme?.colors?.primary?.base ?? '#016E6C';\n const borderColor = theme?.colors?.neutral?.borderLight ?? '#D6D6D6';\n const surfaceHover = theme?.colors?.primary?.surfaceHover ?? '#E6F1F1';\n\n const [files, setFiles] = useState([]);\n\n const handleChangeStatus = ({ file }, status) => {\n if (status === 'done') {\n const filesTemp = [...files, file];\n setFiles(filesTemp);\n onChangeFiles(filesTemp);\n } else if (status === 'removed') {\n const filesTemp = files.filter((f) => f !== file);\n setFiles(filesTemp);\n onChangeFiles(filesTemp);\n }\n };\n\n const getFilesFromEvent = (e) => {\n return new Promise((resolve) => {\n getDroppedOrSelectedFiles(e).then((chosenFiles) => {\n resolve(chosenFiles.map((f) => f.fileObject));\n });\n });\n };\n\n const CustomPreview = ({ fileWithMeta }) => {\n const { meta, remove } = fileWithMeta;\n if (meta.size / (1024 * 1024) > maxSize) {\n onMaxFileSizeError();\n remove();\n }\n return (\n <div\n className=\"dropzone-upload-previewContainer\"\n style={{ width: '100%', display: 'flex', alignItems: 'center' }}\n >\n {meta.type === 'application/pdf' ? (\n <>\n <IconButtonSvg\n className=\"form-control flex\"\n svg={pdfImage}\n svgOver={pdfImage}\n height=\"1.6rem\"\n width=\"1.6rem\"\n title={meta.name}\n />\n <p style={{ paddingRight: '1rem' }}>\n {meta.name.length > 17 ? meta.name.substring(0, 17) + '...' : meta.name}\n </p>\n </>\n ) : (\n <>\n <img\n className=\"dropzone-upload-previewImage mt-1\"\n src={meta.previewUrl}\n alt={meta.name}\n style={{ width: '110px', height: '110px', objectFit: 'cover', marginRight: '0.5rem' }}\n />\n <div className=\"dropzone-upload-file-name-container\">\n <p className=\"dropzone-upload-file-name\" title={meta.name}>\n {meta.name}\n </p>\n </div>\n </>\n )}\n <Button\n $variant=\"transparent\"\n $size=\"small\"\n onClick={remove}\n style={{ color: theme?.colors?.error?.base ?? '#FE4727', padding: '0 4px' }}\n >\n <TrashIcon color={theme?.colors?.error?.base ?? '#FE4727'} />\n </Button>\n </div>\n );\n };\n\n const fileInputRef = useRef(null);\n\n const InputComponent = ({ accept, onFiles, getFilesFromEvent }) => {\n const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : label;\n return (\n <>\n <Button\n $variant=\"outline\"\n style={{ width: '100%' }}\n onClick={() => fileInputRef.current?.click()}\n >\n {text}\n </Button>\n <input\n ref={fileInputRef}\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple\n onChange={(e) => {\n getFilesFromEvent(e).then((chosenFiles) => onFiles(chosenFiles));\n }}\n />\n </>\n );\n };\n\n return (\n <div\n className={classNames}\n style={{\n '--dropzone-primary': primaryColor,\n '--dropzone-border': borderColor,\n '--dropzone-active-bg': surfaceHover,\n }}\n >\n <Dropzone\n disableUpload={false}\n maxFiles={totalFiles < maxFiles ? maxFiles : 0}\n maxSize={maxSize}\n InputComponent={InputComponent}\n PreviewComponent={CustomPreview}\n classNames={{ dropzone: 'dropzone-upload-frame' }}\n onChangeStatus={handleChangeStatus}\n getFilesFromEvent={getFilesFromEvent}\n accept={accept}\n />\n </div>\n );\n};\n\nconst TrashIcon = ({ color }) => (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\" />\n <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\" />\n <path d=\"M10 11v6M14 11v6\" />\n <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\" />\n </svg>\n);\n\nexport default DropzoneUploaderStyled;\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\nimport { useRef } from 'react';\nimport { useTheme } from 'styled-components';\nimport { Button } from 'siam-ui';\nimport Dropzone from '../../dropzone';\nimport { IconButtonSvg, pdfImage } from '../../iconos';\nimport './index.css';\n\nexport const DropzoneUploaderStyled = ({\n accept = 'image/*, application/pdf',\n classNames = '',\n onChangeFiles,\n totalFiles,\n label = 'Cargar Dni',\n maxFiles = 2,\n maxSize = 2,\n onMaxFileSizeError = (fileName) => {\n alert(`El archivo \"${fileName}\" supera el tamaño máximo de ${maxSize} MB`);\n },\n}) => {\n const theme = useTheme();\n const primaryColor = theme?.colors?.primary?.base ?? '#016E6C';\n const borderColor = theme?.colors?.neutral?.borderLight ?? '#D6D6D6';\n const surfaceHover = theme?.colors?.primary?.surfaceHover ?? '#E6F1F1';\n\n const filesRef = useRef([]);\n\n const handleChangeStatus = ({ file, remove }, status) => {\n if (status === 'done') {\n if (file.size / (1024 * 1024) > maxSize) {\n onMaxFileSizeError(file.name);\n remove();\n return;\n }\n filesRef.current = [...filesRef.current, file];\n onChangeFiles(filesRef.current);\n } else if (status === 'removed') {\n filesRef.current = filesRef.current.filter((f) => f !== file);\n onChangeFiles(filesRef.current);\n }\n };\n\n const getFilesFromEvent = (e) => {\n return new Promise((resolve) => {\n getDroppedOrSelectedFiles(e).then((chosenFiles) => {\n resolve(chosenFiles.map((f) => f.fileObject));\n });\n });\n };\n\n const CustomPreview = ({ fileWithMeta }) => {\n const { meta, remove } = fileWithMeta;\n return (\n <div\n className=\"dropzone-upload-previewContainer\"\n style={{ width: '100%', display: 'flex', alignItems: 'center' }}\n >\n {meta.type === 'application/pdf' ? (\n <>\n <IconButtonSvg\n className=\"form-control flex\"\n svg={pdfImage}\n svgOver={pdfImage}\n height=\"1.6rem\"\n width=\"1.6rem\"\n title={meta.name}\n />\n <p style={{ paddingRight: '1rem' }}>\n {meta.name.length > 17 ? meta.name.substring(0, 17) + '...' : meta.name}\n </p>\n </>\n ) : (\n <>\n <img\n className=\"dropzone-upload-previewImage mt-1\"\n src={meta.previewUrl}\n alt={meta.name}\n style={{ width: '110px', height: '110px', objectFit: 'cover', marginRight: '0.5rem' }}\n />\n <div className=\"dropzone-upload-file-name-container\">\n <p className=\"dropzone-upload-file-name\" title={meta.name}>\n {meta.name}\n </p>\n </div>\n </>\n )}\n <Button\n $variant=\"transparent\"\n $size=\"small\"\n onClick={remove}\n style={{ color: theme?.colors?.error?.base ?? '#FE4727', padding: '0 4px' }}\n >\n <TrashIcon color={theme?.colors?.error?.base ?? '#FE4727'} />\n </Button>\n </div>\n );\n };\n\n const fileInputRef = useRef(null);\n\n const InputComponent = ({ accept, onFiles, getFilesFromEvent }) => {\n const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : label;\n return (\n <>\n <Button\n $variant=\"outline\"\n style={{ width: '100%' }}\n onClick={() => fileInputRef.current?.click()}\n >\n {text}\n </Button>\n <input\n ref={fileInputRef}\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple\n onChange={(e) => {\n getFilesFromEvent(e).then((chosenFiles) => onFiles(chosenFiles));\n }}\n />\n </>\n );\n };\n\n return (\n <div\n className={classNames}\n style={{\n '--dropzone-primary': primaryColor,\n '--dropzone-border': borderColor,\n '--dropzone-active-bg': surfaceHover,\n }}\n >\n <Dropzone\n disableUpload={false}\n maxFiles={totalFiles < maxFiles ? maxFiles : 0}\n maxSize={maxSize}\n InputComponent={InputComponent}\n PreviewComponent={CustomPreview}\n classNames={{ dropzone: 'dropzone-upload-frame' }}\n onChangeStatus={handleChangeStatus}\n getFilesFromEvent={getFilesFromEvent}\n accept={accept}\n />\n </div>\n );\n};\n\nconst TrashIcon = ({ color }) => (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\" />\n <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\" />\n <path d=\"M10 11v6M14 11v6\" />\n <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\" />\n </svg>\n);\n\nexport default DropzoneUploaderStyled;\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "siam-ui-utils",
3
- "version": "3.2.3",
3
+ "version": "3.2.5",
4
4
  "keywords": [
5
5
  "ampf-react",
6
6
  "ampf-utils",