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.esm.js
CHANGED
|
@@ -356,21 +356,24 @@ const PlusIcon = ({
|
|
|
356
356
|
fill: color
|
|
357
357
|
}));
|
|
358
358
|
|
|
359
|
-
const ArrowLeftIcon =
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
359
|
+
const ArrowLeftIcon = _ref => {
|
|
360
|
+
let {
|
|
361
|
+
width = '16',
|
|
362
|
+
height = '16',
|
|
363
|
+
color = '#212121',
|
|
364
|
+
...props
|
|
365
|
+
} = _ref;
|
|
366
|
+
return /*#__PURE__*/React$1.createElement("svg", _extends$1({
|
|
367
|
+
width: width,
|
|
368
|
+
height: height,
|
|
369
|
+
viewBox: "0 0 16 16",
|
|
370
|
+
fill: "none",
|
|
371
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
372
|
+
}, props), /*#__PURE__*/React$1.createElement("path", {
|
|
373
|
+
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",
|
|
374
|
+
fill: color
|
|
375
|
+
}));
|
|
376
|
+
};
|
|
374
377
|
|
|
375
378
|
const Plus = ({
|
|
376
379
|
width = 17,
|
|
@@ -3144,6 +3147,24 @@ const UploadIcon = _ref => {
|
|
|
3144
3147
|
}));
|
|
3145
3148
|
};
|
|
3146
3149
|
|
|
3150
|
+
const UploadIconV2 = _ref => {
|
|
3151
|
+
let {
|
|
3152
|
+
color = '"#066768"',
|
|
3153
|
+
width = '14',
|
|
3154
|
+
height = '14'
|
|
3155
|
+
} = _ref;
|
|
3156
|
+
return /*#__PURE__*/React.createElement("svg", {
|
|
3157
|
+
width: width,
|
|
3158
|
+
height: height,
|
|
3159
|
+
viewBox: "0 0 14 14",
|
|
3160
|
+
fill: "none",
|
|
3161
|
+
xmlns: "http://www.w3.org/2000/svg"
|
|
3162
|
+
}, /*#__PURE__*/React.createElement("path", {
|
|
3163
|
+
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",
|
|
3164
|
+
fill: color
|
|
3165
|
+
}));
|
|
3166
|
+
};
|
|
3167
|
+
|
|
3147
3168
|
const LinkButton = _ref => {
|
|
3148
3169
|
let {
|
|
3149
3170
|
text = '',
|
|
@@ -3305,6 +3326,14 @@ const LinkButton = _ref => {
|
|
|
3305
3326
|
width: iconWidth,
|
|
3306
3327
|
color: color
|
|
3307
3328
|
}));
|
|
3329
|
+
case 'uploadv2':
|
|
3330
|
+
return /*#__PURE__*/React$1.createElement(IconWrapper$4, {
|
|
3331
|
+
className: "UploadIconV2"
|
|
3332
|
+
}, /*#__PURE__*/React$1.createElement(UploadIconV2, {
|
|
3333
|
+
height: iconHeight,
|
|
3334
|
+
width: iconWidth,
|
|
3335
|
+
color: color
|
|
3336
|
+
}));
|
|
3308
3337
|
default:
|
|
3309
3338
|
return '';
|
|
3310
3339
|
}
|
|
@@ -10393,23 +10422,24 @@ const QuarterPopupPicker = ({
|
|
|
10393
10422
|
};
|
|
10394
10423
|
|
|
10395
10424
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10396
|
-
const QuarterPicker =
|
|
10397
|
-
|
|
10398
|
-
|
|
10399
|
-
|
|
10400
|
-
|
|
10401
|
-
|
|
10402
|
-
|
|
10403
|
-
|
|
10404
|
-
|
|
10405
|
-
|
|
10406
|
-
|
|
10407
|
-
|
|
10408
|
-
|
|
10409
|
-
|
|
10410
|
-
|
|
10411
|
-
|
|
10412
|
-
|
|
10425
|
+
const QuarterPicker = _ref => {
|
|
10426
|
+
let {
|
|
10427
|
+
availableQuarters,
|
|
10428
|
+
// ["Q1-2024"]
|
|
10429
|
+
label,
|
|
10430
|
+
onChange,
|
|
10431
|
+
borderRadius,
|
|
10432
|
+
required,
|
|
10433
|
+
width,
|
|
10434
|
+
height,
|
|
10435
|
+
placeholder,
|
|
10436
|
+
disabled,
|
|
10437
|
+
borderColor,
|
|
10438
|
+
borderColorFocus,
|
|
10439
|
+
textColor,
|
|
10440
|
+
selectedValue,
|
|
10441
|
+
startYear
|
|
10442
|
+
} = _ref;
|
|
10413
10443
|
const [isFocused, setIsFocused] = useState(false);
|
|
10414
10444
|
const [isOpen, setIsOpen] = useState(false);
|
|
10415
10445
|
const [value, setValue] = useState('');
|
|
@@ -10851,22 +10881,23 @@ const MonthPopupPicker = ({
|
|
|
10851
10881
|
};
|
|
10852
10882
|
|
|
10853
10883
|
/* eslint-disable import/no-extraneous-dependencies */
|
|
10854
|
-
const MonthPicker =
|
|
10855
|
-
|
|
10856
|
-
|
|
10857
|
-
|
|
10858
|
-
|
|
10859
|
-
|
|
10860
|
-
|
|
10861
|
-
|
|
10862
|
-
|
|
10863
|
-
|
|
10864
|
-
|
|
10865
|
-
|
|
10866
|
-
|
|
10867
|
-
|
|
10868
|
-
|
|
10869
|
-
|
|
10884
|
+
const MonthPicker = _ref => {
|
|
10885
|
+
let {
|
|
10886
|
+
availableMonths,
|
|
10887
|
+
label,
|
|
10888
|
+
onChange,
|
|
10889
|
+
borderRadius,
|
|
10890
|
+
required,
|
|
10891
|
+
width,
|
|
10892
|
+
height,
|
|
10893
|
+
placeholder,
|
|
10894
|
+
disabled,
|
|
10895
|
+
borderColor,
|
|
10896
|
+
borderColorFocus,
|
|
10897
|
+
textColor,
|
|
10898
|
+
selectedValue,
|
|
10899
|
+
startYear
|
|
10900
|
+
} = _ref;
|
|
10870
10901
|
const [isFocused, setIsFocused] = useState(false);
|
|
10871
10902
|
const [isOpen, setIsOpen] = useState(false);
|
|
10872
10903
|
const [value, setValue] = useState('');
|
|
@@ -23977,21 +24008,22 @@ const DeleteIcon = styled.div`
|
|
|
23977
24008
|
position: absolute;
|
|
23978
24009
|
`;
|
|
23979
24010
|
|
|
23980
|
-
const QuickFilterDropdownSingle =
|
|
23981
|
-
|
|
23982
|
-
|
|
23983
|
-
|
|
23984
|
-
|
|
23985
|
-
|
|
23986
|
-
|
|
23987
|
-
|
|
23988
|
-
|
|
23989
|
-
|
|
23990
|
-
|
|
23991
|
-
|
|
23992
|
-
|
|
23993
|
-
|
|
23994
|
-
|
|
24011
|
+
const QuickFilterDropdownSingle = _ref => {
|
|
24012
|
+
let {
|
|
24013
|
+
label,
|
|
24014
|
+
hoverColor,
|
|
24015
|
+
options,
|
|
24016
|
+
selectedValue,
|
|
24017
|
+
placeHolder,
|
|
24018
|
+
onChange,
|
|
24019
|
+
disabled,
|
|
24020
|
+
width,
|
|
24021
|
+
error,
|
|
24022
|
+
errorMessage,
|
|
24023
|
+
xIconShow,
|
|
24024
|
+
labelColor,
|
|
24025
|
+
showLabelOnTop
|
|
24026
|
+
} = _ref;
|
|
23995
24027
|
const [isFocused, setIsFocused] = useState(false);
|
|
23996
24028
|
const [showOptions, setShowOptions] = useState(false);
|
|
23997
24029
|
const [inputValue, setInputValue] = useState("");
|
|
@@ -24388,23 +24420,24 @@ const IconContainer$2 = styled.div`
|
|
|
24388
24420
|
cursor: pointer;
|
|
24389
24421
|
`;
|
|
24390
24422
|
|
|
24391
|
-
const QuickFilterDropdownMultiSelection =
|
|
24392
|
-
|
|
24393
|
-
|
|
24394
|
-
|
|
24395
|
-
|
|
24396
|
-
|
|
24397
|
-
|
|
24398
|
-
|
|
24399
|
-
|
|
24400
|
-
|
|
24401
|
-
|
|
24402
|
-
|
|
24403
|
-
|
|
24404
|
-
|
|
24405
|
-
|
|
24406
|
-
|
|
24407
|
-
|
|
24423
|
+
const QuickFilterDropdownMultiSelection = _ref => {
|
|
24424
|
+
let {
|
|
24425
|
+
label,
|
|
24426
|
+
labelEmptyValue,
|
|
24427
|
+
options,
|
|
24428
|
+
selectedValue,
|
|
24429
|
+
placeHolder,
|
|
24430
|
+
onChange,
|
|
24431
|
+
required,
|
|
24432
|
+
disabled,
|
|
24433
|
+
width,
|
|
24434
|
+
error,
|
|
24435
|
+
errorMessage,
|
|
24436
|
+
labelColor,
|
|
24437
|
+
xIconShow,
|
|
24438
|
+
checkBoxColor,
|
|
24439
|
+
showLabelOnTop
|
|
24440
|
+
} = _ref;
|
|
24408
24441
|
const [isFocused, setIsFocused] = useState(false);
|
|
24409
24442
|
const [showOptions, setShowOptions] = useState(false);
|
|
24410
24443
|
const [inputValue, setInputValue] = useState('');
|
|
@@ -28154,6 +28187,12 @@ const IconButton$1 = props => {
|
|
|
28154
28187
|
width: iconWidth,
|
|
28155
28188
|
color: contentColor
|
|
28156
28189
|
});
|
|
28190
|
+
case 'arrowleft':
|
|
28191
|
+
return /*#__PURE__*/React$1.createElement(ArrowLeftIcon, {
|
|
28192
|
+
height: iconHeight,
|
|
28193
|
+
width: iconWidth,
|
|
28194
|
+
color: contentColor
|
|
28195
|
+
});
|
|
28157
28196
|
default:
|
|
28158
28197
|
return '';
|
|
28159
28198
|
}
|
|
@@ -35570,9 +35609,12 @@ const ToggleSwitchLabel = styled.label`
|
|
|
35570
35609
|
position: relative;
|
|
35571
35610
|
cursor: pointer;
|
|
35572
35611
|
user-select: none;
|
|
35573
|
-
opacity: ${
|
|
35574
|
-
|
|
35575
|
-
|
|
35612
|
+
opacity: ${_ref => {
|
|
35613
|
+
let {
|
|
35614
|
+
disabled
|
|
35615
|
+
} = _ref;
|
|
35616
|
+
return disabled ? 0.5 : 1;
|
|
35617
|
+
}};
|
|
35576
35618
|
`;
|
|
35577
35619
|
const ToggleInput = styled.input`
|
|
35578
35620
|
display: none;
|
|
@@ -35580,15 +35622,19 @@ const ToggleInput = styled.input`
|
|
|
35580
35622
|
const ToggleSlider = styled.span`
|
|
35581
35623
|
display: block;
|
|
35582
35624
|
position: relative;
|
|
35583
|
-
background: ${
|
|
35584
|
-
|
|
35585
|
-
|
|
35586
|
-
|
|
35625
|
+
background: ${_ref2 => {
|
|
35626
|
+
let {
|
|
35627
|
+
checked,
|
|
35628
|
+
disabled
|
|
35629
|
+
} = _ref2;
|
|
35630
|
+
return checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc";
|
|
35631
|
+
}};
|
|
35587
35632
|
border-radius: 999px;
|
|
35588
35633
|
transition: background 0.2s;
|
|
35589
|
-
${
|
|
35590
|
-
|
|
35591
|
-
|
|
35634
|
+
${_ref3 => {
|
|
35635
|
+
let {
|
|
35636
|
+
size
|
|
35637
|
+
} = _ref3;
|
|
35592
35638
|
switch (size) {
|
|
35593
35639
|
case "s":
|
|
35594
35640
|
return css`width: 40px; height: 20px;`;
|
|
@@ -35607,9 +35653,10 @@ const ToggleSlider = styled.span`
|
|
|
35607
35653
|
background: #fff;
|
|
35608
35654
|
border-radius: 50%;
|
|
35609
35655
|
transition: left 0.2s, width 0.2s, height 0.2s;
|
|
35610
|
-
${
|
|
35611
|
-
|
|
35612
|
-
|
|
35656
|
+
${_ref4 => {
|
|
35657
|
+
let {
|
|
35658
|
+
size
|
|
35659
|
+
} = _ref4;
|
|
35613
35660
|
switch (size) {
|
|
35614
35661
|
case "s":
|
|
35615
35662
|
return css`width: 14px; height: 14px;`;
|
|
@@ -35619,10 +35666,11 @@ const ToggleSlider = styled.span`
|
|
|
35619
35666
|
return css`width: 20px; height: 20px;`;
|
|
35620
35667
|
}
|
|
35621
35668
|
}}
|
|
35622
|
-
left: ${
|
|
35623
|
-
|
|
35624
|
-
|
|
35625
|
-
|
|
35669
|
+
left: ${_ref5 => {
|
|
35670
|
+
let {
|
|
35671
|
+
checked,
|
|
35672
|
+
size
|
|
35673
|
+
} = _ref5;
|
|
35626
35674
|
if (!checked) return "3px";
|
|
35627
35675
|
switch (size) {
|
|
35628
35676
|
case "s":
|
|
@@ -35636,9 +35684,9 @@ const ToggleSlider = styled.span`
|
|
|
35636
35684
|
}
|
|
35637
35685
|
`;
|
|
35638
35686
|
|
|
35639
|
-
/**
|
|
35640
|
-
* ToggleSwitch component for on/off states.
|
|
35641
|
-
* Supports small/large sizes and disabled state.
|
|
35687
|
+
/**
|
|
35688
|
+
* ToggleSwitch component for on/off states.
|
|
35689
|
+
* Supports small/large sizes and disabled state.
|
|
35642
35690
|
*/
|
|
35643
35691
|
function ToggleSwitch(_ref) {
|
|
35644
35692
|
let {
|