sag_components 1.0.628 → 1.0.630

package/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: 'airbnb',
+  extends: ['airbnb','eslint:recommended'],
   overrides: [
     {
       env: {
@@ -17,6 +17,10 @@ module.exports = {
       },
     },
   ],
+  plugins: [
+    'react',
+    'jest',
+  ],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',

package/dist/Button.test.js

@@ -0,0 +1,162 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _Button = _interopRequireDefault(require("./stories/components/Button"));
+require("@testing-library/jest-dom");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-unresolved */
+/* eslint-disable no-undef */
+
+test('Button Check text', () => {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "test",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = _react2.screen.getByText(/test/i);
+  expect(buttonElement).toBeInTheDocument();
+});
+test('Button Check type functionality: when "primary" type selected then background color must be specified as "rgb(146, 207, 23)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = container.querySelector('.ButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.getPropertyValue('background-color')).toBe('rgb(146, 207, 23)');
+});
+test('Button Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "secondary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = container.querySelector('.ButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.getPropertyValue('background-color')).toBe('rgb(232, 245, 235)');
+});
+test('Button Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: true,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const buttonElement = container.querySelector('.ButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.getPropertyValue('color')).toBe('rgb(177, 177, 177)');
+});
+test('Button Check leftIcon functionality: when "Filter"  icons is specified as the leftIcon  props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+});
+test('Button Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('Button Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('Button Check small/medium functionality: when "small" the height must be "33px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "none",
+    rightIcon: "none"
+  }));
+  const elementButtonContainer = container.querySelector('.ButtonContainer');
+  expect(elementButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementButtonContainer);
+  expect(computedStyle.height).toBe('33px');
+});
+test('Button Check small/medium functionality: when "medium" the height must be "45px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "medium",
+    disabled: false
+  }));
+  const elementButtonContainer = container.querySelector('.ButtonContainer');
+  expect(elementButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementButtonContainer);
+  expect(computedStyle.height).toBe('45px');
+});
+test('Button Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Button.default, {
+    text: "Button",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    height: "100px",
+    width: "200px"
+  }));
+  const elementButtonContainer = container.querySelector('.ButtonContainer');
+  expect(elementButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementButtonContainer);
+  expect(computedStyle.height).toBe('100px');
+  expect(computedStyle.width).toBe('200px');
+});

package/dist/LinkButton.test.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _LinkButton = _interopRequireDefault(require("./stories/components/LinkButton"));
+require("@testing-library/jest-dom");
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable import/no-unresolved */
+/* eslint-disable no-undef */
+
+test('LinkButton Check text', () => {
+  (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "test",
+    type: "secondary",
+    size: "small",
+    disabled: false
+  }));
+  const buttonElement = _react2.screen.getByText(/test/i);
+  expect(buttonElement).toBeInTheDocument();
+});
+test('LinkButton Check type functionality: when "primary" type selected then text color must be specified as "rgb(146, 207, 23)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false
+  }));
+  const buttonElement = container.querySelector('.LinkButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.color).toBe('rgb(34, 158, 56)');
+});
+test('LinkButton Check type functionality: when "secondary" type selected then background color must be specified as  "rgb(232, 245, 235)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "secondary",
+    size: "small",
+    disabled: false
+  }));
+  const buttonElement = container.querySelector('.LinkButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.color).toBe('rgb(33, 33, 33)');
+});
+test('LinkButton Check disabled functionality: when disabled prop is true, button textColor should be "rgb(177, 177, 177)" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: true
+  }));
+  const buttonElement = container.querySelector('.LinkButtonItem');
+  expect(buttonElement).toBeInTheDocument();
+  const computedStyles = getComputedStyle(buttonElement);
+  expect(computedStyles.color).toBe('rgb(177, 177, 177)');
+});
+test('LinkButton Check leftIcon and rightIcon functionality: when "Filter" and "Exit" icons is specified as the leftIcon and rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter",
+    rightIcon: "Exit"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('LinkButton Check rightIcon functionality: when "Exit" icons is specified as the rightIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    rightIcon: "Exit"
+  }));
+  const elementExit = container.querySelector('.ExitIcon');
+  expect(elementExit).toBeInTheDocument();
+});
+test('LinkButton Check leftIcon  functionality: when "Filter" icons is specified as the leftIcon props, it should be rendered on the screen', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    leftIcon: "Filter"
+  }));
+  const elementFilter = container.querySelector('.FilterIcon');
+  expect(elementFilter).toBeInTheDocument();
+});
+test('LinkButton Check small/medium functionality: when "small" the font-size must be "14px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false
+  }));
+  const elementLinkButtonContainer = container.querySelector('.LinkButtonItem');
+  expect(elementLinkButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementLinkButtonContainer);
+  expect(computedStyle.fontSize).toBe('14px');
+});
+test('LinkButton Check small/medium functionality: when "medium" the font-size must be "16px" ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "medium",
+    disabled: false
+  }));
+  const elementLinkButtonContainer = container.querySelector('.LinkButtonItem');
+  expect(elementLinkButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementLinkButtonContainer);
+  expect(computedStyle.fontSize).toBe('16px');
+});
+test('LinkButton Check specific height and width functionality: when height = 100px and width = 200px it should override  small/medium functionality ', () => {
+  const {
+    container
+  } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
+    text: "LinkButton",
+    type: "primary",
+    size: "small",
+    disabled: false,
+    height: "100px",
+    width: "200px"
+  }));
+  const elementLinkButtonContainer = container.querySelector('.LinkButtonContainer');
+  expect(elementLinkButtonContainer).toBeInTheDocument();
+  const computedStyle = getComputedStyle(elementLinkButtonContainer);
+  expect(computedStyle.height).toBe('100px');
+  expect(computedStyle.width).toBe('200px');
+});

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("@testing-library/jest-dom");

