@pingux/astro 2.135.0-alpha.1 → 2.135.0-alpha.2

package/lib/cjs/components/ExpandableText/ExpandableText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ExpandableTextProps } from '../../types';
+declare const ExpandableText: React.ForwardRefExoticComponent<ExpandableTextProps & React.RefAttributes<HTMLDivElement>>;
+export default ExpandableText;

package/lib/cjs/components/ExpandableText/ExpandableText.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _parseFloat2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/parse-float"));
+var _trim = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/trim"));
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@react-aria/utils");
+var _uuid = require("uuid");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["children", "maxLines", "buttonProps"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ExpandableText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    maxLines = props.maxLines,
+    buttonProps = props.buttonProps,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var textContent = typeof children === 'string' ? children : '';
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    isTruncated = _useState4[0],
+    setIsTruncated = _useState4[1];
+  var _useState5 = (0, _react.useState)(textContent),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    visibleText = _useState6[0],
+    setVisibleText = _useState6[1];
+  var containerRef = (0, _react.useRef)(null);
+  var hiddenContainerRef = (0, _react.useRef)(null);
+  var prevWidthRef = (0, _react.useRef)(window.innerWidth);
+  var truncateToLines = function truncateToLines() {
+    var _containerRef$current;
+    // get line height and calculate the number of lines
+    var container = hiddenContainerRef.current;
+    if (!container) return 0;
+    container.style.width = "".concat(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth) || 0, "px");
+    container.innerText = textContent;
+    var lineHeight = (0, _parseFloat2["default"])(getComputedStyle(container).lineHeight);
+    var fullTextLines = Math.round(container.offsetHeight / lineHeight);
+    if (fullTextLines <= maxLines) {
+      setVisibleText(textContent);
+      setIsTruncated(false);
+      return undefined;
+    }
+
+    // using binary search to find the maximum text that fits within maxLines
+    var suffix = '... View More';
+    var start = 0;
+    var end = textContent.length;
+    var truncatedText = '';
+    while (start < end) {
+      var _context, _context2;
+      var mid = Math.floor((start + end) / 2);
+      var candidateText = (0, _trim["default"])(_context = (0, _slice["default"])(textContent).call(textContent, 0, mid)).call(_context);
+      var candidate = (0, _concat["default"])(_context2 = "".concat(candidateText)).call(_context2, suffix);
+      container.innerText = candidate;
+      var lines = Math.round(container.offsetHeight / lineHeight);
+      if (lines <= maxLines) {
+        truncatedText = candidateText;
+        start = mid + 1;
+      } else {
+        end = mid;
+      }
+    }
+    setVisibleText("".concat(truncatedText, "...") || textContent);
+    setIsTruncated(true);
+    return undefined;
+  };
+  var onResize = (0, _react.useCallback)(function () {
+    if (!isExpanded) {
+      truncateToLines();
+    }
+    // Reset the expansion state if the width has changed
+    if (window.innerWidth !== prevWidthRef.current) {
+      prevWidthRef.current = window.innerWidth;
+      setIsExpanded(false);
+    }
+  }, [isExpanded]);
+  (0, _utils.useResizeObserver)({
+    ref: containerRef,
+    onResize: onResize
+  });
+
+  /* istanbul ignore next */
+  (0, _utils.useLayoutEffect)(function () {
+    if (isExpanded) {
+      setVisibleText(textContent);
+    } else {
+      truncateToLines();
+    }
+  }, [isExpanded, textContent]);
+  var toggleExpanded = function toggleExpanded() {
+    return setIsExpanded(!isExpanded);
+  };
+  var textId = (0, _uuid.v4)();
+  return (0, _react2.jsx)(_index.Box, {
+    ref: ref
+  }, (0, _react2.jsx)("div", {
+    ref: containerRef
+  }, (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
+    variant: "variants.expandableText.text",
+    id: textId
+  }, others), visibleText, ' '), isTruncated && (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
+    onPress: toggleExpanded,
+    "aria-expanded": isExpanded,
+    "aria-controls": textId,
+    variant: "link",
+    sx: {
+      display: 'inline-block',
+      whiteSpace: 'nowrap',
+      ml: 1
+    }
+  }, buttonProps), isExpanded ? 'View Less' : 'View More')), (0, _react2.jsx)(_index.Box, {
+    ref: hiddenContainerRef,
+    variant: "expandableText.hiddenContainer"
+  }));
+});
+var _default = ExpandableText;
+exports["default"] = _default;

package/lib/cjs/components/ExpandableText/ExpandableText.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ExpandableText/ExpandableText" />
+
+# ExpandableText
+
+ExpandableText  is used to manage long texts by truncating them based on max lines. 
+It allows collapse and expand the text to view in full.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the button. |
+| Tab | Focuses the button and follows the page tab sequence. |
+
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- The button uses, **`aria-controls`** which references the iD of the collapsible region.

package/lib/cjs/components/ExpandableText/ExpandableText.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryFn } from '@storybook/react';
+import { ExpandableTextProps } from '../../types';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+export default _default;
+export declare const Default: StoryFn<ExpandableTextProps>;

package/lib/cjs/components/ExpandableText/ExpandableText.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _ExpandableText = _interopRequireDefault(require("./ExpandableText.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/ ExpandableText',
+  component: _index.ExpandableText,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_ExpandableText["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      }
+    },
+    codesandbox: false
+  }
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_index.ExpandableText, {
+    maxLines: 5,
+    "data-testid": "test-field"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+};
+exports.Default = Default;

package/lib/cjs/components/ExpandableText/ExpandableText.styles.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    text: {
+        display: string;
+    };
+    hiddenContainer: {
+        visibility: string;
+        position: string;
+        p: number;
+        m: number;
+        border: number;
+        whiteSpace: string;
+        wordBreak: string;
+    };
+};
+export default _default;

package/lib/cjs/components/ExpandableText/ExpandableText.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var text = {
+  display: 'inline'
+};
+var hiddenContainer = {
+  visibility: 'hidden',
+  position: 'absolute',
+  p: 0,
+  m: 0,
+  border: 0,
+  whiteSpace: 'normal',
+  wordBreak: 'break-word'
+};
+var _default = {
+  text: text,
+  hiddenContainer: hiddenContainer
+};
+exports["default"] = _default;

package/lib/cjs/components/ExpandableText/ExpandableText.test.d.ts

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

