sag_components 1.0.975 → 1.0.976

package/dist/stories/components/FilterPanel/FilterPanel.style.js

@@ -5,17 +5,85 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipTextContainer = exports.TooltipText = exports.PeriodPickerEmptyText = exports.PeriodPickerEmptyContainer = exports.PeriodPickerContainer = exports.FieldsContainer = exports.FieldContainer = exports.DatePickerContainer = exports.ControlsContainer = exports.ButtonsContainer = exports.AllFieldsContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 14px;\n  width: ", ";\n  height: ", ";\n  padding: 40px 30px 20px;\n  background-color: #fefefe;\n  border-radius: 10px;\n  box-shadow: ", ";\n  box-sizing: border-box;\n"])), props => props.width, props => props.height, props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : '');
-const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  gap: 10px;\n  flex-direction: row-reverse; \n"])));
-const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  flex-wrap: wrap;\n  width: 100%;\n"])));
-const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  white-space: wrap;\n  gap: 20px;\n  width: 100%;\n"])));
-const FieldContainer = exports.FieldContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0;\n"])));
-const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
-const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)([" \n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n"])));
-const PeriodPickerEmptyContainer = exports.PeriodPickerEmptyContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n  display: flex;  \n  align-content: center;\n  justify-content: flex-start;\n  align-items: center;  \n  margin-bottom: 10px;\n  border-radius: 10px; \n  border: 1px solid #E7E7E7;\n  width: ", ";\n  height: ", ";     \n  &:hover {\n    cursor: pointer;\n  } \n"])), props => props.width, props => props.height);
-const PeriodPickerEmptyText = exports.PeriodPickerEmptyText = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 20px;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  color: #8B8989;\n  user-select: none;    \n"])));
-const TooltipTextContainer = exports.TooltipTextContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 5px;\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  line-height: 20px;\n  user-select: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
-const TooltipText = exports.TooltipText = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n  margin: 0; \n"])));
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-family: "Poppins", sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  padding: 40px 30px 20px;
+  background-color: #fefefe;
+  border-radius: 10px;
+  box-shadow: ${props => props.showShadow ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : ''};
+  box-sizing: border-box;
+`;
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div`
+  display: flex;  
+  gap: 10px;
+  flex-direction: row-reverse; 
+`;
+const AllFieldsContainer = exports.AllFieldsContainer = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  width: 100%;
+`;
+const FieldsContainer = exports.FieldsContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  white-space: wrap;
+  gap: 20px;
+  width: 100%;
+`;
+const FieldContainer = exports.FieldContainer = _styledComponents.default.div` 
+  margin: 0;
+`;
+const DatePickerContainer = exports.DatePickerContainer = _styledComponents.default.div`
+  margin: 0;
+`;
+const PeriodPickerContainer = exports.PeriodPickerContainer = _styledComponents.default.div` 
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const PeriodPickerEmptyContainer = exports.PeriodPickerEmptyContainer = _styledComponents.default.div` 
+  display: flex;  
+  align-content: center;
+  justify-content: flex-start;
+  align-items: center;  
+  margin-bottom: 10px;
+  border-radius: 10px; 
+  border: 1px solid #E7E7E7;
+  width: ${props => props.width};
+  height: ${props => props.height};     
+  &:hover {
+    cursor: pointer;
+  } 
+`;
+const PeriodPickerEmptyText = exports.PeriodPickerEmptyText = _styledComponents.default.div`
+  margin: 0 20px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  color: #8B8989;
+  user-select: none;    
+`;
+const TooltipTextContainer = exports.TooltipTextContainer = _styledComponents.default.div` 
+  margin: 5px;
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  user-select: none;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const TooltipText = exports.TooltipText = _styledComponents.default.div` 
+  margin: 0; 
+`;

package/dist/stories/components/FilterPanel.js

@@ -382,6 +382,8 @@ const FilterPanel = props => {
           isMulti: false,
           placeHolder: item.placeHolder,
           label: item.label,
+          orderBy: item.orderBy,
+          elementType: item.elementType,
           labelEmptyValue: item.labelEmptyValue,
           labelColor: borderColor,
           checkBoxColor: okButtonBackgroundColor,
@@ -404,6 +406,8 @@ const FilterPanel = props => {
           isMulti: true,
           placeHolder: item.placeHolder,
           label: item.label,
+          orderBy: item.orderBy,
+          elementType: item.elementType,
           labelEmptyValue: item.labelEmptyValue,
           labelColor: borderColor,
           checkBoxColor: okButtonBackgroundColor,

package/dist/stories/components/FormattedValue/FormattedValue.style.js

@@ -5,14 +5,87 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleAndValueContainer = exports.Title = exports.FormattedValueText = exports.CurrencySignOrPercent = exports.CurrencySignAndFormattedValueContainer = exports.ControlsContainer = exports.Controls = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  font-weight: 500;\n  font-size: 20px;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  display: flex;\n  align-items: center;\n  @media (max-width: 1536px) {\n    ", "\n  }\n\n  > * {\n    box-sizing: border-box;\n  }\n"])), props => props.textcolor, props => props.width, props => props.height, scrollableStyles);
-const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  background: white;  \n"])));
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: column; \n"])));
-const Title = exports.Title = _styledComponents.default.h4(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 20px;\n  margin: 0;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 10px;\n  }\n"])));
-const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  gap: 16px;\n"])));
-const CurrencySignOrPercent = exports.CurrencySignOrPercent = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 16px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 11px;\n  }\n"])));
-const FormattedValueText = exports.FormattedValueText = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  @media (max-width: 1536px) {\n    font-size: 34px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 28px;\n  }\n"])));
+const scrollableStyles = `
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #E8E8E8;
+    border-radius: 5px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #D0D0D0;
+    border-radius: 5px;
+  }
+`;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
+  position: relative;
+  font-family: "Poppins", sans-serif;
+  font-style: normal;
+  font-weight: 500;
+  font-size: 20px;
+  color: ${props => props.textcolor};
+  width: ${props => props.width};
+  height: ${props => props.height};
+  display: flex;
+  align-items: center;
+  @media (max-width: 1536px) {
+    ${scrollableStyles}
+  }
+
+  > * {
+    box-sizing: border-box;
+  }
+`;
+const Controls = exports.Controls = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: white;  
+`;
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column; 
+`;
+const Title = exports.Title = _styledComponents.default.h4`
+  font-weight: 400;
+  font-size: 20px;
+  margin: 0;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 10px;
+  }
+`;
+const CurrencySignAndFormattedValueContainer = exports.CurrencySignAndFormattedValueContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+const CurrencySignOrPercent = exports.CurrencySignOrPercent = _styledComponents.default.span`
+  font-weight: 500;
+  font-size: 16px;
+  @media (max-width: 1536px) {
+    font-size: 14px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 11px;
+  }
+`;
+const FormattedValueText = exports.FormattedValueText = _styledComponents.default.div`
+  font-weight: 500;
+  font-size: 40px;
+  @media (max-width: 1536px) {
+    font-size: 34px;
+  }
+  @media (max-width: 1366px) {
+    font-size: 28px;
+  }
+`;

