@activecollab/components 1.0.166 → 1.0.167

package/dist/index.js

@@ -5514,7 +5514,87 @@
   };
   Tbody.displayName = "Tbody";
 
-  var _excluded$S = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue"];
+  var linearAnimation = styled.keyframes(["0%{background-position:left;}100%{background-position:right;}"]);
+  var StyledLinearLoader = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledLinearLoader",
+    componentId: "sc-x4ge7a-0"
+  })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
+
+  var _excluded$S = ["className"];
+  var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        rest = _objectWithoutProperties(_ref, _excluded$S);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
+      ref: ref,
+      className: classnames__default["default"]("c-loader c-loader--linear", className)
+    }, rest));
+  });
+  LinearLoader.displayName = "LinearLoader";
+
+  var dotAnimation = styled.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}"]);
+  var StyledDotsLoader = styled__default["default"].span.withConfig({
+    displayName: "Styles__StyledDotsLoader",
+    componentId: "sc-1f35d5h-0"
+  })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
+
+  var _excluded$R = ["className"];
+  var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var className = _ref.className,
+        rest = _objectWithoutProperties(_ref, _excluded$R);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
+      ref: ref,
+      className: classnames__default["default"]("c-loader c-loader--dots", className)
+    }, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
+  });
+  DotsLoader.displayName = "DotsLoader";
+
+  var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
+  var StyledSpinnerLoader = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledSpinnerLoader",
+    componentId: "sc-1ht53g9-0"
+  })(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
+    return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
+  }, function (props) {
+    return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
+  }, function (props) {
+    return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
+  }, function (props) {
+    return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
+  });
+
+  var _excluded$Q = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _ref$radius = _ref.radius,
+        radius = _ref$radius === void 0 ? 10 : _ref$radius,
+        _ref$stroke = _ref.stroke,
+        stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
+        _ref$activeStrokeColo = _ref.activeStrokeColor,
+        activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
+        _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
+        inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
+        _ref$activeColorPerce = _ref.activeColorPercentage,
+        activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
+        _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
+        rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
+        className = _ref.className,
+        rest = _objectWithoutProperties(_ref, _excluded$Q);
+
+    return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
+      ref: ref,
+      className: className,
+      $diameter: radius * 2,
+      $stroke: stroke,
+      $activeStrokeColor: activeStrokeColor,
+      $inactiveStrokeColor: inactiveStrokeColor,
+      $activeColorPercentage: activeColorPercentage,
+      $rotateDurationInSeconds: rotateDurationInSeconds
+    }, rest));
+  });
+  SpinnerLoader.displayName = "SpinnerLoader";
+
+  var _excluded$P = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
   exports.SortDirection = void 0;
 
   (function (SortDirection) {
@@ -5549,7 +5629,8 @@
 
   var DataTable = function DataTable(_ref) {
     var header = _ref.header,
-        rows = _ref.rows,
+        _ref$rows = _ref.rows,
+        rows = _ref$rows === void 0 ? [] : _ref$rows,
         className = _ref.className,
         sortBy = _ref.sortBy,
         _ref$sortDirection = _ref.sortDirection,
@@ -5564,7 +5645,10 @@
     } : _ref$groupHead,
         isCollapsible = _ref.isCollapsible,
         emptyValue = _ref.emptyValue,
-        args = _objectWithoutProperties(_ref, _excluded$S);
+        loading = _ref.loading,
+        _ref$loadingRows = _ref.loadingRows,
+        loadingRows = _ref$loadingRows === void 0 ? 7 : _ref$loadingRows,
+        args = _objectWithoutProperties(_ref, _excluded$P);
 
     var _useState = React.useState(sortDirection),
         _useState2 = _slicedToArray(_useState, 2),
@@ -5771,6 +5855,25 @@
         return newState;
       });
     }, []);
