sag_components 2.0.0-beta34 → 2.0.0-beta341

package/dist/stories/components/IconButton.js

@@ -1,147 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.IconButton = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _DownloadIcon = require("./icons/DownloadIcon");
-var _DocumentIcon = require("./icons/DocumentIcon");
-var _BellIcon = require("./icons/BellIcon");
-var _ExitIcon = require("./icons/ExitIcon");
-var _FlyIcon = require("./icons/FlyIcon");
-var _MaintenanceIcon = require("./icons/MaintenanceIcon");
-var _EyeIcon = require("./icons/EyeIcon");
-var _IconButton = require("./IconButton.style");
-/* IconButton */
-const IconButton = props => {
-  const {
-    // downloadStatus,
-    // fileName,
-    fileLink,
-    showProcess,
-    contentColor,
-    buttonText,
-    backgroundColor,
-    borderColor,
-    borderRadius,
-    iconName,
-    iconWidth,
-    iconHeight,
-    disabled,
-    onClick,
-    onCancelClick
-  } = props;
-  const [progress, setProgress] = (0, _react.useState)(0);
-  let interval;
-  const incrementProgress = () => {
-    if (showProcess && progress <= 90) {
-      interval = setInterval(() => {
-        setProgress(prevProgress => {
-          const newProgress = prevProgress + 2;
-          if (newProgress >= 90) {
-            clearInterval(interval);
-          }
-          return newProgress;
-        });
-      }, 500);
-    } else {
-      setProgress(0);
-      clearInterval(interval);
-    }
-  };
-  (0, _react.useEffect)(() => {
-    incrementProgress();
-  }, [showProcess]);
-  const getIcon = icon => {
-    switch (icon) {
-      case 'download':
-        return /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'document':
-        return /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'fly':
-        return /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'bell':
-        return /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'maintenance':
-        return /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'exit':
-        return /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      case 'eye':
-        return /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
-          height: iconHeight,
-          width: iconWidth,
-          color: contentColor
-        });
-      default:
-        return '';
-    }
-  };
-  const onClickHandler = event => {
-    onClick(event);
-  };
-  const onCancelClickHandler = event => {
-    onCancelClick(event);
-  };
-  return /*#__PURE__*/_react.default.createElement(_IconButton.ButtonWrapper, {
-    id: "ButtonWrapper"
-  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButtonContainer, {
-    download: true,
-    href: fileLink,
-    backgroundColor: disabled ? '#E3E4E5' : backgroundColor,
-    borderColor: disabled ? '#B1B1B1' : borderColor,
-    borderRadius: borderRadius,
-    color: disabled ? '#B1B1B1' : contentColor,
-    inProgress: showProcess,
-    progress: progress,
-    onClick: event => {
-      onClickHandler(event);
-    }
-  }, getIcon(iconName), buttonText !== '' && buttonText !== undefined && /*#__PURE__*/_react.default.createElement(_IconButton.SpanText, null, buttonText)), showProcess && /*#__PURE__*/_react.default.createElement(_IconButton.CancelClick, {
-    onClick: event => onCancelClickHandler(event)
-  }, "Click here to cancel"));
-};
-exports.IconButton = IconButton;
-var _default = exports.default = IconButton;
-IconButton.defaultProps = {
-  // downloadStatus: '',
-  // fileName: '',
-  fileLink: '',
-  showProcess: false,
-  buttonText: '',
-  iconName: 'eye',
-  contentColor: '#212121',
-  backgroundColor: '#FFFFFF',
-  borderColor: '#B1B1B1',
-  borderRadius: '12px',
-  iconHeight: 18,
-  iconWidth: 18,
-  disabled: false,
-  onClick: () => {},
-  onCancelClick: () => {}
-};

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

@@ -1,64 +0,0 @@
-"use strict";
-
-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 _styledComponents = _interopRequireWildcard(require("styled-components"));
-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.js