package/dist/stories/components/IconButton/IconButton.style.js

@@ -1,15 +1,64 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SpanText = exports.IconButtonContainer = exports.CancelClick = exports.ButtonWrapper = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: fit-content;\n  text-align: center;\n"])));
-const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 400;\n  display: flex;\n  gap: 10px;\n  align-items: center;\n  justify-content: center;\n  padding: 12px 20px;\n  text-decoration: none;\n  color: ", ";\n  border-radius: ", ";\n  border: 1px solid ", ";\n  background: ", ";\n  position: relative;\n  transition: all .3s;\n  ", "\n  &:hover, &:focus {\n    cursor: pointer;\n    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n  }\n"])), props => props.color, props => props.borderRadius, props => props.borderColor.toString(), props => props.backgroundColor.toString(), props => props.inProgress && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n      pointer-events: none;\n      &:after {\n        content: 'In progress';\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-wrap: nowrap;\n        position: absolute;\n        background: linear-gradient(\n          to right,\n          #5FCC70 ", "%,\n          #B1B1B1 ", "%,\n          #B1B1B1 100%\n        );\n        width: 100%;\n        height: 100%;\n        border-radius: ", ";\n        border-width: 0;\n        z-index: 9;\n      }\n    "])), props.progress, props.progress + 1, props => props.borderRadius));
-const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
-const CancelClick = exports.CancelClick = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: inherit;\n  font-family: \"Lato\", sans-serif;;\n  font-size: 14px;\n  color: #568202;\n  cursor: pointer;\n  margin-top: 5px;\n"])));
+const ButtonWrapper = exports.ButtonWrapper = _styledComponents.default.div`
+  width: fit-content;
+  text-align: center;
+`;
+const IconButtonContainer = exports.IconButtonContainer = _styledComponents.default.a`
+  font-size: 14px;
+  font-weight: 400;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  text-decoration: none;
+  color: ${props => props.color};
+  border-radius: ${props => props.borderRadius};
+  border: 1px solid ${props => props.borderColor.toString()};
+  background: ${props => props.backgroundColor.toString()};
+  position: relative;
+  transition: all .3s;
+  ${props => props.inProgress && (0, _styledComponents.css)`
+      pointer-events: none;
+      &:after {
+        content: 'In progress';
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-wrap: nowrap;
+        position: absolute;
+        background: linear-gradient(
+          to right,
+          #5FCC70 ${props.progress}%,
+          #B1B1B1 ${props.progress + 1}%,
+          #B1B1B1 100%
+        );
+        width: 100%;
+        height: 100%;
+        border-radius: ${props => props.borderRadius};
+        border-width: 0;
+        z-index: 9;
+      }
+    `}
+  &:hover, &:focus {
+    cursor: pointer;
+    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  }
+`;
+const SpanText = exports.SpanText = _styledComponents.default.span`
+`;
+const CancelClick = exports.CancelClick = _styledComponents.default.span`
+  display: inherit;
+  font-family: "Lato", sans-serif;;
+  font-size: 14px;
+  color: #568202;
+  cursor: pointer;
+  margin-top: 5px;
+`;

