@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Blocks/ImageList/components/AddPhoto/index.js

@@ -0,0 +1,185 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) {
+        resolve(value);
+    } else {
+        Promise.resolve(value).then(_next, _throw);
+    }
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(undefined);
+        });
+    };
+}
+function _ts_generator(thisArg, body) {
+    var f, y, t, _ = {
+        label: 0,
+        sent: function() {
+            if (t[0] & 1) throw t[1];
+            return t[1];
+        },
+        trys: [],
+        ops: []
+    }, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype), d = Object.defineProperty;
+    return d(g, "next", {
+        value: verb(0)
+    }), d(g, "throw", {
+        value: verb(1)
+    }), d(g, "return", {
+        value: verb(2)
+    }), typeof Symbol === "function" && d(g, Symbol.iterator, {
+        value: function() {
+            return this;
+        }
+    }), g;
+    function verb(n) {
+        return function(v) {
+            return step([
+                n,
+                v
+            ]);
+        };
+    }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while(g && (g = 0, op[0] && (_ = 0)), _)try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [
+                op[0] & 2,
+                t.value
+            ];
+            switch(op[0]){
+                case 0:
+                case 1:
+                    t = op;
+                    break;
+                case 4:
+                    _.label++;
+                    return {
+                        value: op[1],
+                        done: false
+                    };
+                case 5:
+                    _.label++;
+                    y = op[1];
+                    op = [
+                        0
+                    ];
+                    continue;
+                case 7:
+                    op = _.ops.pop();
+                    _.trys.pop();
+                    continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+                        _ = 0;
+                        continue;
+                    }
+                    if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+                        _.label = op[1];
+                        break;
+                    }
+                    if (op[0] === 6 && _.label < t[1]) {
+                        _.label = t[1];
+                        t = op;
+                        break;
+                    }
+                    if (t && _.label < t[2]) {
+                        _.label = t[2];
+                        _.ops.push(op);
+                        break;
+                    }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop();
+                    continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) {
+            op = [
+                6,
+                e
+            ];
+            y = 0;
+        } finally{
+            f = t = 0;
+        }
+        if (op[0] & 5) throw op[1];
+        return {
+            value: op[0] ? op[1] : void 0,
+            done: true
+        };
+    }
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { AddPhoto as AddPhotoIcon } from "../../../../Elements/Icon/icons/AddPhoto";
+import { Container, HiddenInput } from "./styles";
+var AddPhoto = function AddPhoto(param) {
+    var onImageUpload = param.onImageUpload, isDisabled = param.isDisabled, hasRemove = param.hasRemove;
+    var handleImageUpload = useCallback(function(event) {
+        var _event_target_files, _event_target;
+        if (!((_event_target = event.target) === null || _event_target === void 0 ? void 0 : (_event_target_files = _event_target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0])) return;
+        var reader = new FileReader();
+        reader.readAsDataURL(event.target.files[0]);
+        reader.onload = function() {
+            return _async_to_generator(function() {
+                var _reader_result, _event_target_files;
+                return _ts_generator(this, function(_state) {
+                    switch(_state.label){
+                        case 0:
+                            return [
+                                4,
+                                onImageUpload === null || onImageUpload === void 0 ? void 0 : onImageUpload({
+                                    base64image: (_reader_result = reader.result) === null || _reader_result === void 0 ? void 0 : _reader_result.split(",").pop(),
+                                    base64WithDataDeclaration: reader.result,
+                                    file: (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0]
+                                })
+                            ];
+                        case 1:
+                            _state.sent();
+                            return [
+                                2
+                            ];
+                    }
+                });
+            })();
+        };
+    }, [
+        onImageUpload
+    ]);
+    if (!onImageUpload) return null;
+    return /* @__PURE__ */ jsxs(Container, {
+        isDisabled: isDisabled,
+        hasRemove: hasRemove,
+        children: [
+            /* @__PURE__ */ jsx(HiddenInput, {
+                disabled: isDisabled,
+                onChange: handleImageUpload,
+                type: "file",
+                accept: "image/*;capture=camera",
+                capture: "environment"
+            }),
+            /* @__PURE__ */ jsx(AddPhotoIcon, {
+                width: "36",
+                height: "36"
+            })
+        ]
+    });
+};
+export { AddPhoto };

package/ui/Blocks/ImageList/components/AddPhoto/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isDisabled?: boolean;
     hasRemove?: boolean;
 }, never>;
-export declare const HiddenInput: import('styled-components').StyledComponent<"input", import('@xstyled/system').Theme, {}, never>;
+export declare const HiddenInput: import("styled-components").StyledComponent<"input", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/ImageList/components/AddPhoto/styles.js