@@ -1,186 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-var _IconsHandler = require("../utils/IconsHandler");
-var _Input = require("./Input.style");
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/require-default-props */
-/* eslint-disable no-nested-ternary */
-// CustomInput.js
-
-const Input = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    size,
-    selectedValue,
-    placeHolder,
-    onChange,
-    onBlur,
-    required,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    labelColor,
-    leftIcon,
-    rightIcon,
-    password,
-    leftIconOnClick,
-    rightIconOnClick
-  } = _ref;
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [inputValue, setInputValue] = (0, _react.useState)('');
-  const [showPassword, setShowPassword] = (0, _react.useState)(false);
-  const inputRef = (0, _react.useRef)(null);
-  const containerRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    setInputValue(selectedValue);
-  }, [selectedValue]);
-  const handleLabelClick = () => {
-    if (disabled) return;
-    setIsFocused(true);
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      var _inputRef$current;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-    }
-  };
-  const handleInputChange = e => {
-    setIsFocused(true);
-    setInputValue(e.target.value);
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      var _inputRef$current2;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
-    }
-    onChange({
-      newValue: e.target.value || ''
-    });
-  };
-  const handleFocus = () => {
-    setIsFocused(true);
-    if (inputRef !== null && inputRef !== void 0 && inputRef.current) {
-      var _inputRef$current3;
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
-    }
-  };
-  const handleBlur = () => {
-    onBlur();
-    setIsFocused(false);
-  };
-  const leftIconOnClickHandler = () => {
-    if (disabled) return;
-    leftIconOnClick({
-      leftIconOnClick: leftIcon
-    });
-  };
-  const rightIconOnClickHandler = () => {
-    if (disabled) return;
-    rightIconOnClick({
-      rightIconOnClick: rightIcon
-    });
-  };
-  const getLeftIcon = () => {
-    if (!leftIcon || leftIcon === 'none') return '';
-    return (0, _IconsHandler.getIcon)(leftIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', leftIconOnClickHandler);
-  };
-  const getRightIcon = () => {
-    if (!rightIcon || rightIcon === 'none') return '';
-    return (0, _IconsHandler.getIcon)(rightIcon, '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', rightIconOnClickHandler);
-  };
-  const toggleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-  const getPasswordIcon = () => {
-    if (!password) return '';
-    if (showPassword) {
-      return /*#__PURE__*/_react.default.createElement(_Input.IconWrapper, {
-        className: "passwordEyeSlash",
-        disabled: disabled,
-        onClick: toggleShowPassword
-      }, /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, {
-        onClick: toggleShowPassword,
-        color: error ? 'red' : labelColor
-      }));
-    }
-    return (0, _IconsHandler.getIcon)('eye', '14px', '14px', error ? 'red' : labelColor, disabled, 'pointer', toggleShowPassword);
-  };
-  return /*#__PURE__*/_react.default.createElement(_Input.MainContainer, {
-    className: "MainContainer",
-    width: width,
-    size: size,
-    disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(_Input.InputContainer, {
-    className: "InputContainer",
-    labelColor: labelColor,
-    disabled: disabled,
-    error: error,
-    isFocused: isFocused,
-    size: size
-  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_Input.InputSubContainer, {
-    className: "InputSubContainer",
-    ref: containerRef,
-    labelColor: labelColor,
-    disabled: disabled,
-    error: error,
-    onClick: handleLabelClick,
-    size: size
-  }, /*#__PURE__*/_react.default.createElement(_Input.Label, {
-    className: "Label",
-    isFocused: isFocused,
-    labelColor: labelColor,
-    hasValue: inputValue,
-    leftIcon: leftIcon,
-    disabled: disabled,
-    error: error,
-    errorMessage: errorMessage,
-    onClick: handleLabelClick,
-    size: size
-  }, inputValue ? label : labelEmptyValue || label, required && /*#__PURE__*/_react.default.createElement("span", {
-    style: {
-      color: disabled ? '#D0D0D0' : 'red',
-      height: '16px'
-    }
-  }, "*")), /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
-    className: "StyledInput",
-    ref: inputRef,
-    type: password && !showPassword ? 'password' : 'text',
-    value: inputValue,
-    onChange: handleInputChange,
-    onClick: handleLabelClick,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    disabled: disabled,
-    placeholder: isFocused ? placeHolder : '',
-    error: error,
-    isFocused: isFocused
-  })), password ? getPasswordIcon() : getRightIcon()), error && (errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.length) > 0 && /*#__PURE__*/_react.default.createElement(_Input.ErrorMessage, {
-    className: "ErrorMessage",
-    width: width
-  }, errorMessage));
-};
-Input.defaultProps = {
-  placeHolder: 'Type...',
-  label: '',
-  labelEmptyValue: '',
-  size: 'medium',
-  labelColor: '#066768',
-  required: true,
-  width: '300px',
-  disabled: false,
-  error: false,
-  errorMessage: '',
-  selectedValue: '',
-  leftIcon: 'none',
-  rightIcon: 'none',
-  leftIconOnClick: () => {},
-  rightIconOnClick: () => {},
-  onBlur: () => {},
-  password: false
-};
-var _default = exports.default = Input;

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