package/dist/stories/components/Input/Input.style.js

@@ -5,13 +5,126 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledInput = exports.MainContainer = exports.Label = exports.InputSubContainer = exports.InputContainer = exports.IconWrapper = exports.ErrorMessage = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-content: center;\n  justify-content: center;\n  align-items: flex-start;\n  width: ", ";  \n  font-family: \"Poppins\", sans-serif;\n  font-weight: 400;\n  font-size: 14px;\n  border-radius: ", ";  \n  padding: 0;\n  cursor: ", ";\n"])), props => props.width || '300px', props => props.size === 'small' ? '8px' : '12px', props => props.disabled ? 'not-allowed' : 'default');
-const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n  font-size: ", ";\n  font-weight: 400;\n  padding-inline-end: 5px;\n  padding-inline-start: 5px;\n  margin-right: 10px; \n  z-index: 2;\n  color: ", ";\n  background-color: white;\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  font-family: Poppins;  \n  transform: translateY(-50%);\n  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  max-height: 16px;\n  gap: 4px;\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px', props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px', props => props.disabled ? 'not-allowed' : 'pointer');
-const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n    display: flex;       \n    flex-direction: row;\n    flex-wrap: nowrap; \n    justify-content: flex-start;\n    align-content: center;     \n    white-space: pre-wrap;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 16px;\n    gap: 14px;\n    width: 100%;\n    height: 100%;    \n    box-sizing: border-box;\n    background-color: #fff;\n    border:  1px solid ", ";\n    font-family: \"Poppins\", sans-serif;\n    font-weight: 400;\n    font-size: 14px;\n    border-radius: ", ";  \n    outline: none;\n    color: ", ";\n   \n  &:hover {\n    border: 1px solid ", ";\n  }\n\n  &:focus {  \n    border: 1px solid ", "; \n  }\n  \n"])), props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1', props => props.size === 'small' ? '8px' : '12px', props => props.disabled ? '#D0D0D0' : '#212121', props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121');
-const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n    display: flex;       \n    flex-direction: column;\n    flex-wrap: nowrap;     \n    align-content: center; \n    align-items: flex-start;\n    justify-content: center;\n    white-space: pre-wrap;\n    overflow: hidden;\n    padding: 5px 0;\n    width: 100%;\n    height: 100%;\n    min-height: ", ";\n    box-sizing: border-box;\n    background-color: #fff;    \n    border-radius: ", ";  \n    outline: none;\n    color: ", ";     \n    cursor: ", ";\n"])), props => props.size === 'medium' ? '52px' : '32px', props => props.size === 'small' ? '8px' : '12px', props => props.disabled ? '#D0D0D0' : '#212121', props => props.disabled ? 'not-allowed' : 'pointer');
-const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  width: calc(100% - 10px);\n  height: 20px;\n  font-family: Poppins;\n  font-weight: 400;\n  font-size: 14px;\n  outline: none;  \n  color: ", ";  \n  background-color: #fff;  \n  border: none;\n  cursor: ", ";\n"])), props => props.disabled ? '#D0D0D0' : '#212121', props => props.disabled ? 'not-allowed' : 'pointer');
-const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  color: red;\n  margin-top: 5px;\n  max-width: ", ";\n"])), props => props.width || '300px');
-const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n  padding: 2px; \n  &:hover{ \n    cursor: ", ";\n  }\n"])), props => props.disabled ? 'not-allowed' : 'pointer');
+const MainContainer = exports.MainContainer = _styledComponents.default.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  justify-content: center;
+  align-items: flex-start;
+  width: ${props => props.width || '300px'};  
+  font-family: "Poppins", sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+  padding: 0;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'default'};
+`;
+const Label = exports.Label = _styledComponents.default.label`
+
+  font-size: ${props => props.isFocused || props.hasValue ? '14px' : '14px'};
+  font-weight: 400;
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+  margin-right: 10px; 
+  z-index: 2;
+  color: ${props => props.error ? 'red' : props.disabled ? '#D0D0D0' : props.labelColor};
+  background-color: white;
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : props.size === 'medium' ? '27px' : '17px'};
+  left: ${props => props.isFocused || props.hasValue ? '23px' : props.leftIcon && props.leftIcon !== 'none' ? '42px' : '16px'};
+  font-family: Poppins;  
+  transform: translateY(-50%);
+  transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  max-height: 16px;
+  gap: 4px;
+  &:hover {
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+`;
+const InputContainer = exports.InputContainer = _styledComponents.default.div`
+
+    display: flex;       
+    flex-direction: row;
+    flex-wrap: nowrap; 
+    justify-content: flex-start;
+    align-content: center;     
+    white-space: pre-wrap;
+    align-items: center;
+    overflow: hidden;
+    padding: 0 16px;
+    gap: 14px;
+    width: 100%;
+    height: 100%;    
+    box-sizing: border-box;
+    background-color: #fff;
+    border:  1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : '#B1B1B1'};
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+    outline: none;
+    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};
+   
+  &:hover {
+    border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'};
+  }
+
+  &:focus {  
+    border: 1px solid ${props => props.disabled ? '#D0D0D0' : props.error ? 'red' : props.labelColor || '#212121'}; 
+  }
+  
+`;
+const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div`
+
+    display: flex;       
+    flex-direction: column;
+    flex-wrap: nowrap;     
+    align-content: center; 
+    align-items: flex-start;
+    justify-content: center;
+    white-space: pre-wrap;
+    overflow: hidden;
+    padding: 5px 0;
+    width: 100%;
+    height: 100%;
+    min-height: ${props => props.size === 'medium' ? '52px' : '32px'};
+    box-sizing: border-box;
+    background-color: #fff;    
+    border-radius: ${props => props.size === 'small' ? '8px' : '12px'};  
+    outline: none;
+    color: ${props => props.disabled ? '#D0D0D0' : '#212121'};     
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+`;
+const StyledInput = exports.StyledInput = _styledComponents.default.input`
+  width: calc(100% - 10px);
+  height: 20px;
+  font-family: Poppins;
+  font-weight: 400;
+  font-size: 14px;
+  outline: none;  
+  color: ${props => props.disabled ? '#D0D0D0' : '#212121'};  
+  background-color: #fff;  
+  border: none;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+`;
+const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div`
+  font-size: 12px;
+  color: red;
+  margin-top: 5px;
+  max-width: ${props => props.width || '300px'};
+`;
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;  
+  padding: 2px; 
+  &:hover{ 
+    cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  }
+`;

