@activecollab/components 2.0.41 → 2.0.43

package/dist/index.js

@@ -199,7 +199,7 @@
   })(["display:inline-flex;svg{margin:0 4px;}"]);
   StyledButtonElement.displayName = "StyledButtonElement";
 
-  var _excluded$1s = ["children", "active", "variant", "size", "className"];
+  var _excluded$1t = ["children", "active", "variant", "size", "className"];
   /**
    * @component Button
    * @description
@@ -229,7 +229,7 @@
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "medium" : _ref$size,
       className = _ref.className,
-      args = _objectWithoutProperties(_ref, _excluded$1s);
+      args = _objectWithoutProperties(_ref, _excluded$1t);
     return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
       className: classNames__default["default"]("c-btn", className, {
         "c-btn--contained": variant === "primary" || variant === "contained",
@@ -303,12 +303,12 @@
   AddCrossTinyIcon.displayName = "AddCrossTinyIcon";
   var AddCrossTinyIcon$1 = AddCrossTinyIcon;
 
-  var _excluded$1r = ["className", "disabled"];
+  var _excluded$1s = ["className", "disabled"];
   var GlobalAddButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      rest = _objectWithoutProperties(_ref, _excluded$1r);
+      rest = _objectWithoutProperties(_ref, _excluded$1s);
     return /*#__PURE__*/React__default["default"].createElement(StyledGlobalAddButton, _extends({
       ref: ref,
       variant: "contained",
@@ -340,11 +340,11 @@
   });
   StyledButtonGroup$1.displayName = "StyledButtonGroup";
 
-  var _excluded$1q = ["children", "className"];
+  var _excluded$1r = ["children", "className"];
   var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$1q);
+      rest = _objectWithoutProperties(_ref, _excluded$1r);
     return /*#__PURE__*/React__default["default"].createElement(StyledButtonGroup$1, _extends({
       ref: ref,
       className: classNames__default["default"]("c-btn-group", className)
@@ -368,11 +368,11 @@
   })(["border-top:1px solid var(--border-primary);margin:12px 16px;height:1px;"]);
   StyledListSeparator.displayName = "StyledListSeparator";
 
-  var _excluded$1p = ["children", "className"];
+  var _excluded$1q = ["children", "className"];
   var ListItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1p);
+      props = _objectWithoutProperties(_ref, _excluded$1q);
     return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({
       className: classNames__default["default"]("c-list-item", className),
       ref: ref,
@@ -381,21 +381,21 @@
   });
   ListItem.displayName = "ListItem";
 
-  var _excluded$1o = ["className"];
+  var _excluded$1p = ["className"];
   var ListSeparator = function ListSeparator(_ref) {
     var className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1o);
+      props = _objectWithoutProperties(_ref, _excluded$1p);
     return /*#__PURE__*/React__default["default"].createElement(StyledListSeparator, _extends({
       className: classNames__default["default"]("c-list-separator", className)
     }, props));
   };
   ListSeparator.displayName = "ListSeparator";
 
-  var _excluded$1n = ["children", "className"];
+  var _excluded$1o = ["children", "className"];
   var _List = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1n);