@@ -1,132 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledInput = exports.MainContainer = exports.Label = exports.InputSubContainer = exports.InputContainer = exports.IconWrapper = exports.ErrorMessage = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-/* eslint-disable no-nested-ternary */
-
-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.js

@@ -1,93 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _fa = require("react-icons/fa");
-var _InputOld = require("./InputOld.style");
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/require-default-props */
-/* eslint-disable no-nested-ternary */
-// CustomInput.js
-
-const InputOld = _ref => {
-  let {
-    label,
-    value,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    password,
-    defaultValue,
-    error,
-    errorMessage,
-    type,
-    borderColor,
-    // Added borderColor prop
-    textColor // Added textColor prop
-  } = _ref;
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
-  const [showPassword, setShowPassword] = (0, _react.useState)(false);
-  const handleFocus = () => {
-    setIsFocused(true);
-  };
-  const handleBlur = () => {
-    setIsFocused(false);
-  };
-  const toggleShowPassword = () => {
-    setShowPassword(!showPassword);
-  };
-  return /*#__PURE__*/_react.default.createElement(_InputOld.Container, {
-    onClick: handleFocus,
-    width: width,
-    height: height
-  }, /*#__PURE__*/_react.default.createElement(_InputOld.StyledLabel, {
-    onClick: handleFocus,
-    isFocused: isFocused,
-    hasValue: value || defaultValue,
-    disabled: disabled,
-    textColor: textColor
-  }, label, required && /*#__PURE__*/_react.default.createElement(_InputOld.RequiredIndicator, null, "*")), /*#__PURE__*/_react.default.createElement(_InputOld.StyledInput, {
-    type: password && !showPassword ? 'password' : type,
-    value: value,
-    onChange: onChange,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    borderRadius: borderRadius,
-    width: width,
-    height: height,
-    placeholder: isFocused ? placeholder : '',
-    disabled: disabled,
-    defaultValue: defaultValue,
-    error: error,
-    borderColor: borderColor,
-    textColor: textColor
-  }), error && /*#__PURE__*/_react.default.createElement(_InputOld.ErrorLabel, null, errorMessage), password && /*#__PURE__*/_react.default.createElement(_InputOld.EyeIcon, {
-    onClick: toggleShowPassword,
-    textColor: textColor
-  }, showPassword ? /*#__PURE__*/_react.default.createElement(_fa.FaEyeSlash, null) : /*#__PURE__*/_react.default.createElement(_fa.FaEye, null)));
-};
-var _default = exports.default = InputOld;
-// Adding defaultProps
-InputOld.defaultProps = {
-  required: true,
-  width: '200%',
-  height: '50px',
-  disabled: false,
-  password: false,
-  defaultValue: '',
-  placeholder: 'Enter here..',
-  error: false,
-  errorMessage: 'Input is invalid',
-  type: 'text',
-  borderColor: '#000000',
-  // Default borderColor prop value
-  textColor: '#000000' // Default textColor prop value
-};

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

@@ -1,71 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledLabel = exports.StyledInput = exports.RequiredIndicator = exports.EyeIcon = exports.ErrorLabel = exports.Container = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-/* eslint-disable no-nested-ternary */
-
-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;
-`;