@elliemae/ds-read-more 1.57.1-rc.0 → 2.0.0-alpha.11

package/cjs/DSReadMore.js

@@ -2,80 +2,57 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var React = require('react');
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+require('core-js/modules/web.dom-collections.iterator.js');
+var react = require('react');
 var reactDesc = require('react-desc');
 var styled = require('styled-components');
 var DSButton = require('@elliemae/ds-button');
+var propTypes = require('@elliemae/ds-shared/prop-types');
 var MoreLessButton = require('./MoreLessButton.js');
+var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-/* eslint-disable max-lines */
-const dsBasicSizes = ['s', 'm', 'l'];
-
-var Text = /*#__PURE__*/styled__default['default'].span.withConfig({
+const Text = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1c4w5m6-0"
-})(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-all;"], function (_ref) {
-  var lines = _ref.lines,
-      expanded = _ref.expanded;
-  return expanded ? 'unset' : lines;
-});
-
-var DSReadMore = function DSReadMore(_ref2) {
-  var _ref2$lines = _ref2.lines,
-      lines = _ref2$lines === void 0 ? 2 : _ref2$lines,
-      _ref2$more = _ref2.more,
-      more = _ref2$more === void 0 ? 'more' : _ref2$more,
-      _ref2$less = _ref2.less,
-      less = _ref2$less === void 0 ? 'less' : _ref2$less,
-      _ref2$onMore = _ref2.onMore,
-      onMore = _ref2$onMore === void 0 ? function () {
-    return null;
-  } : _ref2$onMore,
-      _ref2$onLess = _ref2.onLess,
-      onLess = _ref2$onLess === void 0 ? function () {
-    return null;
-  } : _ref2$onLess,
-      content = _ref2.content,
-      _ref2$buttonType = _ref2.buttonType,
-      buttonType = _ref2$buttonType === void 0 ? 'link' : _ref2$buttonType,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 's' : _ref2$size,
-      _ref2$ellipsis = _ref2.ellipsis,
-      ellipsis = _ref2$ellipsis === void 0 ? '...' : _ref2$ellipsis;
-  var ref = React.useRef();
-
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray__default['default'](_useState, 2),
-      showButton = _useState2[0],
-      setShowButton = _useState2[1];
-
-  var _useState3 = React.useState(false),
-      _useState4 = _slicedToArray__default['default'](_useState3, 2),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1]; // offsetHeight + 2 takes into consideration any size of the button
-
-
-  var overflows = function overflows(_ref3) {
-    var offsetHeight = _ref3.offsetHeight,
-        scrollHeight = _ref3.scrollHeight;
-    return offsetHeight + 2 < scrollHeight;
-  }; // Searchs the optimum cut on the text to have the button in the same line
-
-
-  var binSearchTextOverflow = function binSearchTextOverflow(element, parent) {
-    var text = element.innerText;
-    var left = 1;
-    var right = text.length;
-    var textEnd = 0;
+})(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-all;"], ({
+  lines,
+  expanded
+}) => expanded ? 'unset' : lines);
+
+const DSReadMore = ({
+  lines = 2,
+  more = 'more',
+  less = 'less',
+  onMore = () => null,
+  onLess = () => null,
+  content,
+  buttonType = 'link',
+  size = 's',
+  ellipsis = '...'
+}) => {
+  const ref = react.useRef();
+  const [showButton, setShowButton] = react.useState(false);
+  const [expanded, setExpanded] = react.useState(false); // offsetHeight + 2 takes into consideration any size of the button
+
+  const overflows = ({
+    offsetHeight,
+    scrollHeight
+  }) => offsetHeight + 2 < scrollHeight; // Searchs the optimum cut on the text to have the button in the same line
+
+
+  const binSearchTextOverflow = (element, parent) => {
+    const text = element.innerText;
+    let left = 1;
+    let right = text.length;
+    let textEnd = 0;
 
     while (left <= right) {
-      var middle = (left + right) / 2;
+      const middle = (left + right) / 2;
       element.innerText = content.slice(0, middle);
       if (overflows(parent)) right = middle - 1;else {
         left = middle + 1;
@@ -86,11 +63,11 @@ var DSReadMore = function DSReadMore(_ref2) {
     element.innerText = content.slice(0, textEnd);
   };
 
-  React.useLayoutEffect(function () {
+  react.useLayoutEffect(() => {
     var _ref$current;
 
-    var textElement = ref.current;
-    var parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
+    const textElement = ref.current;
+    const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
 
     if (parentElement) {
       textElement.innerText = content;
@@ -102,30 +79,29 @@ var DSReadMore = function DSReadMore(_ref2) {
     }
   }, [lines, content, expanded, showButton, more, less]);
 
-  var toggleExpanded = function toggleExpanded(newExpanded) {
+  const toggleExpanded = newExpanded => {
     setExpanded(newExpanded);
     if (newExpanded) onMore();else onLess();
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(Text, {
+  return /*#__PURE__*/_jsx2__default["default"](Text, {
     lines: lines,
     expanded: expanded
-  }, /*#__PURE__*/React__default['default'].createElement("span", {
+  }, void 0, /*#__PURE__*/jsxRuntime.jsx("span", {
     ref: ref,
-    "data-testid": "ds-read_more-text"
-  }, content), showButton && /*#__PURE__*/React__default['default'].createElement("span", null, /*#__PURE__*/React__default['default'].createElement(MoreLessButton.MoreLessButton, {
+    "data-testid": "ds-read_more-text",
+    children: content
+  }), showButton && /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
     expanded: expanded,
     label: expanded ? less : more,
-    onClick: function onClick() {
-      return toggleExpanded(!expanded);
-    },
+    onClick: () => toggleExpanded(!expanded),
     buttonType: buttonType,
     size: size,
     ellipsis: ellipsis
   })));
 };
 
-var DSReadMoreProps = {
+const DSReadMoreProps = {
   /** Ammount of lines after you want to display an ellipsis + more/less button */
   lines: reactDesc.PropTypes.number.description('Ammount of lines after you want to display an ellipsis + more/less button').defaultValue(2),
 
@@ -150,16 +126,14 @@ var DSReadMoreProps = {
   /**
    * ['s', 'm', 'l']
    */
-  size: reactDesc.PropTypes.oneOf(dsBasicSizes).description('Size of the button').defaultValue('s'),
+  size: reactDesc.PropTypes.oneOf(propTypes.dsBasicSizes).description('Size of the button').defaultValue('s'),
 
   /** The text you want to appear when truncating */
   ellipsis: reactDesc.PropTypes.string.description('The text you want to appear when truncating').defaultValue('...')
 };
-DSReadMore.propTypes = DSReadMoreProps;
-var DSReadMoreWithSchema = reactDesc.describe(DSReadMore).description('ReadMore component');
+const DSReadMoreWithSchema = reactDesc.describe(DSReadMore).description('ReadMore component');
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
 
 exports.DSReadMore = DSReadMore;
 exports.DSReadMoreWithSchema = DSReadMoreWithSchema;
-exports['default'] = DSReadMore;
-//# sourceMappingURL=DSReadMore.js.map
+exports["default"] = DSReadMore;

package/cjs/MoreLessButton.js

@@ -2,40 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
-var reactDesc = require('react-desc');
+var _jsx2 = require('@babel/runtime/helpers/jsx');
+require('react');
 var DSButton = require('@elliemae/ds-button');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
 var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
 
-var MoreLessButton = function MoreLessButton(_ref) {
-  var expanded = _ref.expanded,
-      label = _ref.label,
-      onClick = _ref.onClick,
-      buttonType = _ref.buttonType,
-      size = _ref.size,
-      ellipsis = _ref.ellipsis;
-  return /*#__PURE__*/React__default['default'].createElement("span", null, expanded ? ' ' : ellipsis, /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
-    buttonType: buttonType,
-    labelText: label,
-    onClick: onClick,
-    size: size,
-    "data-testid": "ds-read_more-button"
-  }));
-};
-
-var MoreLessButtonProps = {
-  expanded: reactDesc.PropTypes.boolean,
-  label: reactDesc.PropTypes.string,
-  onClick: reactDesc.PropTypes.func,
-  buttonType: reactDesc.PropTypes.string,
-  size: reactDesc.PropTypes.string,
-  ellipsis: reactDesc.PropTypes.string
-};
-MoreLessButton.propTypes = MoreLessButtonProps;
+const MoreLessButton = ({
+  expanded,
+  label,
+  onClick,
+  buttonType,
+  size,
+  ellipsis
+}) => /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2__default["default"](DSButton__default["default"], {
+  buttonType: buttonType,
+  labelText: label,
+  onClick: onClick,
+  size: size,
+  "data-testid": "ds-read_more-button"
+}));
 
 exports.MoreLessButton = MoreLessButton;
-//# sourceMappingURL=MoreLessButton.js.map

package/cjs/index.js

@@ -3,16 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DSReadMore = require('./DSReadMore.js');
-require('@babel/runtime/helpers/slicedToArray');
-require('react');
-require('react-desc');
-require('styled-components');
-require('@elliemae/ds-button');
-require('./MoreLessButton.js');
 
 
 
 exports.DSReadMore = DSReadMore.DSReadMore;
 exports.DSReadMoreWithSchema = DSReadMore.DSReadMoreWithSchema;
-exports.default = DSReadMore.DSReadMore;
-//# sourceMappingURL=index.js.map
+exports["default"] = DSReadMore.DSReadMore;

package/esm/DSReadMore.js

@@ -1,71 +1,49 @@
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useRef, useState, useLayoutEffect } from 'react';
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useRef, useState, useLayoutEffect } from 'react';
 import { PropTypes, describe } from 'react-desc';
 import styled from 'styled-components';
 import { buttonTypes } from '@elliemae/ds-button';
+import { dsBasicSizes } from '@elliemae/ds-shared/prop-types';
 import { MoreLessButton } from './MoreLessButton.js';
+import { jsx } from 'react/jsx-runtime';
 
-/* eslint-disable max-lines */
-const dsBasicSizes = ['s', 'm', 'l'];
-
-var Text = /*#__PURE__*/styled.span.withConfig({
+const Text = /*#__PURE__*/styled.span.withConfig({
   componentId: "sc-1c4w5m6-0"
-})(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-all;"], function (_ref) {
-  var lines = _ref.lines,
-      expanded = _ref.expanded;
-  return expanded ? 'unset' : lines;
-});
-
-var DSReadMore = function DSReadMore(_ref2) {
-  var _ref2$lines = _ref2.lines,
-      lines = _ref2$lines === void 0 ? 2 : _ref2$lines,
-      _ref2$more = _ref2.more,
-      more = _ref2$more === void 0 ? 'more' : _ref2$more,
-      _ref2$less = _ref2.less,
-      less = _ref2$less === void 0 ? 'less' : _ref2$less,
-      _ref2$onMore = _ref2.onMore,
-      onMore = _ref2$onMore === void 0 ? function () {
-    return null;
-  } : _ref2$onMore,
-      _ref2$onLess = _ref2.onLess,
-      onLess = _ref2$onLess === void 0 ? function () {
-    return null;
-  } : _ref2$onLess,
-      content = _ref2.content,
-      _ref2$buttonType = _ref2.buttonType,
-      buttonType = _ref2$buttonType === void 0 ? 'link' : _ref2$buttonType,
-      _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? 's' : _ref2$size,
-      _ref2$ellipsis = _ref2.ellipsis,
-      ellipsis = _ref2$ellipsis === void 0 ? '...' : _ref2$ellipsis;
-  var ref = useRef();
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      showButton = _useState2[0],
-      setShowButton = _useState2[1];
-
-  var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      expanded = _useState4[0],
-      setExpanded = _useState4[1]; // offsetHeight + 2 takes into consideration any size of the button
-
-
-  var overflows = function overflows(_ref3) {
-    var offsetHeight = _ref3.offsetHeight,
-        scrollHeight = _ref3.scrollHeight;
-    return offsetHeight + 2 < scrollHeight;
-  }; // Searchs the optimum cut on the text to have the button in the same line
-
-
-  var binSearchTextOverflow = function binSearchTextOverflow(element, parent) {
-    var text = element.innerText;
-    var left = 1;
-    var right = text.length;
-    var textEnd = 0;
+})(["display:-webkit-box;-webkit-line-clamp:", ";-webkit-box-orient:vertical;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-break:break-all;"], ({
+  lines,
+  expanded
+}) => expanded ? 'unset' : lines);
+
+const DSReadMore = ({
+  lines = 2,
+  more = 'more',
+  less = 'less',
+  onMore = () => null,
+  onLess = () => null,
+  content,
+  buttonType = 'link',
+  size = 's',
+  ellipsis = '...'
+}) => {
+  const ref = useRef();
+  const [showButton, setShowButton] = useState(false);
+  const [expanded, setExpanded] = useState(false); // offsetHeight + 2 takes into consideration any size of the button
+
+  const overflows = ({
+    offsetHeight,
+    scrollHeight
+  }) => offsetHeight + 2 < scrollHeight; // Searchs the optimum cut on the text to have the button in the same line
+
+
+  const binSearchTextOverflow = (element, parent) => {
+    const text = element.innerText;
+    let left = 1;
+    let right = text.length;
+    let textEnd = 0;
 
     while (left <= right) {
-      var middle = (left + right) / 2;
+      const middle = (left + right) / 2;
       element.innerText = content.slice(0, middle);
       if (overflows(parent)) right = middle - 1;else {
         left = middle + 1;
@@ -76,11 +54,11 @@ var DSReadMore = function DSReadMore(_ref2) {
     element.innerText = content.slice(0, textEnd);
   };
 
-  useLayoutEffect(function () {
+  useLayoutEffect(() => {
     var _ref$current;
 
-    var textElement = ref.current;
-    var parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
+    const textElement = ref.current;
+    const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
 
     if (parentElement) {
       textElement.innerText = content;
@@ -92,30 +70,29 @@ var DSReadMore = function DSReadMore(_ref2) {
     }
   }, [lines, content, expanded, showButton, more, less]);
 
-  var toggleExpanded = function toggleExpanded(newExpanded) {
+  const toggleExpanded = newExpanded => {
     setExpanded(newExpanded);
     if (newExpanded) onMore();else onLess();
   };
 
-  return /*#__PURE__*/React.createElement(Text, {
+  return /*#__PURE__*/_jsx2(Text, {
     lines: lines,
     expanded: expanded
-  }, /*#__PURE__*/React.createElement("span", {
+  }, void 0, /*#__PURE__*/jsx("span", {
     ref: ref,
-    "data-testid": "ds-read_more-text"
-  }, content), showButton && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(MoreLessButton, {
+    "data-testid": "ds-read_more-text",
+    children: content
+  }), showButton && /*#__PURE__*/_jsx2("span", {}, void 0, /*#__PURE__*/_jsx2(MoreLessButton, {
     expanded: expanded,
     label: expanded ? less : more,
-    onClick: function onClick() {
-      return toggleExpanded(!expanded);
-    },
+    onClick: () => toggleExpanded(!expanded),
     buttonType: buttonType,
     size: size,
     ellipsis: ellipsis
   })));
 };
 
-var DSReadMoreProps = {
+const DSReadMoreProps = {
   /** Ammount of lines after you want to display an ellipsis + more/less button */
   lines: PropTypes.number.description('Ammount of lines after you want to display an ellipsis + more/less button').defaultValue(2),
 
@@ -145,9 +122,7 @@ var DSReadMoreProps = {
   /** The text you want to appear when truncating */
   ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...')
 };
-DSReadMore.propTypes = DSReadMoreProps;
-var DSReadMoreWithSchema = describe(DSReadMore).description('ReadMore component');
+const DSReadMoreWithSchema = describe(DSReadMore).description('ReadMore component');
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
 
 export { DSReadMore, DSReadMoreWithSchema, DSReadMore as default };
-//# sourceMappingURL=DSReadMore.js.map

package/esm/MoreLessButton.js

@@ -1,32 +1,20 @@
-import React from 'react';
-import { PropTypes } from 'react-desc';
+import _jsx2 from '@babel/runtime/helpers/esm/jsx';
+import 'react';
 import DSButton from '@elliemae/ds-button';
 
-var MoreLessButton = function MoreLessButton(_ref) {
-  var expanded = _ref.expanded,
-      label = _ref.label,
-      onClick = _ref.onClick,
-      buttonType = _ref.buttonType,
-      size = _ref.size,
-      ellipsis = _ref.ellipsis;
-  return /*#__PURE__*/React.createElement("span", null, expanded ? ' ' : ellipsis, /*#__PURE__*/React.createElement(DSButton, {
-    buttonType: buttonType,
-    labelText: label,
-    onClick: onClick,
-    size: size,
-    "data-testid": "ds-read_more-button"
-  }));
-};
-
-var MoreLessButtonProps = {
-  expanded: PropTypes.boolean,
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  buttonType: PropTypes.string,
-  size: PropTypes.string,
-  ellipsis: PropTypes.string
-};
-MoreLessButton.propTypes = MoreLessButtonProps;
+const MoreLessButton = ({
+  expanded,
+  label,
+  onClick,
+  buttonType,
+  size,
+  ellipsis
+}) => /*#__PURE__*/_jsx2("span", {}, void 0, expanded ? ' ' : ellipsis, /*#__PURE__*/_jsx2(DSButton, {
+  buttonType: buttonType,
+  labelText: label,
+  onClick: onClick,
+  size: size,
+  "data-testid": "ds-read_more-button"
+}));
 
 export { MoreLessButton };
-//# sourceMappingURL=MoreLessButton.js.map

package/esm/index.js

@@ -1,8 +1 @@
 export { DSReadMore, DSReadMoreWithSchema, DSReadMore as default } from './DSReadMore.js';
-import '@babel/runtime/helpers/esm/slicedToArray';
-import 'react';
-import 'react-desc';
-import 'styled-components';
-import '@elliemae/ds-button';
-import './MoreLessButton.js';
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,14 +1,38 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "1.57.1-rc.0",
+  "version": "2.0.0-alpha.11",
   "license": "MIT",
-  "description": "Ellie Mae - Dim Sum - Read More",
-  "module": "esm/index.js",
-  "main": "cjs/index.js",
+  "description": "ICE MT - Dimsum - Read More",
+  "module": "./esm/index.js",
+  "main": "./cjs/index.js",
+  "types": "./types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./cjs/index.js"
+    },
+    "./MoreLessButton": {
+      "import": "./esm/MoreLessButton.js",
+      "require": "./cjs/MoreLessButton.js"
+    },
+    "./DSReadMore": {
+      "import": "./esm/DSReadMore.js",
+      "require": "./cjs/DSReadMore.js"
+    }
+  },
   "sideEffects": [
     "*.css",
     "*.scss"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://git.elliemae.io/platform-ui/dimsum.git"
+  },
+  "engines": {
+    "npm": ">=7",
+    "node": ">=14"
+  },
+  "author": "ICE MT",
   "scripts": {
     "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
     "prebuild": "exit 0",
@@ -16,20 +40,20 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-basic": "1.57.1-rc.0",
-    "@elliemae/ds-button": "1.57.1-rc.0",
-    "react-desc": "^4.1.2"
+    "@elliemae/ds-button": "2.0.0-alpha.11",
+    "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "styled-components": "~5.3.0"
+    "styled-components": "~5.3.1"
   },
   "peerDependencies": {
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "styled-components": "^5.3.0"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "styled-components": "^5.3.1"
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist"
+    "directory": "dist",
+    "generateSubmodules": true
   }
 }

package/types/DSReadMore.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+declare const DSReadMore: {
+    ({ lines, more, less, onMore, onLess, content, buttonType, size, ellipsis, }: {
+        lines?: number | undefined;
+        more?: string | undefined;
+        less?: string | undefined;
+        onMore?: (() => null) | undefined;
+        onLess?: (() => null) | undefined;
+        content: any;
+        buttonType?: string | undefined;
+        size?: string | undefined;
+        ellipsis?: string | undefined;
+    }): JSX.Element;
+    propTypes: {
+        /** Ammount of lines after you want to display an ellipsis + more/less button */
+        lines: any;
+        /** Label which will appear on the 'More' button */
+        more: any;
+        /** Label which will appear on the 'Less' button */
+        less: any;
+        /** Function which will execute when the user click the 'More' button */
+        onMore: any;
+        /** Function which will execute when the user click the 'Less' button */
+        onLess: any;
+        /** The text content you want displayed */
+        content: any;
+        /** 'The type of button for more/less button' */
+        buttonType: any;
+        /**
+         * ['s', 'm', 'l']
+         */
+        size: any;
+        /** The text you want to appear when truncating */
+        ellipsis: any;
+    };
+};
+declare const DSReadMoreWithSchema: any;
+export { DSReadMore, DSReadMoreWithSchema };
+export default DSReadMore;

package/types/MoreLessButton.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+declare const MoreLessButton: {
+    ({ expanded, label, onClick, buttonType, size, ellipsis, }: {
+        expanded: any;
+        label: any;
+        onClick: any;
+        buttonType: any;
+        size: any;
+        ellipsis: any;
+    }): JSX.Element;
+    propTypes: {
+        expanded: any;
+        label: any;
+        onClick: any;
+        buttonType: any;
+        size: any;
+        ellipsis: any;
+    };
+};
+export { MoreLessButton };

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DSReadMore';
+export { default } from './DSReadMore';

package/types/tests/DSReadMore.test.d.ts

@@ -0,0 +1 @@
+export {};

package/DSReadMore/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@elliemae/ds-read-more/DSReadMore",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
-  "private": true,
-  "main": "../cjs/DSReadMore.js",
-  "module": "../esm/DSReadMore.js"
-}

package/MoreLessButton/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@elliemae/ds-read-more/MoreLessButton",
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
-  "private": true,
-  "main": "../cjs/MoreLessButton.js",
-  "module": "../esm/MoreLessButton.js"
-}

package/cjs/DSReadMore.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DSReadMore.js","sources":["../../../../shared-configs/prop-types.js","../../src/DSReadMore.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nexport const dsBasicSizes = ['s', 'm', 'l'];\n\nexport const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];\n\nexport const iconSizes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];\n\nexport const iconColors = [\n  ['neutral', '900'],\n  ['neutral', '0'],\n  ['danger', '900'],\n  ['warning', '500'],\n  ['success', '900'],\n  ['brand-primary', '600'],\n];\n\nexport const CHECKBOX_VARIANT = {\n  DEFAULT: 'variant-default',\n  FOCUS: 'variant-focus',\n  ACTIVE: 'variant-active',\n  DISABLED: 'variant-disabled',\n  ERROR: 'variant-error',\n};\nexport const checkboxVariants = [\n  CHECKBOX_VARIANT.DEFAULT,\n  CHECKBOX_VARIANT.FOCUS,\n  CHECKBOX_VARIANT.ACTIVE,\n  CHECKBOX_VARIANT.DISABLED,\n  CHECKBOX_VARIANT.ERROR,\n];\n\nexport const COMBOBOX_VARIANT = {\n  DEFAULT: 'variant-default',\n  FOCUS: 'variant-focus-input',\n  FOCUS_ICON: 'variant-focus-icon',\n  ACTIVE: 'variant-active-input',\n  ACTIVE_ICON: 'variant-active-icon',\n  DISABLED: 'variant-disabled',\n  ERROR: 'variant-error',\n};\n\nexport const comboBoxVariants = [\n  COMBOBOX_VARIANT.DEFAULT,\n  COMBOBOX_VARIANT.FOCUS,\n  COMBOBOX_VARIANT.FOCUS_ICON,\n  COMBOBOX_VARIANT.ACTIVE,\n  COMBOBOX_VARIANT.ACTIVE_ICON,\n  COMBOBOX_VARIANT.DISABLED,\n  COMBOBOX_VARIANT.ERROR,\n];\n\nexport const sizeVariants = {\n  S: 's',\n  M: 'm',\n  L: 'l',\n};\n\nexport const position = {\n  LEFT: 'left',\n  RIGHT: 'right',\n  CENTER: 'center',\n};\n\nexport const fontColor = {\n  NEUTRAL500: 'neutral500',\n  NEUTRAL700: 'neutral700',\n};\n\nexport const orientation = ['horizontal', 'vertical'];\n\nexport const orientationVariants = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n};\n","/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { buttonTypes } from '@elliemae/ds-button';\nimport { dsBasicSizes } from '../../../shared-configs/prop-types';\nimport { MoreLessButton } from './MoreLessButton';\n\nconst Text = styled.span`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ lines, expanded }) => (expanded ? 'unset' : lines)};\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\nconst DSReadMore = ({\n  lines = 2,\n  more = 'more',\n  less = 'less',\n  onMore = () => null,\n  onLess = () => null,\n  content,\n  buttonType = 'link',\n  size = 's',\n  ellipsis = '...',\n}) => {\n  const ref = useRef();\n  const [showButton, setShowButton] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n\n  // offsetHeight + 2 takes into consideration any size of the button\n  const overflows = ({ offsetHeight, scrollHeight }) =>\n    offsetHeight + 2 < scrollHeight;\n\n  // Searchs the optimum cut on the text to have the button in the same line\n  const binSearchTextOverflow = (element, parent) => {\n    const text = element.innerText;\n    let left = 1;\n    let right = text.length;\n    let textEnd = 0;\n    while (left <= right) {\n      const middle = (left + right) / 2;\n      element.innerText = content.slice(0, middle);\n      if (overflows(parent)) right = middle - 1;\n      else {\n        left = middle + 1;\n        textEnd = middle;\n      }\n    }\n    element.innerText = content.slice(0, textEnd);\n  };\n\n  useLayoutEffect(() => {\n    const textElement = ref.current;\n    const parentElement = ref.current?.parentElement;\n    if (parentElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement);\n      }\n    }\n  }, [lines, content, expanded, showButton, more, less]);\n\n  const toggleExpanded = (newExpanded) => {\n    setExpanded(newExpanded);\n    if (newExpanded) onMore();\n    else onLess();\n  };\n\n  return (\n    <Text lines={lines} expanded={expanded}>\n      <span ref={ref} data-testid=\"ds-read_more-text\">\n        {content}\n      </span>\n      {showButton && (\n        <span>\n          <MoreLessButton\n            expanded={expanded}\n            label={expanded ? less : more}\n            onClick={() => toggleExpanded(!expanded)}\n            buttonType={buttonType}\n            size={size}\n            ellipsis={ellipsis}\n          />\n        </span>\n      )}\n    </Text>\n  );\n};\n\nconst DSReadMoreProps = {\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description(\n      'Ammount of lines after you want to display an ellipsis + more/less button',\n    )\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string\n    .description(\"Label which will appear on the 'More' button\")\n    .defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string\n    .description(\"Label which will appear on the 'Less' button\")\n    .defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\n    \"Function which will execute when the user click the 'More' button\",\n  ),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\n    \"Function which will execute when the user click the 'Less' button\",\n  ),\n  /** The text content you want displayed */\n  content: PropTypes.string.isRequired.description(\n    'The text content you want displayed',\n  ),\n\n  /** 'The type of button for more/less button' */\n  buttonType: PropTypes.oneOf(buttonTypes)\n    .description('The type for the more/less button')\n    .defaultValue('link'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes)\n    .description('Size of the button')\n    .defaultValue('s'),\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string\n    .description('The text you want to appear when truncating')\n    .defaultValue('...'),\n};\n\nDSReadMore.propTypes = DSReadMoreProps;\n\nconst DSReadMoreWithSchema = describe(DSReadMore).description(\n  'ReadMore component',\n);\n\nDSReadMoreWithSchema.propTypes = DSReadMoreProps;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],"names":["Text","styled","span","lines","expanded","DSReadMore","more","less","onMore","onLess","content","buttonType","size","ellipsis","ref","useRef","useState","showButton","setShowButton","setExpanded","overflows","offsetHeight","scrollHeight","binSearchTextOverflow","element","parent","text","innerText","left","right","length","textEnd","middle","slice","useLayoutEffect","textElement","current","parentElement","toggleExpanded","newExpanded","React","MoreLessButton","DSReadMoreProps","PropTypes","number","description","defaultValue","string","func","isRequired","oneOf","buttonTypes","dsBasicSizes","propTypes","DSReadMoreWithSchema","describe"],"mappings":"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"}

package/cjs/MoreLessButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MoreLessButton.js","sources":["../../src/MoreLessButton.tsx"],"sourcesContent":["import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\n\nconst MoreLessButton = ({\n  expanded,\n  label,\n  onClick,\n  buttonType,\n  size,\n  ellipsis,\n}) => (\n  <span>\n    {expanded ? ' ' : ellipsis}\n    <DSButton\n      buttonType={buttonType}\n      labelText={label}\n      onClick={onClick}\n      size={size}\n      data-testid=\"ds-read_more-button\"\n    />\n  </span>\n);\n\nconst MoreLessButtonProps = {\n  expanded: PropTypes.boolean,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n  buttonType: PropTypes.string,\n  size: PropTypes.string,\n  ellipsis: PropTypes.string,\n};\n\nMoreLessButton.propTypes = MoreLessButtonProps;\n\nexport { MoreLessButton };\n"],"names":["MoreLessButton","expanded","label","onClick","buttonType","size","ellipsis","React","DSButton","MoreLessButtonProps","PropTypes","boolean","string","func","propTypes"],"mappings":";;;;;;;;;;;;;IAIMA,cAAc,GAAG,SAAjBA,cAAiB;AAAA,MACrBC,QADqB,QACrBA,QADqB;AAAA,MAErBC,KAFqB,QAErBA,KAFqB;AAAA,MAGrBC,OAHqB,QAGrBA,OAHqB;AAAA,MAIrBC,UAJqB,QAIrBA,UAJqB;AAAA,MAKrBC,IALqB,QAKrBA,IALqB;AAAA,MAMrBC,QANqB,QAMrBA,QANqB;AAAA,sBAQrBC,sDACGN,QAAQ,GAAG,GAAH,GAASK,QADpB,eAEEC,wCAACC,4BAAD;AACE,IAAA,UAAU,EAAEJ,UADd;AAEE,IAAA,SAAS,EAAEF,KAFb;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEE,IAJR;AAKE,mBAAY;AALd,IAFF,CARqB;AAAA;;AAoBvB,IAAMI,mBAAmB,GAAG;AAC1BR,EAAAA,QAAQ,EAAES,mBAAS,CAACC,OADM;AAE1BT,EAAAA,KAAK,EAAEQ,mBAAS,CAACE,MAFS;AAG1BT,EAAAA,OAAO,EAAEO,mBAAS,CAACG,IAHO;AAI1BT,EAAAA,UAAU,EAAEM,mBAAS,CAACE,MAJI;AAK1BP,EAAAA,IAAI,EAAEK,mBAAS,CAACE,MALU;AAM1BN,EAAAA,QAAQ,EAAEI,mBAAS,CAACE;AANM,CAA5B;AASAZ,cAAc,CAACc,SAAf,GAA2BL,mBAA3B;;;;"}

package/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/esm/DSReadMore.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DSReadMore.js","sources":["../../../../shared-configs/prop-types.js","../../src/DSReadMore.tsx"],"sourcesContent":["/* eslint-disable max-lines */\nexport const dsBasicSizes = ['s', 'm', 'l'];\n\nexport const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge'];\n\nexport const iconSizes = ['xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];\n\nexport const iconColors = [\n  ['neutral', '900'],\n  ['neutral', '0'],\n  ['danger', '900'],\n  ['warning', '500'],\n  ['success', '900'],\n  ['brand-primary', '600'],\n];\n\nexport const CHECKBOX_VARIANT = {\n  DEFAULT: 'variant-default',\n  FOCUS: 'variant-focus',\n  ACTIVE: 'variant-active',\n  DISABLED: 'variant-disabled',\n  ERROR: 'variant-error',\n};\nexport const checkboxVariants = [\n  CHECKBOX_VARIANT.DEFAULT,\n  CHECKBOX_VARIANT.FOCUS,\n  CHECKBOX_VARIANT.ACTIVE,\n  CHECKBOX_VARIANT.DISABLED,\n  CHECKBOX_VARIANT.ERROR,\n];\n\nexport const COMBOBOX_VARIANT = {\n  DEFAULT: 'variant-default',\n  FOCUS: 'variant-focus-input',\n  FOCUS_ICON: 'variant-focus-icon',\n  ACTIVE: 'variant-active-input',\n  ACTIVE_ICON: 'variant-active-icon',\n  DISABLED: 'variant-disabled',\n  ERROR: 'variant-error',\n};\n\nexport const comboBoxVariants = [\n  COMBOBOX_VARIANT.DEFAULT,\n  COMBOBOX_VARIANT.FOCUS,\n  COMBOBOX_VARIANT.FOCUS_ICON,\n  COMBOBOX_VARIANT.ACTIVE,\n  COMBOBOX_VARIANT.ACTIVE_ICON,\n  COMBOBOX_VARIANT.DISABLED,\n  COMBOBOX_VARIANT.ERROR,\n];\n\nexport const sizeVariants = {\n  S: 's',\n  M: 'm',\n  L: 'l',\n};\n\nexport const position = {\n  LEFT: 'left',\n  RIGHT: 'right',\n  CENTER: 'center',\n};\n\nexport const fontColor = {\n  NEUTRAL500: 'neutral500',\n  NEUTRAL700: 'neutral700',\n};\n\nexport const orientation = ['horizontal', 'vertical'];\n\nexport const orientationVariants = {\n  HORIZONTAL: 'horizontal',\n  VERTICAL: 'vertical',\n};\n","/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { buttonTypes } from '@elliemae/ds-button';\nimport { dsBasicSizes } from '../../../shared-configs/prop-types';\nimport { MoreLessButton } from './MoreLessButton';\n\nconst Text = styled.span`\n  display: -webkit-box;\n  -webkit-line-clamp: ${({ lines, expanded }) => (expanded ? 'unset' : lines)};\n  -webkit-box-orient: vertical;\n  -webkit-hyphens: auto;\n  -moz-hyphens: auto;\n  -ms-hyphens: auto;\n  hyphens: auto;\n  word-break: break-all;\n`;\n\nconst DSReadMore = ({\n  lines = 2,\n  more = 'more',\n  less = 'less',\n  onMore = () => null,\n  onLess = () => null,\n  content,\n  buttonType = 'link',\n  size = 's',\n  ellipsis = '...',\n}) => {\n  const ref = useRef();\n  const [showButton, setShowButton] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n\n  // offsetHeight + 2 takes into consideration any size of the button\n  const overflows = ({ offsetHeight, scrollHeight }) =>\n    offsetHeight + 2 < scrollHeight;\n\n  // Searchs the optimum cut on the text to have the button in the same line\n  const binSearchTextOverflow = (element, parent) => {\n    const text = element.innerText;\n    let left = 1;\n    let right = text.length;\n    let textEnd = 0;\n    while (left <= right) {\n      const middle = (left + right) / 2;\n      element.innerText = content.slice(0, middle);\n      if (overflows(parent)) right = middle - 1;\n      else {\n        left = middle + 1;\n        textEnd = middle;\n      }\n    }\n    element.innerText = content.slice(0, textEnd);\n  };\n\n  useLayoutEffect(() => {\n    const textElement = ref.current;\n    const parentElement = ref.current?.parentElement;\n    if (parentElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement);\n      }\n    }\n  }, [lines, content, expanded, showButton, more, less]);\n\n  const toggleExpanded = (newExpanded) => {\n    setExpanded(newExpanded);\n    if (newExpanded) onMore();\n    else onLess();\n  };\n\n  return (\n    <Text lines={lines} expanded={expanded}>\n      <span ref={ref} data-testid=\"ds-read_more-text\">\n        {content}\n      </span>\n      {showButton && (\n        <span>\n          <MoreLessButton\n            expanded={expanded}\n            label={expanded ? less : more}\n            onClick={() => toggleExpanded(!expanded)}\n            buttonType={buttonType}\n            size={size}\n            ellipsis={ellipsis}\n          />\n        </span>\n      )}\n    </Text>\n  );\n};\n\nconst DSReadMoreProps = {\n  /** Ammount of lines after you want to display an ellipsis + more/less button */\n  lines: PropTypes.number\n    .description(\n      'Ammount of lines after you want to display an ellipsis + more/less button',\n    )\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string\n    .description(\"Label which will appear on the 'More' button\")\n    .defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string\n    .description(\"Label which will appear on the 'Less' button\")\n    .defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\n    \"Function which will execute when the user click the 'More' button\",\n  ),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\n    \"Function which will execute when the user click the 'Less' button\",\n  ),\n  /** The text content you want displayed */\n  content: PropTypes.string.isRequired.description(\n    'The text content you want displayed',\n  ),\n\n  /** 'The type of button for more/less button' */\n  buttonType: PropTypes.oneOf(buttonTypes)\n    .description('The type for the more/less button')\n    .defaultValue('link'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes)\n    .description('Size of the button')\n    .defaultValue('s'),\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string\n    .description('The text you want to appear when truncating')\n    .defaultValue('...'),\n};\n\nDSReadMore.propTypes = DSReadMoreProps;\n\nconst DSReadMoreWithSchema = describe(DSReadMore).description(\n  'ReadMore component',\n);\n\nDSReadMoreWithSchema.propTypes = DSReadMoreProps;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],"names":["Text","styled","span","lines","expanded","DSReadMore","more","less","onMore","onLess","content","buttonType","size","ellipsis","ref","useRef","useState","showButton","setShowButton","setExpanded","overflows","offsetHeight","scrollHeight","binSearchTextOverflow","element","parent","text","innerText","left","right","length","textEnd","middle","slice","useLayoutEffect","textElement","current","parentElement","toggleExpanded","newExpanded","DSReadMoreProps","PropTypes","number","description","defaultValue","string","func","isRequired","oneOf","buttonTypes","dsBasicSizes","propTypes","DSReadMoreWithSchema","describe"],"mappings":"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"}

package/esm/MoreLessButton.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MoreLessButton.js","sources":["../../src/MoreLessButton.tsx"],"sourcesContent":["import React from 'react';\nimport { PropTypes } from 'react-desc';\nimport DSButton from '@elliemae/ds-button';\n\nconst MoreLessButton = ({\n  expanded,\n  label,\n  onClick,\n  buttonType,\n  size,\n  ellipsis,\n}) => (\n  <span>\n    {expanded ? ' ' : ellipsis}\n    <DSButton\n      buttonType={buttonType}\n      labelText={label}\n      onClick={onClick}\n      size={size}\n      data-testid=\"ds-read_more-button\"\n    />\n  </span>\n);\n\nconst MoreLessButtonProps = {\n  expanded: PropTypes.boolean,\n  label: PropTypes.string,\n  onClick: PropTypes.func,\n  buttonType: PropTypes.string,\n  size: PropTypes.string,\n  ellipsis: PropTypes.string,\n};\n\nMoreLessButton.propTypes = MoreLessButtonProps;\n\nexport { MoreLessButton };\n"],"names":["MoreLessButton","expanded","label","onClick","buttonType","size","ellipsis","MoreLessButtonProps","PropTypes","boolean","string","func","propTypes"],"mappings":";;;;IAIMA,cAAc,GAAG,SAAjBA,cAAiB;AAAA,MACrBC,QADqB,QACrBA,QADqB;AAAA,MAErBC,KAFqB,QAErBA,KAFqB;AAAA,MAGrBC,OAHqB,QAGrBA,OAHqB;AAAA,MAIrBC,UAJqB,QAIrBA,UAJqB;AAAA,MAKrBC,IALqB,QAKrBA,IALqB;AAAA,MAMrBC,QANqB,QAMrBA,QANqB;AAAA,sBAQrB,kCACGL,QAAQ,GAAG,GAAH,GAASK,QADpB,eAEE,oBAAC,QAAD;AACE,IAAA,UAAU,EAAEF,UADd;AAEE,IAAA,SAAS,EAAEF,KAFb;AAGE,IAAA,OAAO,EAAEC,OAHX;AAIE,IAAA,IAAI,EAAEE,IAJR;AAKE,mBAAY;AALd,IAFF,CARqB;AAAA;;AAoBvB,IAAME,mBAAmB,GAAG;AAC1BN,EAAAA,QAAQ,EAAEO,SAAS,CAACC,OADM;AAE1BP,EAAAA,KAAK,EAAEM,SAAS,CAACE,MAFS;AAG1BP,EAAAA,OAAO,EAAEK,SAAS,CAACG,IAHO;AAI1BP,EAAAA,UAAU,EAAEI,SAAS,CAACE,MAJI;AAK1BL,EAAAA,IAAI,EAAEG,SAAS,CAACE,MALU;AAM1BJ,EAAAA,QAAQ,EAAEE,SAAS,CAACE;AANM,CAA5B;AASAV,cAAc,CAACY,SAAf,GAA2BL,mBAA3B;;;;"}

package/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}