package/lib/cjs/components/ExpandableText/ExpandableText.test.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _defineProperty = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _ExpandableText = _interopRequireDefault(require("./ExpandableText"));
+var _react3 = require("@emotion/react");
+jest.mock('use-resize-observer', function () {
+  return jest.fn(function () {
+    return {
+      ref: jest.fn(),
+      // a stub ref callback
+      width: 300 // pretend container is 300px wide
+    };
+  });
+});
+
+var children = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+var testId = 'test-text';
+var defaultProps = {
+  'data-testid': testId,
+  //   children,
+  maxLines: 2
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+  return renderFn((0, _react3.jsx)(_ExpandableText["default"], (0, _extends2["default"])({}, defaultProps, props), children));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_ExpandableText["default"], (0, _extends2["default"])({}, defaultProps, props));
+  }
+});
+describe('ExpandableText', function () {
+  it('renders children', function () {
+    (0, _defineProperty["default"])(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function get() {
+        var text = this.innerText || '';
+        var lineHeight = 20;
+        var lines = Math.ceil(text.length / 50);
+        return lines * lineHeight;
+      }
+    });
+    (0, _defineProperty["default"])(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    _react2.fireEvent.click(button);
+    var expandableText = _testWrapper.screen.getByText(children);
+    expect(expandableText).toBeInTheDocument();
+    expect(expandableText).toHaveAttribute('data-testid', testId);
+  });
+  it('expands and collapses text on button click', function () {
+    (0, _defineProperty["default"])(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function get() {
+        var text = this.innerText || '';
+        var lineHeight = 20;
+        var lines = Math.ceil(text.length / 50);
+        return lines * lineHeight;
+      }
+    });
+    (0, _defineProperty["default"])(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    _react2.fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    _react2.fireEvent.click(_testWrapper.screen.getByRole('button'));
+    expect(button).toHaveTextContent(/View More/i);
+  });
+  it('it rests the expansion state when resized', function () {
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    _react2.fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    (0, _react2.fireEvent)(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+  it('truncates the text on resize when button is not expanded', function () {
+    getComponent();
+    var button = _testWrapper.screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    (0, _react2.fireEvent)(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+});

package/lib/cjs/components/ExpandableText/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ExpandableText';

package/lib/cjs/components/ExpandableText/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ExpandableText["default"];
+  }
+});
+var _ExpandableText = _interopRequireDefault(require("./ExpandableText"));

package/lib/cjs/index.d.ts

@@ -76,6 +76,7 @@ export { default as DatePicker } from './components/DatePicker';
 export { default as DateField } from './components/DatePicker/DateField';
 export { default as EditButton } from './components/EditButton';
 export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
+export { default as ExpandableText } from './components/ExpandableText';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';

package/lib/cjs/index.js

@@ -67,6 +67,7 @@ var _exportNames = {
   DateField: true,
   EditButton: true,
   EnvironmentBreadcrumb: true,
+  ExpandableText: true,
   FieldHelperText: true,
   FileInputField: true,
   Footer: true,
@@ -455,6 +456,12 @@ _Object$defineProperty(exports, "ErrorCalloutBadge", {
     return _ErrorCalloutBadge["default"];
   }
 });
+_Object$defineProperty(exports, "ExpandableText", {
+  enumerable: true,
+  get: function get() {
+    return _ExpandableText["default"];
+  }
+});
 _Object$defineProperty(exports, "FieldHelperText", {
   enumerable: true,
   get: function get() {
@@ -1439,6 +1446,7 @@ var _DatePicker = _interopRequireDefault(require("./components/DatePicker"));
 var _DateField = _interopRequireDefault(require("./components/DatePicker/DateField"));
 var _EditButton = _interopRequireDefault(require("./components/EditButton"));
 var _EnvironmentBreadcrumb = _interopRequireDefault(require("./components/EnvironmentBreadcrumb"));
+var _ExpandableText = _interopRequireDefault(require("./components/ExpandableText"));
 var _FieldHelperText = _interopRequireWildcard(require("./components/FieldHelperText"));
 _forEachInstanceProperty(_context24 = _Object$keys(_FieldHelperText)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/styles/variants/variants.js

@@ -30,6 +30,7 @@ var _CollapsiblePanel = _interopRequireDefault(require("../../components/Collaps
 var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyText.styles"));
 var _DataTable = _interopRequireDefault(require("../../components/DataTable/DataTable.styles"));
 var _EnvironmentalBreadcrumb = _interopRequireDefault(require("../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles"));
+var _ExpandableText = _interopRequireDefault(require("../../components/ExpandableText/ExpandableText.styles"));
 var _FieldHelperText = _interopRequireDefault(require("../../components/FieldHelperText/FieldHelperText.styles"));
 var _Footer = _interopRequireDefault(require("../../components/Footer/Footer.styles"));
 var _GridList = _interopRequireDefault(require("../../components/GridList/GridList.styles"));
@@ -87,6 +88,7 @@ var _default = _objectSpread(_objectSpread({
   copyText: _CopyText["default"],
   dataTable: _DataTable["default"],
   environmentBreadcrumb: _EnvironmentalBreadcrumb["default"],
+  expandableText: _ExpandableText["default"],
   fieldHelperText: _FieldHelperText["default"],
   footer: _Footer["default"],
   gridList: _GridList["default"],

package/lib/cjs/types/expandableText.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TestingAttributes } from './shared/test';
+import { ButtonProps } from './button';
+import { TextProps } from './text';
+export interface ExpandableTextProps extends TestingAttributes, TextProps {
+    maxLines: number;
+    className?: string;
+    children?: React.ReactNode;
+    buttonProps?: ButtonProps;
+}

package/lib/cjs/types/expandableText.js

@@ -0,0 +1,6 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/cjs/types/index.d.ts

@@ -15,6 +15,7 @@ export * from './colorField';
 export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';
+export * from './expandableText';
 export * from './fieldHelperText';
 export * from './footer';
 export * from './grid';

package/lib/cjs/types/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61;
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
@@ -194,8 +194,19 @@ _forEachInstanceProperty(_context17 = _Object$keys(_environmentBreadcrumb)).call
     }
   });
 });
+var _expandableText = require("./expandableText");
+_forEachInstanceProperty(_context18 = _Object$keys(_expandableText)).call(_context18, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _expandableText[key]) return;
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _expandableText[key];
+    }
+  });
+});
 var _fieldHelperText = require("./fieldHelperText");
-_forEachInstanceProperty(_context18 = _Object$keys(_fieldHelperText)).call(_context18, function (key) {
+_forEachInstanceProperty(_context19 = _Object$keys(_fieldHelperText)).call(_context19, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _fieldHelperText[key]) return;
   _Object$defineProperty(exports, key, {
@@ -206,7 +217,7 @@ _forEachInstanceProperty(_context18 = _Object$keys(_fieldHelperText)).call(_cont
   });
 });
 var _footer = require("./footer");
-_forEachInstanceProperty(_context19 = _Object$keys(_footer)).call(_context19, function (key) {
+_forEachInstanceProperty(_context20 = _Object$keys(_footer)).call(_context20, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _footer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -217,7 +228,7 @@ _forEachInstanceProperty(_context19 = _Object$keys(_footer)).call(_context19, fu
   });
 });
 var _grid = require("./grid");
-_forEachInstanceProperty(_context20 = _Object$keys(_grid)).call(_context20, function (key) {
+_forEachInstanceProperty(_context21 = _Object$keys(_grid)).call(_context21, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _grid[key]) return;
   _Object$defineProperty(exports, key, {
@@ -228,7 +239,7 @@ _forEachInstanceProperty(_context20 = _Object$keys(_grid)).call(_context20, func
   });
 });
 var _helpHint = require("./helpHint");
-_forEachInstanceProperty(_context21 = _Object$keys(_helpHint)).call(_context21, function (key) {
+_forEachInstanceProperty(_context22 = _Object$keys(_helpHint)).call(_context22, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _helpHint[key]) return;
   _Object$defineProperty(exports, key, {
@@ -239,7 +250,7 @@ _forEachInstanceProperty(_context21 = _Object$keys(_helpHint)).call(_context21,
   });
 });
 var _icon = require("./icon");
-_forEachInstanceProperty(_context22 = _Object$keys(_icon)).call(_context22, function (key) {
+_forEachInstanceProperty(_context23 = _Object$keys(_icon)).call(_context23, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _icon[key]) return;
   _Object$defineProperty(exports, key, {
@@ -250,7 +261,7 @@ _forEachInstanceProperty(_context22 = _Object$keys(_icon)).call(_context22, func
   });
 });
 var _iconBadge = require("./iconBadge");
-_forEachInstanceProperty(_context23 = _Object$keys(_iconBadge)).call(_context23, function (key) {
+_forEachInstanceProperty(_context24 = _Object$keys(_iconBadge)).call(_context24, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconBadge[key]) return;
   _Object$defineProperty(exports, key, {
@@ -261,7 +272,7 @@ _forEachInstanceProperty(_context23 = _Object$keys(_iconBadge)).call(_context23,
   });
 });
 var _iconButton = require("./iconButton");
-_forEachInstanceProperty(_context24 = _Object$keys(_iconButton)).call(_context24, function (key) {
+_forEachInstanceProperty(_context25 = _Object$keys(_iconButton)).call(_context25, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -272,7 +283,7 @@ _forEachInstanceProperty(_context24 = _Object$keys(_iconButton)).call(_context24
   });
 });
 var _iconButtonToggle = require("./iconButtonToggle");
-_forEachInstanceProperty(_context25 = _Object$keys(_iconButtonToggle)).call(_context25, function (key) {
+_forEachInstanceProperty(_context26 = _Object$keys(_iconButtonToggle)).call(_context26, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconButtonToggle[key]) return;
   _Object$defineProperty(exports, key, {
@@ -283,7 +294,7 @@ _forEachInstanceProperty(_context25 = _Object$keys(_iconButtonToggle)).call(_con
   });
 });
 var _iconWrapper = require("./iconWrapper");
-_forEachInstanceProperty(_context26 = _Object$keys(_iconWrapper)).call(_context26, function (key) {
+_forEachInstanceProperty(_context27 = _Object$keys(_iconWrapper)).call(_context27, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _iconWrapper[key]) return;
   _Object$defineProperty(exports, key, {
@@ -294,7 +305,7 @@ _forEachInstanceProperty(_context26 = _Object$keys(_iconWrapper)).call(_context2
   });
 });
 var _input = require("./input");
-_forEachInstanceProperty(_context27 = _Object$keys(_input)).call(_context27, function (key) {
+_forEachInstanceProperty(_context28 = _Object$keys(_input)).call(_context28, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _input[key]) return;
   _Object$defineProperty(exports, key, {
@@ -305,7 +316,7 @@ _forEachInstanceProperty(_context27 = _Object$keys(_input)).call(_context27, fun
   });
 });
 var _item = require("./item");
-_forEachInstanceProperty(_context28 = _Object$keys(_item)).call(_context28, function (key) {
+_forEachInstanceProperty(_context29 = _Object$keys(_item)).call(_context29, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _item[key]) return;
   _Object$defineProperty(exports, key, {
@@ -316,7 +327,7 @@ _forEachInstanceProperty(_context28 = _Object$keys(_item)).call(_context28, func
   });
 });
 var _label = require("./label");
-_forEachInstanceProperty(_context29 = _Object$keys(_label)).call(_context29, function (key) {
+_forEachInstanceProperty(_context30 = _Object$keys(_label)).call(_context30, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _label[key]) return;
   _Object$defineProperty(exports, key, {
@@ -327,7 +338,7 @@ _forEachInstanceProperty(_context29 = _Object$keys(_label)).call(_context29, fun
   });
 });
 var _link = require("./link");
-_forEachInstanceProperty(_context30 = _Object$keys(_link)).call(_context30, function (key) {
+_forEachInstanceProperty(_context31 = _Object$keys(_link)).call(_context31, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _link[key]) return;
   _Object$defineProperty(exports, key, {
@@ -338,7 +349,7 @@ _forEachInstanceProperty(_context30 = _Object$keys(_link)).call(_context30, func
   });
 });
 var _listBox = require("./listBox");
-_forEachInstanceProperty(_context31 = _Object$keys(_listBox)).call(_context31, function (key) {
+_forEachInstanceProperty(_context32 = _Object$keys(_listBox)).call(_context32, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -349,7 +360,7 @@ _forEachInstanceProperty(_context31 = _Object$keys(_listBox)).call(_context31, f
   });
 });
 var _listItem = require("./listItem");
-_forEachInstanceProperty(_context32 = _Object$keys(_listItem)).call(_context32, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_listItem)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _listItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -360,7 +371,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_listItem)).call(_context32,
   });
 });
 var _loader = require("./loader");
-_forEachInstanceProperty(_context33 = _Object$keys(_loader)).call(_context33, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_loader)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _loader[key]) return;
   _Object$defineProperty(exports, key, {
@@ -371,7 +382,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_loader)).call(_context33, fu
   });
 });
 var _menu = require("./menu");
-_forEachInstanceProperty(_context34 = _Object$keys(_menu)).call(_context34, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_menu)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -382,7 +393,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_menu)).call(_context34, func
   });
 });
 var _menuItem = require("./menuItem");