+    var renderPlaceholders = React.useMemo(function () {
+      var placeholders = Array(loadingRows).fill({}).map(function (_, index) {
+        return /*#__PURE__*/React__default["default"].createElement("tr", {
+          key: index,
+          className: "c-table__row",
+          onMouseOver: cellMouseOver,
+          onMouseLeave: cellMouseOut
+        }, header.map(function (col, colIndex) {
+          return /*#__PURE__*/React__default["default"].createElement("td", {
+            key: colIndex,
+            className: classnames__default["default"]("c-table__cell c-data-table__item", {
+              hovered: hovered === col.key
+            }),
+            "data-key": col.key
+          }, /*#__PURE__*/React__default["default"].createElement(LinearLoader, null));
+        }));
+      });
+      return /*#__PURE__*/React__default["default"].createElement(Tbody, null, placeholders);
+    }, [cellMouseOut, cellMouseOver, header, hovered, loadingRows]);
     var renderRows = React.useMemo(function () {
       if (data && data instanceof Array && data.length > 0 || _typeof(data) === "object" && Object.keys(data).length > 0) {
         if (groupBy) {
@@ -5898,7 +6001,7 @@
           "c-table__icon--desc": columnDirection === exports.SortDirection.Desc && h.key === active
         })
       })));
-    }))), renderRows);
+    }))), loading ? renderPlaceholders : renderRows);
   };
   DataTable.displayName = "DataTable";
 
@@ -5985,7 +6088,7 @@
   });
   StyledPaper.displayName = "StyledPaper";
 
