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 CHANGED
@@ -356,21 +356,24 @@ const PlusIcon = ({
356
356
  fill: color
357
357
  }));
358
358
 
359
- const ArrowLeftIcon = ({
360
- width = '16',
361
- height = '16',
362
- color = '#212121',
363
- ...props
364
- }) => /*#__PURE__*/React$1.createElement("svg", _extends$1({
365
- width: width,
366
- height: height,
367
- viewBox: "0 0 16 16",
368
- fill: "none",
369
- xmlns: "http://www.w3.org/2000/svg"
370
- }, props), /*#__PURE__*/React$1.createElement("path", {
371
- 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",
372
- fill: color
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
- availableQuarters,
10398
- // ["Q1-2024"]
10399
- label,
10400
- onChange,
10401
- borderRadius,
10402
- required,
10403
- width,
10404
- height,
10405
- placeholder,
10406
- disabled,
10407
- borderColor,
10408
- borderColorFocus,
10409
- textColor,
10410
- selectedValue,
10411
- startYear
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
- availableMonths,
10856
- label,
10857
- onChange,
10858
- borderRadius,
10859
- required,
10860
- width,
10861
- height,
10862
- placeholder,
10863
- disabled,
10864
- borderColor,
10865
- borderColorFocus,
10866
- textColor,
10867
- selectedValue,
10868
- startYear
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
- label,
23982
- hoverColor,
23983
- options,
23984
- selectedValue,
23985
- placeHolder,
23986
- onChange,
23987
- disabled,
23988
- width,
23989
- error,
23990
- errorMessage,
23991
- xIconShow,
23992
- labelColor,
23993
- showLabelOnTop
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
- label,
24393
- labelEmptyValue,
24394
- options,
24395
- selectedValue,
24396
- placeHolder,
24397
- onChange,
24398
- required,
24399
- disabled,
24400
- width,
24401
- error,
24402
- errorMessage,
24403
- labelColor,
24404
- xIconShow,
24405
- checkBoxColor,
24406
- showLabelOnTop
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
- disabled
35575
- }) => disabled ? 0.5 : 1};
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
- checked,
35585
- disabled
35586
- }) => checked ? disabled ? "#7bb1b0" : "#006d6a" : "#cfd8dc"};
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
- size
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
- size
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
- checked,
35624
- size
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 {