-_forEachInstanceProperty(_context35 = _Object$keys(_menuItem)).call(_context35, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_menuItem)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuItem[key]) return;
   _Object$defineProperty(exports, key, {
@@ -393,7 +404,7 @@ _forEachInstanceProperty(_context35 = _Object$keys(_menuItem)).call(_context35,
   });
 });
 var _menuSection = require("./menuSection");
-_forEachInstanceProperty(_context36 = _Object$keys(_menuSection)).call(_context36, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_menuSection)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _menuSection[key]) return;
   _Object$defineProperty(exports, key, {
@@ -404,7 +415,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_menuSection)).call(_context3
   });
 });
 var _messages = require("./messages");
-_forEachInstanceProperty(_context37 = _Object$keys(_messages)).call(_context37, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_messages)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _messages[key]) return;
   _Object$defineProperty(exports, key, {
@@ -415,7 +426,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_messages)).call(_context37,
   });
 });
 var _Modal = require("./Modal");
-_forEachInstanceProperty(_context38 = _Object$keys(_Modal)).call(_context38, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_Modal)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _Modal[key]) return;
   _Object$defineProperty(exports, key, {
@@ -426,7 +437,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_Modal)).call(_context38, fun
   });
 });
 var _navBar = require("./navBar");
-_forEachInstanceProperty(_context39 = _Object$keys(_navBar)).call(_context39, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_navBar)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -437,7 +448,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_navBar)).call(_context39, fu
   });
 });
 var _navSideBar = require("./navSideBar");