+      props = _objectWithoutProperties(_ref, _excluded$1o);
     return /*#__PURE__*/React__default["default"].createElement(StyledList, _extends({
       className: className,
       ref: ref,
@@ -757,7 +757,7 @@
     return size === "big" && styled.css(["width:40px;"]);
   });
 
-  var _excluded$1m = ["children", "className", "variant", "size", "active"];
+  var _excluded$1n = ["children", "className", "variant", "size", "active"];
 
   // eslint-disable-next-line @typescript-eslint/no-empty-interface
 
@@ -787,7 +787,7 @@
       variant = _ref.variant,
       size = _ref.size,
       active = _ref.active,
-      args = _objectWithoutProperties(_ref, _excluded$1m);
+      args = _objectWithoutProperties(_ref, _excluded$1n);
     return /*#__PURE__*/React__default["default"].createElement(StyledIconButton, _extends({
       className: className,
       variant: variant,
@@ -4285,6 +4285,44 @@
   LabelsIcon.displayName = "LabelsIcon";
   var LabelsIcon$1 = LabelsIcon;
 
+  /**
+   * @component LetterIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   *
+   * @example
+   * return (
+   *   <LetterIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var LetterIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "LetterIcon",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M2 6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2H4a2 2 0 01-2-2V6zm2 9v3h16V8l-8 5-8-5v7zm0-9l8 5 8-5H4z"
+    }));
+  });
+  LetterIcon.displayName = "LetterIcon";
+  var LetterIcon$1 = LetterIcon;
+
   /**
    * @component LockSmallIcon
    * @description
@@ -7353,7 +7391,7 @@
   }, FontStyle, BoxSizingStyle);
   StyledBubble.displayName = "StyledBubble";
 
-  var _excluded$1l = ["children", "className", "innerRef", "style"];
+  var _excluded$1m = ["children", "className", "innerRef", "style"];
   var Bubble = function Bubble(_ref) {
     var children = _ref.children,
       className = _ref.className,
@@ -7361,7 +7399,7 @@
       innerRef = _ref$innerRef === void 0 ? null : _ref$innerRef,
       _ref$style = _ref.style,
       style = _ref$style === void 0 ? {} : _ref$style,
-      rest = _objectWithoutProperties(_ref, _excluded$1l);
+      rest = _objectWithoutProperties(_ref, _excluded$1m);
     return /*#__PURE__*/React__default["default"].createElement(StyledBubble, _extends({}, rest, {
       ref: innerRef,
       className: classNames__default["default"]("c-bubble", className),
@@ -7422,12 +7460,12 @@
   });
   StyledOverlay.displayName = "StyledOverlay";
 
-  var _excluded$1k = ["className", "disableBackgroundColor"];
+  var _excluded$1l = ["className", "disableBackgroundColor"];
   var Overlay = function Overlay(_ref) {
     var className = _ref.className,
       _ref$disableBackgroun = _ref.disableBackgroundColor,
       disableBackgroundColor = _ref$disableBackgroun === void 0 ? false : _ref$disableBackgroun,
-      rest = _objectWithoutProperties(_ref, _excluded$1k);
+      rest = _objectWithoutProperties(_ref, _excluded$1l);
     return /*#__PURE__*/React__default["default"].createElement(StyledOverlay, _extends({
       className: classNames__default["default"]("c-overlay", className),
       $disableBackgroundColor: disableBackgroundColor
@@ -7435,7 +7473,7 @@
   };
   Overlay.displayName = "Overlay";
 
-  var _excluded$1j = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
+  var _excluded$1k = ["children", "anchorEl", "open", "style", "transition", "placement", "strategy", "afterWrite"];
   var Popper = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       anchorEl = _ref.anchorEl,
@@ -7449,7 +7487,7 @@
       _ref$strategy = _ref.strategy,
       strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
       afterWrite = _ref.afterWrite,
-      rest = _objectWithoutProperties(_ref, _excluded$1j);
+      rest = _objectWithoutProperties(_ref, _excluded$1k);
     var _useState = React.useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       exited = _useState2[0],
@@ -7572,7 +7610,7 @@
   };
   var LayerContext$1 = LayerContext;
 
-  var _excluded$1i = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
+  var _excluded$1j = ["children", "onClose", "className", "style", "onKeyDown", "disableFocusLock", "disableScrollLock", "disableCloseOnEsc", "onClick"];
   var returnFocus = {
     preventScroll: true
   };
@@ -7589,7 +7627,7 @@
       _ref$disableCloseOnEs = _ref.disableCloseOnEsc,
       disableCloseOnEsc = _ref$disableCloseOnEs === void 0 ? false : _ref$disableCloseOnEs,
       onClick = _ref.onClick,
-      rest = _objectWithoutProperties(_ref, _excluded$1i);
+      rest = _objectWithoutProperties(_ref, _excluded$1j);
     var innerRef = React.useRef(null);
     var handleRef = useForkRef(innerRef, ref);
     var _useLayerContext = useLayerContext(),
@@ -7900,7 +7938,7 @@
   });
   StyledTypography.displayName = "StyledTypography";
 
-  var _excluded$1h = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
+  var _excluded$1i = ["variant", "as", "color", "italic", "tabularNums", "letterSpacing", "lineHeight", "align", "decoration", "transform", "overflow", "whitespace", "wordBreak", "weight", "className", "children"];
   var Typography = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$variant = _ref.variant,
       variant = _ref$variant === void 0 ? "Title 1" : _ref$variant,
@@ -7931,7 +7969,7 @@
       weight = _ref$weight === void 0 ? "regular" : _ref$weight,
       className = _ref.className,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1h);
+      props = _objectWithoutProperties(_ref, _excluded$1i);
     var Component = as || "div";
     return /*#__PURE__*/React__default["default"].createElement(StyledTypography, _extends({
       as: Component,
@@ -7954,13 +7992,13 @@
   });
   Typography.displayName = "Typography";
 
-  var _excluded$1g = ["title", "className", "leftElement", "rightElement"];
+  var _excluded$1h = ["title", "className", "leftElement", "rightElement"];
   var MenuHeader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var title = _ref.title,
       className = _ref.className,
       leftElement = _ref.leftElement,
       rightElement = _ref.rightElement,
-      props = _objectWithoutProperties(_ref, _excluded$1g);
+      props = _objectWithoutProperties(_ref, _excluded$1h);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuHeader, _extends({}, props, {
       className: classNames__default["default"]("c-menu-header", className),
       ref: ref
@@ -7985,11 +8023,11 @@
   });
   MenuHeader.displayName = "MenuHeader";
 
-  var _excluded$1f = ["children", "className"];
+  var _excluded$1g = ["children", "className"];
   var MenuFooter = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var children = _ref.children,
       className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded$1f);
+      props = _objectWithoutProperties(_ref, _excluded$1g);
     return /*#__PURE__*/React__default["default"].createElement(StyledMenuFooter$1, _extends({}, props, {
       className: classNames__default["default"]("c-menu-footer", className),
       ref: ref
@@ -7997,14 +8035,14 @@
   });
   MenuFooter.displayName = "MenuFooter";
 
-  var _excluded$1e = ["children", "className", "separator"];
+  var _excluded$1f = ["children", "className", "separator"];
   var Breadcrumbs = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _dimensions$width, _childDimensions$widt;
     var children = _ref.children,
       className = _ref.className,
       _ref$separator = _ref.separator,
       separator = _ref$separator === void 0 ? "/" : _ref$separator,
-      rest = _objectWithoutProperties(_ref, _excluded$1e);
+      rest = _objectWithoutProperties(_ref, _excluded$1f);
     var internalRef = React.useRef(null);
     var listWrapperRef = React.useRef(null);
     var olRef = React.useRef(null);
@@ -8182,12 +8220,12 @@
     }, value && value > 100 ? 99 + "+" : value);
   };
 
-  var _excluded$1d = ["weight", "children"];
+  var _excluded$1e = ["weight", "children"];
   var Body2 = /*#__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$1d);
+      props = _objectWithoutProperties(_ref, _excluded$1e);
     return /*#__PURE__*/React__default["default"].createElement(Typography, _extends({
       variant: "Body 2",
       weight: weight,
@@ -8295,10 +8333,10 @@
   };
   FromElement.displayName = "FromElement";
 
-  var _excluded$1c = ["children"];
+  var _excluded$1d = ["children"];
   var TooltipAnimation = function TooltipAnimation(_ref) {
     var children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded$1c);
+      props = _objectWithoutProperties(_ref, _excluded$1d);
     return /*#__PURE__*/React__default["default"].createElement(FromElement, _extends({
       timeout: 0
     }, props), children);
@@ -8373,7 +8411,7 @@
   });
   Tooltip.displayName = "Tooltip";
 
-  var _excluded$1b = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
+  var _excluded$1c = ["label", "icon", "active", "counter", "tooltipText", "onClearAll", "className", "labelClassName", "disabled"];
   var CounterButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var label = _ref.label,
       icon = _ref.icon,
@@ -8386,7 +8424,7 @@
       labelClassName = _ref.labelClassName,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      args = _objectWithoutProperties(_ref, _excluded$1b);
+      args = _objectWithoutProperties(_ref, _excluded$1c);
     return /*#__PURE__*/React__default["default"].createElement(StyledCounterButtonWrapper, {
       ref: ref,
       className: className
@@ -8781,7 +8819,7 @@
   };
   YearMonthPicker.displayName = "YearMonthPicker";
 
-  var _excluded$1a = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers", "renderDay"];
+  var _excluded$1b = ["className", "onChange", "onDayClick", "selectedDays", "disabledDays", "selectionMode", "month", "onMonthChange", "dateRequired", "firstDayOfWeek", "fixedWeeks", "modifiers", "renderDay"];
   var formatWeekdayName = function formatWeekdayName(str) {
     return moment__default["default"](str).format("ddd").charAt(0);
   };
@@ -8807,7 +8845,7 @@
       fixedWeeks = _ref$fixedWeeks === void 0 ? true : _ref$fixedWeeks,
       defaultModifiers = _ref.modifiers,
       renderDay = _ref.renderDay,
-      rest = _objectWithoutProperties(_ref, _excluded$1a);
+      rest = _objectWithoutProperties(_ref, _excluded$1b);
     var _useState = React.useState(),
       _useState2 = _slicedToArray(_useState, 2),
       enteredTo = _useState2[0],
@@ -9634,21 +9672,21 @@
   Tbody.displayName = "Tbody";
 
   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"
+  var StyledSkeletonLoader = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledSkeletonLoader",
+    componentId: "sc-1n0a2yl-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$19 = ["className"];
-  var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _excluded$1a = ["className"];
+  var SkeletonLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$19);
-    return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
+      rest = _objectWithoutProperties(_ref, _excluded$1a);
+    return /*#__PURE__*/React__default["default"].createElement(StyledSkeletonLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--linear", className)
     }, rest));
   });
