sag_components 1.0.913 → 1.0.915

package/dist/stories/components/TotalHorizontalCharts.js

@@ -23,16 +23,15 @@ const TotalHorizontalCharts = props => {
     dotCut,
     currencySign,
     currencyType,
-    chartsData,
     width,
     height,
     rightGap,
     textColor,
+    chartsData,
     noDataText,
     isDollar,
     isPercentage,
-    showDollarSign,
-    className
+    showDollarSign
   } = props;
   const barBackgrounds = chartsData.map(bg => bg.color);
   const [widthChartContainer, setWidthChartContainer] = (0, _react.useState)(0);
@@ -121,7 +120,7 @@ const TotalHorizontalCharts = props => {
           // verticalAnchor="middle"
           ,
           fill: fill
-        }, payload.value.length > 11 ? `${payload.value.slice(0, 11)}...` : payload.value));
+        }, payload.value.length > 11 ? "".concat(payload.value.slice(0, 11), "...") : payload.value));
       }
       return null;
     }
@@ -130,8 +129,7 @@ const TotalHorizontalCharts = props => {
   return /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.ControlsContainer, {
     height: height,
     width: width,
-    textColor: textColor,
-    className: className
+    textColor: textColor
   }, (chartsData === null || chartsData === void 0 ? void 0 : chartsData.length) > 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TitleAndValueContainer, {
     id: "TitleAndValueContainer"
   }, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Header, null, /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.Title, null, title), /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.FormattedValue, {
@@ -179,7 +177,7 @@ const TotalHorizontalCharts = props => {
     dataKey: "value",
     content: CustomizedLabel
   }), chartsData.map((entry, index) => /*#__PURE__*/_react.default.createElement(_recharts.Cell, {
-    key: `cell-${index}`,
+    key: "cell-".concat(index),
     fill: barBackgrounds[index % 20]
   }))), showLegendTooltip && /*#__PURE__*/_react.default.createElement(_TspanTooltip.default, {
     direction: "top",
@@ -196,19 +194,18 @@ const TotalHorizontalCharts = props => {
 exports.TotalHorizontalCharts = TotalHorizontalCharts;
 var _default = exports.default = TotalHorizontalCharts;
 TotalHorizontalCharts.defaultProps = {
-  className: '',
   title: 'SALES',
   value: 0,
   dotCut: false,
   currencySign: false,
   currencyType: 'USD',
   chartsData: [],
+  isDollar: true,
+  isPercentage: false,
+  showDollarSign: true,
   width: '100%',
   height: '100%',
   rightGap: 1.25,
   textColor: '#212121',
-  noDataText: 'No Data',
-  isDollar: true,
-  isPercentage: false,
-  showDollarSign: true
+  noDataText: 'No Data'
 };

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

@@ -5,117 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TitleAndValueContainer = exports.Title = exports.OutBanner = exports.Header = exports.FormattedValue = exports.CurrencySign = exports.ControlsContainer = exports.ChartWrapper = exports.ChartInner = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const scrollableStyles = `
-  overflow-y: auto;
-
-  &::-webkit-scrollbar {
-    width: 5px;
-  }
-
-  &::-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;
-  color: ${props => props.textColor};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  background-color: white;
-  display: flex;
-  flex-direction: column;
-  // justify-content: center;
-  .top {
-    text-align: center;
-    white-space: normal;
-    &:before {
-      display: none;
-    }
-  }
-`;
-const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div`
-  flex-grow: 1;
-  width: 100%;
-  ${scrollableStyles}
-`;
-const ChartInner = exports.ChartInner = _styledComponents.default.div`
-  min-height: 120%;
-  width: 100%;
-`;
-const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  padding: 16px;
-`;
-const Header = exports.Header = _styledComponents.default.div``;
-const Title = exports.Title = _styledComponents.default.h4`
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 1;
-  margin: 0 0 8px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const FormattedValue = exports.FormattedValue = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 40px;
-  display: flex;
-  align-items: baseline;
-  line-height: 1;
-  @media (max-width: 1536px) {
-    font-size: 24px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 20px;
-  }
-`;
-const OutBanner = exports.OutBanner = _styledComponents.default.div`
-  display: flex;
-  gap: 8px;
-  align-items: baseline;
-  font-size: 14px;
-  font-weight: 400;
-  color: ${props => props.textColor};
-  cursor: pointer;
-  @media (max-width: 1536px) {
-    font-size: 10px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 8px;
-  }
-  > svg {
-    width: 14px;
-    height: 14px;
-    @media (max-width: 1536px) {
-      width: 12px;
-      height: 12px;
-    }
-    @media (max-width: 1366px) {
-      width: 8px;
-      height: 8px;
-    }
-  }
-`;
-const CurrencySign = exports.CurrencySign = _styledComponents.default.span`
-  font-weight: 500;
-  font-size: 16px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 11px;
-  }
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    width: 5px;\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  color: ", ";\n  width: ", ";\n  height: ", ";\n  background-color: white;\n  display: flex;\n  flex-direction: column;\n  // justify-content: center;\n  .top {\n    text-align: center;\n    white-space: normal;\n    &:before {\n      display: none;\n    }\n  }\n"])), props => props.textColor, props => props.width, props => props.height);
+const ChartWrapper = exports.ChartWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  width: 100%;\n  ", "\n"])), scrollableStyles);
+const ChartInner = exports.ChartInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 120%;\n  width: 100%;\n"])));
+const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  padding: 16px;\n"])));
+const Header = exports.Header = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)([""])));
+const Title = exports.Title = _styledComponents.default.h4(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 20px;\n  font-weight: 400;\n  line-height: 1;\n  margin: 0 0 8px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const FormattedValue = exports.FormattedValue = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 40px;\n  display: flex;\n  align-items: baseline;\n  line-height: 1;\n  @media (max-width: 1536px) {\n    font-size: 24px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 20px;\n  }\n"])));
+const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 8px;\n  align-items: baseline;\n  font-size: 14px;\n  font-weight: 400;\n  color: ", ";\n  cursor: pointer;\n  @media (max-width: 1536px) {\n    font-size: 10px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 8px;\n  }\n  > svg {\n    width: 14px;\n    height: 14px;\n    @media (max-width: 1536px) {\n      width: 12px;\n      height: 12px;\n    }\n    @media (max-width: 1366px) {\n      width: 8px;\n      height: 8px;\n    }\n  }\n"])), props => props.textColor);
+const CurrencySign = exports.CurrencySign = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (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"])));

package/dist/stories/components/TspanTooltip.js

@@ -7,27 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _TspanTooltip = require("./TspanTooltip.style");
-const Tooltip = props => {
-  const {
-    className,
-    top,
-    left,
-    direction,
-    content
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipContainer, {
-    className: className,
-    top: `${top}px`,
-    left: `${left}px`
-  }, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipTip, {
-    className: `controls ${direction || 'top'}`
-  }, content)));
-};
-var _default = exports.default = Tooltip;
-Tooltip.defaultProps = {
-  className: '',
-  top: 0,
-  left: 0,
-  direction: 'top',
-  content: ''
-};
+const Tooltip = props => /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipContainer, {
+  top: "".concat(props.top, "px"),
+  left: "".concat(props.left, "px")
+}, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipWrapper, null, /*#__PURE__*/_react.default.createElement(_TspanTooltip.TooltipTip, {
+  className: "controls ".concat(props.direction || 'top')
+}, props.content)));
+var _default = exports.default = Tooltip;

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

