sag_components 2.0.0-beta161 → 2.0.0-beta162
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.esm.js +148 -100
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +148 -100
- package/dist/index.js.map +1 -1
- package/dist/types/components/Tag/Tag.d.ts +1 -0
- package/dist/types/components/Tag/Tag.stories.d.ts +99 -0
- package/dist/types/components/Tag/Tag.style.d.ts +1 -0
- package/dist/types/icons/UploadIconV2.d.ts +6 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -366,21 +366,24 @@ const PlusIcon = ({
|
|
|
366
366
|
fill: color
|
|
367
367
|
}));
|
|
368
368
|
|
|
369
|
-
const ArrowLeftIcon =
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
369
|
+
const ArrowLeftIcon = _ref => {
|
|
370
|
+
let {
|
|
371
|
+
width = '16',
|
|
372
|
+
height = '16',
|
|
373
|
+
color = '#212121',
|
|
374
|
+
...props
|
|
375
|
+
} = _ref;
|
|
376
|
+
return /*#__PURE__*/React__default["default"].createElement("svg", _extends$1({
|
|
377
|
+
width: width,
|
|
378
|
+
height: height,
|
|
379
|
+
viewBox: "0 0 16 16",
|
|
380
|
+
fill: "none",
|
|
381
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
382
|
+
}, props), /*#__PURE__*/React__default["default"].createElement("path", {
|
|
383
|
+
d: "M1.21875 8.54703C1.0625 8.39078 1 8.20328 1 7.98453C1 7.79703 1.0625 7.60953 1.21875 7.45328L6.71875 2.20328C7.03125 1.92203 7.5 1.92203 7.78125 2.23453C8.0625 2.51578 8.0625 3.01578 7.75 3.29703L3.59375 7.23453H14.25C14.6562 7.23453 15 7.57828 15 7.98453C15 8.42203 14.6562 8.73453 14.25 8.73453H3.59375L7.75 12.7033C8.0625 12.9845 8.0625 13.4533 7.78125 13.7658C7.5 14.0783 7.03125 14.0783 6.71875 13.797L1.21875 8.54703Z",
|
|
384
|
+
fill: color
|
|
385
|
+
}));
|
|
386
|
+
};
|
|
384
387
|
|
|
385
388
|
const Plus = ({
|
|
386
389
|
width = 17,
|
|
@@ -3154,6 +3157,24 @@ const UploadIcon = _ref => {
|
|
|
3154
3157
|
}));
|
|
3155
3158
|
};
|
|
3156
3159
|
|
|
3160
|
+
const UploadIconV2 = _ref => {
|
|
3161
|
+
let {
|
|
3162
|
+
color = '"#066768"',
|
|
3163
|
+
width = '14',
|
|
3164
|
+
height = '14'
|
|
3165
|
+
} = _ref;
|
|
3166
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
3167
|
+
width: width,
|
|
3168
|
+
height: height,
|
|
3169
|
+
viewBox: "0 0 14 14",
|
|
3170
|
+
fill: "none",
|
|
3171
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
3172
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
3173
|
+
d: "M7.4175 1.75616V9.91557C7.4175 10.1447 7.23005 10.3321 7.00094 10.3321C6.77183 10.3321 6.58437 10.1447 6.58437 9.91557V1.75616L3.96263 4.3779C3.80122 4.53931 3.53566 4.53931 3.37424 4.3779C3.21282 4.21648 3.21282 3.95092 3.37424 3.7895L6.70674 0.457001C6.86816 0.295583 7.13372 0.295583 7.29513 0.457001L10.6276 3.7895C10.7891 3.95092 10.7891 4.21648 10.6276 4.3779C10.4662 4.53931 10.2007 4.53931 10.0392 4.3779L7.4175 1.75616ZM5.75125 9.49901H2.00219C1.54137 9.49901 1.16906 9.87131 1.16906 10.3321V11.9984C1.16906 12.4592 1.54137 12.8315 2.00219 12.8315H11.9997C12.4605 12.8315 12.8328 12.4592 12.8328 11.9984V10.3321C12.8328 9.87131 12.4605 9.49901 11.9997 9.49901H8.25063V8.66589H11.9997C12.9187 8.66589 13.6659 9.4131 13.6659 10.3321V11.9984C13.6659 12.9174 12.9187 13.6646 11.9997 13.6646H2.00219C1.08315 13.6646 0.335938 12.9174 0.335938 11.9984V10.3321C0.335938 9.4131 1.08315 8.66589 2.00219 8.66589H5.75125V9.49901ZM10.3334 11.1653C10.3334 10.9995 10.3993 10.8406 10.5164 10.7234C10.6336 10.6062 10.7926 10.5404 10.9583 10.5404C11.124 10.5404 11.2829 10.6062 11.4001 10.7234C11.5173 10.8406 11.5831 10.9995 11.5831 11.1653C11.5831 11.331 11.5173 11.4899 11.4001 11.6071C11.2829 11.7243 11.124 11.7901 10.9583 11.7901C10.7926 11.7901 10.6336 11.7243 10.5164 11.6071C10.3993 11.4899 10.3334 11.331 10.3334 11.1653Z",
|
|
3174
|
+
fill: color
|
|
3175
|
+
}));
|
|
3176
|
+
};
|
|
3177
|
+
|
|
3157
3178
|
const LinkButton = _ref => {
|
|
3158
3179
|
let {
|
|
3159
3180
|
text = '',
|
|
@@ -3315,6 +3336,14 @@ const LinkButton = _ref => {
|
|
|
3315
3336
|
width: iconWidth,
|
|
3316
3337
|
color: color
|
|
3317
3338
|
}));
|
|
3339
|
+
case 'uploadv2':
|
|
3340
|
+
return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, {
|
|
3341
|
+
className: "UploadIconV2"
|
|
3342
|
+
}, /*#__PURE__*/React__default["default"].createElement(UploadIconV2, {
|
|
3343
|
+
height: iconHeight,
|
|
3344
|
+
width: iconWidth,
|
|
3345
|
+
color: color
|
|
3346
|
+
}));
|
|
3318
3347
|
default:
|
|
3319
3348
|
return '';
|
|
3320
3349
|
}
|
|
@@ -10403,23 +10432,24 @@ const QuarterPopupPicker = ({
|
|
|
10403
10432
|
};
|
|
10404
10433
|
|
|
10405
10434
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10406
|
-
const QuarterPicker =
|
|
10407
|
-
|
|
10408
|
-
|
|
10409
|
-
|
|
10410
|
-
|
|
10411
|
-
|
|
10412
|
-
|
|
10413
|
-
|
|
10414
|
-
|
|
10415
|
-
|
|
10416
|
-
|
|
10417
|
-
|
|
10418
|
-
|
|
10419
|
-
|
|
10420
|
-
|
|
10421
|
-
|
|
10422
|
-
|
|
10435
|
+
const QuarterPicker = _ref => {
|
|
10436
|
+
let {
|
|
10437
|
+
availableQuarters,
|
|
10438
|
+
// ["Q1-2024"]
|
|
10439
|
+
label,
|
|
10440
|
+
onChange,
|
|
10441
|
+
borderRadius,
|
|
10442
|
+
required,
|
|
10443
|
+
width,
|
|
10444
|
+
height,
|
|
10445
|
+
placeholder,
|
|
10446
|
+
disabled,
|
|
10447
|
+
borderColor,
|
|
10448
|
+
borderColorFocus,
|
|
10449
|
+
textColor,
|
|
10450
|
+
selectedValue,
|
|
10451
|
+
startYear
|
|
10452
|
+
} = _ref;
|
|
10423
10453
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10424
10454
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10425
10455
|
const [value, setValue] = React$1.useState('');
|
|
@@ -10861,22 +10891,23 @@ const MonthPopupPicker = ({
|
|
|
10861
10891
|
};
|
|
10862
10892
|
|
|
10863
10893
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10864
|
-
const MonthPicker =
|
|
10865
|
-
|
|
10866
|
-
|
|
10867
|
-
|
|
10868
|
-
|
|
10869
|
-
|
|
10870
|
-
|
|
10871
|
-
|
|
10872
|
-
|
|
10873
|
-
|
|
10874
|
-
|
|
10875
|
-
|
|
10876
|
-
|
|
10877
|
-
|
|
10878
|
-
|
|
10879
|
-
|
|
10894
|
+
const MonthPicker = _ref => {
|
|
10895
|
+
let {
|
|
10896
|
+
availableMonths,
|
|
10897
|
+
label,
|
|
10898
|
+
onChange,
|
|
10899
|
+
borderRadius,
|
|
10900
|
+
required,
|
|
10901
|
+
width,
|
|
10902
|
+
height,
|
|
10903
|
+
placeholder,
|
|
10904
|
+
disabled,
|
|
10905
|
+
borderColor,
|
|
10906
|
+
borderColorFocus,
|
|
10907
|
+
textColor,
|
|
10908
|
+
selectedValue,
|
|
10909
|
+
startYear
|
|
10910
|
+
} = _ref;
|
|
10880
10911
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
10881
10912
|
const [isOpen, setIsOpen] = React$1.useState(false);
|
|
10882
10913
|
const [value, setValue] = React$1.useState('');
|
|
@@ -23987,21 +24018,22 @@ const DeleteIcon = styled__default["default"].div`
|
|
|
23987
24018
|
position: absolute;
|
|
23988
24019
|
`;
|
|
23989
24020
|
|
|
23990
|
-
const QuickFilterDropdownSingle =
|
|
23991
|
-
|
|
23992
|
-
|
|
23993
|
-
|
|
23994
|
-
|
|
23995
|
-
|
|
23996
|
-
|
|
23997
|
-
|
|
23998
|
-
|
|
23999
|
-
|
|
24000
|
-
|
|
24001
|
-
|
|
24002
|
-
|
|
24003
|
-
|
|
24004
|
-
|
|
24021
|
+
const QuickFilterDropdownSingle = _ref => {
|
|
24022
|
+
let {
|
|
24023
|
+
label,
|
|
24024
|
+
hoverColor,
|
|
24025
|
+
options,
|
|
24026
|
+
selectedValue,
|
|
24027
|
+
placeHolder,
|
|
24028
|
+
onChange,
|
|
24029
|
+
disabled,
|
|
24030
|
+
width,
|
|
24031
|
+
error,
|
|
24032
|
+
errorMessage,
|
|
24033
|
+
xIconShow,
|
|
24034
|
+
labelColor,
|
|
24035
|
+
showLabelOnTop
|
|
24036
|
+
} = _ref;
|
|
24005
24037
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24006
24038
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24007
24039
|
const [inputValue, setInputValue] = React$1.useState("");
|
|
@@ -24398,23 +24430,24 @@ const IconContainer$2 = styled__default["default"].div`
|
|
|
24398
24430
|
cursor: pointer;
|
|
24399
24431
|
`;
|
|
24400
24432
|
|
|
24401
|
-
const QuickFilterDropdownMultiSelection =
|
|
24402
|
-
|
|
24403
|
-
|
|
24404
|
-
|
|
24405
|
-
|
|
24406
|
-
|
|
24407
|
-
|
|
24408
|
-
|
|
24409
|
-
|
|
24410
|
-
|
|
24411
|
-
|
|
24412
|
-
|
|
24413
|
-
|
|
24414
|
-
|
|
24415
|
-
|
|
24416
|
-
|
|
24417
|
-
|
|
24433
|
+
const QuickFilterDropdownMultiSelection = _ref => {
|
|
24434
|
+
let {
|
|
24435
|
+
label,
|
|
24436
|
+
labelEmptyValue,
|
|
24437
|
+
options,
|
|
24438
|
+
selectedValue,
|
|
24439
|
+
placeHolder,
|
|
24440
|
+
onChange,
|
|
24441
|
+
required,
|
|
24442
|
+
disabled,
|
|
24443
|
+
width,
|
|
24444
|
+
error,
|
|
24445
|
+
errorMessage,
|
|
24446
|
+
labelColor,
|
|
24447
|
+
xIconShow,
|
|
24448
|
+
checkBoxColor,
|
|
24449
|
+
showLabelOnTop
|
|
24450
|
+
} = _ref;
|
|
24418
24451
|
const [isFocused, setIsFocused] = React$1.useState(false);
|
|
24419
24452
|
const [showOptions, setShowOptions] = React$1.useState(false);
|
|
24420
24453
|
const [inputValue, setInputValue] = React$1.useState('');
|
|
@@ -28164,6 +28197,12 @@ const IconButton$1 = props => {
|
|
|
28164
28197
|
width: iconWidth,
|
|
28165
28198
|
color: contentColor
|
|
28166
28199
|
});
|
|
28200
|
+
case 'arrowleft':
|
|
28201
|
+
return /*#__PURE__*/React__default["default"].createElement(ArrowLeftIcon, {
|
|
28202
|
+
height: iconHeight,
|
|
28203
|
+
width: iconWidth,
|
|
28204
|
+
color: contentColor
|
|
28205
|
+
});
|
|
28167
28206
|
default:
|
|
28168
28207
|
return '';
|
|
28169
28208
|
}
|
|
@@ -35580,9 +35619,12 @@ const ToggleSwitchLabel = styled__default["default"].label`
|
|
|
35580
35619
|
position: relative;
|
|
35581
35620
|
cursor: pointer;
|
|
35582
35621
|
user-select: none;
|
|
35583
|
-
opacity: ${
|
|
35584
|
-
|
|
35585
|
-
|
|
35622
|
+
opacity: ${_ref => {
|
|
35623
|
+
let {
|
|
35624
|
+
disabled
|
|
35625
|
+
} = _ref;
|
|
35626
|
+
return disabled ? 0.5 : 1;
|
|
35627
|
+
}};
|
|
35586
35628
|
`;
|
|
35587
35629
|
const ToggleInput = styled__default["default"].input`
|
|
35588
35630
|
display: none;
|
|
@@ -35590,15 +35632,19 @@ const ToggleInput = styled__default["default"].input`
|
|
|
35590
35632
|
const ToggleSlider = styled__default["default"].span`
|
|
35591
35633
|
display: block;
|
|
35592
35634
|
position: relative;
|
|
35593
|
-
background: ${
|
|
35594
|
-
|
|
35595
|
-
|
|
35596
|
-
|
|
35635
|
+
background: ${_ref2 => {
|
|
35636
|
+
let {
|
|
35637
|
+
checked,
|
|
35638
|
+
disabled
|
|
35639
|
+
} = _ref2;
|
|
35640
|
+
return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
|
|
35641
|
+
}};
|
|
35597
35642
|
border-radius: 999px;
|
|
35598
35643
|
transition: background 0.2s;
|
|
35599
|
-
${
|
|
35600
|
-
|
|
35601
|
-
|
|
35644
|
+
${_ref3 => {
|
|
35645
|
+
let {
|
|
35646
|
+
size
|
|
35647
|
+
} = _ref3;
|
|
35602
35648
|
switch (size) {
|
|
35603
35649
|
case "s":
|
|
35604
35650
|
return styled.css`width: 40px; height: 20px;`;
|
|
@@ -35617,9 +35663,10 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35617
35663
|
background: #fff;
|
|
35618
35664
|
border-radius: 50%;
|
|
35619
35665
|
transition: left 0.2s, width 0.2s, height 0.2s;
|
|
35620
|
-
${
|
|
35621
|
-
|
|
35622
|
-
|
|
35666
|
+
${_ref4 => {
|
|
35667
|
+
let {
|
|
35668
|
+
size
|
|
35669
|
+
} = _ref4;
|
|
35623
35670
|
switch (size) {
|
|
35624
35671
|
case "s":
|
|
35625
35672
|
return styled.css`width: 14px; height: 14px;`;
|
|
@@ -35629,10 +35676,11 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35629
35676
|
return styled.css`width: 20px; height: 20px;`;
|
|
35630
35677
|
}
|
|
35631
35678
|
}}
|
|
35632
|
-
left: ${
|
|
35633
|
-
|
|
35634
|
-
|
|
35635
|
-
|
|
35679
|
+
left: ${_ref5 => {
|
|
35680
|
+
let {
|
|
35681
|
+
checked,
|
|
35682
|
+
size
|
|
35683
|
+
} = _ref5;
|
|
35636
35684
|
if (!checked) return "3px";
|
|
35637
35685
|
switch (size) {
|
|
35638
35686
|
case "s":
|
|
@@ -35646,9 +35694,9 @@ const ToggleSlider = styled__default["default"].span`
|
|
|
35646
35694
|
}
|
|
35647
35695
|
`;
|
|
35648
35696
|
|
|
35649
|
-
/**
|
|
35650
|
-
* ToggleSwitch component for on/off states.
|
|
35651
|
-
* Supports small/large sizes and disabled state.
|
|
35697
|
+
/**
|
|
35698
|
+
* ToggleSwitch component for on/off states.
|
|
35699
|
+
* Supports small/large sizes and disabled state.
|
|
35652
35700
|
*/
|
|
35653
35701
|
function ToggleSwitch(_ref) {
|
|
35654
35702
|
let {
|