-  LinearLoader.displayName = "LinearLoader";
+  SkeletonLoader.displayName = "SkeletonLoader";
 
   var dotAnimation = styled.keyframes(["0%,80%,100%{transform:scale(0);}40%{transform:scale(1);}"]);
   var StyledDotsLoader = styled__default["default"].span.withConfig({
@@ -9656,10 +9694,10 @@
     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$18 = ["className"];
+  var _excluded$19 = ["className"];
   var DotsLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$18);
+      rest = _objectWithoutProperties(_ref, _excluded$19);
     return /*#__PURE__*/React__default["default"].createElement(StyledDotsLoader, _extends({
       ref: ref,
       className: classNames__default["default"]("c-loader c-loader--dots", className)
@@ -9681,7 +9719,7 @@
     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$17 = ["radius", "stroke", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "rotateDurationInSeconds", "className"];
+  var _excluded$18 = ["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,
@@ -9696,7 +9734,7 @@
       _ref$rotateDurationIn = _ref.rotateDurationInSeconds,
       rotateDurationInSeconds = _ref$rotateDurationIn === void 0 ? 0.75 : _ref$rotateDurationIn,
       className = _ref.className,
-      rest = _objectWithoutProperties(_ref, _excluded$17);
+      rest = _objectWithoutProperties(_ref, _excluded$18);
     return /*#__PURE__*/React__default["default"].createElement(StyledSpinnerLoader$1, _extends({
       ref: ref,
       className: className,
@@ -9710,6 +9748,55 @@
   });
   SpinnerLoader.displayName = "SpinnerLoader";
 
+  var moveLineAnimation = function moveLineAnimation(percentage) {
+    return styled.keyframes(["0%{transform:translateX(", ");}100%{transform:translateX(", ");}"], percentage === "25%" ? "-110%" : percentage === "50%" ? "-70%" : "-55%", percentage === "25%" ? "400%" : percentage === "50%" ? "220%" : "200%");
+  };
+  var StyledLinearLoader = styled__default["default"].div.withConfig({
+    displayName: "Styles__StyledLinearLoader",
+    componentId: "sc-x4ge7a-0"
+  })(["width:100%;height:", "px;position:relative;overflow:hidden;background-color:", ";border-radius:", "px;&::before{content:\"\";position:absolute;top:0;border-radius:", "px;left:0;width:", ";height:100%;background-color:", ";animation:", " ", "s infinite linear;}"], function (props) {
+    return props.$height;
+  }, function (props) {
+    return props.$inactiveStrokeColor;
+  }, function (props) {
+    return props.$height;
+  }, function (props) {
+    return props.$height;
+  }, function (props) {
+    return props.$activeColorPercentage;
+  }, function (props) {
+    return props.$activeStrokeColor;
+  }, function (props) {
+    return moveLineAnimation(props.$activeColorPercentage);
+  }, function (props) {
+    return props.$animationDuration;
+  });
+  StyledLinearLoader.displayName = "StyledLinearLoader";
+
+  var _excluded$17 = ["height", "activeStrokeColor", "inactiveStrokeColor", "activeColorPercentage", "animationDuration"];
+  var LinearLoader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+    var _ref$height = _ref.height,
+      height = _ref$height === void 0 ? 4 : _ref$height,
+      _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$animationDuratio = _ref.animationDuration,
+      animationDuration = _ref$animationDuratio === void 0 ? 0.75 : _ref$animationDuratio,
+      rest = _objectWithoutProperties(_ref, _excluded$17);
+    return /*#__PURE__*/React__default["default"].createElement(StyledLinearLoader, _extends({
+      ref: ref,
+      $height: height,
+      $activeStrokeColor: activeStrokeColor,
+      $inactiveStrokeColor: inactiveStrokeColor,
+      $activeColorPercentage: activeColorPercentage,
+      $animationDuration: animationDuration
+    }, rest));
+  });
+  LinearLoader.displayName = "LinearLoader";
+
   var _excluded$16 = ["header", "rows", "className", "sortBy", "sortDirection", "onSortCallback", "theadClass", "noResultsCallback", "groupBy", "groupHead", "isCollapsible", "emptyValue", "loading", "loadingRows"];
   var SortDirection = /*#__PURE__*/function (SortDirection) {
     SortDirection["None"] = "none";
@@ -9947,7 +10034,7 @@
               hovered: hovered === col.key
             }),
             "data-key": col.key
-          }, /*#__PURE__*/React__default["default"].createElement(LinearLoader, null));
+          }, /*#__PURE__*/React__default["default"].createElement(SkeletonLoader, null));
         }));
       });
       return /*#__PURE__*/React__default["default"].createElement(Tbody, null, placeholders);