package/dist/stories/components/InputOld/InputOld.style.js

@@ -5,12 +5,65 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  margin-bottom: 20px;\n  width: ", ";\n  height: ", ";\n"])), props => props.width || '100%', props => props.height || '40px');
-const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px;\n  font-size: 16px;\n  border: 2px solid\n    ", ";\n  border-radius: ", ";\n  outline: none;\n  width: ", ";\n  height: ", ";\n  transition: border-color 0.3s ease;\n  box-sizing: border-box;\n  color: ", ";\n  cursor: ", ";\n\n  &:focus {\n    border-color: ", ";\n  }\n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor || '#bdbdbd', props => props.borderRadius || '4px', props => props.width || '100%', props => props.height || '40px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.disabled ? 'not-allowed' : 'text', props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2');
-const StyledLabel = exports.StyledLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", ";\n  padding-inline-end: 5px;\n  padding-inline-start: 5px;\n  margin-right: 10px;\n  color: ", ";\n  background-color: white;\n  position: absolute;\n  top: ", ";\n  left: 10px;\n  transform: translateY(-50%);\n  transition: top 0.3s ease, font-size 0.3s ease;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n"])), props => props.isFocused || props.hasValue ? '12px' : '16px', props => props.disabled ? '#888' : props.textColor || '#333', props => props.isFocused || props.hasValue ? '0px' : '50%');
-const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: red;\n  margin-left: 5px;\n"])));
-const EyeIcon = exports.EyeIcon = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 50%;\n  right: 10px;\n  transform: translateY(-50%);\n  cursor: pointer;\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"])), props => props.textColor || '#888', props => props.textColor || '#333');
-const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 12px;\n  color: red;\n  margin-top: 5px;\n"])));
+const Container = exports.Container = _styledComponents.default.div`
+  position: relative;
+  margin-bottom: 20px;
+  width: ${props => props.width || '100%'};
+  height: ${props => props.height || '40px'};
+`;
+const StyledInput = exports.StyledInput = _styledComponents.default.input`
+  padding: 10px;
+  font-size: 16px;
+  border: 2px solid
+    ${props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.borderColor || '#bdbdbd'};
+  border-radius: ${props => props.borderRadius || '4px'};
+  outline: none;
+  width: ${props => props.width || '100%'};
+  height: ${props => props.height || '40px'};
+  transition: border-color 0.3s ease;
+  box-sizing: border-box;
+  color: ${props => props.disabled ? '#888' : props.textColor || '#333'};
+  cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+
+  &:focus {
+    border-color: ${props => props.disabled ? '#bdbdbd' : props.borderColor || '#1976d2'};
+  }
+`;
+const StyledLabel = exports.StyledLabel = _styledComponents.default.label`
+  font-size: ${props => props.isFocused || props.hasValue ? '12px' : '16px'};
+  padding-inline-end: 5px;
+  padding-inline-start: 5px;
+  margin-right: 10px;
+  color: ${props => props.disabled ? '#888' : props.textColor || '#333'};
+  background-color: white;
+  position: absolute;
+  top: ${props => props.isFocused || props.hasValue ? '0px' : '50%'};
+  left: 10px;
+  transform: translateY(-50%);
+  transition: top 0.3s ease, font-size 0.3s ease;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+`;
+const RequiredIndicator = exports.RequiredIndicator = _styledComponents.default.span`
+  color: red;
+  margin-left: 5px;
+`;
+const EyeIcon = exports.EyeIcon = _styledComponents.default.div`
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  color: ${props => props.textColor || '#888'};
+
+  &:hover {
+    color: ${props => props.textColor || '#333'};
+  }
+`;
+const ErrorLabel = exports.ErrorLabel = _styledComponents.default.div`
+  font-size: 12px;
+  color: red;
+  margin-top: 5px;
+`;

