@elliemae/ds-read-more 2.2.0-alpha.1 → 2.2.0-alpha.2

package/cjs/DSReadMore.js

@@ -1,161 +1,149 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx2 = require('@babel/runtime/helpers/jsx');
-require('core-js/modules/web.dom-collections.iterator.js');
-var react = require('react');
-var lodash = require('lodash');
-var reactDesc = require('react-desc');
-var styled = require('styled-components');
-var dsTooltip = require('@elliemae/ds-tooltip');
-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 _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-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;"], _ref => {
-  let {
-    lines,
-    expanded
-  } = _ref;
-  return expanded ? 'unset' : lines;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var DSReadMore_exports = {};
+__export(DSReadMore_exports, {
+  DSReadMore: () => DSReadMore,
+  DSReadMoreWithSchema: () => DSReadMoreWithSchema,
+  default: () => DSReadMore_default
 });
-
-const DSReadMore = props => {
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_lodash = __toESM(require("lodash"));
+var import_react_desc = __toESM(require("react-desc"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_tooltip = __toESM(require("@elliemae/ds-tooltip"));
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+var import_prop_types = __toESM(require("@elliemae/ds-shared/prop-types"));
+var import_MoreLessButton = __toESM(require("./MoreLessButton"));
+const Text = import_styled_components.default.span`
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ lines, expanded }) => expanded ? "unset" : lines};
+  -webkit-box-orient: vertical;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-break: break-all;
+`;
+const DSReadMore = (props) => {
   const {
     lines = 2,
-    more = 'more',
-    less = 'less',
-    onMore = lodash.noop,
-    onLess = lodash.noop,
+    more = "more",
+    less = "less",
+    onMore = import_lodash.noop,
+    onLess = import_lodash.noop,
     content,
-    ellipsis = '...',
+    ellipsis = "...",
     withTooltip = false
   } = props;
-  const ref = react.useRef(null);
-  const [showButton, setShowButton] = react.useState(false);
-  const [expanded, setExpanded] = react.useState(false); // offsetHeight + 2 takes into consideration any size of the button
-
-  const overflows = _ref2 => {
-    let {
-      offsetHeight,
-      scrollHeight
-    } = _ref2;
-    return offsetHeight + 2 < scrollHeight;
-  }; // Searchs the optimum cut on the text to have the button in the same line
-
-
-  const binSearchTextOverflow = react.useCallback((element, parent) => {
+  const ref = (0, import_react.useRef)(null);
+  const [showButton, setShowButton] = (0, import_react.useState)(false);
+  const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 2 < scrollHeight;
+  const binSearchTextOverflow = (0, import_react.useCallback)((element, parent) => {
     const text = element.innerText;
     let left = 1;
     let right = text.length;
     let textEnd = 0;
-
     while (left <= right) {
       const middle = (left + right) / 2;
       element.innerText = content.slice(0, middle);
-      if (overflows(parent)) right = middle - 1;else {
+      if (overflows(parent))
+        right = middle - 1;
+      else {
         left = middle + 1;
         textEnd = middle;
       }
     }
-
     element.innerText = content.slice(0, textEnd);
   }, [content]);
-  react.useLayoutEffect(() => {
-    var _ref$current;
-
+  (0, import_react.useLayoutEffect)(() => {
     const textElement = ref.current;
-    const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
-
+    const parentElement = ref.current?.parentElement;
     if (parentElement && textElement) {
       textElement.innerText = content;
       setShowButton(expanded || overflows(parentElement));
-
       if (!expanded && overflows(parentElement)) {
         binSearchTextOverflow(textElement, parentElement);
       }
     }
   }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);
-
-  const toggleExpanded = newExpanded => {
+  const toggleExpanded = (newExpanded) => {
     setExpanded(newExpanded);
-    if (newExpanded) onMore();else onLess();
+    if (newExpanded)
+      onMore();
+    else
+      onLess();
   };
-
-  return /*#__PURE__*/_jsx2__default["default"](Text, {
-    lines: lines,
-    expanded: expanded
-  }, void 0, /*#__PURE__*/jsxRuntime.jsx("span", {
-    ref: ref,
+  return /* @__PURE__ */ import_react.default.createElement(Text, {
+    lines,
+    expanded
+  }, /* @__PURE__ */ import_react.default.createElement("span", {
+    ref,
     "data-testid": "ds-read_more-text",
-    "aria-label": content,
-    children: content
-  }), showButton && !withTooltip && /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
-    expanded: expanded,
+    "aria-label": content
+  }, content), showButton && !withTooltip && /* @__PURE__ */ import_react.default.createElement(import_MoreLessButton.MoreLessButton, {
+    expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
     ariaLabel: expanded ? less : more,
-    ellipsis: ellipsis,
+    ellipsis,
     dataTestId: "ds-read_more-button"
-  }), withTooltip && /*#__PURE__*/_jsx2__default["default"]("div", {
+  }), withTooltip && /* @__PURE__ */ import_react.default.createElement("div", {
     style: {
-      display: 'inline-block'
+      display: "inline-block"
     }
-  }, void 0, /*#__PURE__*/_jsx2__default["default"](dsTooltip.DSTooltipV3, {
+  }, /* @__PURE__ */ import_react.default.createElement(import_ds_tooltip.DSTooltipV3, {
     text: content
-  }, void 0, /*#__PURE__*/_jsx2__default["default"](MoreLessButton.MoreLessButton, {
-    expanded: expanded,
+  }, /* @__PURE__ */ import_react.default.createElement(import_MoreLessButton.MoreLessButton, {
+    expanded,
     label: "...",
     ariaLabel: content,
-    ellipsis: ellipsis,
-    withTooltip: withTooltip,
+    ellipsis,
+    withTooltip,
     dataTestId: "ds-read_more-tooltip-button"
   }))));
 };
-
 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),
-
-  /** Label which will appear on the 'More' button */
-  more: reactDesc.PropTypes.string.description("Label which will appear on the 'More' button").defaultValue('more'),
-
-  /** Label which will appear on the 'Less' button */
-  less: reactDesc.PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue('less'),
-
-  /** Function which will execute when the user click the 'More' button */
-  onMore: reactDesc.PropTypes.func.description("Function which will execute when the user click the 'More' button"),
-
-  /** Function which will execute when the user click the 'Less' button */
-  onLess: reactDesc.PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
-
-  /** The text content you want displayed */
-  content: reactDesc.PropTypes.string.description('The text content you want displayed').isRequired,
-
-  /** 'The type of button for more/less button' */
-  buttonType: reactDesc.PropTypes.oneOf(dsButton.buttonTypes).description('The type for the more/less button').defaultValue('link'),
-
-  /**
-   * ['s', 'm', 'l']
-   */
-  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('...'),
-  withTooltip: reactDesc.PropTypes.bool.description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons').defaultValue('false')
+  lines: import_react_desc.PropTypes.number.description("Ammount of lines after you want to display an ellipsis + more/less button").defaultValue(2),
+  more: import_react_desc.PropTypes.string.description("Label which will appear on the 'More' button").defaultValue("more"),
+  less: import_react_desc.PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue("less"),
+  onMore: import_react_desc.PropTypes.func.description("Function which will execute when the user click the 'More' button"),
+  onLess: import_react_desc.PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
+  content: import_react_desc.PropTypes.string.description("The text content you want displayed").isRequired,
+  buttonType: import_react_desc.PropTypes.oneOf(import_ds_button.buttonTypes).description("The type for the more/less button").defaultValue("link"),
+  size: import_react_desc.PropTypes.oneOf(import_prop_types.dsBasicSizes).description("Size of the button").defaultValue("s"),
+  ellipsis: import_react_desc.PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
+  withTooltip: import_react_desc.PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false")
 };
-const DSReadMoreWithSchema = reactDesc.describe(DSReadMore);
+DSReadMore.propTypes = DSReadMoreProps;
+const DSReadMoreWithSchema = (0, import_react_desc.describe)(DSReadMore);
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
-
-exports.DSReadMore = DSReadMore;
-exports.DSReadMoreWithSchema = DSReadMoreWithSchema;
-exports["default"] = DSReadMore;
+var DSReadMore_default = DSReadMore;
+module.exports = __toCommonJS(DSReadMore_exports);
+//# sourceMappingURL=DSReadMore.js.map

package/cjs/DSReadMore.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSReadMore.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport type { WeakValidationMap } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport { buttonTypes } from '@elliemae/ds-button';\nimport { dsBasicSizes } from '@elliemae/ds-shared/prop-types';\nimport { MoreLessButton } from './MoreLessButton';\nimport { DSReadMoreT } from './index.d';\n\nconst Text = styled.span<{ lines: number; expanded: boolean }>`\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 = (props: DSReadMoreT) => {\n  const {\n    lines = 2,\n    more = 'more',\n    less = 'less',\n    onMore = noop,\n    onLess = noop,\n    content,\n    ellipsis = '...',\n    withTooltip = false,\n  } = props;\n  const ref = useRef<HTMLElement>(null);\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 }: { offsetHeight: number; scrollHeight: number }) =>\n    offsetHeight + 2 < scrollHeight;\n\n  // Searchs the optimum cut on the text to have the button in the same line\n  const binSearchTextOverflow = useCallback(\n    (element: HTMLElement, parent: HTMLElement) => {\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    [content],\n  );\n\n  useLayoutEffect(() => {\n    const textElement = ref.current;\n    const parentElement = ref.current?.parentElement;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement);\n      }\n    }\n  }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);\n\n  const toggleExpanded = (newExpanded: boolean) => {\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\" aria-label={content}>\n        {content}\n      </span>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? less : more}\n          ellipsis={ellipsis}\n          dataTestId=\"ds-read_more-button\"\n        />\n      )}\n      {withTooltip && (\n        <div\n          style={{\n            display: 'inline-block',\n          }}\n        >\n          <DSTooltipV3 text={content}>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={content}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId=\"ds-read_more-tooltip-button\"\n            />\n          </DSTooltipV3>\n        </div>\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('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** 'The type of button for more/less button' */\n  buttonType: PropTypes.oneOf(buttonTypes).description('The type for the more/less button').defaultValue('link'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes as string[])\n    .description('Size of the button')\n    .defaultValue('s'),\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n};\n\nDSReadMore.propTypes = DSReadMoreProps as WeakValidationMap<unknown>;\n\nconst DSReadMoreWithSchema = describe<DSReadMoreT>(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMoreProps;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
+  "names": []
+}

package/cjs/MoreLessButton.js

@@ -1,57 +1,65 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _jsx2 = require('@babel/runtime/helpers/jsx');
-require('react');
-var styled = require('styled-components');
-var dsButton = require('@elliemae/ds-button');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _jsx2__default = /*#__PURE__*/_interopDefaultLegacy(_jsx2);
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-const StyledButton = /*#__PURE__*/styled__default["default"](dsButton.DSButtonV2).withConfig({
-  componentId: "sc-1innsd2-0"
-})(["padding:0;color:", ";border:0;margin:0;font-size:12px;font-weight:200;min-width:0px;height:auto;text-transform:unset;&:hover:not([disabled]){color:", ";background-color:transparent;text-decoration:", ";}"], _ref => {
-  let {
-    withTooltip,
-    theme
-  } = _ref;
-  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
-}, _ref2 => {
-  let {
-    withTooltip,
-    theme
-  } = _ref2;
-  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
-}, _ref3 => {
-  let {
-    withTooltip
-  } = _ref3;
-  return withTooltip ? '' : 'underline';
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var MoreLessButton_exports = {};
+__export(MoreLessButton_exports, {
+  MoreLessButton: () => MoreLessButton
 });
-
-const MoreLessButton = props => {
-  const {
-    expanded,
-    ariaLabel,
-    label,
-    onClick,
-    ellipsis,
+var React = __toESM(require("react"));
+var import_react = __toESM(require("react"));
+var import_styled_components = __toESM(require("styled-components"));
+var import_ds_button = __toESM(require("@elliemae/ds-button"));
+const StyledButton = (0, import_styled_components.default)(import_ds_button.DSButtonV2)`
+  padding: 0;
+  color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
+  border: 0;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 200;
+  min-width: 0px;
+  height: auto;
+  text-transform: unset;
+  &:hover:not([disabled]) {
+    color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
+    background-color: transparent;
+    text-decoration: ${({ withTooltip }) => withTooltip ? "" : "underline"};
+  }
+`;
+const MoreLessButton = (props) => {
+  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;
+  return /* @__PURE__ */ import_react.default.createElement("span", null, expanded || withTooltip ? " " : ellipsis, /* @__PURE__ */ import_react.default.createElement(StyledButton, {
     withTooltip,
-    dataTestId
-  } = props;
-  return /*#__PURE__*/_jsx2__default["default"]("span", {}, void 0, expanded || withTooltip ? ' ' : ellipsis, /*#__PURE__*/_jsx2__default["default"](StyledButton, {
-    withTooltip: withTooltip,
     "aria-label": ariaLabel,
     buttonType: "text",
-    onClick: onClick,
+    onClick,
     "aria-hidden": true,
     size: "s",
     "data-testid": dataTestId
-  }, void 0, label));
+  }, label));
 };
-
-exports.MoreLessButton = MoreLessButton;
+module.exports = __toCommonJS(MoreLessButton_exports);
+//# sourceMappingURL=MoreLessButton.js.map

package/cjs/MoreLessButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/MoreLessButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import React from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nimport type { MoreLessButtonT } from './index.d';\n\nconst StyledButton = styled(DSButtonV2)<{ withTooltip: boolean }>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  font-weight: 200;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\nconst MoreLessButton = (props: MoreLessButtonT) => {\n  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;\n\n  return (\n    <span>\n      {expanded || withTooltip ? ' ' : ellipsis}\n\n      <StyledButton\n        withTooltip={withTooltip}\n        aria-label={ariaLabel}\n        buttonType=\"text\"\n        onClick={onClick}\n        aria-hidden\n        size=\"s\"\n        data-testid={dataTestId}\n      >\n        {label}\n      </StyledButton>\n    </span>\n  );\n};\n\nexport { MoreLessButton };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAkB;AAClB,+BAAmB;AACnB,uBAA2B;AAI3B,MAAM,eAAe,sCAAO;AAAA;AAAA,WAEjB,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3E,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA,uBAEnE,CAAC,EAAE,kBAAmB,cAAc,KAAK;AAAA;AAAA;AAGhE,MAAM,iBAAiB,CAAC,UAA2B;AACjD,QAAM,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,aAAa,eAAe;AAEnF,SACE,mDAAC,QAAD,MACG,YAAY,cAAc,MAAM,UAEjC,mDAAC,cAAD;AAAA,IACE;AAAA,IACA,cAAY;AAAA,IACZ,YAAW;AAAA,IACX;AAAA,IACA,eAAW;AAAA,IACX,MAAK;AAAA,IACL,eAAa;AAAA,KAEZ;AAAA;",
+  "names": []
+}

package/cjs/index.d.js

@@ -1,2 +1,27 @@
-'use strict';
-
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var index_d_exports = {};
+var React = __toESM(require("react"));
+module.exports = __toCommonJS(index_d_exports);
+//# sourceMappingURL=index.d.js.map

package/cjs/index.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export interface DSReadMoreT {\n  lines: number;\n  more: string;\n  less: string;\n  onMore: () => void;\n  onLess: () => void;\n  content: string;\n  ellipsis: string;\n  withTooltip?: boolean;\n}\n\nexport interface MoreLessButtonT {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  ariaLabel: string;\n  dataTestId: string;\n}\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;ACAA,YAAuB;",
+  "names": []
+}

package/cjs/index.js

@@ -1,11 +1,36 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var DSReadMore = require('./DSReadMore.js');
-
-
-
-exports.DSReadMore = DSReadMore.DSReadMore;
-exports.DSReadMoreWithSchema = DSReadMore.DSReadMoreWithSchema;
-exports["default"] = DSReadMore.DSReadMore;
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __reExport = (target, module2, copyDefault, desc) => {
+  if (module2 && typeof module2 === "object" || typeof module2 === "function") {
+    for (let key of __getOwnPropNames(module2))
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
+        __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
+  }
+  return target;
+};
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+};
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
+var src_exports = {};
+__export(src_exports, {
+  default: () => import_DSReadMore.default
+});
+var React = __toESM(require("react"));
+__reExport(src_exports, __toESM(require("./DSReadMore")));
+var import_DSReadMore = __toESM(require("./DSReadMore"));
+module.exports = __toCommonJS(src_exports);
+//# sourceMappingURL=index.js.map

package/cjs/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["export * from './DSReadMore';\nexport { default } from './DSReadMore';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc;AACd,wBAAwB;",
+  "names": []
+}

package/esm/DSReadMore.js

@@ -1,150 +1,120 @@
-import _jsx2 from '@babel/runtime/helpers/esm/jsx';
-import 'core-js/modules/web.dom-collections.iterator.js';
-import { useRef, useState, useCallback, useLayoutEffect } from 'react';
-import { noop } from 'lodash';
-import { PropTypes, describe } from 'react-desc';
-import styled from 'styled-components';
-import { DSTooltipV3 } from '@elliemae/ds-tooltip';
-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';
-
-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;"], _ref => {
-  let {
-    lines,
-    expanded
-  } = _ref;
-  return expanded ? 'unset' : lines;
-});
-
-const DSReadMore = props => {
+import * as React from "react";
+import React2, { useLayoutEffect, useRef, useState, useCallback } from "react";
+import { noop } from "lodash";
+import { describe, PropTypes } from "react-desc";
+import styled from "styled-components";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
+import { buttonTypes } from "@elliemae/ds-button";
+import { dsBasicSizes } from "@elliemae/ds-shared/prop-types";
+import { MoreLessButton } from "./MoreLessButton";
+const Text = styled.span`
+  display: -webkit-box;
+  -webkit-line-clamp: ${({ lines, expanded }) => expanded ? "unset" : lines};
+  -webkit-box-orient: vertical;
+  -webkit-hyphens: auto;
+  -moz-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+  word-break: break-all;
+`;
+const DSReadMore = (props) => {
   const {
     lines = 2,
-    more = 'more',
-    less = 'less',
+    more = "more",
+    less = "less",
     onMore = noop,
     onLess = noop,
     content,
-    ellipsis = '...',
+    ellipsis = "...",
     withTooltip = false
   } = props;
   const ref = useRef(null);
   const [showButton, setShowButton] = useState(false);
-  const [expanded, setExpanded] = useState(false); // offsetHeight + 2 takes into consideration any size of the button
-
-  const overflows = _ref2 => {
-    let {
-      offsetHeight,
-      scrollHeight
-    } = _ref2;
-    return offsetHeight + 2 < scrollHeight;
-  }; // Searchs the optimum cut on the text to have the button in the same line
-
-
+  const [expanded, setExpanded] = useState(false);
+  const overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 2 < scrollHeight;
   const binSearchTextOverflow = useCallback((element, parent) => {
     const text = element.innerText;
     let left = 1;
     let right = text.length;
     let textEnd = 0;
-
     while (left <= right) {
       const middle = (left + right) / 2;
       element.innerText = content.slice(0, middle);
-      if (overflows(parent)) right = middle - 1;else {
+      if (overflows(parent))
+        right = middle - 1;
+      else {
         left = middle + 1;
         textEnd = middle;
       }
     }
-
     element.innerText = content.slice(0, textEnd);
   }, [content]);
   useLayoutEffect(() => {
-    var _ref$current;
-
     const textElement = ref.current;
-    const parentElement = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.parentElement;
-
+    const parentElement = ref.current?.parentElement;
     if (parentElement && textElement) {
       textElement.innerText = content;
       setShowButton(expanded || overflows(parentElement));
-
       if (!expanded && overflows(parentElement)) {
         binSearchTextOverflow(textElement, parentElement);
       }
     }
   }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);
-
-  const toggleExpanded = newExpanded => {
+  const toggleExpanded = (newExpanded) => {
     setExpanded(newExpanded);
-    if (newExpanded) onMore();else onLess();
+    if (newExpanded)
+      onMore();
+    else
+      onLess();
   };
-
-  return /*#__PURE__*/_jsx2(Text, {
-    lines: lines,
-    expanded: expanded
-  }, void 0, /*#__PURE__*/jsx("span", {
-    ref: ref,
+  return /* @__PURE__ */ React2.createElement(Text, {
+    lines,
+    expanded
+  }, /* @__PURE__ */ React2.createElement("span", {
+    ref,
     "data-testid": "ds-read_more-text",
-    "aria-label": content,
-    children: content
-  }), showButton && !withTooltip && /*#__PURE__*/_jsx2(MoreLessButton, {
-    expanded: expanded,
+    "aria-label": content
+  }, content), showButton && !withTooltip && /* @__PURE__ */ React2.createElement(MoreLessButton, {
+    expanded,
     label: expanded ? less : more,
     onClick: () => toggleExpanded(!expanded),
     ariaLabel: expanded ? less : more,
-    ellipsis: ellipsis,
+    ellipsis,
     dataTestId: "ds-read_more-button"
-  }), withTooltip && /*#__PURE__*/_jsx2("div", {
+  }), withTooltip && /* @__PURE__ */ React2.createElement("div", {
     style: {
-      display: 'inline-block'
+      display: "inline-block"
     }
-  }, void 0, /*#__PURE__*/_jsx2(DSTooltipV3, {
+  }, /* @__PURE__ */ React2.createElement(DSTooltipV3, {
     text: content
-  }, void 0, /*#__PURE__*/_jsx2(MoreLessButton, {
-    expanded: expanded,
+  }, /* @__PURE__ */ React2.createElement(MoreLessButton, {
+    expanded,
     label: "...",
     ariaLabel: content,
-    ellipsis: ellipsis,
-    withTooltip: withTooltip,
+    ellipsis,
+    withTooltip,
     dataTestId: "ds-read_more-tooltip-button"
   }))));
 };
-
 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),
-
-  /** Label which will appear on the 'More' button */
-  more: PropTypes.string.description("Label which will appear on the 'More' button").defaultValue('more'),
-
-  /** Label which will appear on the 'Less' button */
-  less: PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue('less'),
-
-  /** Function which will execute when the user click the 'More' button */
+  lines: PropTypes.number.description("Ammount of lines after you want to display an ellipsis + more/less button").defaultValue(2),
+  more: PropTypes.string.description("Label which will appear on the 'More' button").defaultValue("more"),
+  less: PropTypes.string.description("Label which will appear on the 'Less' button").defaultValue("less"),
   onMore: PropTypes.func.description("Function which will execute when the user click the 'More' button"),
-
-  /** Function which will execute when the user click the 'Less' button */
   onLess: PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
-
-  /** The text content you want displayed */
-  content: PropTypes.string.description('The text content you want displayed').isRequired,
-
-  /** 'The type of button for more/less button' */
-  buttonType: PropTypes.oneOf(buttonTypes).description('The type for the more/less button').defaultValue('link'),
-
-  /**
-   * ['s', 'm', 'l']
-   */
-  size: PropTypes.oneOf(dsBasicSizes).description('Size of the button').defaultValue('s'),
-
-  /** The text you want to appear when truncating */
-  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),
-  withTooltip: PropTypes.bool.description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons').defaultValue('false')
+  content: PropTypes.string.description("The text content you want displayed").isRequired,
+  buttonType: PropTypes.oneOf(buttonTypes).description("The type for the more/less button").defaultValue("link"),
+  size: PropTypes.oneOf(dsBasicSizes).description("Size of the button").defaultValue("s"),
+  ellipsis: PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
+  withTooltip: PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false")
 };
+DSReadMore.propTypes = DSReadMoreProps;
 const DSReadMoreWithSchema = describe(DSReadMore);
 DSReadMoreWithSchema.propTypes = DSReadMoreProps;
-
-export { DSReadMore, DSReadMoreWithSchema, DSReadMore as default };
+var DSReadMore_default = DSReadMore;
+export {
+  DSReadMore,
+  DSReadMoreWithSchema,
+  DSReadMore_default as default
+};
+//# sourceMappingURL=DSReadMore.js.map

package/esm/DSReadMore.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSReadMore.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState, useCallback } from 'react';\nimport { noop } from 'lodash';\nimport type { WeakValidationMap } from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport styled from 'styled-components';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\n\nimport { buttonTypes } from '@elliemae/ds-button';\nimport { dsBasicSizes } from '@elliemae/ds-shared/prop-types';\nimport { MoreLessButton } from './MoreLessButton';\nimport { DSReadMoreT } from './index.d';\n\nconst Text = styled.span<{ lines: number; expanded: boolean }>`\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 = (props: DSReadMoreT) => {\n  const {\n    lines = 2,\n    more = 'more',\n    less = 'less',\n    onMore = noop,\n    onLess = noop,\n    content,\n    ellipsis = '...',\n    withTooltip = false,\n  } = props;\n  const ref = useRef<HTMLElement>(null);\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 }: { offsetHeight: number; scrollHeight: number }) =>\n    offsetHeight + 2 < scrollHeight;\n\n  // Searchs the optimum cut on the text to have the button in the same line\n  const binSearchTextOverflow = useCallback(\n    (element: HTMLElement, parent: HTMLElement) => {\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    [content],\n  );\n\n  useLayoutEffect(() => {\n    const textElement = ref.current;\n    const parentElement = ref.current?.parentElement;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement);\n      }\n    }\n  }, [lines, content, binSearchTextOverflow, expanded, showButton, withTooltip, more, less]);\n\n  const toggleExpanded = (newExpanded: boolean) => {\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\" aria-label={content}>\n        {content}\n      </span>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? less : more}\n          ellipsis={ellipsis}\n          dataTestId=\"ds-read_more-button\"\n        />\n      )}\n      {withTooltip && (\n        <div\n          style={{\n            display: 'inline-block',\n          }}\n        >\n          <DSTooltipV3 text={content}>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={content}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId=\"ds-read_more-tooltip-button\"\n            />\n          </DSTooltipV3>\n        </div>\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('Ammount of lines after you want to display an ellipsis + more/less button')\n    .defaultValue(2),\n  /** Label which will appear on the 'More' button */\n  more: PropTypes.string.description(\"Label which will appear on the 'More' button\").defaultValue('more'),\n  /** Label which will appear on the 'Less' button */\n  less: PropTypes.string.description(\"Label which will appear on the 'Less' button\").defaultValue('less'),\n  /** Function which will execute when the user click the 'More' button */\n  onMore: PropTypes.func.description(\"Function which will execute when the user click the 'More' button\"),\n  /** Function which will execute when the user click the 'Less' button */\n  onLess: PropTypes.func.description(\"Function which will execute when the user click the 'Less' button\"),\n  /** The text content you want displayed */\n  content: PropTypes.string.description('The text content you want displayed').isRequired,\n\n  /** 'The type of button for more/less button' */\n  buttonType: PropTypes.oneOf(buttonTypes).description('The type for the more/less button').defaultValue('link'),\n  /**\n   * ['s', 'm', 'l']\n   */\n  size: PropTypes.oneOf(dsBasicSizes as string[])\n    .description('Size of the button')\n    .defaultValue('s'),\n\n  /** The text you want to appear when truncating */\n  ellipsis: PropTypes.string.description('The text you want to appear when truncating').defaultValue('...'),\n  withTooltip: PropTypes.bool\n    .description('Whether to show expandable tooltip on ellipsis focus instead of expandable buttons')\n    .defaultValue('false'),\n};\n\nDSReadMore.propTypes = DSReadMoreProps as WeakValidationMap<unknown>;\n\nconst DSReadMoreWithSchema = describe<DSReadMoreT>(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMoreProps;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n"],
+  "mappings": "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",
+  "names": []
+}

package/esm/MoreLessButton.js

@@ -1,48 +1,36 @@
-import _jsx2 from '@babel/runtime/helpers/esm/jsx';
-import 'react';
-import styled from 'styled-components';
-import { DSButtonV2 } from '@elliemae/ds-button';
-
-const StyledButton = /*#__PURE__*/styled(DSButtonV2).withConfig({
-  componentId: "sc-1innsd2-0"
-})(["padding:0;color:", ";border:0;margin:0;font-size:12px;font-weight:200;min-width:0px;height:auto;text-transform:unset;&:hover:not([disabled]){color:", ";background-color:transparent;text-decoration:", ";}"], _ref => {
-  let {
+import * as React from "react";
+import React2 from "react";
+import styled from "styled-components";
+import { DSButtonV2 } from "@elliemae/ds-button";
+const StyledButton = styled(DSButtonV2)`
+  padding: 0;
+  color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
+  border: 0;
+  margin: 0;
+  font-size: 12px;
+  font-weight: 200;
+  min-width: 0px;
+  height: auto;
+  text-transform: unset;
+  &:hover:not([disabled]) {
+    color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
+    background-color: transparent;
+    text-decoration: ${({ withTooltip }) => withTooltip ? "" : "underline"};
+  }
+`;
+const MoreLessButton = (props) => {
+  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;
+  return /* @__PURE__ */ React2.createElement("span", null, expanded || withTooltip ? " " : ellipsis, /* @__PURE__ */ React2.createElement(StyledButton, {
     withTooltip,
-    theme
-  } = _ref;
-  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
-}, _ref2 => {
-  let {
-    withTooltip,
-    theme
-  } = _ref2;
-  return withTooltip ? 'inherit' : "".concat(theme.colors.brand['600']);
-}, _ref3 => {
-  let {
-    withTooltip
-  } = _ref3;
-  return withTooltip ? '' : 'underline';
-});
-
-const MoreLessButton = props => {
-  const {
-    expanded,
-    ariaLabel,
-    label,
-    onClick,
-    ellipsis,
-    withTooltip,
-    dataTestId
-  } = props;
-  return /*#__PURE__*/_jsx2("span", {}, void 0, expanded || withTooltip ? ' ' : ellipsis, /*#__PURE__*/_jsx2(StyledButton, {
-    withTooltip: withTooltip,
     "aria-label": ariaLabel,
     buttonType: "text",
-    onClick: onClick,
+    onClick,
     "aria-hidden": true,
     size: "s",
     "data-testid": dataTestId
-  }, void 0, label));
+  }, label));
+};
+export {
+  MoreLessButton
 };
-
-export { MoreLessButton };
+//# sourceMappingURL=MoreLessButton.js.map

package/esm/MoreLessButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/MoreLessButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport styled from 'styled-components';\nimport { DSButtonV2 } from '@elliemae/ds-button';\n\nimport type { MoreLessButtonT } from './index.d';\n\nconst StyledButton = styled(DSButtonV2)<{ withTooltip: boolean }>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\n  font-weight: 200;\n  min-width: 0px;\n  height: auto;\n  text-transform: unset;\n  &:hover:not([disabled]) {\n    color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n    background-color: transparent;\n    text-decoration: ${({ withTooltip }) => (withTooltip ? '' : 'underline')};\n  }\n`;\nconst MoreLessButton = (props: MoreLessButtonT) => {\n  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;\n\n  return (\n    <span>\n      {expanded || withTooltip ? ' ' : ellipsis}\n\n      <StyledButton\n        withTooltip={withTooltip}\n        aria-label={ariaLabel}\n        buttonType=\"text\"\n        onClick={onClick}\n        aria-hidden\n        size=\"s\"\n        data-testid={dataTestId}\n      >\n        {label}\n      </StyledButton>\n    </span>\n  );\n};\n\nexport { MoreLessButton };\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAIA,MAAM,eAAe,OAAO;AAAA;AAAA,WAEjB,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAS3E,CAAC,EAAE,aAAa,YAAa,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM;AAAA;AAAA,uBAEnE,CAAC,EAAE,kBAAmB,cAAc,KAAK;AAAA;AAAA;AAGhE,MAAM,iBAAiB,CAAC,UAA2B;AACjD,QAAM,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,aAAa,eAAe;AAEnF,SACE,qCAAC,QAAD,MACG,YAAY,cAAc,MAAM,UAEjC,qCAAC,cAAD;AAAA,IACE;AAAA,IACA,cAAY;AAAA,IACZ,YAAW;AAAA,IACX;AAAA,IACA,eAAW;AAAA,IACX,MAAK;AAAA,IACL,eAAa;AAAA,KAEZ;AAAA;",
+  "names": []
+}

package/esm/index.d.js

@@ -1 +1,2 @@
-
+import * as React from "react";
+//# sourceMappingURL=index.d.js.map

package/esm/index.d.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n"],
+  "mappings": "AAAA;",
+  "names": []
+}

package/esm/index.js

@@ -1 +1,7 @@
-export { DSReadMore, DSReadMoreWithSchema, DSReadMore as default } from './DSReadMore.js';
+import * as React from "react";
+export * from "./DSReadMore";
+import { default as default2 } from "./DSReadMore";
+export {
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSReadMore';\nexport { default } from './DSReadMore';\n"],
+  "mappings": "AAAA;ACAA;AACA;",
+  "names": []
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-read-more",
-  "version": "2.2.0-alpha.1",
+  "version": "2.2.0-alpha.2",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Read More",
   "module": "./esm/index.js",
@@ -40,8 +40,8 @@
     "build": "node ../../scripts/build/build.js"
   },
   "dependencies": {
-    "@elliemae/ds-button": "2.2.0-alpha.1",
-    "@elliemae/ds-shared": "2.2.0-alpha.1",
+    "@elliemae/ds-button": "2.2.0-alpha.2",
+    "@elliemae/ds-shared": "2.2.0-alpha.2",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {