@sproutsocial/seeds-react-list 0.0.2 → 0.1.0

package/dist/esm/index.js

@@ -1,8 +1,3 @@
-// src/List.tsx
-import "react";
-import { Children } from "react";
-import Box from "@sproutsocial/seeds-react-box";
-
 // src/styles.tsx
 import styled from "styled-components";
 var Container = styled.ul`
@@ -19,41 +14,43 @@ var styles_default = Container;
 // src/List.tsx
 import { jsx } from "react/jsx-runtime";
 var List = ({ as = "ul", children, ...rest }) => {
-  const listItems = Children.toArray(children);
-  return /* @__PURE__ */ jsx(styles_default, { as, ...rest, children: listItems.map((item, index) => /* @__PURE__ */ jsx(Box, { as: "li", mt: 300, children: item }, index)) });
+  return /* @__PURE__ */ jsx(styles_default, { as, ...rest, children });
 };
 List.displayName = "List";
 var List_default = List;
 
 // src/ListItem.tsx
-import "react";
-import Box2 from "@sproutsocial/seeds-react-box";
-import "@sproutsocial/seeds-react-text";
-import "@sproutsocial/seeds-react-icon";
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ListItem = ({ isBordered, children, ...rest }) => {
-  return /* @__PURE__ */ jsx2(
-    Box2,
-    {
-      borderRadius: "outer",
-      ...isBordered ? {
-        border: 500,
-        borderColor: "container.border.base",
-        p: 300
-      } : {},
-      ...rest,
-      children
-    }
-  );
-};
+var ListItem = React.forwardRef(
+  ({ isBordered, children, ...rest }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      Box,
+      {
+        as: "li",
+        ref,
+        borderRadius: "outer",
+        ...isBordered ? {
+          border: 500,
+          borderColor: "container.border.base",
+          p: 300
+        } : {},
+        mt: 300,
+        ...rest,
+        children
+      }
+    );
+  }
+);
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
 
 // src/ListItemContent.tsx
 import "react";
-import Box3 from "@sproutsocial/seeds-react-box";
-import Text2 from "@sproutsocial/seeds-react-text";
-import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import Box2 from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+import { Icon } from "@sproutsocial/seeds-react-icon";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var ListItemContent = ({
   text,
@@ -65,7 +62,7 @@ var ListItemContent = ({
   ...rest
 }) => {
   return /* @__PURE__ */ jsxs(
-    Box3,
+    Box2,
     {
       display: "flex",
       justifyContent: "space-between",
@@ -73,16 +70,16 @@ var ListItemContent = ({
       alignItems: "baseline",
       ...rest,
       children: [
-        /* @__PURE__ */ jsxs(Box3, { display: "flex", flex: "1", children: [
-          iconName && /* @__PURE__ */ jsx3(Icon2, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }),
-          /* @__PURE__ */ jsxs(Box3, { flex: "1", children: [
-            /* @__PURE__ */ jsx3(Text2.SmallSubHeadline, { as: "div", children: text }),
-            details && /* @__PURE__ */ jsx3(Text2.Byline, { as: "div", mt: 200, children: details })
+        /* @__PURE__ */ jsxs(Box2, { display: "flex", flex: "1", children: [
+          iconName && /* @__PURE__ */ jsx3(Icon, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }),
+          /* @__PURE__ */ jsxs(Box2, { flex: "1", children: [
+            /* @__PURE__ */ jsx3(Text.SmallSubHeadline, { as: "div", children: text }),
+            details && /* @__PURE__ */ jsx3(Text.Byline, { as: "div", mt: 200, children: details })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs(Box3, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: [
-          aside && /* @__PURE__ */ jsx3(Text2.Byline, { as: "div", children: aside }),
-          actions && /* @__PURE__ */ jsx3(Box3, { display: "flex", alignItems: "center", children: actions })
+        /* @__PURE__ */ jsxs(Box2, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: [
+          aside && /* @__PURE__ */ jsx3(Text.Byline, { as: "div", children: aside }),
+          actions && /* @__PURE__ */ jsx3(Box2, { display: "flex", alignItems: "center", children: actions })
         ] })
       ]
     }
@@ -91,12 +88,1030 @@ var ListItemContent = ({
 ListItemContent.displayName = "ListItemContent";
 var ListItemContent_default = ListItemContent;
 
+// src/DataList.tsx
+import "react";
+import { useRef } from "react";
+
+// src/DataItemSkeleton.tsx
+import "react";
+import Box4 from "@sproutsocial/seeds-react-box";
+
+// ../seeds-react-skeleton/dist/esm/index.js
+import styled2 from "styled-components";
+import Box3 from "@sproutsocial/seeds-react-box";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var SkeletonAttrs = ({ borderRadius, height, width }) => ({
+  className: borderRadius === "pill" && height === width ? "circular" : "linear"
+});
+var Skeleton = styled2(Box3).attrs(SkeletonAttrs)`
+  position: relative;
+  background: ${(props) => props.theme.colors.container.background.decorative.neutral};
+  overflow: hidden;
+  &.circular {
+    &:before {
+      position: absolute;
+      top: -25%;
+      left: -25%;
+      content: '';
+      background-image: ${(props) => `conic-gradient(
+      ${props.theme.colors.container.background.decorative.neutral} 270deg,
+      ${props.theme.colors.container.border.decorative.neutral} 300deg
+    );`};
+      height: 150%;
+      width: 150%;
+      animation: SkeletonRotate 2s infinite linear;
+    }
+    &:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      content: '';
+      height: calc(100% - 8px);
+      width: calc(100% - 8px);
+      background: ${(p) => p.theme.colors.app.background.base};
+      border-radius: 50%;
+    }
+  }
+  &.linear {
+    position: relative;
+    background-image: ${(props) => `linear-gradient(
+      288deg,
+      ${props.theme.colors.container.background.decorative.neutral} 32%,
+      ${props.theme.colors.container.border.decorative.neutral},
+      ${props.theme.colors.container.background.decorative.neutral} 68%
+    );`}
+    background-size: 400%;
+    background-repeat: no-repeat;
+    animation: SkeletonShimmer 2s linear infinite reverse;
+    overflow: hidden;
+    &:after {
+      position: absolute;
+      bottom: 0;
+      content: "";
+      height: calc(100% - 4px);
+      width: 100%;
+      background: ${(props) => props.theme.colors.container.background.decorative.neutral};
+      
+    }
+  }
+
+  @media (prefers-reduced-motion) {
+    &.linear,
+    &.circular::before {
+      animation: none;
+    }
+    &:before,
+    &:after {
+      display: none;
+    }
+    &.linear,
+    &.circular {
+      border: 1px solid ${(props) => props.theme.colors.container.border.decorative.neutral};
+      animation: SkeletonPulse 2s linear infinite alternate; 
+    }
+  }
+
+  @keyframes SkeletonRotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes SkeletonRotateFade {
+    50% {
+      transform: rotate(360deg);
+    }
+    90% {
+      opacity: 1;
+    }
+    100% {
+      transform: rotate(720deg);
+      opacity: 0;
+    }
+  }
+
+  @keyframes SkeletonShimmer {
+    0% {
+      background-position: 0% 0;
+    }
+    100% {
+      background-position: 100% 0;
+    }
+  }
+  @keyframes SkeletonPulse {
+    0% {
+      border-color: ${(props) => props.theme.colors.container.border.decorative.neutral}FF;
+    }
+    100% {
+      border-color: ${(props) => props.theme.colors.container.border.decorative.neutral}1A;
+    }
+  }
+`;
+var Skeleton_default = Skeleton;
+var index_default = Skeleton_default;
+
+// src/DataItemSkeleton.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var DataItemSkeleton = ({
+  hasIcon = false,
+  hasAside = false,
+  hasSubtext = false
+}) => {
+  return /* @__PURE__ */ jsxs2(
+    Box4,
+    {
+      display: "flex",
+      justifyContent: "space-between",
+      borderRadius: "outer",
+      alignItems: "flex-start",
+      mb: 100,
+      children: [
+        /* @__PURE__ */ jsxs2(Box4, { display: "flex", flex: "1", children: [
+          hasIcon && /* @__PURE__ */ jsx5(Box4, { mr: 300, flexShrink: 0, children: /* @__PURE__ */ jsx5(index_default, { width: 21, height: 21, borderRadius: "pill" }) }),
+          /* @__PURE__ */ jsxs2(Box4, { flex: "1", children: [
+            /* @__PURE__ */ jsx5(index_default, { width: "80%", height: 21, borderRadius: "inner" }),
+            hasSubtext && /* @__PURE__ */ jsx5(index_default, { width: "60%", height: 16, mt: 300, borderRadius: "inner" })
+          ] })
+        ] }),
+        hasAside && /* @__PURE__ */ jsx5(Box4, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: /* @__PURE__ */ jsx5(index_default, { width: 60, height: 21, borderRadius: "inner" }) })
+      ]
+    }
+  );
+};
+DataItemSkeleton.displayName = "DataItemSkeleton";
+var DataItemSkeleton_default = DataItemSkeleton;
+
+// src/DataList.tsx
+import Box5 from "@sproutsocial/seeds-react-box";
+import styled3 from "styled-components";
+import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var HeaderContent = styled3(Box5)`
+  width: 100%;
+  transition: transform 0.4s ease-in-out;
+`;
+var DataList = ({
+  as = "ul",
+  data,
+  renderItem,
+  isLoading,
+  LoadingComponent = DataItemSkeleton_default,
+  listItemProps = {},
+  estimateItemSize = 50,
+  Header,
+  ...rest
+}) => {
+  const containerRef = useRef(null);
+  const loadingItems = [0, 1, 2, 3, 4];
+  if (isLoading) {
+    return /* @__PURE__ */ jsxs3(Fragment, { children: [
+      Header && /* @__PURE__ */ jsx6(
+        HeaderContent,
+        {
+          style: {
+            position: "sticky",
+            top: 0,
+            left: 0,
+            width: "100%",
+            zIndex: 1
+          },
+          id: "header",
+          children: Header
+        }
+      ),
+      /* @__PURE__ */ jsx6(List_default, { as, ...rest, children: loadingItems.map((index) => /* @__PURE__ */ jsx6(ListItem_default, { ...listItemProps, children: /* @__PURE__ */ jsx6(LoadingComponent, {}) }, index)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    Header && /* @__PURE__ */ jsx6(
+      HeaderContent,
+      {
+        style: {
+          position: "sticky",
+          top: 0,
+          left: 0,
+          width: "100%",
+          zIndex: 1
+        },
+        id: "header",
+        children: Header
+      }
+    ),
+    /* @__PURE__ */ jsx6(List_default, { as, ...rest, children: data.map((item, index) => /* @__PURE__ */ jsx6(ListItem_default, { ...listItemProps, children: renderItem(item, index) }, index)) })
+  ] });
+};
+DataList.displayName = "DataList";
+var DataList_default = DataList;
+
+// src/VirtualizedDataList.tsx
+import * as React5 from "react";
+import Box6 from "@sproutsocial/seeds-react-box";
+
+// ../seeds-react-loader/dist/esm/index.js
+import "react";
+import styled4, { css as css2, keyframes } from "styled-components";
+import { COMMON } from "@sproutsocial/seeds-react-system-props";
+
+// ../../node_modules/@babel/runtime/helpers/esm/extends.js
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/setPrototypeOf.js
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(t2, e2) {
+    return t2.__proto__ = e2, t2;
+  }, _setPrototypeOf(t, e);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/inheritsLoose.js
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/getPrototypeOf.js
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function(t2) {
+    return t2.__proto__ || Object.getPrototypeOf(t2);
+  }, _getPrototypeOf(t);
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/isNativeFunction.js
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/isNativeReflectConstruct.js
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
+    }));
+  } catch (t2) {
+  }
+  return (_isNativeReflectConstruct = function _isNativeReflectConstruct2() {
+    return !!t;
+  })();
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/construct.js
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
+
+// ../../node_modules/@babel/runtime/helpers/esm/wrapNativeSuper.js
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? /* @__PURE__ */ new Map() : void 0;
+  return _wrapNativeSuper = function _wrapNativeSuper2(t2) {
+    if (null === t2 || !_isNativeFunction(t2)) return t2;
+    if ("function" != typeof t2) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t2)) return r.get(t2);
+      r.set(t2, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t2, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t2.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: false,
+        writable: true,
+        configurable: true
+      }
+    }), _setPrototypeOf(Wrapper, t2);
+  }, _wrapNativeSuper(t);
+}
+
+// ../../node_modules/polished/dist/polished.esm.js
+var ERRORS = {
+  "1": "Passed invalid arguments to hsl, please pass multiple numbers e.g. hsl(360, 0.75, 0.4) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75 }).\n\n",
+  "2": "Passed invalid arguments to hsla, please pass multiple numbers e.g. hsla(360, 0.75, 0.4, 0.7) or an object e.g. rgb({ hue: 255, saturation: 0.4, lightness: 0.75, alpha: 0.7 }).\n\n",
+  "3": "Passed an incorrect argument to a color function, please pass a string representation of a color.\n\n",
+  "4": "Couldn't generate valid rgb string from %s, it returned %s.\n\n",
+  "5": "Couldn't parse the color string. Please provide the color as a string in hex, rgb, rgba, hsl or hsla notation.\n\n",
+  "6": "Passed invalid arguments to rgb, please pass multiple numbers e.g. rgb(255, 205, 100) or an object e.g. rgb({ red: 255, green: 205, blue: 100 }).\n\n",
+  "7": "Passed invalid arguments to rgba, please pass multiple numbers e.g. rgb(255, 205, 100, 0.75) or an object e.g. rgb({ red: 255, green: 205, blue: 100, alpha: 0.75 }).\n\n",
+  "8": "Passed invalid argument to toColorString, please pass a RgbColor, RgbaColor, HslColor or HslaColor object.\n\n",
+  "9": "Please provide a number of steps to the modularScale helper.\n\n",
+  "10": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "11": 'Invalid value passed as base to modularScale, expected number or em string but got "%s"\n\n',
+  "12": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got "%s" instead.\n\n',
+  "13": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got "%s" instead.\n\n',
+  "14": 'Passed invalid pixel value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
+  "15": 'Passed invalid base value ("%s") to %s(), please pass a value like "12px" or 12.\n\n',
+  "16": "You must provide a template to this method.\n\n",
+  "17": "You passed an unsupported selector state to this method.\n\n",
+  "18": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "19": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "20": "expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "21": "expects the objects in the first argument array to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "22": "expects the first argument object to have the properties `prop`, `fromSize`, and `toSize`.\n\n",
+  "23": "fontFace expects a name of a font-family.\n\n",
+  "24": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "25": "fontFace expects localFonts to be an array.\n\n",
+  "26": "fontFace expects fileFormats to be an array.\n\n",
+  "27": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "28": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "29": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "30": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "31": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation\n\n",
+  "32": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s')\n\n",
+  "33": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation\n\n",
+  "34": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "35": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
+  "36": "Property must be a string value.\n\n",
+  "37": "Syntax Error at %s.\n\n",
+  "38": "Formula contains a function that needs parentheses at %s.\n\n",
+  "39": "Formula is missing closing parenthesis at %s.\n\n",
+  "40": "Formula has too many closing parentheses at %s.\n\n",
+  "41": "All values in a formula must have the same unit or be unitless.\n\n",
+  "42": "Please provide a number of steps to the modularScale helper.\n\n",
+  "43": "Please pass a number or one of the predefined scales to the modularScale helper as the ratio.\n\n",
+  "44": "Invalid value passed as base to modularScale, expected number or em/rem string but got %s.\n\n",
+  "45": "Passed invalid argument to hslToColorString, please pass a HslColor or HslaColor object.\n\n",
+  "46": "Passed invalid argument to rgbToColorString, please pass a RgbColor or RgbaColor object.\n\n",
+  "47": "minScreen and maxScreen must be provided as stringified numbers with the same units.\n\n",
+  "48": "fromSize and toSize must be provided as stringified numbers with the same units.\n\n",
+  "49": "Expects either an array of objects or a single object with the properties prop, fromSize, and toSize.\n\n",
+  "50": "Expects the objects in the first argument array to have the properties prop, fromSize, and toSize.\n\n",
+  "51": "Expects the first argument object to have the properties prop, fromSize, and toSize.\n\n",
+  "52": "fontFace expects either the path to the font file(s) or a name of a local copy.\n\n",
+  "53": "fontFace expects localFonts to be an array.\n\n",
+  "54": "fontFace expects fileFormats to be an array.\n\n",
+  "55": "fontFace expects a name of a font-family.\n\n",
+  "56": "linearGradient requries at least 2 color-stops to properly render.\n\n",
+  "57": "radialGradient requries at least 2 color-stops to properly render.\n\n",
+  "58": "Please supply a filename to retinaImage() as the first argument.\n\n",
+  "59": "Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.\n\n",
+  "60": "Passed an invalid value to `height` or `width`. Please provide a pixel based unit.\n\n",
+  "61": "Property must be a string value.\n\n",
+  "62": "borderRadius expects a radius value as a string or number as the second argument.\n\n",
+  "63": 'borderRadius expects one of "top", "bottom", "left" or "right" as the first argument.\n\n',
+  "64": "The animation shorthand only takes 8 arguments. See the specification for more information: http://mdn.io/animation.\n\n",
+  "65": "To pass multiple animations please supply them in arrays, e.g. animation(['rotate', '2s'], ['move', '1s'])\\nTo pass a single animation please supply them in simple values, e.g. animation('rotate', '2s').\n\n",
+  "66": "The animation shorthand arrays can only have 8 elements. See the specification for more information: http://mdn.io/animation.\n\n",
+  "67": "You must provide a template to this method.\n\n",
+  "68": "You passed an unsupported selector state to this method.\n\n",
+  "69": 'Expected a string ending in "px" or a number passed as the first argument to %s(), got %s instead.\n\n',
+  "70": 'Expected a string ending in "px" or a number passed as the second argument to %s(), got %s instead.\n\n',
+  "71": 'Passed invalid pixel value %s to %s(), please pass a value like "12px" or 12.\n\n',
+  "72": 'Passed invalid base value %s to %s(), please pass a value like "12px" or 12.\n\n',
+  "73": "Please provide a valid CSS variable.\n\n",
+  "74": "CSS variable not found.\n\n",
+  "75": "fromSize and toSize must be provided as stringified numbers with the same units as minScreen and maxScreen.\n"
+};
+function format() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+  var a = args[0];
+  var b = [];
+  var c;
+  for (c = 1; c < args.length; c += 1) {
+    b.push(args[c]);
+  }
+  b.forEach(function(d) {
+    a = a.replace(/%[a-z]/, d);
+  });
+  return a;
+}
+var PolishedError = /* @__PURE__ */ function(_Error) {
+  _inheritsLoose(PolishedError2, _Error);
+  function PolishedError2(code) {
+    var _this;
+    if (process.env.NODE_ENV === "production") {
+      _this = _Error.call(this, "An error occurred. See https://github.com/styled-components/polished/blob/main/src/internalHelpers/errors.md#" + code + " for more information.") || this;
+    } else {
+      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+        args[_key2 - 1] = arguments[_key2];
+      }
+      _this = _Error.call(this, format.apply(void 0, [ERRORS[code]].concat(args))) || this;
+    }
+    return _assertThisInitialized(_this);
+  }
+  return PolishedError2;
+}(/* @__PURE__ */ _wrapNativeSuper(Error));
+function colorToInt(color) {
+  return Math.round(color * 255);
+}
+function convertToInt(red, green, blue) {
+  return colorToInt(red) + "," + colorToInt(green) + "," + colorToInt(blue);
+}
+function hslToRgb(hue, saturation, lightness, convert) {
+  if (convert === void 0) {
+    convert = convertToInt;
+  }
+  if (saturation === 0) {
+    return convert(lightness, lightness, lightness);
+  }
+  var huePrime = (hue % 360 + 360) % 360 / 60;
+  var chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
+  var secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));
+  var red = 0;
+  var green = 0;
+  var blue = 0;
+  if (huePrime >= 0 && huePrime < 1) {
+    red = chroma;
+    green = secondComponent;
+  } else if (huePrime >= 1 && huePrime < 2) {
+    red = secondComponent;
+    green = chroma;
+  } else if (huePrime >= 2 && huePrime < 3) {
+    green = chroma;
+    blue = secondComponent;
+  } else if (huePrime >= 3 && huePrime < 4) {
+    green = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 4 && huePrime < 5) {
+    red = secondComponent;
+    blue = chroma;
+  } else if (huePrime >= 5 && huePrime < 6) {
+    red = chroma;
+    blue = secondComponent;
+  }
+  var lightnessModification = lightness - chroma / 2;
+  var finalRed = red + lightnessModification;
+  var finalGreen = green + lightnessModification;
+  var finalBlue = blue + lightnessModification;
+  return convert(finalRed, finalGreen, finalBlue);
+}
+var namedColorMap = {
+  aliceblue: "f0f8ff",
+  antiquewhite: "faebd7",
+  aqua: "00ffff",
+  aquamarine: "7fffd4",
+  azure: "f0ffff",
+  beige: "f5f5dc",
+  bisque: "ffe4c4",
+  black: "000",
+  blanchedalmond: "ffebcd",
+  blue: "0000ff",
+  blueviolet: "8a2be2",
+  brown: "a52a2a",
+  burlywood: "deb887",
+  cadetblue: "5f9ea0",
+  chartreuse: "7fff00",
+  chocolate: "d2691e",
+  coral: "ff7f50",
+  cornflowerblue: "6495ed",
+  cornsilk: "fff8dc",
+  crimson: "dc143c",
+  cyan: "00ffff",
+  darkblue: "00008b",
+  darkcyan: "008b8b",
+  darkgoldenrod: "b8860b",
+  darkgray: "a9a9a9",
+  darkgreen: "006400",
+  darkgrey: "a9a9a9",
+  darkkhaki: "bdb76b",
+  darkmagenta: "8b008b",
+  darkolivegreen: "556b2f",
+  darkorange: "ff8c00",
+  darkorchid: "9932cc",
+  darkred: "8b0000",
+  darksalmon: "e9967a",
+  darkseagreen: "8fbc8f",
+  darkslateblue: "483d8b",
+  darkslategray: "2f4f4f",
+  darkslategrey: "2f4f4f",
+  darkturquoise: "00ced1",
+  darkviolet: "9400d3",
+  deeppink: "ff1493",
+  deepskyblue: "00bfff",
+  dimgray: "696969",
+  dimgrey: "696969",
+  dodgerblue: "1e90ff",
+  firebrick: "b22222",
+  floralwhite: "fffaf0",
+  forestgreen: "228b22",
+  fuchsia: "ff00ff",
+  gainsboro: "dcdcdc",
+  ghostwhite: "f8f8ff",
+  gold: "ffd700",
+  goldenrod: "daa520",
+  gray: "808080",
+  green: "008000",
+  greenyellow: "adff2f",
+  grey: "808080",
+  honeydew: "f0fff0",
+  hotpink: "ff69b4",
+  indianred: "cd5c5c",
+  indigo: "4b0082",
+  ivory: "fffff0",
+  khaki: "f0e68c",
+  lavender: "e6e6fa",
+  lavenderblush: "fff0f5",
+  lawngreen: "7cfc00",
+  lemonchiffon: "fffacd",
+  lightblue: "add8e6",
+  lightcoral: "f08080",
+  lightcyan: "e0ffff",
+  lightgoldenrodyellow: "fafad2",
+  lightgray: "d3d3d3",
+  lightgreen: "90ee90",
+  lightgrey: "d3d3d3",
+  lightpink: "ffb6c1",
+  lightsalmon: "ffa07a",
+  lightseagreen: "20b2aa",
+  lightskyblue: "87cefa",
+  lightslategray: "789",
+  lightslategrey: "789",
+  lightsteelblue: "b0c4de",
+  lightyellow: "ffffe0",
+  lime: "0f0",
+  limegreen: "32cd32",
+  linen: "faf0e6",
+  magenta: "f0f",
+  maroon: "800000",
+  mediumaquamarine: "66cdaa",
+  mediumblue: "0000cd",
+  mediumorchid: "ba55d3",
+  mediumpurple: "9370db",
+  mediumseagreen: "3cb371",
+  mediumslateblue: "7b68ee",
+  mediumspringgreen: "00fa9a",
+  mediumturquoise: "48d1cc",
+  mediumvioletred: "c71585",
+  midnightblue: "191970",
+  mintcream: "f5fffa",
+  mistyrose: "ffe4e1",
+  moccasin: "ffe4b5",
+  navajowhite: "ffdead",
+  navy: "000080",
+  oldlace: "fdf5e6",
+  olive: "808000",
+  olivedrab: "6b8e23",
+  orange: "ffa500",
+  orangered: "ff4500",
+  orchid: "da70d6",
+  palegoldenrod: "eee8aa",
+  palegreen: "98fb98",
+  paleturquoise: "afeeee",
+  palevioletred: "db7093",
+  papayawhip: "ffefd5",
+  peachpuff: "ffdab9",
+  peru: "cd853f",
+  pink: "ffc0cb",
+  plum: "dda0dd",
+  powderblue: "b0e0e6",
+  purple: "800080",
+  rebeccapurple: "639",
+  red: "f00",
+  rosybrown: "bc8f8f",
+  royalblue: "4169e1",
+  saddlebrown: "8b4513",
+  salmon: "fa8072",
+  sandybrown: "f4a460",
+  seagreen: "2e8b57",
+  seashell: "fff5ee",
+  sienna: "a0522d",
+  silver: "c0c0c0",
+  skyblue: "87ceeb",
+  slateblue: "6a5acd",
+  slategray: "708090",
+  slategrey: "708090",
+  snow: "fffafa",
+  springgreen: "00ff7f",
+  steelblue: "4682b4",
+  tan: "d2b48c",
+  teal: "008080",
+  thistle: "d8bfd8",
+  tomato: "ff6347",
+  turquoise: "40e0d0",
+  violet: "ee82ee",
+  wheat: "f5deb3",
+  white: "fff",
+  whitesmoke: "f5f5f5",
+  yellow: "ff0",
+  yellowgreen: "9acd32"
+};
+function nameToHex(color) {
+  if (typeof color !== "string") return color;
+  var normalizedColorName = color.toLowerCase();
+  return namedColorMap[normalizedColorName] ? "#" + namedColorMap[normalizedColorName] : color;
+}
+var hexRegex = /^#[a-fA-F0-9]{6}$/;
+var hexRgbaRegex = /^#[a-fA-F0-9]{8}$/;
+var reducedHexRegex = /^#[a-fA-F0-9]{3}$/;
+var reducedRgbaHexRegex = /^#[a-fA-F0-9]{4}$/;
+var rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+var rgbaRegex = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+var hslRegex = /^hsl\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*\)$/i;
+var hslaRegex = /^hsla\(\s*(\d{0,3}[.]?[0-9]+)\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*(\d{1,3}[.]?[0-9]?)%\s*,\s*([-+]?[0-9]*[.]?[0-9]+)\s*\)$/i;
+function parseToRgb(color) {
+  if (typeof color !== "string") {
+    throw new PolishedError(3);
+  }
+  var normalizedColor = nameToHex(color);
+  if (normalizedColor.match(hexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16)
+    };
+  }
+  if (normalizedColor.match(hexRgbaRegex)) {
+    var alpha = parseFloat((parseInt("" + normalizedColor[7] + normalizedColor[8], 16) / 255).toFixed(2));
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[2], 16),
+      green: parseInt("" + normalizedColor[3] + normalizedColor[4], 16),
+      blue: parseInt("" + normalizedColor[5] + normalizedColor[6], 16),
+      alpha
+    };
+  }
+  if (normalizedColor.match(reducedHexRegex)) {
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16)
+    };
+  }
+  if (normalizedColor.match(reducedRgbaHexRegex)) {
+    var _alpha = parseFloat((parseInt("" + normalizedColor[4] + normalizedColor[4], 16) / 255).toFixed(2));
+    return {
+      red: parseInt("" + normalizedColor[1] + normalizedColor[1], 16),
+      green: parseInt("" + normalizedColor[2] + normalizedColor[2], 16),
+      blue: parseInt("" + normalizedColor[3] + normalizedColor[3], 16),
+      alpha: _alpha
+    };
+  }
+  var rgbMatched = rgbRegex.exec(normalizedColor);
+  if (rgbMatched) {
+    return {
+      red: parseInt("" + rgbMatched[1], 10),
+      green: parseInt("" + rgbMatched[2], 10),
+      blue: parseInt("" + rgbMatched[3], 10)
+    };
+  }
+  var rgbaMatched = rgbaRegex.exec(normalizedColor.substring(0, 50));
+  if (rgbaMatched) {
+    return {
+      red: parseInt("" + rgbaMatched[1], 10),
+      green: parseInt("" + rgbaMatched[2], 10),
+      blue: parseInt("" + rgbaMatched[3], 10),
+      alpha: parseFloat("" + rgbaMatched[4])
+    };
+  }
+  var hslMatched = hslRegex.exec(normalizedColor);
+  if (hslMatched) {
+    var hue = parseInt("" + hslMatched[1], 10);
+    var saturation = parseInt("" + hslMatched[2], 10) / 100;
+    var lightness = parseInt("" + hslMatched[3], 10) / 100;
+    var rgbColorString = "rgb(" + hslToRgb(hue, saturation, lightness) + ")";
+    var hslRgbMatched = rgbRegex.exec(rgbColorString);
+    if (!hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, rgbColorString);
+    }
+    return {
+      red: parseInt("" + hslRgbMatched[1], 10),
+      green: parseInt("" + hslRgbMatched[2], 10),
+      blue: parseInt("" + hslRgbMatched[3], 10)
+    };
+  }
+  var hslaMatched = hslaRegex.exec(normalizedColor.substring(0, 50));
+  if (hslaMatched) {
+    var _hue = parseInt("" + hslaMatched[1], 10);
+    var _saturation = parseInt("" + hslaMatched[2], 10) / 100;
+    var _lightness = parseInt("" + hslaMatched[3], 10) / 100;
+    var _rgbColorString = "rgb(" + hslToRgb(_hue, _saturation, _lightness) + ")";
+    var _hslRgbMatched = rgbRegex.exec(_rgbColorString);
+    if (!_hslRgbMatched) {
+      throw new PolishedError(4, normalizedColor, _rgbColorString);
+    }
+    return {
+      red: parseInt("" + _hslRgbMatched[1], 10),
+      green: parseInt("" + _hslRgbMatched[2], 10),
+      blue: parseInt("" + _hslRgbMatched[3], 10),
+      alpha: parseFloat("" + hslaMatched[4])
+    };
+  }
+  throw new PolishedError(5);
+}
+var reduceHexValue = function reduceHexValue2(value) {
+  if (value.length === 7 && value[1] === value[2] && value[3] === value[4] && value[5] === value[6]) {
+    return "#" + value[1] + value[3] + value[5];
+  }
+  return value;
+};
+function numberToHex(value) {
+  var hex = value.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+function rgb(value, green, blue) {
+  if (typeof value === "number" && typeof green === "number" && typeof blue === "number") {
+    return reduceHexValue("#" + numberToHex(value) + numberToHex(green) + numberToHex(blue));
+  } else if (typeof value === "object" && green === void 0 && blue === void 0) {
+    return reduceHexValue("#" + numberToHex(value.red) + numberToHex(value.green) + numberToHex(value.blue));
+  }
+  throw new PolishedError(6);
+}
+function rgba(firstValue, secondValue, thirdValue, fourthValue) {
+  if (typeof firstValue === "string" && typeof secondValue === "number") {
+    var rgbValue = parseToRgb(firstValue);
+    return "rgba(" + rgbValue.red + "," + rgbValue.green + "," + rgbValue.blue + "," + secondValue + ")";
+  } else if (typeof firstValue === "number" && typeof secondValue === "number" && typeof thirdValue === "number" && typeof fourthValue === "number") {
+    return fourthValue >= 1 ? rgb(firstValue, secondValue, thirdValue) : "rgba(" + firstValue + "," + secondValue + "," + thirdValue + "," + fourthValue + ")";
+  } else if (typeof firstValue === "object" && secondValue === void 0 && thirdValue === void 0 && fourthValue === void 0) {
+    return firstValue.alpha >= 1 ? rgb(firstValue.red, firstValue.green, firstValue.blue) : "rgba(" + firstValue.red + "," + firstValue.green + "," + firstValue.blue + "," + firstValue.alpha + ")";
+  }
+  throw new PolishedError(7);
+}
+function curried(f, length, acc) {
+  return function fn() {
+    var combined = acc.concat(Array.prototype.slice.call(arguments));
+    return combined.length >= length ? f.apply(this, combined) : curried(f, length, combined);
+  };
+}
+function curry(f) {
+  return curried(f, f.length, []);
+}
+function guard(lowerBoundary, upperBoundary, value) {
+  return Math.max(lowerBoundary, Math.min(upperBoundary, value));
+}
+function transparentize(amount, color) {
+  if (color === "transparent") return color;
+  var parsedColor = parseToRgb(color);
+  var alpha = typeof parsedColor.alpha === "number" ? parsedColor.alpha : 1;
+  var colorWithAlpha = _extends({}, parsedColor, {
+    alpha: guard(0, 1, +(alpha * 100 - parseFloat(amount) * 100).toFixed(2) / 100)
+  });
+  return rgba(colorWithAlpha);
+}
+var curriedTransparentize = /* @__PURE__ */ curry(transparentize);
+
+// ../seeds-react-mixins/dist/esm/index.js
+import { css } from "styled-components";
+import { theme } from "@sproutsocial/seeds-react-theme";
+var visuallyHidden = css`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  border: 0;
+`;
+var focusRing = css`
+  box-shadow: 0 0 0 1px ${theme.colors.button.primary.background.base},
+    0 0px 0px 4px
+      ${curriedTransparentize(0.7, theme.colors.button.primary.background.base)};
+  outline: none;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+`;
+var pill = css`
+  min-width: ${theme.space[600]};
+  min-height: ${theme.space[600]};
+  padding: ${theme.space[300]};
+  border-radius: ${theme.radii.pill};
+`;
+var disabled = css`
+  opacity: 0.4;
+  pointer-events: none;
+`;
+
+// ../seeds-react-loader/dist/esm/index.js
+import { jsx as jsx7 } from "react/jsx-runtime";
+var getSize = (size) => {
+  const spinnerSize = Math.round(size * 1);
+  const borderWidth = Math.round(size * 0.1);
+  return css2`
+    width: ${size}px;
+    height: ${size}px;
+    box-shadow: ${({ theme: theme2 }) => `0 0 0 2px ${theme2.colors.neutral[600]}, 
+      inset 0 0 0 ${borderWidth + 2}px ${theme2.colors.neutral[600]}`};
+
+    &:after {
+      width: ${spinnerSize}px;
+      height: ${spinnerSize}px;
+      box-sizing: border-box;
+      border-width: ${borderWidth}px;
+    }
+
+    .no-cssanimations &::after {
+      background-size: ${spinnerSize}px;
+    }
+  `;
+};
+var spin = keyframes`
+  from {
+    transform: translate(-50%,-50%) rotate(0deg);
+  }
+  to {
+    transform: translate(-50%,-50%) rotate(360deg);
+  }
+`;
+var delayAnimation = keyframes`
+  0% {
+    opacity: 0;
+  }
+  80% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`;
+var Container3 = styled4.div.attrs({
+  className: "Loader"
+})`
+  position: relative;
+  margin: 0 auto;
+  padding: 0;
+  overflow: hidden;
+  border-radius: 100%;
+
+  animation: ${(props) => props.delay ? css2`
+          ${delayAnimation} 2s 1;
+        ` : "none"};
+
+  &:after {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    background: transparent;
+    border-style: solid;
+    border-radius: 100%;
+    content: "";
+    transition: opacity 250ms;
+    border-color: ${({ theme: theme2 }) => `${theme2.colors.neutral[0]} ${theme2.colors.neutral[0]} ${theme2.colors.neutral[600]} ${theme2.colors.neutral[600]}`};
+
+    animation: ${(props) => props.delay ? css2`
+            ${spin} 2.25s infinite linear, ${delayAnimation} 2s 1
+          ` : css2`
+            ${spin} 2.25s infinite linear
+          `};
+  }
+
+  ${(props) => props.small ? getSize(20) : getSize(40)}
+  ${COMMON}
+`;
+var Text2 = styled4.div`
+  ${visuallyHidden}
+`;
+var styles_default2 = Container3;
+var Loader = ({
+  size = "large",
+  text = "",
+  delay = true,
+  color = "dark",
+  qa,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx7(
+    styles_default2,
+    {
+      small: size === "small",
+      dark: color === "dark",
+      delay,
+      "data-qa-loader": "",
+      ...qa,
+      ...rest,
+      children: /* @__PURE__ */ jsx7(Text2, { children: text || "Loading" })
+    }
+  );
+};
+var Loader_default = Loader;
+var index_default2 = Loader_default;
+
+// src/VirtualizedDataList.tsx
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useInView } from "react-intersection-observer";
+import styled5 from "styled-components";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var HeaderContent2 = styled5(Box6)`
+  width: 100%;
+  transition: transform 0.4s ease-in-out;
+  background-color: red;
+`;
+var Experimental_VirtualizedDataList = ({
+  as = "ul",
+  data,
+  renderItem,
+  estimateItemSize = 50,
+  onEndReached,
+  hasNextPage,
+  isFetchingNextPage,
+  Header,
+  removeHeaderDepth = 500,
+  headerHeight = 60,
+  ...rest
+}) => {
+  const afterInView = useInView();
+  const parentRef = React5.useRef(null);
+  const count = data.length;
+  const virtualizer = useVirtualizer({
+    count,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => estimateItemSize,
+    overscan: 5
+  });
+  const items = virtualizer.getVirtualItems();
+  const offset = virtualizer.scrollOffset;
+  const transform = offset && offset > removeHeaderDepth ? `translateY(-${headerHeight}px)` : "translateY(0px)";
+  React5.useEffect(() => {
+    if (afterInView.inView) {
+      onEndReached?.();
+    }
+  }, [onEndReached, afterInView.inView]);
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: parentRef,
+      className: "List",
+      style: {
+        width: "100%",
+        height: "100%",
+        overflowY: "auto",
+        contain: "strict"
+      },
+      children: [
+        Header && /* @__PURE__ */ jsx8(
+          HeaderContent2,
+          {
+            style: {
+              position: "sticky",
+              transform,
+              top: 0,
+              left: 0,
+              width: "100%",
+              zIndex: 1
+            },
+            id: "header",
+            children: Header
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          List_default,
+          {
+            as,
+            style: {
+              height: `${virtualizer.getTotalSize()}px`,
+              width: "100%",
+              position: "relative"
+            },
+            children: items.map((virtualRow) => {
+              return /* @__PURE__ */ jsx8(
+                ListItem_default,
+                {
+                  "data-index": virtualRow.index,
+                  ref: virtualizer.measureElement,
+                  style: {
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    transform: `translateY(${virtualRow.start - virtualizer.options.scrollMargin}px)`
+                  },
+                  children: renderItem(data[virtualRow.index])
+                },
+                virtualRow.key
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx8("div", { ref: afterInView.ref, children: /* @__PURE__ */ jsx8(index_default2, { delay: false }) })
+      ]
+    }
+  );
+};
+Experimental_VirtualizedDataList.displayName = "Experimental_VirtualizedDataList";
+var VirtualizedDataList_default = Experimental_VirtualizedDataList;
+
 // src/ListTypes.ts
 import "react";
 
 // src/ListItemTypes.ts
 import "react";
+
+// src/DataListTypes.ts
+import "react";
 export {
+  DataItemSkeleton_default as DataItemSkeleton,
+  DataList_default as DataList,
+  VirtualizedDataList_default as Experimental_VirtualizedDataList,
   List_default as List,
   ListItem_default as ListItem,
   ListItemContent_default as ListItemContent