sag_components 1.0.892 → 1.0.894

package/dist/stories/components/Benchmark/Benchmark.stories.js

@@ -1,148 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LessAvarage = exports.GreaterAvarage = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Benchmark = require("./Benchmark");
-var _default = exports.default = {
-  title: 'SAG BI/Benchmark',
-  component: _Benchmark.Benchmark,
-  tags: ['autodocs'],
-  argTypes: {
-    currentValue: {
-      name: 'currentValue',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'curent value (<=100%) '
-    },
-    totalValue: {
-      name: 'totalValue',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'total value (100%) '
-    },
-    benchmarkValue: {
-      name: 'benchmarkValue',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 100000000000000
-      },
-      description: 'benchmark value - defines benchmark line relative position '
-    },
-    width: {
-      name: 'width',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'width of the control (in px)'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'number',
-        min: 0,
-        max: 600
-      },
-      description: 'height of the control (in px)'
-    },
-    color: {
-      name: 'color',
-      description: 'Sets the color of current value when it is greater then 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    linearGradientColor: {
-      name: 'linearGradientColor',
-      description: 'Sets the linear-Gradient color of current value when it is greater then 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    underAvarageColor: {
-      name: 'underAvarageColor',
-      description: 'Sets the color of current value when it is under 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    linearGradientUnderAvarageColor: {
-      name: 'linearGradientUnderAvarageColor',
-      description: 'Sets the linear-Gradient color of current value when it is under 50% of total value',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    backgroundColor: {
-      name: 'backgroundColor',
-      description: 'Sets the background color of the control',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
-      }
-    },
-    tooltipLabel: {
-      name: 'tooltipLabel',
-      control: {
-        type: 'text'
-      },
-      description: 'label of tooltip'
-    },
-    tooltipDirection: {
-      name: 'tooltipDirection',
-      control: {
-        type: 'radio'
-      },
-      options: ['top', 'left', 'right', 'bottom'],
-      description: 'tooltip direction'
-    }
-  }
-};
-const GreaterAvarage = exports.GreaterAvarage = {
-  args: {
-    totalValue: 100000,
-    currentValue: 60000,
-    benchmarkValue: 30000,
-    width: 100,
-    height: 12,
-    color: '#79DB95',
-    linearGradientColor: '#C3EFD0',
-    underAvarageColor: '#FD5959',
-    linearGradientUnderAvarageColor: '#FDB1B1',
-    backgroundColor: '#F2F2F2',
-    tooltipLabel: 'Benchmark',
-    tooltipDirection: 'bottom'
-  }
-};
-const LessAvarage = exports.LessAvarage = {
-  args: {
-    totalValue: 1000,
-    currentValue: 400,
-    benchmarkValue: 500,
-    width: 100,
-    height: 12,
-    color: '#79DB95',
-    linearGradientColor: '#C3EFD0',
-    underAvarageColor: '#FD5959',
-    linearGradientUnderAvarageColor: '#FDB1B1',
-    backgroundColor: '#F2F2F2',
-    tooltipLabel: 'Value',
-    tooltipDirection: 'right'
-  }
-};

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

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CurrentValueRectangle = exports.ControlsContainer = exports.Controls = exports.BackgroundValueRectangle = exports.AvarageDelimiter = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  margin: 0px 0 0px;\n  font-family: \"Poppins\", sans-serif;\n  font-style: normal;\n  width: ", ";\n  height: ", ";\n  //box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);\n  border-radius: 100px;\n  //border: 1px solid red;\n  align-items: center;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'));
-const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  border-radius: 100px;\n  width: ", ";\n  height: ", ";\n  //background: #ffffff;\n  //border: 1px solid blue;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'));
-const BackgroundValueRectangle = exports.BackgroundValueRectangle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: ", ";\n  //border: 1px solid orange;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'), props => props.color);
-const CurrentValueRectangle = exports.CurrentValueRectangle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: ", ";\n  height: ", ";\n  top: 0px;\n  left: 0px;\n  border-radius: 100px;\n  background: linear-gradient(\n    90deg,\n    ", " 0%,\n    ", " 100%\n  );\n  //border: 1px solid green;\n"])), props => props.width.toString().concat('', 'px'), props => props.height.toString().concat('', 'px'), props => props.lineargradientcolor, props => props.color);
-const AvarageDelimiter = exports.AvarageDelimiter = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  top: ", ";\n  left: ", ";\n  border: 1px solid #212121;\n"])), props => props.height.toString().concat('', 'px'), props => props.width.toString().concat('', 'px'), props => props.top.toString().concat('', 'px'), props => props.left.toString().concat('', 'px'));

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