-_forEachInstanceProperty(_context40 = _Object$keys(_navSideBar)).call(_context40, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_navSideBar)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _navSideBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -448,7 +459,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_navSideBar)).call(_context40
   });
 });
 var _overlayPanel = require("./overlayPanel");
-_forEachInstanceProperty(_context41 = _Object$keys(_overlayPanel)).call(_context41, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_overlayPanel)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _overlayPanel[key]) return;
   _Object$defineProperty(exports, key, {
@@ -459,7 +470,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_overlayPanel)).call(_context
   });
 });
 var _passwordField = require("./passwordField");
-_forEachInstanceProperty(_context42 = _Object$keys(_passwordField)).call(_context42, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_passwordField)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _passwordField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -470,7 +481,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_passwordField)).call(_contex
   });
 });
 var _popoverContainer = require("./popoverContainer");
-_forEachInstanceProperty(_context43 = _Object$keys(_popoverContainer)).call(_context43, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_popoverContainer)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverContainer[key]) return;
   _Object$defineProperty(exports, key, {
@@ -481,7 +492,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_popoverContainer)).call(_con
   });
 });
 var _popoverMenu = require("./popoverMenu");
-_forEachInstanceProperty(_context44 = _Object$keys(_popoverMenu)).call(_context44, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_popoverMenu)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _popoverMenu[key]) return;
   _Object$defineProperty(exports, key, {
@@ -492,7 +503,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_popoverMenu)).call(_context4
   });
 });
 var _progressBar = require("./progressBar");
-_forEachInstanceProperty(_context45 = _Object$keys(_progressBar)).call(_context45, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_progressBar)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _progressBar[key]) return;
   _Object$defineProperty(exports, key, {
@@ -503,7 +514,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_progressBar)).call(_context4
   });
 });
 var _requirementsList = require("./requirementsList");
-_forEachInstanceProperty(_context46 = _Object$keys(_requirementsList)).call(_context46, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_requirementsList)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _requirementsList[key]) return;
   _Object$defineProperty(exports, key, {
@@ -514,7 +525,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_requirementsList)).call(_con
   });
 });
 var _rockerButtonGroup = require("./rockerButtonGroup");
-_forEachInstanceProperty(_context47 = _Object$keys(_rockerButtonGroup)).call(_context47, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_rockerButtonGroup)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _rockerButtonGroup[key]) return;
   _Object$defineProperty(exports, key, {
@@ -525,7 +536,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_rockerButtonGroup)).call(_co
   });
 });
 var _scrollBox = require("./scrollBox");
