@cashub/ui-elv 1.0.0

package/styles/theme/dark.theme.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#000000',
+  colorGrey: '#5b5f6f',
+  colorPrimary: '#597EF7',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#FFCA7A',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(89, 126, 247, 0.2)',
+  colorActive: 'rgba(89, 126, 247, 0.2)',
+  scrollBarColor: 'rgba(89, 126, 247, 0.3)',
+  bgColor1: '#13142e',
+  bgColor2: '#222143',
+  bgColor3: '#2d2a5d',
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.colorWhite,
+  fontOnSuccess: colorStyle.colorWhite,
+  fontOnWarning: colorStyle.colorWhite,
+  fontOnDanger: colorStyle.colorWhite,
+  fontOnBg: colorStyle.colorWhite,
+  fontMutedColor: 'rgba(255, 255, 255, 0.5)'
+};
+
+// Theme stylesheet
+const darkTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = darkTheme;

package/styles/theme/light.theme.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#989cad',
+  colorPrimary: '#3661ec',
+  colorSuccess: '#48d5cc',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(54, 97, 236, 0.2)',
+  colorActive: 'rgba(54, 97, 236, 0.2)',
+  scrollBarColor: 'rgba(54, 97, 236, 0.3)',
+  bgColor1: '#F0ECFF',
+  bgColor2: '#F8F4FF',
+  bgColor3: '#E6E1FF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
+};
+
+// Theme stylesheet
+const lightTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = lightTheme;

package/styles/theme/white.theme.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// Currently, some style is all same for all viewport size
+// Common color style
+const colorStyle = {
+  colorWhite: '#ffffff',
+  colorDark: '#353351',
+  colorGrey: '#b7bbcd',
+  colorPrimary: '#345FEB',
+  colorSuccess: '#11D8CD',
+  colorWarning: '#feb444',
+  colorDanger: '#F495A1',
+  colorHover: 'rgba(52, 95, 235, 0.2)',
+  colorActive: 'rgba(52, 95, 235, 0.2)',
+  scrollBarColor: 'rgba(52, 95, 235, 0.3)',
+  bgColor1: '#EEEEEE',
+  bgColor2: '#F7F7F7',
+  bgColor3: '#FFFFFF',
+  backdropBg: 'rgba(0, 0, 0, 0.75)'
+};
+
+// Common font style
+const fontStyle = {
+  fontH1: '2.25rem',
+  fontH2: '1.5rem',
+  fontH3: '1.25rem',
+  fontBody1: '1rem',
+  fontBody2: '0.875rem',
+  fontButton: '0.875rem',
+  fontCaption: '0.75rem',
+  fontFamily: 'Helvetica',
+  fontWeightNormal: '400',
+  fontWeightBold: 'bold',
+  fontOnPrimary: colorStyle.bgColor2,
+  fontOnSuccess: colorStyle.colorDark,
+  fontOnWarning: colorStyle.colorDark,
+  fontOnDanger: colorStyle.colorDark,
+  fontOnBg: colorStyle.colorDark,
+  fontMutedColor: 'rgba(53, 51, 81, 0.6)'
+};
+
+// Theme stylesheet
+const whiteTheme = {
+  desktop: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '1rem',
+    spacer: '1.5rem',
+    spacerL: '2rem'
+  },
+  tablet: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  },
+  mobile: {
+    ...fontStyle,
+    ...colorStyle,
+    boxShadow: '0px 0px 8px rgba(91, 95, 111, 0.5)',
+    borderColor: colorStyle.colorGrey,
+    borderColorTransparent: `${colorStyle.colorGrey}80`,
+    borderWidth: '1px',
+    borderRadiusS: '0.5rem',
+    borderRadius: '1rem',
+    borderRadiusL: '2rem',
+    borderRadiusRound: '50%',
+    spacerXS: '0.5rem',
+    spacerS: '0.75rem',
+    spacer: '1rem',
+    spacerL: '1.25rem'
+  }
+};
+var _default = exports.default = whiteTheme;