@@ -0,0 +1,43 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  flex-shrink: 0;\n  transition: all 0.2s linear;\n  height: 85px !important;\n  width: 85px !important;\n  border-radius: ",
+        ";\n  border: ",
+        ";\n  border-color: ",
+        ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  margin-right: 15px;\n  opacity: ",
+        ";\n  margin-top: ",
+        ";\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  opacity: 0;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  cursor: pointer;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th } from "@xstyled/styled-components";
+var Container = styled.div(_templateObject(), th.radius("lg"), th.border("mediumSlim"), th.color("red1"), function(param) {
+    var isDisabled = param.isDisabled;
+    return isDisabled ? 0.6 : 1;
+}, function(param) {
+    var hasRemove = param.hasRemove;
+    return hasRemove ? "15px" : "";
+});
+var HiddenInput = styled.input(_templateObject1());
+export { Container, HiddenInput };

package/ui/Blocks/ImageList/components/CloseButton/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface CloseButtonProps {
     onImageRemove: () => void;
     isDisabled?: boolean;

package/ui/Blocks/ImageList/components/CloseButton/index.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Icon } from "../../../../Elements/Icon";
+import { Container } from "./styles";
+var CloseButton = function CloseButton(param) {
+    var onImageRemove = param.onImageRemove, isDisabled = param.isDisabled;
+    return /* @__PURE__ */ jsx(Container, {
+        onClick: !isDisabled ? onImageRemove : void 0,
+        isDisabled: isDisabled,
+        children: /* @__PURE__ */ jsx(Icon, {
+            icon: "close",
+            size: "22px",
+            fill: isDisabled ? "magenta60" : "red1"
+        })
+    });
+};
+export { CloseButton };

package/ui/Blocks/ImageList/components/CloseButton/styles.d.ts

@@ -1,3 +1,3 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isDisabled?: boolean;
 }, never>;

package/ui/Blocks/ImageList/components/CloseButton/styles.js

@@ -0,0 +1,26 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 30px;\n  height: 30px;\n  background-color: ",
+        ";\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s linear;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled, { th } from "@xstyled/styled-components";
+var Container = styled.div(_templateObject(), function(param) {
+    var isDisabled = param.isDisabled;
+    return th.color(isDisabled ? "bgLightGray1" : "red20");
+});
+export { Container };

package/ui/Blocks/ImageList/components/ImageElement/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface ImageElementProps {
     label?: string;
     onImageRemove?: () => void;

package/ui/Blocks/ImageList/components/ImageElement/index.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseButton } from "../CloseButton";
+import { ImageTag } from "../ImageTag";
+import { Image, ImageWrapper } from "./styles";
+var ImageElement = function ImageElement(param) {
+    var label = param.label, onImageRemove = param.onImageRemove, isDisabled = param.isDisabled, onClick = param.onClick, imageUrl = param.imageUrl, selected = param.selected, visible = param.visible;
+    if (!imageUrl) return null;
+    return /* @__PURE__ */ jsxs(ImageWrapper, {
+        visible: visible,
+        hasImageRemove: !!onImageRemove,
+        children: [
+            /* @__PURE__ */ jsx(Image, {
+                src: imageUrl,
+                alt: "",
+                width: "85px",
+                height: "85px",
+                onClick: onClick,
+                selected: selected
+            }),
+            onImageRemove && /* @__PURE__ */ jsx(CloseButton, {
+                onImageRemove: onImageRemove,
+                isDisabled: isDisabled
+            }),
+            /* @__PURE__ */ jsx(ImageTag, {
+                label: label
+            })
+        ]
+    });
+};
+export { ImageElement };

package/ui/Blocks/ImageList/components/ImageElement/styles.d.ts

@@ -1,8 +1,8 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Image: import('styled-components').StyledComponent<"img", import('@xstyled/system').Theme, {
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"img", import("@xstyled/system").Theme, {
     selected?: boolean;
 }, never>;
-export declare const ImageWrapper: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ImageWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     visible: boolean;
     hasImageRemove: boolean;
 }, never>;

package/ui/Blocks/ImageList/components/ImageElement/styles.js

@@ -0,0 +1,64 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        ""
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  border-radius: ",
+        ";\n  border: ",
+        ";\n  border-color: red1;\n  cursor: pointer;\n  transition: all 0.2s;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  position: relative;\n  padding-right: ",
+        ";\n  padding-top: ",
+        ";\n  width: 100px;\n  height: ",
+        ";\n  display: ",
+        ";\n  user-select: none;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var Container = styled.div(_templateObject());
+var Image = styled.img(_templateObject1(), th.radius("lg"), function(param) {
+    var selected = param.selected;
+    return selected ? "3px solid" : "0";
+});
+var ImageWrapper = styled.div(_templateObject2(), function(param) {
+    var hasImageRemove = param.hasImageRemove;
+    return hasImageRemove ? "15px" : "0";
+}, function(param) {
+    var hasImageRemove = param.hasImageRemove;
+    return hasImageRemove ? "15px" : "0";
+}, function(param) {
+    var hasImageRemove = param.hasImageRemove;
+    return hasImageRemove ? "100px" : "85px";
+}, function(param) {
+    var visible = param.visible;
+    return visible ? "block" : "none";
+});
+export { Container, Image, ImageWrapper };