-_forEachInstanceProperty(_context48 = _Object$keys(_scrollBox)).call(_context48, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_scrollBox)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _scrollBox[key]) return;
   _Object$defineProperty(exports, key, {
@@ -536,7 +547,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_scrollBox)).call(_context48,
   });
 });
 var _searchField = require("./searchField");
-_forEachInstanceProperty(_context49 = _Object$keys(_searchField)).call(_context49, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_searchField)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _searchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -547,7 +558,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_searchField)).call(_context4
   });
 });
 var _separator = require("./separator");
-_forEachInstanceProperty(_context50 = _Object$keys(_separator)).call(_context50, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_separator)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _separator[key]) return;
   _Object$defineProperty(exports, key, {
@@ -558,7 +569,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_separator)).call(_context50,
   });
 });
 var _shared = require("./shared");
-_forEachInstanceProperty(_context51 = _Object$keys(_shared)).call(_context51, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_shared)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _shared[key]) return;
   _Object$defineProperty(exports, key, {
@@ -569,7 +580,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_shared)).call(_context51, fu
   });
 });
 var _skeleton = require("./skeleton");
-_forEachInstanceProperty(_context52 = _Object$keys(_skeleton)).call(_context52, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_skeleton)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _skeleton[key]) return;
   _Object$defineProperty(exports, key, {
@@ -580,7 +591,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_skeleton)).call(_context52,
   });
 });
 var _switchField = require("./switchField");
-_forEachInstanceProperty(_context53 = _Object$keys(_switchField)).call(_context53, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_switchField)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _switchField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -591,7 +602,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_switchField)).call(_context5
   });
 });
 var _tab = require("./tab");
-_forEachInstanceProperty(_context54 = _Object$keys(_tab)).call(_context54, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_tab)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tab[key]) return;
   _Object$defineProperty(exports, key, {
@@ -602,7 +613,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_tab)).call(_context54, funct
   });
 });
 var _table = require("./table");
-_forEachInstanceProperty(_context55 = _Object$keys(_table)).call(_context55, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_table)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _table[key]) return;
   _Object$defineProperty(exports, key, {
@@ -613,7 +624,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_table)).call(_context55, fun
   });
 });
 var _tabs = require("./tabs");
-_forEachInstanceProperty(_context56 = _Object$keys(_tabs)).call(_context56, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_tabs)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tabs[key]) return;
   _Object$defineProperty(exports, key, {
@@ -624,7 +635,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_tabs)).call(_context56, func
   });
 });
 var _text = require("./text");
-_forEachInstanceProperty(_context57 = _Object$keys(_text)).call(_context57, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_text)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _text[key]) return;
   _Object$defineProperty(exports, key, {
@@ -635,7 +646,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_text)).call(_context57, func
   });
 });
 var _textField = require("./textField");
-_forEachInstanceProperty(_context58 = _Object$keys(_textField)).call(_context58, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_textField)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _textField[key]) return;
   _Object$defineProperty(exports, key, {
@@ -646,7 +657,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_textField)).call(_context58,
   });
 });
 var _timefield = require("./timefield");
-_forEachInstanceProperty(_context59 = _Object$keys(_timefield)).call(_context59, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_timefield)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _timefield[key]) return;
   _Object$defineProperty(exports, key, {
@@ -657,7 +668,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_timefield)).call(_context59,
   });
 });
 var _tooltipTrigger = require("./tooltipTrigger");