package/styles/themes.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _white = _interopRequireDefault(require("./theme/white.theme"));
+var _light = _interopRequireDefault(require("./theme/light.theme"));
+var _dark = _interopRequireDefault(require("./theme/dark.theme"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const themes = {
+  White: _white.default,
+  Light: _light.default,
+  Dark: _dark.default
+};
+var _default = exports.default = themes;

package/table/GridTable.js

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _hooks = require("./hooks");
+var _scrollbar = _interopRequireDefault(require("../styles/mixin/scrollbar"));
+var _GridTableHeadCell = _interopRequireDefault(require("./subComponent/GridTableHeadCell"));
+var _Resizer = _interopRequireDefault(require("./subComponent/Resizer"));
+var _GridTableFooter = _interopRequireDefault(require("./subComponent/GridTableFooter"));
+var _TableFooterInfo = _interopRequireDefault(require("./subComponent/TableFooterInfo"));
+var _TableFooterPager = _interopRequireDefault(require("./subComponent/TableFooterPager"));
+var _Paginate = _interopRequireDefault(require("../paginate/Paginate"));
+var _Select = _interopRequireDefault(require("../select/Select"));
+var _Popover = _interopRequireDefault(require("../popover/Popover"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const GridTable = _ref => {
+  let {
+    columns,
+    data,
+    currentPage,
+    limit,
+    total,
+    onPageChange,
+    onLimitChange,
+    sortColumn,
+    sortType,
+    onSortChange,
+    backgroundReverse,
+    translation
+  } = _ref;
+  const wrapperRef = (0, _react.useRef)(null);
+  const tableRef = (0, _react.useRef)(null);
+  const {
+    start,
+    end
+  } = (0, _hooks.useCalculateDataRange)(currentPage, limit, total);
+  const [tableWidth, setTableWidth] = (0, _react.useState)(0);
+  const [restWidth, setRestWidth] = (0, _react.useState)(0);
+  const texts = (0, _react.useMemo)(() => {
+    const defaultTexts = {
+      info: 'Showing _START_ to _END_ of _TOTAL_ entries',
+      empty: 'No data available in table'
+    };
+    return {
+      ...defaultTexts,
+      ...translation
+    };
+  }, [translation]);
+  const handleSortChange = (0, _react.useCallback)(columnName => {
+    if (onSortChange) {
+      onSortChange(columnName);
+    }
+  }, [onSortChange]);
+  const handleResize = (0, _react.useCallback)(() => {
+    setTableWidth(tableRef.current.offsetWidth);
+    setRestWidth(previousWidth => {
+      const containerWidth = wrapperRef.current.offsetWidth;
+      const tableWidth = tableRef.current.offsetWidth - previousWidth;
+      if (containerWidth > tableWidth) {
+        return containerWidth - tableWidth;
+      }
+      return 0;
+    });
+  }, []);
+  const handleScroll = (0, _react.useCallback)(event => {
+    const {
+      target
+    } = event;
+    wrapperRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+  const showFullValue = (0, _react.useCallback)(event => {
+    let {
+      id
+    } = event.target;
+    if (!id) {
+      ({
+        id
+      } = event.currentTarget);
+      event.target.id = id;
+    }
+    const {
+      offsetWidth,
+      scrollWidth,
+      innerText
+    } = event.target;
+    if (scrollWidth >= offsetWidth && innerText) {
+      event.stopPropagation();
+      (0, _Popover.default)({
+        id,
+        target: event.target,
+        content: innerText,
+        boundary: tableRef.current
+      });
+    }
+  }, []);
+
+  // generate sort icon area
+  const generateSort = (0, _hooks.useGenerateSort)(sortColumn, sortType);
+  const tableHeads = (0, _react.useMemo)(() => {
+    const tableHeads = columns.map((column, index) => {
+      const {
+        title,
+        fieldName,
+        width,
+        sortable,
+        align
+      } = column;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTableHeadCell.default, {
+        width: width,
+        align: align,
+        backgroundReverse: backgroundReverse,
+        sortable: sortable,
+        onClick: () => {
+          sortable && handleSortChange(fieldName);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            id: fieldName,
+            onClick: showFullValue,
+            children: title
+          }), sortable && generateSort(fieldName)]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Resizer.default, {
+          onResize: handleResize
+        })]
+      }, `TH${index}`);
+    });
+    tableHeads.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_GridTableHeadCell.default, {
+      role: "presentation",
+      width: restWidth,
+      backgroundReverse: backgroundReverse
+    }, 'rest'));
+    return tableHeads;
+  }, [backgroundReverse, columns, handleSortChange, generateSort, showFullValue, handleResize, restWidth]);
+  const tableRows = (0, _react.useMemo)(() => {
+    if (data.length === 0) {
+      return null;
+    }
+    return data.map((row, rowIndex) => {
+      const tds = columns.map((column, columnIndex) => {
+        const {
+          title,
+          fieldName,
+          render,
+          custom,
+          ...props
+        } = column;
+        const key = rowIndex + columnIndex.toString();
+        let renderedData = null;
+        if (custom && render) {
+          // call render function to get custom data(fully)
+          renderedData = render(row);
+        } else {
+          // call render function to get custom data(part)
+          renderedData = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            id: key,
+            onClick: showFullValue,
+            children: render ? render(row[fieldName], row) : String(row[fieldName])
+          });
+        }
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
+          "data-label": title,
+          backgroundReverse: backgroundReverse,
+          ...props,
+          children: renderedData
+        }, columnIndex);
+      });
+      tds.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
+        role: "presentation",
+        backgroundReverse: backgroundReverse
+      }, 'rest'));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+        children: tds
+      }, rowIndex);
+    });
+  }, [backgroundReverse, columns, data, showFullValue]);
+  const generateEmptyMessage = (0, _react.useCallback)(() => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TD, {
+        center: true,
+        colSpan: columns.length,
+        backgroundReverse: backgroundReverse,
+        children: texts.empty
+      })
+    });
+  }, [backgroundReverse, columns, texts]);
+  (0, _react.useEffect)(() => {
+    handleResize();
+  }, [columns, handleResize]);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [handleResize]);
+  (0, _react.useEffect)(() => {
+    if (tableRef.current) {
+      setTableWidth(tableRef.current.offsetWidth);
+    }
+  }, [columns]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TableWrapper, {
+      ref: wrapperRef,
+      backgroundReverse: backgroundReverse,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(ResponsiveTable, {
+        ref: tableRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("thead", {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("tr", {
+            children: tableHeads
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("tbody", {
+          children: tableRows || generateEmptyMessage()
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Scrollbar, {
+      backgroundReverse: backgroundReverse,
+      width: tableWidth,
+      onScroll: handleScroll
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GridTableFooter.default, {
+      backgroundReverse: backgroundReverse,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TableFooterInfo.default, {
+        children: texts.info.replace('_START_', start).replace('_END_', end).replace('_TOTAL_', total)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_TableFooterPager.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Paginate.default, {
+          currentPage: currentPage,
+          totalCount: total,
+          pageSize: limit,
+          onPageChange: onPageChange
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Select.default, {
+          fill: true,
+          fillReverse: !backgroundReverse,
+          allowSearch: false,
+          options: [{
+            id: 10,
+            text: '10'
+          }, {
+            id: 20,
+            text: '20'
+          }, {
+            id: 30,
+            text: '30'
+          }, {
+            id: 40,
+            text: '40'
+          }, {
+            id: 50,
+            text: '50'
+          }],
+          selected: limit,
+          onSelect: onLimitChange
+        })]
+      })]
+    })]
+  });
+};
+const TableWrapper = _styledComponents.default.div`
+  overflow: hidden;
+  background: ${_ref2 => {
+  let {
+    backgroundReverse
+  } = _ref2;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+`;
+const ResponsiveTable = _styledComponents.default.table`
+  /* make fixed width work */
+  width: 0px;
+  color: var(--font-on-background);
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+const TD = _styledComponents.default.td`
+  height: 48px;
+  padding: 0 var(--spacing-xs);
+  border-top: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--border-color);
+  text-align: ${_ref3 => {
+  let {
+    center
+  } = _ref3;
+  return center ? 'center' : 'left';
+}};
+  background: ${_ref4 => {
+  let {
+    backgroundReverse
+  } = _ref4;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+
+  &:last-child {
+    border-right: none;
+  }
+
+  > span {
+    display: inline-block;
+    width: 100%;
+    padding: 0 2px;
+    overflow: hidden;
+    white-space: pre;
+    text-overflow: ellipsis;
+  }
+`;
+const Scrollbar = _styledComponents.default.div`
+  position: sticky;
+  bottom: 48px;
+  width: 100%;
+  overflow: auto;
+  background: ${_ref5 => {
+  let {
+    backgroundReverse
+  } = _ref5;
+  return backgroundReverse ? 'var(--color-background1)' : 'var(--color-background2)';
+}};
+
+  ::before {
+    display: block;
+    content: '';
+    width: ${_ref6 => {
+  let {
+    width
+  } = _ref6;
+  return `${width}px`;
+}};
+    height: 1px;
+  }
+
+  ${(0, _scrollbar.default)({
+  size: 'large'
+})}
+`;
+var _default = exports.default = GridTable;

package/table/ImageBox.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _IconFigure = _interopRequireDefault(require("../figure/IconFigure"));
+var _ImageFluid = _interopRequireDefault(require("../image/ImageFluid"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ImageBox = _ref => {
+  let {
+    image,
+    text
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconFigure.default, {
+      size: "large",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageFluid.default, {
+        crossOrigin: "anonymous",
+        src: image,
+        alt: `${text}'s pic`,
+        roundedCircle: true
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Text, {
+      children: text
+    })]
+  });
+};
+const Wrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+
+  > figure {
+    flex: 0 0 auto;
+    margin-right: var(--spacing-xs);
+  }
+`;
+const Text = _styledComponents.default.span`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+var _default = exports.default = ImageBox;