sag_components 2.0.0-beta27 → 2.0.0-beta29

package/dist/stories/components/IconButton.js

@@ -0,0 +1,147 @@
+"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

@@ -0,0 +1,64 @@
+"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

@@ -0,0 +1,186 @@
+"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

@@ -0,0 +1,132 @@
+"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

@@ -0,0 +1,93 @@
+"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

@@ -0,0 +1,71 @@
+"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;
+`;