-_forEachInstanceProperty(_context60 = _Object$keys(_tooltipTrigger)).call(_context60, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_tooltipTrigger)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (key in exports && exports[key] === _tooltipTrigger[key]) return;
   _Object$defineProperty(exports, key, {

package/lib/components/ExpandableText/ExpandableText.js

@@ -0,0 +1,122 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "maxLines", "buttonProps"];
+import _parseFloat from "@babel/runtime-corejs3/core-js-stable/parse-float";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import { v4 as uuid } from 'uuid';
+import { Box, Button, Text } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ExpandableText = /*#__PURE__*/forwardRef(function (props, ref) {
+  var children = props.children,
+    maxLines = props.maxLines,
+    buttonProps = props.buttonProps,
+    others = _objectWithoutProperties(props, _excluded);
+  var textContent = typeof children === 'string' ? children : '';
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isTruncated = _useState4[0],
+    setIsTruncated = _useState4[1];
+  var _useState5 = useState(textContent),
+    _useState6 = _slicedToArray(_useState5, 2),
+    visibleText = _useState6[0],
+    setVisibleText = _useState6[1];
+  var containerRef = useRef(null);
+  var hiddenContainerRef = useRef(null);
+  var prevWidthRef = useRef(window.innerWidth);
+  var truncateToLines = function truncateToLines() {
+    var _containerRef$current;
+    // get line height and calculate the number of lines
+    var container = hiddenContainerRef.current;
+    if (!container) return 0;
+    container.style.width = "".concat(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth) || 0, "px");
+    container.innerText = textContent;
+    var lineHeight = _parseFloat(getComputedStyle(container).lineHeight);
+    var fullTextLines = Math.round(container.offsetHeight / lineHeight);
+    if (fullTextLines <= maxLines) {
+      setVisibleText(textContent);
+      setIsTruncated(false);
+      return undefined;
+    }
+
+    // using binary search to find the maximum text that fits within maxLines
+    var suffix = '... View More';
+    var start = 0;
+    var end = textContent.length;
+    var truncatedText = '';
+    while (start < end) {
+      var _context, _context2;
+      var mid = Math.floor((start + end) / 2);
+      var candidateText = _trimInstanceProperty(_context = _sliceInstanceProperty(textContent).call(textContent, 0, mid)).call(_context);
+      var candidate = _concatInstanceProperty(_context2 = "".concat(candidateText)).call(_context2, suffix);
+      container.innerText = candidate;
+      var lines = Math.round(container.offsetHeight / lineHeight);
+      if (lines <= maxLines) {
+        truncatedText = candidateText;
+        start = mid + 1;
+      } else {
+        end = mid;
+      }
+    }
+    setVisibleText("".concat(truncatedText, "...") || textContent);
+    setIsTruncated(true);
+    return undefined;
+  };
+  var onResize = useCallback(function () {
+    if (!isExpanded) {
+      truncateToLines();
+    }
+    // Reset the expansion state if the width has changed
+    if (window.innerWidth !== prevWidthRef.current) {
+      prevWidthRef.current = window.innerWidth;
+      setIsExpanded(false);
+    }
+  }, [isExpanded]);
+  useResizeObserver({
+    ref: containerRef,
+    onResize: onResize
+  });
+
+  /* istanbul ignore next */
+  useLayoutEffect(function () {
+    if (isExpanded) {
+      setVisibleText(textContent);
+    } else {
+      truncateToLines();
+    }
+  }, [isExpanded, textContent]);
+  var toggleExpanded = function toggleExpanded() {
+    return setIsExpanded(!isExpanded);
+  };
+  var textId = uuid();
+  return ___EmotionJSX(Box, {
+    ref: ref
+  }, ___EmotionJSX("div", {
+    ref: containerRef
+  }, ___EmotionJSX(Text, _extends({
+    variant: "variants.expandableText.text",
+    id: textId
+  }, others), visibleText, ' '), isTruncated && ___EmotionJSX(Button, _extends({
+    onPress: toggleExpanded,
+    "aria-expanded": isExpanded,
+    "aria-controls": textId,
+    variant: "link",
+    sx: {
+      display: 'inline-block',
+      whiteSpace: 'nowrap',
+      ml: 1
+    }
+  }, buttonProps), isExpanded ? 'View Less' : 'View More')), ___EmotionJSX(Box, {
+    ref: hiddenContainerRef,
+    variant: "expandableText.hiddenContainer"
+  }));
+});
+export default ExpandableText;

package/lib/components/ExpandableText/ExpandableText.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/ExpandableText/ExpandableText" />
+
+# ExpandableText
+
+ExpandableText  is used to manage long texts by truncating them based on max lines. 
+It allows collapse and expand the text to view in full.
+
+### Required components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Space or Enter | Selects the button. |
+| Tab | Focuses the button and follows the page tab sequence. |
+
+
+#### Screen readers
+
+This component uses the following attributes to assist screen readers:
+- The trigger button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
+- The button uses, **`aria-controls`** which references the iD of the collapsible region.

package/lib/components/ExpandableText/ExpandableText.stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { ExpandableText } from '../../index';
+import ExpandableTextReadMe from './ExpandableText.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Experimental/ ExpandableText',
+  component: ExpandableText,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ExpandableTextReadMe, null), ___EmotionJSX(DocsLayout, null));
+      }
+    },
+    codesandbox: false
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(ExpandableText, {
+    maxLines: 5,
+    "data-testid": "test-field"
+  }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.");
+};

package/lib/components/ExpandableText/ExpandableText.styles.js

@@ -0,0 +1,16 @@
+var text = {
+  display: 'inline'
+};
+var hiddenContainer = {
+  visibility: 'hidden',
+  position: 'absolute',
+  p: 0,
+  m: 0,
+  border: 0,
+  whiteSpace: 'normal',
+  wordBreak: 'break-word'
+};
+export default {
+  text: text,
+  hiddenContainer: hiddenContainer
+};