@@ -1,217 +0,0 @@
-"use strict";
-
-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 = 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,
-    size,
-    height,
-    width,
-    disabled,
-    textColor,
-    backgroundColor,
-    borderColor,
-    hoverTextColor,
-    hoverBackgroundColor,
-    hoverBorderColor,
-    disabledTextColor,
-    disabledBackgroundColor,
-    disabledBorderColor,
-    leftIcon,
-    rightIcon,
-    onClick,
-    isSubmitButton
-  } = props;
-  const [clicked, setClicked] = (0, _react.useState)(false);
-  const [hover, setHover] = (0, _react.useState)(false);
-  const handleSubmitButtonOnClick = () => {
-    setClicked(true);
-    onClick("SubmitButtonOnClick: ".concat(text));
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  const handleButtonClick = () => {
-    setClicked(true);
-    onClick("ButtonOnClick: ".concat(text));
-    setTimeout(() => {
-      setClicked(false);
-    }, 300);
-  };
-  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 '';
-    }
-  };
-  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')
-  }, isSubmitButton ? /*#__PURE__*/_react.default.createElement(_Button.InputCommit, {
-    className: clicked ? 'InputCommit-clicked' : 'InputCommit',
-    value: text,
-    type: "submit",
-    width: width || null,
-    height: height || (size === 'small' ? '33px' : '45px'),
-    disabled: disabled,
-    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',
-    onClick: !disabled ? handleSubmitButtonOnClick : null
-  }) : /*#__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,
-    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: 'primary',
-  size: 'small',
-  height: '',
-  width: '',
-  disabled: false,
-  textColor: '',
-  backgroundColor: '',
-  borderColor: '',
-  hoverTextColor: '',
-  hoverBackgroundColor: '',
-  hoverBorderColor: '',
-  disabledTextColor: '',
-  disabledBackgroundColor: '',
-  disabledBorderColor: '',
-  onClick: () => {},
-  leftIcon: 'none',
-  rightIcon: 'none',
-  isSubmitButton: false
-};

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

@@ -1,269 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SubmitButton = exports.SmallButtonTwoIcons = exports.SmallButtonRightIcon = exports.SmallButtonLeftIcon = exports.SecondaryDisabled = exports.SecondaryDefault = exports.PrimaryDisabled = exports.PrimaryDefault = exports.MediumButtonTwoIcons = exports.MediumButtonRightIcon = exports.MediumButtonLeftIcon = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Button = require("./Button");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG Core/Button',
-  component: _Button.Button,
-  tags: ['autodocs'],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/design/hhRW9o3Wqj3wF89qGJ2raZ/Sagarmatha--Design-System?node-id=299-4075&t=xKolv44KqyAdlKND-4'
-    }
-  },
-  argTypes: {
-    text: {
-      name: 'text',
-      control: {
-        type: 'text'
-      },
-      description: 'text inside of the button'
-    },
-    type: {
-      control: {
-        type: 'radio'
-      },
-      options: ['primary', 'secondary'],
-      description: 'type of the button'
-    },
-    size: {
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'medium'],
-      description: 'size of the button'
-    },
-    disabled: {
-      name: 'disabled',
-      control: {
-        type: 'boolean'
-      },
-      description: 'changes the button to be enabled/disabled',
-      defaultValue: ''
-    },
-    backgroundColor: {
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets Background Color'
-      }
-    },
-    hoverBorderColor: {
-      name: 'hoverBorderColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets hover Border Color'
-      }
-    },
-    hoverTextColor: {
-      name: 'hoverTextColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets hover text Color'
-      }
-    },
-    hoverBackgroundColor: {
-      name: 'hoverBackgroundColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets hover background Color'
-      }
-    },
-    borderColor: {
-      name: 'borderColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets border Color'
-      }
-    },
-    textColor: {
-      name: 'textColor',
-      control: {
-        type: 'color',
-        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
-        description: 'Sets text Color'
-      }
-    },
-    onClick: {
-      action: 'onClick',
-      description: 'returns an event click object when user clicks on a button'
-    },
-    leftIcon: {
-      name: 'leftIcon',
-      options: ['none', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options'],
-      control: {
-        type: 'select'
-      },
-      description: 'Choose an icon to apear on the button left side'
-    },
-    rightIcon: {
-      name: 'rightIcon',
-      options: ['none', 'Bell', 'Document', 'Download', 'Exit', 'Eye', 'Filter', 'Fly', 'Maintenance', 'Options'],
-      control: {
-        type: 'select'
-      },
-      description: 'Choose an icon to apear on the button right side'
-    },
-    isSubmitButton: {
-      name: 'isSubmitButton',
-      control: {
-        type: 'boolean'
-      },
-      description: 'use Submit instead of onClick. Please note: when this option is TRUE, the Button component does not support left and right icons, even if the icon is selected! '
-    }
-  }
-};
-const PrimaryDefault = exports.PrimaryDefault = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'none',
-    isSubmitButton: false
-    // textColor: '#ffffff',
-    // backgroundColor: '#229E38',
-    // borderColor: '#229E38',
-    // hoverTextColor: '#ffffff',
-    // hoverBackgroundColor: '#92CF17',
-    // hoverBorderColor: '#92CF17',
-    // disabledTextColor: '#B1B1B1',
-    // disabledBackgroundColor: '#E3E4E5',
-    // disabledBorderColor: '#E3E4E5',
-  }
-};
-const PrimaryDisabled = exports.PrimaryDisabled = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'small',
-    disabled: true,
-    leftIcon: 'none',
-    rightIcon: 'none',
-    isSubmitButton: false
-  }
-};
-const SecondaryDefault = exports.SecondaryDefault = {
-  args: {
-    text: 'Button',
-    type: 'secondary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'none',
-    // textColor: '#212121',
-    // borderColor: '#B1B1B1',
-    // backgroundColor: '#ffffff',
-    // hoverTextColor: '#229E38',
-    // hoverBackgroundColor: '#E8F5EB',
-    // hoverBorderColor: '#229E38',
-    // disabledTextColor: '#B1B1B1',
-    // disabledBackgroundColor: '#ffffff',
-    // disabledBorderColor: '#E3E4E5',
-    isSubmitButton: false
-  }
-};
-const SecondaryDisabled = exports.SecondaryDisabled = {
-  args: {
-    text: 'Button',
-    type: 'secondary',
-    size: 'small',
-    disabled: true,
-    leftIcon: 'none',
-    rightIcon: 'none',
-    isSubmitButton: false
-  }
-};
-const SmallButtonTwoIcons = exports.SmallButtonTwoIcons = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'Filter',
-    rightIcon: 'Exit',
-    isSubmitButton: false
-  }
-};
-const SmallButtonLeftIcon = exports.SmallButtonLeftIcon = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'Download',
-    rightIcon: 'none',
-    isSubmitButton: false
-  }
-};
-const SmallButtonRightIcon = exports.SmallButtonRightIcon = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'small',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'Exit',
-    isSubmitButton: false
-  },
-  design: {
-    type: 'figma',
-    url: 'https://www.figma.com/design/hhRW9o3Wqj3wF89qGJ2raZ/Sagarmatha--Design-System?node-id=299-4075&t=xKolv44KqyAdlKND-4'
-  }
-};
-const MediumButtonTwoIcons = exports.MediumButtonTwoIcons = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'Filter',
-    rightIcon: 'Exit',
-    isSubmitButton: false
-  }
-};
-const MediumButtonLeftIcon = exports.MediumButtonLeftIcon = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'Download',
-    rightIcon: 'none',
-    isSubmitButton: false
-  }
-};
-const MediumButtonRightIcon = exports.MediumButtonRightIcon = {
-  args: {
-    text: 'Button',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'Exit',
-    isSubmitButton: false
-  }
-};
-const SubmitButton = exports.SubmitButton = {
-  args: {
-    text: 'Submit',
-    type: 'primary',
-    size: 'medium',
-    disabled: false,
-    leftIcon: 'none',
-    rightIcon: 'none',
-    isSubmitButton: true
-  }
-};

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

@@ -1,15 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Label = exports.InputCommit = 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, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-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    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"])));
-const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  border: ", ";\n  border-radius: 8px;\n  font-weight: 400;\n  font-size: 14px;\n  width: ", ";\n  height: ", ";\n  color: ", ";\n  border: ", ";\n  border-radius: 12px;\n  background-color: ", ";\n  cursor: pointer;\n  padding: ", ";\n\n  &:hover {\n    background-color: ", ";\n    border-color: ", ";\n    color: ", ";\n    box-shadow: ", ";\n    cursor: ", ";\n  }\n  &.InputCommit-clicked {\n    background-color: ", ";\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 => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), 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);