@elliemae/ds-read-more 3.18.1 → 3.19.0

package/dist/cjs/DSReadMore.js

@@ -36,135 +36,84 @@ module.exports = __toCommonJS(DSReadMore_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
-var import_ds_system = require("@elliemae/ds-system");
 var import_ds_tooltip = require("@elliemae/ds-tooltip");
-var import_ds_shared = require("@elliemae/ds-shared");
 var import_MoreLessButton = require("./MoreLessButton.js");
-const Text = import_ds_system.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 overflows = ({ offsetHeight, scrollHeight }) => offsetHeight + 2 < scrollHeight;
-const binSearchTextOverflow = (element, parent, content) => {
-  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 {
-      left = middle + 1;
-      textEnd = middle;
-    }
-  }
-  element.innerText = content.slice(0, textEnd);
-};
-const noop = () => {
-};
+var import_react_desc_prop_types = require("./react-desc-prop-types.js");
+var import_styled = require("./styled.js");
+var import_useReadMoreTruncate = require("./useReadMoreTruncate.js");
+var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
 const DSReadMore = (props) => {
-  const {
-    lines = 2,
-    more = "more",
-    less = "less",
-    onMore = noop,
-    onLess = noop,
-    content,
-    ellipsis = "...",
-    withTooltip = false
-  } = props;
-  const textRef = (0, import_react.useRef)(null);
-  const textWrapperRef = (0, import_react.useRef)(null);
-  const [showButton, setShowButton] = (0, import_react.useState)(false);
-  const [expanded, setExpanded] = (0, import_react.useState)(false);
-  const { width, height } = (0, import_ds_utilities.useOnElementResize)(textWrapperRef);
-  (0, import_react.useLayoutEffect)(() => {
-    const textElement = textRef.current;
-    const parentElement = textWrapperRef.current;
-    if (parentElement && textElement) {
-      textElement.innerText = content;
-      setShowButton(expanded || overflows(parentElement));
-      if (!expanded && overflows(parentElement)) {
-        binSearchTextOverflow(textElement, parentElement, content);
-      }
-    }
-  }, [lines, content, expanded, showButton, withTooltip, more, less, width, height]);
-  const toggleExpanded = (newExpanded) => {
-    setExpanded(newExpanded);
-    if (newExpanded)
-      onMore();
-    else
-      onLess();
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Text, { ref: textWrapperRef, lines, expanded, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ref: textRef, "data-testid": "ds-read_more-text", "aria-label": content, children: content }),
-    showButton && !withTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_MoreLessButton.MoreLessButton,
-      {
-        expanded,
-        label: expanded ? less : more,
-        onClick: () => toggleExpanded(!expanded),
-        ariaLabel: expanded ? less : more,
-        ellipsis,
-        dataTestId: "ds-read_more-button"
-      }
-    ),
-    withTooltip && showButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        style: {
-          display: "inline-block"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: content, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const propsWithDefault = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultProps);
+  const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;
+  const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
+  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textWrapperProps, textProps } = (0, import_useReadMoreTruncate.useReadMoreTruncate)(propsWithDefault);
+  const toggleExpanded = (0, import_react.useCallback)(
+    (newExpanded) => {
+      setExpanded(newExpanded);
+      if (newExpanded)
+        onMore();
+      else
+        onLess();
+    },
+    [onMore, onLess, setExpanded]
+  );
+  const getOwnerProps = (0, import_react.useCallback)(() => propsWithDefault, [propsWithDefault]);
+  const getOwnerPropsArguments = (0, import_react.useCallback)(() => ({}), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_styled.StyledTextWrapper,
+    {
+      ref: textWrapperRef,
+      lines,
+      expanded,
+      ...textWrapperProps,
+      getOwnerProps,
+      getOwnerPropsArguments,
+      ...xstyledProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_styled.StyledTextContent,
+          {
+            ref: textRef,
+            "data-testid": "ds-read_more-text",
+            ...textProps,
+            getOwnerProps,
+            getOwnerPropsArguments,
+            children: content
+          }
+        ),
+        showButton && !withTooltip && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_MoreLessButton.MoreLessButton,
+          {
+            expanded,
+            label: expanded ? less : more,
+            onClick: () => toggleExpanded(!expanded),
+            ariaLabel: expanded ? "Read less" : "Read more",
+            ellipsis,
+            dataTestId: import_DSReadMoreDefinitions.DSReadMoreDataTestIds.READ_MORE_BUTTON,
+            getOwnerProps,
+            getOwnerPropsArguments
+          }
+        ),
+        withTooltip && showButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledTooltipWrapper, { getOwnerProps, getOwnerPropsArguments, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_tooltip.DSTooltipV3, { text: content, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_MoreLessButton.MoreLessButton,
           {
             expanded,
             label: "...",
-            ariaLabel: content,
+            ariaLabel: expanded ? "Read less" : "Read more",
             ellipsis,
             withTooltip,
-            dataTestId: "ds-read_more-tooltip-button"
+            dataTestId: import_DSReadMoreDefinitions.DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON,
+            getOwnerProps,
+            getOwnerPropsArguments
           }
-        ) })
-      }
-    )
-  ] });
-};
-const DSReadMoreProps = {
-  /** Ammount of lines after you want to display an ellipsis + more/less button */
-  lines: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.string.description("Label which will appear on the 'More' button").defaultValue("more"),
-  /** Label which will appear on the 'Less' button */
-  less: import_ds_props_helpers.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: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
-  /** The text content you want displayed */
-  content: import_ds_props_helpers.PropTypes.string.description("The text content you want displayed").isRequired,
-  /** 'The type of button for more/less button' */
-  buttonType: import_ds_props_helpers.PropTypes.oneOf(["primary", "secondary", "text", "link"]).description("The type for the more/less button").defaultValue("link"),
-  /**
-   * ['s', 'm', 'l']
-   */
-  size: import_ds_props_helpers.PropTypes.oneOf(import_ds_shared.dsBasicSizes).description("Size of the button").defaultValue("s"),
-  /** The text you want to appear when truncating */
-  ellipsis: import_ds_props_helpers.PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
-  withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false")
+        ) }) })
+      ]
+    }
+  );
 };