package/lib/components/ExpandableText/ExpandableText.test.js

@@ -0,0 +1,112 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import ExpandableText from './ExpandableText';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+jest.mock('use-resize-observer', function () {
+  return jest.fn(function () {
+    return {
+      ref: jest.fn(),
+      // a stub ref callback
+      width: 300 // pretend container is 300px wide
+    };
+  });
+});
+
+var children = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+var testId = 'test-text';
+var defaultProps = {
+  'data-testid': testId,
+  //   children,
+  maxLines: 2
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref$renderFn = _ref.renderFn,
+    renderFn = _ref$renderFn === void 0 ? render : _ref$renderFn;
+  return renderFn(___EmotionJSX(ExpandableText, _extends({}, defaultProps, props), children));
+};
+
+// Needs to be added to each components test file
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(ExpandableText, _extends({}, defaultProps, props));
+  }
+});
+describe('ExpandableText', function () {
+  it('renders children', function () {
+    _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function get() {
+        var text = this.innerText || '';
+        var lineHeight = 20;
+        var lines = Math.ceil(text.length / 50);
+        return lines * lineHeight;
+      }
+    });
+    _Object$defineProperty(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    fireEvent.click(button);
+    var expandableText = screen.getByText(children);
+    expect(expandableText).toBeInTheDocument();
+    expect(expandableText).toHaveAttribute('data-testid', testId);
+  });
+  it('expands and collapses text on button click', function () {
+    _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      configurable: true,
+      get: function get() {
+        var text = this.innerText || '';
+        var lineHeight = 20;
+        var lines = Math.ceil(text.length / 50);
+        return lines * lineHeight;
+      }
+    });
+    _Object$defineProperty(window, 'getComputedStyle', {
+      value: function value() {
+        return {
+          lineHeight: '20px'
+        };
+      }
+    });
+    getComponent();
+    var button = screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    fireEvent.click(screen.getByRole('button'));
+    expect(button).toHaveTextContent(/View More/i);
+  });
+  it('it rests the expansion state when resized', function () {
+    getComponent();
+    var button = screen.getByRole('button');
+    fireEvent.click(button);
+    expect(button).toHaveTextContent(/View Less/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    fireEvent(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+  it('truncates the text on resize when button is not expanded', function () {
+    getComponent();
+    var button = screen.getByRole('button');
+    expect(button).toHaveTextContent(/View More/i);
+    var originalInnerWidth = window.innerWidth;
+    window.innerWidth = originalInnerWidth + 100;
+    fireEvent(window, new Event('resize'));
+    expect(button).toHaveTextContent(/View More/i);
+    window.innerWidth = originalInnerWidth;
+  });
+});

package/lib/components/ExpandableText/index.js

@@ -0,0 +1 @@
+export { default } from './ExpandableText';

package/lib/index.js

@@ -80,6 +80,7 @@ export { default as DatePicker } from './components/DatePicker';
 export { default as DateField } from './components/DatePicker/DateField';
 export { default as EditButton } from './components/EditButton';
 export { default as EnvironmentBreadcrumb } from './components/EnvironmentBreadcrumb';
+export { default as ExpandableText } from './components/ExpandableText';
 export { default as FieldHelperText } from './components/FieldHelperText';
 export * from './components/FieldHelperText';
 export { default as FileInputField } from './components/FileInputField';

package/lib/styles/variants/variants.js

@@ -23,6 +23,7 @@ import collapsiblePanel from '../../components/CollapsiblePanel/CollapsiblePanel
 import copyText from '../../components/CopyText/CopyText.styles';
 import dataTable from '../../components/DataTable/DataTable.styles';
 import environmentBreadcrumb from '../../components/EnvironmentBreadcrumb/EnvironmentalBreadcrumb.styles';
+import expandableText from '../../components/ExpandableText/ExpandableText.styles';
 import fieldHelperText from '../../components/FieldHelperText/FieldHelperText.styles';
 import footer from '../../components/Footer/Footer.styles';
 import gridList from '../../components/GridList/GridList.styles';
@@ -76,6 +77,7 @@ export default _objectSpread(_objectSpread({
   copyText: copyText,
   dataTable: dataTable,
   environmentBreadcrumb: environmentBreadcrumb,
+  expandableText: expandableText,
   fieldHelperText: fieldHelperText,
   footer: footer,
   gridList: gridList,

package/lib/types/expandableText.js

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

package/lib/types/index.js

@@ -15,6 +15,7 @@ export * from './colorField';
 export * from './copyText';
 export * from './dataTable';
 export * from './environmentBreadcrumb';
+export * from './expandableText';
 export * from './fieldHelperText';
 export * from './footer';
 export * from './grid';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.135.0-alpha.1",
+  "version": "2.135.0-alpha.2",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",