package/dist/stories/CampaignTool/Card.stories.js

@@ -85,7 +85,6 @@ var _default = exports.default = {
     // },
   }
 };
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_Card.default, args);
 const SingleCard = exports.SingleCard = Template.bind({});
 _Card.default.args = {

package/dist/stories/components/Button.js

@@ -1,117 +1,199 @@
 "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 = exports.Button = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Button = _interopRequireDefault(require("@mui/material/Button"));
-var _styles = require("@mui/material/styles");
-var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("./Button.style");
+var _FilterIcon = require("./icons/FilterIcon");
+var _OptionsIcon = require("./icons/OptionsIcon");
+var _DownloadIcon = require("./icons/DownloadIcon");
+var _DocumentIcon = require("./icons/DocumentIcon");
+var _FlyIcon = require("./icons/FlyIcon");
+var _BellIcon = require("./icons/BellIcon");
+var _MaintenanceIcon = require("./icons/MaintenanceIcon");
+var _ExitIcon = require("./icons/ExitIcon");
+var _EyeIcon = require("./icons/EyeIcon");
 const Button = props => {
   const {
     text,
     type,
-    fontFamily,
-    fontSize,
-    shape,
     size,
     height,
     width,
     disabled,
-    radius,
     textColor,
     backgroundColor,
     borderColor,
     hoverTextColor,
     hoverBackgroundColor,
     hoverBorderColor,
+    disabledTextColor,
+    // new
+    disabledBackgroundColor,
+    // new
+    disabledBorderColor,
+    // new
+    leftIcon,
+    // new
+    rightIcon,
+    // new
     onClick
+    // radius, // removed
+    // fontFamily, // removed
+    // fontSize, // removed
+    // shape, // removed
   } = props;
-  const getTextColor = () => {
-    if (!textColor || textColor === '' || textColor === 'none') {
-      // default when parameter was not set
-      if (shape === 'contained') {
-        return 'white';
-      }
-      return 'black';
-    }
-    return textColor;
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const handleButtonClick = () => {
+    setClicked(true);
+    onClick(text);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
   };
-  const theme = (0, _styles.createTheme)({
-    typography: {
-      fontFamily,
-      fontSize
-    },
-    components: {
-      MuiButton: {
-        styleOverrides: {
-          root: _ref => {
-            let {
-              ownerState
-            } = _ref;
-            return {
-              '&:hover': {
-                backgroundColor: hoverBackgroundColor,
-                color: hoverTextColor,
-                borderColor: hoverBorderColor
-              }
-            };
-          }
-        }
-      }
+  const getIcon = icon => {
+    const iconHeight = '12px';
+    const iconWidth = '12px';
+    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#ffffff');
+    const newHoverTextColor = hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff');
+    const newDisabledTextColor = disabledTextColor || '#B1B1B1';
+    const newEnabledTextColor = hover ? newHoverTextColor : newTextColor;
+    const color = disabled ? newDisabledTextColor : newEnabledTextColor;
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_Button.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
     }
-  });
-  return /*#__PURE__*/React.createElement(_Stack.default, {
-    direction: "row",
-    spacing: 2
-  }, /*#__PURE__*/React.createElement(_styles.ThemeProvider, {
-    theme: theme
-  }, /*#__PURE__*/React.createElement(_Button.default, {
-    type: type,
-    sx: {
-      minHeight: height || null,
-      maxHeight: height || null,
-      minWidth: width || null,
-      maxWidth: width || null,
-      textTransform: 'none',
-      borderRadius: radius * 0.05,
-      color: getTextColor(),
-      //  shape === "contained" ? "white" : "black",
-      backgroundColor: {
-        backgroundColor
-      },
-      borderColor,
-      fontFamily
-    },
-    variant: shape,
-    size: size,
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_Button.ButtonContainer, {
+    className: "ButtonContainer",
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px')
+  }, /*#__PURE__*/_react.default.createElement(_Button.ButtonItem, {
+    className: clicked ? 'ButtonItem-clicked' : 'ButtonItem',
+    onMouseEnter: () => setHover(true),
+    onMouseLeave: () => setHover(false),
+    onClick: !disabled ? handleButtonClick : null,
+    width: width || null,
+    height: height || (size === 'small' ? '33px' : '45px'),
     disabled: disabled,
-    onClick: event => {
-      onClick(event);
-    }
-  }, text)));
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#ffffff'),
+    background_color: backgroundColor || (type === 'secondary' ? '#ffffff' : '#229E38'),
+    border_color: borderColor || (type === 'secondary' ? '#B1B1B1' : '#229E38'),
+    hover_text_color: hoverTextColor || (type === 'secondary' ? '#229E38' : '#ffffff'),
+    hover_background_color: hoverBackgroundColor || (type === 'secondary' ? '#E8F5EB' : '#92CF17'),
+    hover_border_color: hoverBorderColor || (type === 'secondary' ? '#229E38' : '#92CF17'),
+    disabled_text_color: disabledTextColor || '#B1B1B1',
+    disabled_background_color: disabledBackgroundColor || (type === 'secondary' ? '#ffffff' : '#E3E4E5'),
+    disabled_border_color: disabledBorderColor || '#E3E4E5',
+    padding: size === 'small' ? '0 16px' : '0 20px'
+  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_Button.Label, {
+    className: "Label",
+    disabled: disabled
+  }, text), getRightIcon()));
 };
 exports.Button = Button;
 var _default = exports.default = Button;
 Button.defaultProps = {
   text: '',
-  type: 'button',
-  fontFamily: '',
-  fontSize: 18,
-  shape: 'contained',
+  type: 'primary',
   size: 'small',
-  height: '50px',
-  width: 'auto',
+  height: '',
+  width: '',
   disabled: false,
-  radius: 30,
-  textColor: '#212121',
-  backgroundColor: 'transparent',
-  borderColor: '#212121',
+  textColor: '',
+  backgroundColor: '',
+  borderColor: '',
   hoverTextColor: '',
   hoverBackgroundColor: '',
-  hoverBorderColor: '#212121',
-  onClick: () => {}
+  hoverBorderColor: '',
+  disabledTextColor: '',
+  disabledBackgroundColor: '',
+  disabledBorderColor: '',
+  onClick: () => {},
+  leftIcon: 'none',
+  rightIcon: 'none'
 };

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

@@ -4,8 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DropdownContainer = void 0;
+exports.Label = exports.IconWrapper = exports.ButtonItem = exports.ButtonContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n"])), props => props.width);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  //position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n  width: ", ";\n  height: ", ";\n"])), props => props.width, props => props.height);
+const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;\n  flex-wrap: nowrap;\n  overflow: hidden;\n  width: ", ";\n  height: ", ";  \n  color: ", "; \n  border: ", "; \n  border-radius: 12px;\n  background-color: ", ";\n  box-sizing: border-box;\n  gap: 8px;  \n  padding: ", "; \n  &:hover {\n    background-color: ", ";\n    border-color: ", ";    \n    color: ", ";    \n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.ButtonItem-clicked {\n    background-color: ", ";\n    //padding: 0 10px;  \n    cursor: pointer;\n    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n    transition: background-color 0.3s, color 0.3s;\n  }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
+const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: 'Poppins';\n  font-style: normal;\n  font-weight: 400;    \n  pointer-events: none;\n  font-size: 14px;\n  user-select: none;   \n"])));
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-content: center;  \n"])));