@@ -10570,7 +10657,7 @@
       style: {
         display: imageLoaded ? "block" : "none"
       }
-    }, rest)), !imageLoaded && /*#__PURE__*/React__default["default"].createElement(LinearLoader, {
+    }, rest)), !imageLoaded && /*#__PURE__*/React__default["default"].createElement(SkeletonLoader, {
       "data-testid": "loader",
       style: {
         width: size,
@@ -18176,7 +18263,7 @@
       return /*#__PURE__*/React__default["default"].createElement(StyledCommandPaletteItemLoader, {
         "aria-busy": true,
         "aria-disabled": true
-      }, /*#__PURE__*/React__default["default"].createElement(_StyledLinearLoader, null), /*#__PURE__*/React__default["default"].createElement(_StyledLinearLoader2, {
+      }, /*#__PURE__*/React__default["default"].createElement(_StyledSkeletonLoader, null), /*#__PURE__*/React__default["default"].createElement(_StyledSkeletonLoader2, {
         $_css: generateRandomWidth()
       }));
     }
@@ -18199,16 +18286,16 @@
     }) : null));
   });
   CommandPaletteItem.displayName = "CommandPaletteItem";
-  var _StyledLinearLoader = styled__default["default"](LinearLoader).withConfig({
-    displayName: "CommandPaletteItem___StyledLinearLoader",
+  var _StyledSkeletonLoader = styled__default["default"](SkeletonLoader).withConfig({
+    displayName: "CommandPaletteItem___StyledSkeletonLoader",
     componentId: "sc-6tfj5q-0"
   })({
     width: 24,
     height: 24,
     borderRadius: "100%"
   });
-  var _StyledLinearLoader2 = styled__default["default"](LinearLoader).withConfig({
-    displayName: "CommandPaletteItem___StyledLinearLoader2",
+  var _StyledSkeletonLoader2 = styled__default["default"](SkeletonLoader).withConfig({
+    displayName: "CommandPaletteItem___StyledSkeletonLoader2",
     componentId: "sc-6tfj5q-1"
   })(function (p) {
     return {
@@ -18647,6 +18734,7 @@
   exports.LayerContext = LayerContext$1;
   exports.LayerContextConsumer = LayerContextConsumer;
   exports.LayerContextProvider = LayerContextProvider;
+  exports.LetterIcon = LetterIcon$1;
   exports.LinearLoader = LinearLoader;
   exports.Link = Link;
   exports.List = List;
@@ -18742,6 +18830,7 @@
   exports.Sheet = Sheet;
   exports.ShieldIcon = ShieldIcon$1;
   exports.Signifier = Signifier;
+  exports.SkeletonLoader = SkeletonLoader;
   exports.Slide = Slide;
   exports.SlideFromTop = SlideFromTop;
   exports.SlideLeftRightTransition = SlideLeftRightTransition;