@@ -5,101 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipWrapper = exports.TooltipTip = exports.TooltipContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div`
-  --tooltip-text-color: black;
-  --tooltip-background-color: white;
-  --tooltip-margin: 40px;
-  --tooltip-arrow-size: 10px;
-  position: absolute;
-  z-index: 999999;
-  top: ${props => props.top};
-  left: ${props => props.left};
-`;
-const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div`
-  display: inline-block;
-  position: relative;
-`;
-const TooltipTip = exports.TooltipTip = _styledComponents.default.div`
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  position: absolute;
-  border-radius: 4px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 12px;
-  color: var(--tooltip-text-color);
-  background: var(--tooltip-background-color);
-  font-size: 10px;
-  z-index: 999;
-  white-space: nowrap;
- 
-  /* CSS border triangles */
-  &.controls::before {
-    content: " ";
-    left: 50%;
-    border: solid transparent;
-    height: 0;
-    width: 0;
-    position: absolute;
-    pointer-events: none;
-    border-width: var(--tooltip-arrow-size);
-    margin-left: calc(var(--tooltip-arrow-size) * -1);
-  }
-
-  /* Absolute positioning */
-  &.controls.top {
-    top: calc(var(--tooltip-margin) * -1);
-  }
-
-  /* CSS border triangles */
-  &.controls.top::before {
-    top: 100%;
-    border-top-color: var(--tooltip-background-color);
-  }
-
-  /* Absolute positioning */
-  &.controls.right {
-    left: calc(70% + var(--tooltip-margin));
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-  }
-
-  /* CSS border triangles */
-  &.controls.right::before {
-    left: calc(var(--tooltip-arrow-size) * -1);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-    border-right-color: var(--tooltip-background-color);
-  }
-
-  /* Absolute positioning */
-  &.controls.bottom {
-    bottom: calc(var(--tooltip-margin) * -1);
-  }
-  /* CSS border triangles */
-  &.controls.bottom::before {
-    bottom: 100%;
-    border-bottom-color: var(--tooltip-background-color);
-  }
-
-  /* Absolute positioning */
-  &.controls.left {
-    left: auto;
-    right: calc(70% + var(--tooltip-margin));
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-  }
-  /* CSS border triangles */
-  &.controls.left::before {
-    left: auto;
-    right: calc(var(--tooltip-arrow-size) * -2);
-    top: 50%;
-    transform: translateX(0) translateY(-50%);
-    border-left-color: var(--tooltip-background-color);
-  }
-
-  > ul {
-    padding-left: 10px;
-    margin: 0;
-  }
-`;
+var _templateObject, _templateObject2, _templateObject3;
+const TooltipContainer = exports.TooltipContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --tooltip-text-color: black;\n  --tooltip-background-color: white;\n  --tooltip-margin: 40px;\n  --tooltip-arrow-size: 10px;\n  position: absolute;\n  z-index: 9999;\n  top: ", ";\n  left: ", ";\n"])), props => props.top, props => props.left);
+const TooltipWrapper = exports.TooltipWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n"])));
+const TooltipTip = exports.TooltipTip = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  position: absolute;\n  border-radius: 4px;\n  left: 50%;\n  transform: translateX(-50%);\n  padding: 8px 12px;\n  color: var(--tooltip-text-color);\n  background: var(--tooltip-background-color);\n  font-size: 10px;\n  z-index: 999;\n  white-space: nowrap;\n  /* background-color:green;\n  transform: translate(448px, 200px); */\n\n\n \n  /* CSS border triangles */\n  &.controls::before {\n    content: \" \";\n    left: 50%;\n    border: solid transparent;\n    height: 0;\n    width: 0;\n    position: absolute;\n    pointer-events: none;\n    border-width: var(--tooltip-arrow-size);\n    margin-left: calc(var(--tooltip-arrow-size) * -1);\n  }\n\n  /* Absolute positioning */\n  &.controls.top {\n    top: calc(var(--tooltip-margin) * -1);\n  }\n\n  /* CSS border triangles */\n  &.controls.top::before {\n    top: 100%;\n    border-top-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.right {\n    left: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n\n  /* CSS border triangles */\n  &.controls.right::before {\n    left: calc(var(--tooltip-arrow-size) * -1);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-right-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.bottom {\n    bottom: calc(var(--tooltip-margin) * -1);\n  }\n  /* CSS border triangles */\n  &.controls.bottom::before {\n    bottom: 100%;\n    border-bottom-color: var(--tooltip-background-color);\n  }\n\n  /* Absolute positioning */\n  &.controls.left {\n    left: auto;\n    right: calc(70% + var(--tooltip-margin));\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n  }\n  /* CSS border triangles */\n  &.controls.left::before {\n    left: auto;\n    right: calc(var(--tooltip-arrow-size) * -2);\n    top: 50%;\n    transform: translateX(0) translateY(-50%);\n    border-left-color: var(--tooltip-background-color);\n  }\n\n  > ul {\n    padding-left: 10px;\n    margin: 0;\n  }\n"])));

