@delightui/components 0.1.146 → 0.1.148

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.
@@ -0,0 +1,3 @@
1
+ <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M13.334 1.99935H12.6673V0.666016H11.334V1.99935H4.66732V0.666016H3.33398V1.99935H2.66732C1.93398 1.99935 1.33398 2.59935 1.33398 3.33268V13.9993C1.33398 14.7327 1.93398 15.3327 2.66732 15.3327H13.334C14.0673 15.3327 14.6673 14.7327 14.6673 13.9993V3.33268C14.6673 2.59935 14.0673 1.99935 13.334 1.99935ZM13.334 13.9993H2.66732V6.66602H13.334V13.9993ZM13.334 5.33268H2.66732V3.33268H13.334V5.33268Z" fill="#EDECEE"/>
3
+ </svg>
@@ -0,0 +1,2 @@
1
+ declare const ChipExample: () => import("react/jsx-runtime").JSX.Element;
2
+ export default ChipExample;
@@ -1,4 +1,4 @@
1
- import { ReactNode } from 'react';
1
+ import { HTMLAttributes, ReactNode } from 'react';
2
2
  import { ButtonProps, IconButtonProps, TextProps } from '../../atoms';
3
3
  import { ControlledFormComponentProps } from '../../molecules/FormField/FormField.types';
4
4
  export type DropzoneStatus = 'Empty' | 'Loading' | 'Uploaded';
@@ -101,3 +101,4 @@ export type DropzoneFilenameProps = TextProps & {
101
101
  */
102
102
  fileIndex?: number;
103
103
  };