-DSReadMore.propTypes = DSReadMoreProps;
+DSReadMore.displayName = import_DSReadMoreDefinitions.DSReadMoreName;
 const DSReadMoreWithSchema = (0, import_ds_props_helpers.describe)(DSReadMore);
-DSReadMoreWithSchema.propTypes = DSReadMoreProps;
+DSReadMoreWithSchema.propTypes = import_react_desc_prop_types.DSReadMorePropTypesSchema;
 var DSReadMore_default = DSReadMore;
 //# sourceMappingURL=DSReadMore.js.map

package/dist/cjs/DSReadMore.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSReadMore.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport React, { useLayoutEffect, useRef, useState } from 'react';\nimport type { WeakValidationMap } from 'react';\nimport { useOnElementResize } from '@elliemae/ds-utilities';\nimport { describe, PropTypes } from '@elliemae/ds-props-helpers';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { dsBasicSizes } from '@elliemae/ds-shared';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport type { 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\n// offsetHeight + 2 takes into consideration any size of the button\nconst 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\nconst binSearchTextOverflow = (element: HTMLElement, parent: HTMLElement, content: string) => {\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\nconst noop = () => {};\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 textRef = useRef<HTMLSpanElement>(null);\n  const textWrapperRef = useRef<HTMLSpanElement>(null);\n  const [showButton, setShowButton] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n\n  // We need to re-run the effect when the size of the container changes\n  const { width, height } = useOnElementResize(textWrapperRef);\n\n  useLayoutEffect(() => {\n    const textElement = textRef.current;\n    const parentElement = textWrapperRef.current;\n    if (parentElement && textElement) {\n      textElement.innerText = content;\n      setShowButton(expanded || overflows(parentElement));\n      if (!expanded && overflows(parentElement)) {\n        binSearchTextOverflow(textElement, parentElement, content);\n      }\n    }\n  }, [lines, content, expanded, showButton, withTooltip, more, less, width, height]);\n\n  const toggleExpanded = (newExpanded: boolean) => {\n    setExpanded(newExpanded);\n    if (newExpanded) onMore();\n    else onLess();\n  };\n\n  return (\n    <Text ref={textWrapperRef} lines={lines} expanded={expanded}>\n      <span ref={textRef} 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 && showButton && (\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(['primary', 'secondary', 'text', 'link'])\n    .description('The type for the more/less button')\n    .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} as WeakValidationMap<unknown>;\n\nDSReadMore.propTypes = DSReadMoreProps;\n\nconst DSReadMoreWithSchema = describe(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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",
+  "sourcesContent": ["import React, { useCallback } from 'react';\nimport { describe, useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { MoreLessButton } from './MoreLessButton.js';\nimport { type DSReadMoreT, DSReadMorePropTypesSchema, defaultProps } from './react-desc-prop-types.js';\nimport { StyledTextWrapper, StyledTextContent, StyledTooltipWrapper } from './styled.js';\nimport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nimport { DSReadMoreDataTestIds, DSReadMoreName } from './DSReadMoreDefinitions.js';\n\nconst DSReadMore = (props: DSReadMoreT.Props) => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSReadMoreT.InternalProps>(props, defaultProps);\n  const { lines, more, less, content, withTooltip, ellipsis, onMore, onLess } = propsWithDefault;\n\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const { textWrapperRef, textRef, showButton, expanded, setExpanded, textWrapperProps, textProps } =\n    useReadMoreTruncate(propsWithDefault);\n\n  const toggleExpanded = useCallback(\n    (newExpanded: boolean) => {\n      setExpanded(newExpanded);\n      if (newExpanded) onMore();\n      else onLess();\n    },\n    [onMore, onLess, setExpanded],\n  );\n\n  const getOwnerProps = useCallback(() => propsWithDefault, [propsWithDefault]);\n  const getOwnerPropsArguments = useCallback(() => ({}), []);\n\n  return (\n    <StyledTextWrapper\n      ref={textWrapperRef}\n      lines={lines}\n      expanded={expanded}\n      {...textWrapperProps}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n      {...xstyledProps}\n    >\n      <StyledTextContent\n        ref={textRef}\n        data-testid=\"ds-read_more-text\"\n        {...textProps}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {content}\n      </StyledTextContent>\n      {showButton && !withTooltip && (\n        <MoreLessButton\n          expanded={expanded}\n          label={expanded ? less : more}\n          onClick={() => toggleExpanded(!expanded)}\n          ariaLabel={expanded ? 'Read less' : 'Read more'}\n          ellipsis={ellipsis}\n          dataTestId={DSReadMoreDataTestIds.READ_MORE_BUTTON}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        />\n      )}\n      {withTooltip && showButton && (\n        <StyledTooltipWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <DSTooltipV3 text={content}>\n            <MoreLessButton\n              expanded={expanded}\n              label=\"...\"\n              ariaLabel={expanded ? 'Read less' : 'Read more'}\n              ellipsis={ellipsis}\n              withTooltip={withTooltip}\n              dataTestId={DSReadMoreDataTestIds.READ_MORE_TOOLTIP_BUTTON}\n              getOwnerProps={getOwnerProps}\n              getOwnerPropsArguments={getOwnerPropsArguments}\n            />\n          </DSTooltipV3>\n        </StyledTooltipWrapper>\n      )}\n    </StyledTextWrapper>\n  );\n};\n\nDSReadMore.displayName = DSReadMoreName;\n\nconst DSReadMoreWithSchema = describe(DSReadMore);\n\nDSReadMoreWithSchema.propTypes = DSReadMorePropTypesSchema;\n\nexport { DSReadMore, DSReadMoreWithSchema };\nexport default DSReadMore;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+BnB;AA/BJ,mBAAmC;AACnC,8BAA2E;AAC3E,wBAA4B;AAC5B,4BAA+B;AAC/B,mCAA0E;AAC1E,oBAA2E;AAC3E,iCAAoC;AACpC,mCAAsD;AAEtD,MAAM,aAAa,CAAC,UAA6B;AAC/C,QAAM,uBAAmB,sDAAwD,OAAO,yCAAY;AACpG,QAAM,EAAE,OAAO,MAAM,MAAM,SAAS,aAAa,UAAU,QAAQ,OAAO,IAAI;AAE9E,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,EAAE,gBAAgB,SAAS,YAAY,UAAU,aAAa,kBAAkB,UAAU,QAC9F,gDAAoB,gBAAgB;AAEtC,QAAM,qBAAiB;AAAA,IACrB,CAAC,gBAAyB;AACxB,kBAAY,WAAW;AACvB,UAAI;AAAa,eAAO;AAAA;AACnB,eAAO;AAAA,IACd;AAAA,IACA,CAAC,QAAQ,QAAQ,WAAW;AAAA,EAC9B;AAEA,QAAM,oBAAgB,0BAAY,MAAM,kBAAkB,CAAC,gBAAgB,CAAC;AAC5E,QAAM,6BAAyB,0BAAY,OAAO,CAAC,IAAI,CAAC,CAAC;AAEzD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAY;AAAA,YACX,GAAG;AAAA,YACJ;AAAA,YACA;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACC,cAAc,CAAC,eACd;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAO,WAAW,OAAO;AAAA,YACzB,SAAS,MAAM,eAAe,CAAC,QAAQ;AAAA,YACvC,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA,YAAY,mDAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QAED,eAAe,cACd,4CAAC,sCAAqB,eAA8B,wBAClD,sDAAC,iCAAY,MAAM,SACjB;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,OAAM;AAAA,YACN,WAAW,WAAW,cAAc;AAAA,YACpC;AAAA,YACA;AAAA,YACA,YAAY,mDAAsB;AAAA,YAClC;AAAA,YACA;AAAA;AAAA,QACF,GACF,GACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAEA,WAAW,cAAc;AAEzB,MAAM,2BAAuB,kCAAS,UAAU;AAEhD,qBAAqB,YAAY;AAGjC,IAAO,qBAAQ;",
   "names": []
 }

package/dist/cjs/{index.d.js → DSReadMoreDefinitions.js}

@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -22,7 +26,27 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var index_d_exports = {};
-module.exports = __toCommonJS(index_d_exports);
+var DSReadMoreDefinitions_exports = {};
+__export(DSReadMoreDefinitions_exports, {
+  DSReadMoreDataTestIds: () => DSReadMoreDataTestIds,
+  DSReadMoreName: () => DSReadMoreName,
+  DSReadMoreSlots: () => DSReadMoreSlots
+});
+module.exports = __toCommonJS(DSReadMoreDefinitions_exports);
 var React = __toESM(require("react"));
-//# sourceMappingURL=index.d.js.map
+var import_lodash = require("lodash");
+var import_ds_system = require("@elliemae/ds-system");
+const DSReadMoreName = "DSReadMore";
+const DSReadMoreSlots = {
+  ROOT: "root",
+  TEXT_CONTENT: "text-content",
+  TOOLTIP_WRAPPER: "tooltip-wrapper",
+  BUTTON_WRAPPER: "button-wrapper",
+  BUTTON: "button"
+};
+const DSReadMoreDataTestIds = {
+  ...(0, import_lodash.omit)((0, import_ds_system.slotObjectToDataTestIds)(DSReadMoreName, DSReadMoreSlots), "BUTTON"),
+  READ_MORE_BUTTON: "ds-read_more-button",
+  READ_MORE_TOOLTIP_BUTTON: "ds-read_more-tooltip-button"
+};
+//# sourceMappingURL=DSReadMoreDefinitions.js.map

package/dist/cjs/DSReadMoreDefinitions.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/DSReadMoreDefinitions.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { omit } from 'lodash';\nimport { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSReadMoreName = 'DSReadMore';\n\nexport const DSReadMoreSlots = {\n  ROOT: 'root',\n  TEXT_CONTENT: 'text-content',\n  TOOLTIP_WRAPPER: 'tooltip-wrapper',\n  BUTTON_WRAPPER: 'button-wrapper',\n  BUTTON: 'button',\n};\n\nexport const DSReadMoreDataTestIds = {\n  ...omit(slotObjectToDataTestIds(DSReadMoreName, DSReadMoreSlots), 'BUTTON'),\n  READ_MORE_BUTTON: 'ds-read_more-button',\n  READ_MORE_TOOLTIP_BUTTON: 'ds-read_more-tooltip-button',\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,oBAAqB;AACrB,uBAAwC;AAEjC,MAAM,iBAAiB;AAEvB,MAAM,kBAAkB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,QAAQ;AACV;AAEO,MAAM,wBAAwB;AAAA,EACnC,OAAG,wBAAK,0CAAwB,gBAAgB,eAAe,GAAG,QAAQ;AAAA,EAC1E,kBAAkB;AAAA,EAClB,0BAA0B;AAC5B;",
+  "names": []
+}

package/dist/cjs/MoreLessButton.js

@@ -33,37 +33,32 @@ __export(MoreLessButton_exports, {
 module.exports = __toCommonJS(MoreLessButton_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_ds_system = require("@elliemae/ds-system");
-var import_ds_button = require("@elliemae/ds-button");
-const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2)`
-  padding: 0;
-  color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
-  border: 0;
-  margin: 0;
-  font-size: 12px;
-  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"};
-  }
-`;
+var import_styled = require("./styled.js");
 const MoreLessButton = (props) => {
-  const { expanded, ariaLabel, label, onClick, ellipsis, withTooltip, dataTestId } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+  const {
+    expanded,
+    ariaLabel,
+    label,
+    onClick,
+    ellipsis,
+    withTooltip,
+    dataTestId,
+    getOwnerProps,
+    getOwnerPropsArguments
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledButtonWrapper, { getOwnerProps, getOwnerPropsArguments, children: [
     expanded || withTooltip ? " " : ellipsis,
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      StyledButton,
+      import_styled.StyledButton,
       {
         withTooltip,
         "aria-label": ariaLabel,
         buttonType: "text",
         onClick,
-        "aria-hidden": true,
         size: "s",
         "data-testid": dataTestId,
+        getOwnerProps,
+        getOwnerPropsArguments,
         children: label
       }
     )

package/dist/cjs/MoreLessButton.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/MoreLessButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { styled } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\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  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;AAAA;ACAA,YAAuB;ADwBnB;AAvBJ,uBAAuB;AACvB,uBAA2B;AAG3B,MAAM,mBAAe,yBAAO,2BAAU;AAAA;AAAA,WAE3B,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQhF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA,uBAExE,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK;AAAA;AAAA;AAGhE,MAAM,iBAAiB,CAAC,UAA2B;AACjD,QAAM,EAAE,UAAU,WAAW,OAAO,SAAS,UAAU,aAAa,WAAW,IAAI;AAEnF,SACE,6CAAC,UACE;AAAA,gBAAY,cAAc,MAAM;AAAA,IAEjC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,YAAW;AAAA,QACX;AAAA,QACA,eAAW;AAAA,QACX,MAAK;AAAA,QACL,eAAa;AAAA,QAEZ;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import React from 'react';\nimport { StyledButton, StyledButtonWrapper } from './styled.js';\n\ninterface MoreLessButtonProps {\n  expanded: boolean;\n  label: string;\n  onClick?: () => void;\n  ellipsis: string;\n  withTooltip?: boolean;\n  ariaLabel: string;\n  dataTestId: string;\n  getOwnerProps: () => object;\n  getOwnerPropsArguments: () => object;\n}\n\nconst MoreLessButton = (props: MoreLessButtonProps) => {\n  const {\n    expanded,\n    ariaLabel,\n    label,\n    onClick,\n    ellipsis,\n    withTooltip,\n    dataTestId,\n    getOwnerProps,\n    getOwnerPropsArguments,\n  } = props;\n\n  return (\n    <StyledButtonWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n      {expanded || withTooltip ? ' ' : ellipsis}\n\n      <StyledButton\n        withTooltip={withTooltip}\n        aria-label={ariaLabel}\n        buttonType=\"text\"\n        onClick={onClick}\n        size=\"s\"\n        data-testid={dataTestId}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        {label}\n      </StyledButton>\n    </StyledButtonWrapper>\n  );\n};\n\nexport { MoreLessButton };\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD6BnB;AA5BJ,oBAAkD;AAclD,MAAM,iBAAiB,CAAC,UAA+B;AACrD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE,6CAAC,qCAAoB,eAA8B,wBAChD;AAAA,gBAAY,cAAc,MAAM;AAAA,IAEjC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,cAAY;AAAA,QACZ,YAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,QACL,eAAa;AAAA,QACb;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ;",
   "names": []
 }

package/dist/cjs/index.js

@@ -17,7 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
   // If the importer is in node compatibility mode or this is not an ESM
   // file that has been converted to a CommonJS file using a Babel-
@@ -29,10 +28,18 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var src_exports = {};
 __export(src_exports, {
-  default: () => import_DSReadMore.default
+  DSReadMore: () => import_DSReadMore.DSReadMore,
+  DSReadMoreDataTestIds: () => import_DSReadMoreDefinitions.DSReadMoreDataTestIds,
+  DSReadMoreName: () => import_DSReadMoreDefinitions.DSReadMoreName,
+  DSReadMoreSlots: () => import_DSReadMoreDefinitions.DSReadMoreSlots,
+  DSReadMoreWithSchema: () => import_DSReadMore.DSReadMoreWithSchema,
+  default: () => import_DSReadMore2.default,
+  useReadMoreTruncate: () => import_useReadMoreTruncate.useReadMoreTruncate
 });
 module.exports = __toCommonJS(src_exports);
 var React = __toESM(require("react"));
-__reExport(src_exports, require("./DSReadMore.js"), module.exports);
-var import_DSReadMore = __toESM(require("./DSReadMore.js"));
+var import_DSReadMore = require("./DSReadMore.js");
+var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
+var import_useReadMoreTruncate = require("./useReadMoreTruncate.js");
+var import_DSReadMore2 = __toESM(require("./DSReadMore.js"));
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["export * from './DSReadMore.js';\nexport { default } from './DSReadMore.js';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,4BAAd;AACA,wBAAwB;",
-  "names": []
+  "sourcesContent": ["export { DSReadMore, DSReadMoreWithSchema } from './DSReadMore.js';\nexport { DSReadMoreName, DSReadMoreSlots, DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';\nexport type { DSReadMoreT } from './react-desc-prop-types.js';\nexport { useReadMoreTruncate } from './useReadMoreTruncate.js';\nexport { default } from './DSReadMore.js';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAiD;AACjD,mCAAuE;AAEvE,iCAAoC;AACpC,IAAAA,qBAAwB;",
+  "names": ["import_DSReadMore"]
 }

package/dist/cjs/react-desc-prop-types.js

@@ -0,0 +1,71 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var react_desc_prop_types_exports = {};
+__export(react_desc_prop_types_exports, {
+  DSReadMorePropTypes: () => DSReadMorePropTypes,
+  DSReadMorePropTypesSchema: () => DSReadMorePropTypesSchema,
+  defaultProps: () => defaultProps
+});
+module.exports = __toCommonJS(react_desc_prop_types_exports);
+var React = __toESM(require("react"));
+var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
+var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
+const defaultProps = {
+  lines: 2,
+  more: "more",
+  less: "less",
+  onMore: () => {
+  },
+  onLess: () => {
+  },
+  ellipsis: "...",
+  withTooltip: false
+};
+const DSReadMorePropTypes = {
+  ...import_ds_props_helpers.globalAttributesPropTypes,
+  ...import_ds_props_helpers.xstyledPropTypes,
+  /** Ammount of lines after you want to display an ellipsis + more/less button */
+  lines: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.string.description("Label which will appear on the 'More' button").defaultValue("more"),
+  /** Label which will appear on the 'Less' button */
+  less: import_ds_props_helpers.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: import_ds_props_helpers.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: import_ds_props_helpers.PropTypes.func.description("Function which will execute when the user click the 'Less' button"),
+  /** The text content you want displayed */
+  content: import_ds_props_helpers.PropTypes.string.description("The text content you want displayed").isRequired,
+  /** The text you want to appear when truncating */
+  ellipsis: import_ds_props_helpers.PropTypes.string.description("The text you want to appear when truncating").defaultValue("..."),
+  withTooltip: import_ds_props_helpers.PropTypes.bool.description("Whether to show expandable tooltip on ellipsis focus instead of expandable buttons").defaultValue("false"),
+  ...(0, import_ds_props_helpers.getPropsPerDatatestIdPropTypes)(import_DSReadMoreDefinitions.DSReadMoreDataTestIds)
+};
+const DSReadMorePropTypesSchema = DSReadMorePropTypes;
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/cjs/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/react-desc-prop-types.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport {\n  getPropsPerDatatestIdPropTypes,\n  globalAttributesPropTypes,\n  PropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema } from '@elliemae/ds-props-helpers';\nimport { DSReadMoreDataTestIds } from './DSReadMoreDefinitions.js';\n\nexport namespace DSReadMoreT {\n  type PropsT<D, R, O, E> = Partial<D> & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n  type InternalPropsT<D, R, O, E> = D & R & O & Omit<GlobalAttributesT<E>, keyof D | keyof R | keyof O> & XstyledProps;\n\n  export interface DefaultProps {\n    lines: number;\n    more: string;\n    less: string;\n    onMore: () => void;\n    onLess: () => void;\n    ellipsis: string;\n    withTooltip: boolean;\n  }\n\n  export interface OptionalProps {}\n\n  export interface RequiredProps {\n    content: string;\n  }\n\n  export type Props = PropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n\n  export type InternalProps = InternalPropsT<DefaultProps, RequiredProps, OptionalProps, HTMLSpanElement>;\n}\n\nexport const defaultProps: DSReadMoreT.DefaultProps = {\n  lines: 2,\n  more: 'more',\n  less: 'less',\n  onMore: () => {},\n  onLess: () => {},\n  ellipsis: '...',\n  withTooltip: false,\n};\n\nexport const DSReadMorePropTypes: DSPropTypesSchema<DSReadMoreT.Props> = {\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\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 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  ...getPropsPerDatatestIdPropTypes(DSReadMoreDataTestIds),\n};\n\nexport const DSReadMorePropTypesSchema = DSReadMorePropTypes as unknown as WeakValidationMap<DSReadMoreT.Props>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,8BAKO;AAGP,mCAAsC;AA2B/B,MAAM,eAAyC;AAAA,EACpD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,QAAQ,MAAM;AAAA,EAAC;AAAA,EACf,UAAU;AAAA,EACV,aAAa;AACf;AAEO,MAAM,sBAA4D;AAAA,EACvE,GAAG;AAAA,EACH,GAAG;AAAA;AAAA,EAEH,OAAO,kCAAU,OACd,YAAY,2EAA2E,EACvF,aAAa,CAAC;AAAA;AAAA,EAEjB,MAAM,kCAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,MAAM,kCAAU,OAAO,YAAY,8CAA8C,EAAE,aAAa,MAAM;AAAA;AAAA,EAEtG,QAAQ,kCAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,QAAQ,kCAAU,KAAK,YAAY,mEAAmE;AAAA;AAAA,EAEtG,SAAS,kCAAU,OAAO,YAAY,qCAAqC,EAAE;AAAA;AAAA,EAG7E,UAAU,kCAAU,OAAO,YAAY,6CAA6C,EAAE,aAAa,KAAK;AAAA,EACxG,aAAa,kCAAU,KACpB,YAAY,oFAAoF,EAChG,aAAa,OAAO;AAAA,EACvB,OAAG,wDAA+B,kDAAqB;AACzD;AAEO,MAAM,4BAA4B;",
+  "names": []
+}

package/dist/cjs/styled.js

@@ -0,0 +1,73 @@
+"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 __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var styled_exports = {};
+__export(styled_exports, {
+  StyledButton: () => StyledButton,
+  StyledButtonWrapper: () => StyledButtonWrapper,
+  StyledTextContent: () => StyledTextContent,
+  StyledTextWrapper: () => StyledTextWrapper,
+  StyledTooltipWrapper: () => StyledTooltipWrapper
+});
+module.exports = __toCommonJS(styled_exports);
+var React = __toESM(require("react"));
+var import_ds_system = require("@elliemae/ds-system");
+var import_ds_button = require("@elliemae/ds-button");
+var import_DSReadMoreDefinitions = require("./DSReadMoreDefinitions.js");
+const StyledTextWrapper = (0, import_ds_system.styled)("span", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.ROOT })`
+  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;
+  ${import_ds_system.xStyledCommonProps}
+`;
+const StyledTextContent = (0, import_ds_system.styled)("span", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.TEXT_CONTENT })``;
+const StyledTooltipWrapper = (0, import_ds_system.styled)("div", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.TOOLTIP_WRAPPER })`
+  display: inline-block;
+`;
+const StyledButtonWrapper = (0, import_ds_system.styled)("span", { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.BUTTON_WRAPPER })``;
+const StyledButton = (0, import_ds_system.styled)(import_ds_button.DSButtonV2, { name: import_DSReadMoreDefinitions.DSReadMoreName, slot: import_DSReadMoreDefinitions.DSReadMoreSlots.BUTTON })`
+  padding: 0;
+  color: ${({ withTooltip, theme }) => withTooltip ? "inherit" : `${theme.colors.brand["600"]}`};
+  border: 0;
+  margin: 0;
+  font-size: 12px;
+  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"};
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
+  "sourcesContent": ["import { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport { DSReadMoreName, DSReadMoreSlots } from './DSReadMoreDefinitions.js';\n\nexport const StyledTextWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.ROOT })<{\n  lines: number;\n  expanded: boolean;\n}>`\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  ${xStyledCommonProps}\n`;\n\nexport const StyledTextContent = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.TEXT_CONTENT })``;\n\nexport const StyledTooltipWrapper = styled('div', { name: DSReadMoreName, slot: DSReadMoreSlots.TOOLTIP_WRAPPER })`\n  display: inline-block;\n`;\n\nexport const StyledButtonWrapper = styled('span', { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON_WRAPPER })``;\n\nexport const StyledButton = styled(DSButtonV2, { name: DSReadMoreName, slot: DSReadMoreSlots.BUTTON })<{\n  withTooltip?: boolean;\n}>`\n  padding: 0;\n  color: ${({ withTooltip, theme }) => (withTooltip ? 'inherit' : `${theme.colors.brand['600']}`)};\n  border: 0;\n  margin: 0;\n  font-size: 12px;\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`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAC3C,uBAA2B;AAC3B,mCAAgD;AAEzC,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,KAAK,CAAC;AAAA;AAAA,wBAK5E,CAAC,EAAE,OAAO,SAAS,MAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOnE;AAAA;AAGG,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,aAAa,CAAC;AAErG,MAAM,2BAAuB,yBAAO,OAAO,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,gBAAgB,CAAC;AAAA;AAAA;AAI1G,MAAM,0BAAsB,yBAAO,QAAQ,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,eAAe,CAAC;AAEzG,MAAM,mBAAe,yBAAO,6BAAY,EAAE,MAAM,6CAAgB,MAAM,6CAAgB,OAAO,CAAC;AAAA;AAAA,WAI1F,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQhF,CAAC,EAAE,aAAa,MAAM,MAAO,cAAc,YAAY,GAAG,MAAM,OAAO,MAAM,KAAK;AAAA;AAAA,uBAExE,CAAC,EAAE,YAAY,MAAO,cAAc,KAAK;AAAA;AAAA;",
+  "names": []
+}