package/dist/stories/components/TwoBarCharts.js

@@ -56,7 +56,7 @@ const TwoBarCharts = props => {
     if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
     let currentTooltipValue = 0;
     if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.value) currentTooltipValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.value;
-    return /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipTitle, null, `${label}`), /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipLabel, null, `${displayFormattedValue(currentTooltipValue)}`));
+    return /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_TwoBarCharts.TooltipLabel, null, "".concat(displayFormattedValue(currentTooltipValue))));
   };
   const CustomizedTickBarChart = props => {
     const {
@@ -68,7 +68,7 @@ const TwoBarCharts = props => {
       const retailerData = barChartData.filter(item => item.title === payload.value);
       if (retailerData && retailerData.length > 0) {
         return /*#__PURE__*/_react.default.createElement("g", {
-          transform: `translate(${x},${y})`
+          transform: "translate(".concat(x, ",").concat(y, ")")
         }, /*#__PURE__*/_react.default.createElement("text", {
           x: 0,
           y: 0,

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

@@ -5,56 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  color: #212121;
-  width: ${props => props.width};
-  height: ${props => props.height};
-  min-width: 250px;
-`;
-const Controls = exports.Controls = _styledComponents.default.div`
-  height: 100%;
-  width: 100%;
-  background: white;
-  display: flex;
-  flex-direction: column;
-`;
-const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div`
-  border-radius: 5px;
-  padding: 8px 12px;
-  background: white;
-  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-  margin: 0;
-`;
-const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 400;
-  width: fit-content;
-`;
-const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div`
-  color: #212121;
-  font-size: 14px;
-  font-weight: 600;
-`;
-const Title = exports.Title = _styledComponents.default.h5`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 20px;
-  margin: 0 0 30px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-    margin: 0 0 20px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan`
-  font-size: 0.7em;
-`;
-const LabelText = exports.LabelText = _styledComponents.default.tspan`
-  font-size: 0.6em;
-`;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  color: #212121;\n  width: ", ";\n  height: ", ";\n  min-width: 250px;\n"])), props => props.width, props => props.height);
+const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: 100%;\n  width: 100%;\n  background: white;\n  display: flex;\n  flex-direction: column;\n"])));
+const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 5px;\n  padding: 8px 12px;\n  background: white;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n  margin: 0;\n"])));
+const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 400;\n  width: fit-content;\n"])));
+const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  font-size: 14px;\n  font-weight: 600;\n"])));
+const Title = exports.Title = _styledComponents.default.h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 18px;\n  line-height: 20px;\n  margin: 0 0 30px;\n  @media (max-width: 1536px) {\n    font-size: 16px;\n    margin: 0 0 20px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 14px;\n  }\n"])));
+const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.7em;\n"])));
+const LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 0.6em;\n"])));

package/dist/stories/utils/IconsHandler.style.js

@@ -5,13 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IconWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
 // eslint-disable-next-line import/prefer-default-export
-const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-content: center;  
-  padding: 2px;
-  cursor: ${props => props.disabled ? 'not-allowed' : props.pointer || 'default'};
-`;
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n  padding: 2px;\n  cursor: ", ";\n"])), props => props.disabled ? 'not-allowed' : props.pointer || 'default');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.913",
+  "version": "1.0.915",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/dist/stories/components/AttachedFile/AttachedFile.js

@@ -1,62 +0,0 @@
-"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.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _AttachedFile = require("./AttachedFile.style");
-var _CloseIcon = _interopRequireDefault(require("../../icons/CloseIcon"));
-var _AttachedIcon = _interopRequireDefault(require("../../icons/AttachedIcon"));
-var _FileIcon = _interopRequireDefault(require("../../icons/FileIcon"));
-var _LinkButton = _interopRequireDefault(require("../LinkButton/LinkButton"));
-const AttachedFile = props => {
-  const {
-    inputText,
-    inputColor,
-    acceptedFiles,
-    onSelectFile,
-    onRemoveFile
-  } = props;
-  const [selectedFiles, setSelectedFiles] = (0, _react.useState)([]);
-  const handleFileChange = event => {
-    const files = Array.from(event.target.files);
-    setSelectedFiles(prevFiles => [...prevFiles, ...files]);
-    onSelectFile([...selectedFiles, ...files]);
-  };
-  const handleRemoveFile = fileToRemove => {
-    setSelectedFiles(prevFiles => prevFiles.filter(file => file !== fileToRemove));
-    const fileInput = document.getElementById('fileInput');
-    fileInput.value = ''; // Reset input value
-    onRemoveFile(fileToRemove);
-  };
-  return /*#__PURE__*/_react.default.createElement(_AttachedFile.AttachedFileContainer, null, selectedFiles.map(file => /*#__PURE__*/_react.default.createElement(_AttachedFile.UploadedFile, {
-    key: "".concat(file.name, "_").concat(file.lastModified)
-  }, /*#__PURE__*/_react.default.createElement(_FileIcon.default, null), /*#__PURE__*/_react.default.createElement("span", null, file.name), /*#__PURE__*/_react.default.createElement(_AttachedFile.RemoveButton, {
-    onClick: () => handleRemoveFile(file)
-  }, /*#__PURE__*/_react.default.createElement(_CloseIcon.default, null)))), /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
-    htmlFor: "fileInput",
-    onClick: () => {},
-    textColor: inputColor,
-    rightIcon: "Attached",
-    text: inputText
-  }), /*#__PURE__*/_react.default.createElement("input", {
-    type: "file",
-    id: "fileInput",
-    accept: acceptedFiles,
-    onChange: e => handleFileChange(e),
-    style: {
-      display: 'none'
-    }
-  }));
-};
-var _default = exports.default = AttachedFile;
-AttachedFile.defaultProps = {
-  inputText: 'Attach file',
-  acceptedFiles: 'image/png, image/gif, image/jpeg',
-  inputColor: '#229E38',
-  onSelectFile: () => {},
-  onRemoveFile: () => {}
-};

package/dist/stories/components/AttachedFile/AttachedFile.stories.js

@@ -1,36 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.NoFileSelect = void 0;
-var _AttachedFile = _interopRequireDefault(require("./AttachedFile"));
-var _default = exports.default = {
-  title: 'SAG Core/Attached File',
-  component: _AttachedFile.default,
-  tags: ['autodocs'],
-  argTypes: {
-    inputText: {
-      name: 'inputText',
-      control: {
-        type: 'text'
-      },
-      description: 'text inside of the button',
-      defaultValue: 'Attach file'
-    },
-    inputColor: {
-      name: 'inputColor',
-      control: {
-        type: 'color'
-      }
-    }
-  }
-};
-const NoFileSelect = exports.NoFileSelect = {
-  args: {
-    inputText: 'Attach file',
-    inputColor: '#229E38',
-    acceptedFiles: 'image/png, image/gif, image/jpeg'
-  }
-};

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

@@ -1,14 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.UploadedFile = exports.RemoveButton = exports.InputLabel = exports.AttachedFileContainer = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-const AttachedFileContainer = exports.AttachedFileContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    font-family: 'Poppins';\n    font-size: 14px;\n    font-weight: 400;\n"])));
-const InputLabel = exports.InputLabel = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    cursor: pointer;\n    > span {\n        color: ", ";\n    }\n"])), props => props.inputColor);
-const UploadedFile = exports.UploadedFile = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    color: #A4A4A4;\n    max-width: 220px;\n    padding: 2px 8px;\n    margin-bottom: 10px;\n    > span {\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n    }\n    > svg {\n        min-width: 12px;\n    }\n"])));
-const RemoveButton = exports.RemoveButton = _styledComponents.default.button(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    border: none;\n    background: none;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    margin-left: auto;\n    cursor: pointer;\n"])));