104
+ export type DropzoneDragProps = HTMLAttributes<HTMLDivElement>;
@@ -0,0 +1,3 @@
1
+ import { DropzoneDragProps } from '../Dropzone.types';
2
+ declare const DropzoneDrag: (props: DropzoneDragProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default DropzoneDrag;
@@ -1,4 +1,4 @@
1
- type DropzoneContentTypeEnum = 'Empty' | 'Uploaded' | 'Loading';
1
+ type DropzoneContentTypeEnum = 'Empty' | 'Uploaded' | 'Loading' | 'Drag';
2
2
  type DropzoneContentProps = {
3
3
  className?: string;
4
4
  type: DropzoneContentTypeEnum;
@@ -319,6 +319,7 @@
319
319
  }
320
320
  .Input-module_input__NAeHe {
321
321
  display: flex;
322
+ align-items: center;
322
323
  height: var(--input-height);
323
324
  row-gap: var(--input-row-gap);
324
325
  -moz-column-gap: var(--input-column-gap);
@@ -362,10 +363,14 @@
362
363
  .Input-module_input__NAeHe .Input-module_trailingIcon__UDufB {
363
364
  padding-right: var(--input-column-gap);
364
365
  align-self: center;
366
+ padding-top: calc(var(--input-padding-top) - var(--input-border-top-width));
367
+ padding-bottom: calc(var(--input-padding-bottom) - var(--input-border-bottom-width));
365
368
  }
366
369
  .Input-module_input__NAeHe .Input-module_leadingIcon__bUFw5 {
367
370
  padding-left: var(--input-column-gap);
368
371
  align-self: center;
372
+ padding-top: calc(var(--input-padding-top) - var(--input-border-top-width));
373
+ padding-bottom: calc(var(--input-padding-bottom) - var(--input-border-bottom-width));
369
374
  }
370
375
  .Input-module_input__NAeHe .Input-module_error__qP189 {
371
376
  --a: 100;
@@ -418,11 +423,9 @@
418
423
  --input-placeholder-paragraph-indent: var(--password-placeholder-paragraph-indent);
419
424
  }
420
425
  .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr {
421
- padding: 0;
422
426
  border: none;
423
427
  }
424
428
  .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:hover, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:active, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:focus, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:focus-visible, .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr:disabled {
425
- padding: 0;
426
429
  border: none;
427
430
  }
428
431
  .Password-module_password__nk-zf.Password-module_password__nk-zf .Password-module_toggle__1yQxr .Password-module_hide__N8Nxt {
@@ -911,11 +914,11 @@
911
914
  flex-direction: row;
912
915
  justify-content: flex-start;
913
916
  align-items: center;
914
- gap: var(--chip-icon-content-container-row-gap) var(--chip-icon-content-container-column-gap);
915
- padding-top: var(--chip-icon-content-container-padding-top);
916
- padding-bottom: var(--chip-icon-content-container-padding-bottom);
917
- padding-left: var(--chip-icon-content-container-padding-left);
918
- padding-right: var(--chip-icon-content-container-padding-right);
917
+ gap: var(--chip-content-row-gap) var(--chip-content-column-gap);
918
+ padding-top: var(--chip-content-padding-top);
919
+ padding-bottom: var(--chip-content-padding-bottom);
920
+ padding-left: var(--chip-content-padding-left);
921
+ padding-right: var(--chip-content-padding-right);
919
922
  }
920
923
  .Chip-module_chip__gFkbn .Chip-module_leadingIcon__wzuFC,
921
924
  .Chip-module_chip__gFkbn .Chip-module_trailingIcon__jGkIh {
@@ -2012,10 +2015,10 @@ ul.ButtonGroup-module_buttonGroup__s1X98[component-variant=button-group-vertical
2012
2015
  --input-border-bottom-left-radius: var(--date-input-border-bottom-left-radius);
2013
2016
  --input-background-color: var(--date-input-background-color);
2014
2017
  --input-color: var(--date-input-color);
2015
- --input-padding-top: calc(var(--date-input-padding-top) - var(--date-input-border-top-width));
2016
- --input-padding-bottom: calc(var(--date-input-padding-bottom) - var(--date-input-border-bottom-width));
2017
- --input-padding-left: calc(var(--date-input-padding-left) - var(--date-input-border-left-width));
2018
- --input-padding-right: calc(var(--date-input-padding-right) - var(--date-input-border-right-width));
2018
+ --input-padding-top: var(--date-input-padding-top);
2019
+ --input-padding-bottom: var(--date-input-padding-bottom);
2020
+ --input-padding-left: var(--date-input-padding-left);
2021
+ --input-padding-right: var(--date-input-padding-right);
2019
2022
  --input-font-family: var(--date-input-font-family);
2020
2023
  --input-font-weight: var(--date-input-font-weight);
2021
2024
  --input-font-size: var(--date-input-font-size);
@@ -2974,13 +2977,8 @@ span.flatpickr-weekday {
2974
2977
  -moz-column-gap: var(--date-picker-months-trigger-column-gap);
2975
2978
  column-gap: var(--date-picker-months-trigger-column-gap);
2976
2979
  row-gap: var(--date-picker-months-trigger-row-gap);
2977
- padding-top: var(--date-picker-months-trigger-padding-top);
2978
- padding-bottom: var(--date-picker-months-trigger-padding-bottom);
2979
- padding-left: var(--date-picker-months-trigger-padding-left);
2980
- padding-right: var(--date-picker-months-trigger-padding-right);
2981
2980
  }
2982
2981
  .flatpickr-calendar .flatpickr-months .flatpickr-current-month {
2983
- color: var(--date-picker-cur-month-color);
2984
2982
  display: contents;
2985
2983
  font-family: var(--date-picker-months-trigger-font-family);
2986
2984
  font-size: var(--date-picker-months-trigger-font-size);
@@ -3001,6 +2999,10 @@ span.flatpickr-weekday {
3001
2999
  font-weight: var(--date-picker-months-trigger-font-weight);
3002
3000
  line-height: var(--date-picker-months-trigger-line-height);
3003
3001
  color: var(--date-picker-months-trigger-color);
3002
+ padding-top: var(--date-picker-months-trigger-padding-top);
3003
+ padding-bottom: var(--date-picker-months-trigger-padding-bottom);
3004
+ padding-left: var(--date-picker-months-trigger-padding-left);
3005
+ padding-right: var(--date-picker-months-trigger-padding-right);
3004
3006
  }
3005
3007
  .flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months::-ms-expand {
3006
3008
  display: none;
@@ -3018,8 +3020,10 @@ span.flatpickr-weekday {
3018
3020
  }
3019
3021
  .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year {
3020
3022
  border-radius: var(--corner-radius-extra-small);
3021
- padding-left: var(--spacing-space-5);
3022
- padding-right: var(--spacing-space-5);
3023
+ padding-left: var(--date-picker-months-trigger-padding-left);
3024
+ padding-right: var(--date-picker-months-trigger-padding-right);
3025
+ padding-top: var(--date-picker-months-trigger-padding-top);
3026
+ padding-bottom: var(--date-picker-months-trigger-padding-bottom);
3023
3027
  }
3024
3028
  .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:hover {
3025
3029
  cursor: pointer;
@@ -3027,7 +3031,12 @@ span.flatpickr-weekday {
3027
3031
  }
3028
3032
  .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:focus, .flatpickr-calendar .flatpickr-months .flatpickr-current-month .numInput.cur-year:active {
3029
3033
  cursor: text;
3030
- outline: 1px solid var(--border-border-grey-4);
3034
+ outline: none;
3035
+ border: 1px solid var(--border-border-4, var(--border-primary));
3036
+ padding-left: calc(var(--date-picker-months-trigger-padding-left) - 1px);
3037
+ padding-right: calc(var(--date-picker-months-trigger-padding-right) - 1px);
3038
+ padding-top: calc(var(--date-picker-months-trigger-padding-top) - 1px);
3039
+ padding-bottom: calc(var(--date-picker-months-trigger-padding-bottom) - 1px);
3031
3040
  background-color: var(--surface-background-3);
3032
3041
  color: var(--text-primary);
3033
3042
  }
@@ -4169,6 +4178,8 @@ span.flatpickr-weekday {
4169
4178
  --spinner__width: 4rem;
4170
4179
  --spinner__height: 4rem;
4171
4180
  --spinner__border-width: 6px;
4181
+ --spinner-inner-width: 4rem;
4182
+ --spinner-inner-height: 4rem;
4172
4183
  --spinner-border-color: var(--icon-primary);
4173
4184
  }
4174
4185
  .DropzoneContent-module_dropzoneContent__UjfAn .DropzoneContent-module_dropzoneRemoveUploadButtonDeleteButton__kUcdq {
@@ -4179,6 +4190,16 @@ span.flatpickr-weekday {
4179
4190
  display: block;
4180
4191
  color: rgb(233, 233, 234);
4181
4192
  }
4193
+ .DropzoneContent-module_dropzoneContent__UjfAn .DropzoneContent-module_dropzoneDrag__PlBJv {
4194
+ display: flex;
4195
+ height: 100%;
4196
+ width: 100%;
4197
+ border-style: dashed;
4198
+ border-width: 1px;
4199
+ border-color: var(--colours-grey-450);
4200
+ background-color: rgb(128, 128, 128);
4201
+ opacity: 0.5;
4202
+ }
4182
4203
  .DropzoneContent-module_type--Empty__5ejbg {
4183
4204
  display: flex;
4184
4205
  flex-flow: column nowrap;
@@ -4226,6 +4247,8 @@ span.flatpickr-weekday {
4226
4247
  }
4227
4248
  .DropzoneContent-module_type--Empty__5ejbg .DropzoneContent-module_dropzoneSupportedFormats__mEgzt {
4228
4249
  color: var(--text-primary);
4250
+ max-width: 80%;
4251
+ text-align: center;
4229
4252
  }
4230
4253
  .DropzoneContent-module_type--Empty__5ejbg .DropzoneContent-module_dropzoneRemoveUploadButton__McYoe {
4231
4254
  display: none;
@@ -4237,6 +4260,9 @@ span.flatpickr-weekday {
4237
4260
  display: none;
4238
4261
  color: rgb(233, 233, 234);
4239
4262
  }
4263
+ .DropzoneContent-module_type--Empty__5ejbg .DropzoneContent-module_dropzoneDrag__PlBJv {
4264
+ display: none;
4265
+ }
4240
4266
  .DropzoneContent-module_type--Uploaded__4aQy7 {
4241
4267
  display: flex;
4242
4268
  flex-flow: row nowrap;
@@ -4294,6 +4320,9 @@ span.flatpickr-weekday {
4294
4320
  display: block;
4295
4321
  color: rgb(233, 233, 234);
4296
4322
  }
4323
+ .DropzoneContent-module_type--Uploaded__4aQy7 .DropzoneContent-module_dropzoneDrag__PlBJv {
4324
+ display: none;
4325
+ }
4297
4326
  .DropzoneContent-module_type--Loading__4VgoL {
4298
4327
  display: flex;
4299
4328
  flex-flow: column nowrap;
@@ -4355,6 +4384,76 @@ span.flatpickr-weekday {
4355
4384
  display: none;
4356
4385
  color: rgb(233, 233, 234);
4357
4386
  }
4387
+ .DropzoneContent-module_type--Loading__4VgoL .DropzoneContent-module_dropzoneDrag__PlBJv {
4388
+ display: none;
4389
+ }
4390
+ .DropzoneContent-module_type--Drag__9BalI {
4391
+ display: flex;
4392
+ flex-flow: column nowrap;
4393
+ justify-content: center;
4394
+ align-items: center;
4395
+ height: 202px;
4396
+ flex-shrink: 0;
4397
+ gap: 12px;
4398
+ border-width: 1px;
4399
+ border-style: dashed;
4400
+ border-color: rgb(56, 58, 68);
4401
+ border-radius: 4px;
4402
+ }
4403
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_infoTextAndButtonContainer__ZvsDL {
4404
+ display: none;
4405
+ height: auto;
4406
+ width: auto;
4407
+ gap: 8px;
4408
+ }
4409
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_infoText__hywuA {
4410
+ display: none;
4411
+ height: auto;
4412
+ width: auto;
4413
+ color: rgb(186, 187, 191);
4414
+ white-space: nowrap;
4415
+ text-align: left;
4416
+ }
4417
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneFileUploadTrigger__-Ai9k {
4418
+ display: none;
4419
+ }
4420
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneFileUploadTriggerChooseFileButton__I7Erl {
4421
+ display: none;
4422
+ border-color: rgb(56, 58, 68);
4423
+ border-radius: 4px;
4424
+ }
4425
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_loaderAnim__XxG7G {
4426
+ display: none;
4427
+ height: 64px;
4428
+ width: 64px;
4429
+ flex-shrink: 0;
4430
+ }
4431
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneFileName__wcqMo {
4432
+ display: none;
4433
+ }
4434
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneSupportedFormats__mEgzt {
4435
+ display: none;
4436
+ }
4437
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneRemoveUploadButton__McYoe {
4438
+ display: none;
4439
+ }
4440
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneRemoveUploadButtonDeleteButton__kUcdq {
4441
+ display: none;
4442
+ }
4443
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneRemoveUploadButtonDeleteButtoncloseDelete__TgTog {
4444
+ display: none;
4445
+ color: rgb(233, 233, 234);
4446
+ }
4447
+ .DropzoneContent-module_type--Drag__9BalI .DropzoneContent-module_dropzoneDrag__PlBJv {
4448
+ display: flex;
4449
+ height: 100%;
4450
+ width: 100%;
4451
+ border-style: dashed;
4452
+ border-width: 1px;
4453
+ border-color: var(--colours-grey-450);
4454
+ background-color: rgb(128, 128, 128);
4455
+ opacity: 0.5;
4456
+ }
4358
4457
  .Form-module_form__9JYdv {
4359
4458
  display: flex;
4360
4459
  flex-direction: column;