-  var _excluded$R = ["children", "className", "type", "hover", "useOptimizedShadow"];
+  var _excluded$O = ["children", "className", "type", "hover", "useOptimizedShadow"];
 
   /**
    * This is a component description and should sit directly above your component
@@ -5999,7 +6102,7 @@
         hover = _ref$hover === void 0 ? false : _ref$hover,
         _ref$useOptimizedShad = _ref.useOptimizedShadow,
         useOptimizedShadow = _ref$useOptimizedShad === void 0 ? false : _ref$useOptimizedShad,
-        rest = _objectWithoutProperties(_ref, _excluded$R);
+        rest = _objectWithoutProperties(_ref, _excluded$O);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledPaper, _extends({
       className: classnames__default["default"](className, {
@@ -6053,7 +6156,7 @@
   });
   StyledCard.displayName = "StyledCard";
 
-  var _excluded$Q = ["children", "className", "hoverable", "paperType"];
+  var _excluded$N = ["children", "className", "hoverable", "paperType"];
   var Card = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
         className = _ref.className,
@@ -6061,7 +6164,7 @@
         hoverable = _ref$hoverable === void 0 ? false : _ref$hoverable,
         _ref$paperType = _ref.paperType,
         paperType = _ref$paperType === void 0 ? "paper-2" : _ref$paperType,
-        rest = _objectWithoutProperties(_ref, _excluded$Q);
+        rest = _objectWithoutProperties(_ref, _excluded$N);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledCard, _extends({}, rest, {
       type: paperType,
@@ -6143,12 +6246,12 @@
   });
   EntityCard$1.displayName = "EntityCard";
 
-  var _excluded$P = ["weight", "children"];
+  var _excluded$M = ["weight", "children"];
   var Title1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "light" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$P);
+        props = _objectWithoutProperties(_ref, _excluded$M);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -6158,12 +6261,12 @@
   });
   Title1.displayName = "Title1";
 
-  var _excluded$O = ["weight", "children"];
+  var _excluded$L = ["weight", "children"];
   var Title2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "light" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$O);
+        props = _objectWithoutProperties(_ref, _excluded$L);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: weight,
@@ -6173,10 +6276,10 @@
   });
   Title2.displayName = "Title2";
 
-  var _excluded$N = ["children"];
+  var _excluded$K = ["children"];
   var Header2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$N);
+        props = _objectWithoutProperties(_ref, _excluded$K);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -6186,10 +6289,10 @@
   });
   Header2.displayName = "Header2";
 
-  var _excluded$M = ["children"];
+  var _excluded$J = ["children"];
   var Header3 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$M);
+        props = _objectWithoutProperties(_ref, _excluded$J);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       weight: "bold",
@@ -6199,12 +6302,12 @@
   });
   Header3.displayName = "Header3";
 
-  var _excluded$L = ["weight", "children"];
+  var _excluded$I = ["weight", "children"];
   var Body1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$L);
+        props = _objectWithoutProperties(_ref, _excluded$I);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 1",
@@ -6214,12 +6317,12 @@
   });
   Body1.displayName = "Body1";
 
-  var _excluded$K = ["weight", "children"];
+  var _excluded$H = ["weight", "children"];
   var Caption1 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$K);
+        props = _objectWithoutProperties(_ref, _excluded$H);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 1",
@@ -6229,12 +6332,12 @@
   });
   Caption1.displayName = "Caption1";
 
-  var _excluded$J = ["weight", "children"];
+  var _excluded$G = ["weight", "children"];
   var Caption2 = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$weight = _ref.weight,
         weight = _ref$weight === void 0 ? "regular" : _ref$weight,
         children = _ref.children,
-        props = _objectWithoutProperties(_ref, _excluded$J);
+        props = _objectWithoutProperties(_ref, _excluded$G);
 
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Caption 2",
@@ -6353,7 +6456,7 @@
     "borderRadius": "9999px"
   });
 
-  var _excluded$I = ["url", "alt", "size", "className"];
+  var _excluded$F = ["url", "alt", "size", "className"];
   var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var url = _ref.url,
         _ref$alt = _ref.alt,
@@ -6361,7 +6464,7 @@
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 24 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$I);
+        rest = _objectWithoutProperties(_ref, _excluded$F);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({}, rest, {
       ref: ref,
@@ -6383,13 +6486,13 @@
     return props.$color && styled.css(["background-color:", ";"], props.$color);
   });
 
-  var _excluded$H = ["color", "size", "className"];
+  var _excluded$E = ["color", "size", "className"];
   var Dot = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var color = _ref.color,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? 8 : _ref$size,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$H);
+        rest = _objectWithoutProperties(_ref, _excluded$E);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledDot, _extends({
       className: classnames__default["default"]("c-dot", className),
@@ -6427,7 +6530,7 @@
   });
   StyledTagText.displayName = "StyledTagText";
 
-  var _excluded$G = ["name", "color", "showText", "showDot", "className"];
+  var _excluded$D = ["name", "color", "showText", "showDot", "className"];
   var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var name = _ref.name,
         color = _ref.color,
@@ -6436,7 +6539,7 @@
         _ref$showDot = _ref.showDot,
         showDot = _ref$showDot === void 0 ? true : _ref$showDot,
         className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$G);
+        rest = _objectWithoutProperties(_ref, _excluded$D);
 
     return /*#__PURE__*/React__default["default"].createElement(StyledTag, _extends({
       className: classnames__default["default"]("c-tag", className),
@@ -6450,86 +6553,6 @@
   });
   Tag.displayName = "Tag";
 
-  var linearAnimation = styled.keyframes(["0%{background-position:left;}100%{background-position:right;}"]);
-  var StyledLinearLoader = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledLinearLoader",
-    componentId: "sc-x4ge7a-0"
-  })(["width:70%;background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.05) 50%,rgba(255,255,255,0) 60% );background-size:400%;height:16px;border-radius:8px;.neon &{background:linear-gradient( 90deg,rgba(255,255,255,0) 20%,rgba(0,0,0,0.2) 50%,rgba(255,255,255,0) 60% );background-size:500%;}animation-duration:1s;animation-iteration-count:infinite;animation-name:", ";animation-timing-function:linear;animation-direction:reverse;"], linearAnimation);
-
-  var _excluded$F = ["className"];
-  var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$F);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
-      ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--linear", className)
-    }, rest));
-  });
-  LinearLoader.displayName = "LinearLoader";
-
-  var dotAnimation = styled.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}"]);
-  var StyledDotsLoader = styled__default["default"].span.withConfig({
-    displayName: "Styles__StyledDotsLoader",
-    componentId: "sc-1f35d5h-0"
-  })(["display:inline-block;text-align:center;& > span{display:inline-block;width:18px;height:18px;background-color:#777;border-radius:100%;animation:", " 1.4s infinite ease-in-out both;}span:nth-child(1){animation-delay:-0.32s;}span:nth-child(2){animation-delay:-0.16s;}"], dotAnimation);
-
-  var _excluded$E = ["className"];
-  var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$E);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
-      ref: ref,
-      className: classnames__default["default"]("c-loader c-loader--dots", className)
-    }, rest), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null), /*#__PURE__*/React__default["default"].createElement("span", null));
-  });
-  DotsLoader.displayName = "DotsLoader";
-
-  var rotateAnimation = styled.keyframes(["from{transform:rotate(0deg);}to{transform:rotate(359deg);}"]);
-  var StyledSpinnerLoader = styled__default["default"].div.withConfig({
-    displayName: "Styles__StyledSpinnerLoader",
-    componentId: "sc-1ht53g9-0"
-  })(["", " border-radius:100%;flex-shrink:0;", " ", " ", " ", ""], BoxSizingStyle, function (props) {
-    return styled.css(["width:", "px;height:", "px;animation:", " ", "s infinite linear;"], props.$diameter, props.$diameter, rotateAnimation, props.$rotateDurationInSeconds);
-  }, function (props) {
-    return props.$activeColorPercentage === "25%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
-  }, function (props) {
-    return props.$activeColorPercentage === "50%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
-  }, function (props) {
-    return props.$activeColorPercentage === "75%" && styled.css(["border-right:", "px solid ", ";border-bottom:", "px solid ", ";border-left:", "px solid ", ";border-top:", "px solid ", ";"], props.$stroke, props.$activeStrokeColor, props.$stroke, props.$activeStrokeColor, props.$stroke, props.$inactiveStrokeColor, props.$stroke, props.$activeStrokeColor);
-  });
-
-  var _excluded$D = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
-  var SpinnerLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-    var _ref$radius = _ref.radius,
-        radius = _ref$radius === void 0 ? 10 : _ref$radius,
-        _ref$stroke = _ref.stroke,
-        stroke = _ref$stroke === void 0 ? 2 : _ref$stroke,
-        _ref$activeStrokeColo = _ref.activeStrokeColor,
-        activeStrokeColor = _ref$activeStrokeColo === void 0 ? "var(--color-secondary)" : _ref$activeStrokeColo,
-        _ref$inactiveStrokeCo = _ref.inactiveStrokeColor,
-        inactiveStrokeColor = _ref$inactiveStrokeCo === void 0 ? "var(--color-theme-transparent-300)" : _ref$inactiveStrokeCo,
-        _ref$activeColorPerce = _ref.activeColorPercentage,
-        activeColorPercentage = _ref$activeColorPerce === void 0 ? "25%" : _ref$activeColorPerce,
-        _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
-        rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
-        className = _ref.className,
-        rest = _objectWithoutProperties(_ref, _excluded$D);
-
-    return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader, _extends({
-      ref: ref,
-      className: className,
-      $diameter: radius * 2,
-      $stroke: stroke,
-      $activeStrokeColor: activeStrokeColor,
-      $inactiveStrokeColor: inactiveStrokeColor,
-      $activeColorPercentage: activeColorPercentage,
-      $rotateDurationInSeconds: rotateDurationInSeconds
-    }, rest));
-  });
-  SpinnerLoader.displayName = "SpinnerLoader";
-
   var StyledHiglightedText = styled__default["default"].span.withConfig({
     displayName: "useHighlightText__StyledHiglightedText",
     componentId: "sc-13agf6o-0"