package/dist/stories/components/KpiFilter/KpiFilter.js

@@ -147,6 +147,21 @@ const KpiFilter = props => {
     }
     return false;
   };
+  const setPeriodSelectAll = selectAllChecked => {
+    const periodCheckedArray = [];
+    const newPeriod = {
+      weeks4: selectAllChecked,
+      weeks8: selectAllChecked,
+      weeks13: selectAllChecked
+    };
+    setPeriodState(newPeriod);
+    if (selectAllChecked) {
+      periodCheckedArray.push('4 weeks', '8 weeks', '13 weeks');
+    }
+    onClickPeriod({
+      periodChecked: periodCheckedArray
+    });
+  };
   const displayMainTitle = () => /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitleContainer, {
     id: "MainTitleContainer"
   }, /*#__PURE__*/_react.default.createElement(_KpiFilter.MainTitle, {
@@ -169,11 +184,13 @@ const KpiFilter = props => {
           ...itemColumn,
           buttonsArray: (_itemColumn$buttonsAr4 = itemColumn.buttonsArray) === null || _itemColumn$buttonsAr4 === void 0 ? void 0 : _itemColumn$buttonsAr4.map(itemButton => ({
             ...itemButton,
-            checked: !isIncludedInIgnoreList(itemButton.label) ? propsSelectAll.checked : itemButton.checked
+            checked: !(isIncludedInIgnoreList(itemButton.label) || itemButton.checked && itemButton.disabled) ? propsSelectAll.checked : itemButton.checked,
+            secondButtonChecked: !(isIncludedInIgnoreList(itemButton.label) || itemButton.secondButtonChecked && itemButton.secondButtonDisabled) ? propsSelectAll.checked : itemButton.secondButtonChecked.checked
           }))
         };
       });
       setKpiDataState(newData);
+      setPeriodSelectAll(propsSelectAll.checked);
     }
   })));
   const onClickPeriodHandler = checkBox => {