package/ui/Blocks/ImageList/components/ImageTag/index.d.ts

@@ -1,5 +1,4 @@
-import { FC } from 'react';
-
+import { type FC } from 'react';
 interface ImageTagProps {
     label?: string;
 }

package/ui/Blocks/ImageList/components/ImageTag/index.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import Tag from "../../../../Elements/Tag";
+import { Container } from "./styles";
+var ImageTag = function ImageTag(param) {
+    var label = param.label;
+    if (!label) return null;
+    return /* @__PURE__ */ jsx(Container, {
+        children: /* @__PURE__ */ jsx(Tag, {
+            size: "small",
+            color: "darkGreen",
+            textColor: "white",
+            children: /* @__PURE__ */ jsx("b", {
+                children: label
+            })
+        })
+    });
+};
+export { ImageTag };

package/ui/Blocks/ImageList/components/ImageTag/styles.d.ts

@@ -1 +1 @@
-export declare const Container: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;

package/ui/Blocks/ImageList/components/ImageTag/styles.js

@@ -0,0 +1,22 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  bottom: 2px;\n  left: 2px;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import styled from "@xstyled/styled-components";
+var Container = styled.div(_templateObject());
+export { Container };

package/ui/Blocks/ImageList/hooks/useControls.js

@@ -0,0 +1,68 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useState, useCallback } from "react";
+var useControls = function useControls(param) {
+    var max = param.max, _param_total = param.total, total = _param_total === void 0 ? 0 : _param_total;
+    var _useState = _sliced_to_array(useState(0), 2), position = _useState[0], setPosition = _useState[1];
+    var moveList = useCallback(function(direction) {
+        return function() {
+            if (max) {
+                setPosition(function(position2) {
+                    return Math.min(Math.max(position2 + direction, 0), total - max);
+                });
+            }
+        };
+    }, [
+        total
+    ]);
+    return {
+        moveList: moveList,
+        position: position,
+        hasControls: !!max && total > max
+    };
+};
+export { useControls };

package/ui/Blocks/ImageList/hooks/useOnElementClick.d.ts

@@ -1,5 +1,4 @@
-import { ImageData } from '../../LightBox';
-
+import { type ImageData } from '../../LightBox';
 type Props = {
     onImageClick?: (item: ImageData) => void;
     onOpenLightBox: (index: number) => () => void;

package/ui/Blocks/ImageList/hooks/useOnElementClick.js

@@ -0,0 +1,73 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useCallback, useState } from "react";
+var useOnElementClick = function useOnElementClick(param) {
+    var onImageClick = param.onImageClick, onOpenLightBox = param.onOpenLightBox, selectable = param.selectable;
+    var _useState = _sliced_to_array(useState(-1), 2), selected = _useState[0], setSelected = _useState[1];
+    var handleOnClick = useCallback(function(item, index) {
+        return function() {
+            if (onImageClick) {
+                onImageClick(item);
+            } else {
+                onOpenLightBox(index)();
+            }
+            if (selectable) {
+                setSelected(function(selected2) {
+                    return selected2 !== index ? index : -1;
+                });
+            }
+        };
+    }, [
+        onImageClick,
+        onOpenLightBox
+    ]);
+    return {
+        handleOnClick: handleOnClick,
+        selected: selected
+    };
+};
+export { useOnElementClick };

package/ui/Blocks/ImageList/index.d.js

@@ -0,0 +1,2 @@
+var index_d_default = ImageList;
+export { index_d_default as default };

package/ui/Blocks/ImageList/index.d.ts

@@ -1,6 +1,5 @@
 import { ImageList } from './ImageList';
-import { ImageData } from '../LightBox';
-
+import { type ImageData } from '../LightBox';
 export { type ImageUploadProps } from './types';
 export { type ImageData };
 export default ImageList;

package/ui/Blocks/ImageList/index.js

@@ -0,0 +1,3 @@
+import { ImageList } from "./ImageList";
+var ImageList_default = ImageList;
+export { ImageList_default as default };

package/ui/Blocks/ImageList/stories/ImageList.stories.d.ts

@@ -1,8 +1,7 @@
 import { StoryObj } from '@storybook/react-webpack5';
-
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').ImageListProps>;
+    component: import("react").FC<import("../types").ImageListProps>;
     tags: string[];
     argTypes: {};
 };

package/ui/Blocks/ImageList/styles.d.ts

@@ -1,5 +1,5 @@
-export declare const ImageListContainer: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
-export declare const Control: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
+export declare const ImageListContainer: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
+export declare const Control: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {
     isLeft?: boolean;
     isDisabled: boolean;
     hasRemove?: boolean;