@sproutsocial/seeds-react-list 0.3.40 → 0.4.0

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from '@sproutsocial/seeds-react-system-props';
 import { TypeIconName } from '@sproutsocial/seeds-react-icon';
 import { TypePaginationConfig } from '@sproutsocial/seeds-react-pagination';
 
 type TypeListElement = "ul" | "ol";
-interface TypeListProps extends TypeStyledComponentsCommonProps {
+interface TypeListProps extends Omit<React.HTMLAttributes<HTMLUListElement | HTMLOListElement>, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
     /** The HTML element to render as - either "ul" or "ol" */
     as?: TypeListElement;
     /** Array of elements to render as list items */
@@ -14,12 +14,23 @@ interface TypeListProps extends TypeStyledComponentsCommonProps {
     style?: React.CSSProperties;
 }
 
+/**
+ * List automatically routes between the Tailwind implementation (preferred)
+ * and the styled-components implementation (for consumers using system props
+ * or a styled() extension).
+ *
+ * @example
+ * <List as="ul">
+ *   <ListItem>First</ListItem>
+ *   <ListItem>Second</ListItem>
+ * </List>
+ */
 declare const List: {
-    ({ as, children, ...rest }: TypeListProps): react_jsx_runtime.JSX.Element;
+    (props: TypeListProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface TypeListItemProps extends TypeStyledComponentsCommonProps {
+interface TypeListItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
     /** If true, adds a border and padding around the list item which looks like a card or button */
     isBordered?: boolean;
     /** Children to display inside the list item */
@@ -27,7 +38,7 @@ interface TypeListItemProps extends TypeStyledComponentsCommonProps {
     /** Inline styles to apply to the list item element */
     style?: React.CSSProperties;
 }
-interface TypeListItemContentProps extends TypeStyledComponentsCommonProps {
+interface TypeListItemContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
     /** Main text displayed as SmallSubheadline */
     text: React.ReactNode;
     /** Details text displayed as Byline below the main text */
@@ -42,10 +53,20 @@ interface TypeListItemContentProps extends TypeStyledComponentsCommonProps {
     actions?: React.ReactNode;
 }
 
+/**
+ * ListItem automatically routes between the Tailwind implementation (preferred)
+ * and the styled-components implementation (for consumers using system props
+ * or a styled() extension).
+ */
 declare const ListItem: React.ForwardRefExoticComponent<Omit<TypeListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 
+/**
+ * ListItemContent automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
 declare const ListItemContent: {
-    ({ text, details, aside, iconName, iconLabel, actions, ...rest }: TypeListItemContentProps): react_jsx_runtime.JSX.Element;
+    (props: TypeListItemContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps } from '@sproutsocial/seeds-react-system-props';
 import { TypeIconName } from '@sproutsocial/seeds-react-icon';
 import { TypePaginationConfig } from '@sproutsocial/seeds-react-pagination';
 
 type TypeListElement = "ul" | "ol";
-interface TypeListProps extends TypeStyledComponentsCommonProps {
+interface TypeListProps extends Omit<React.HTMLAttributes<HTMLUListElement | HTMLOListElement>, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
     /** The HTML element to render as - either "ul" or "ol" */
     as?: TypeListElement;
     /** Array of elements to render as list items */
@@ -14,12 +14,23 @@ interface TypeListProps extends TypeStyledComponentsCommonProps {
     style?: React.CSSProperties;
 }
 
+/**
+ * List automatically routes between the Tailwind implementation (preferred)
+ * and the styled-components implementation (for consumers using system props
+ * or a styled() extension).
+ *
+ * @example
+ * <List as="ul">
+ *   <ListItem>First</ListItem>
+ *   <ListItem>Second</ListItem>
+ * </List>
+ */
 declare const List: {
-    ({ as, children, ...rest }: TypeListProps): react_jsx_runtime.JSX.Element;
+    (props: TypeListProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
-interface TypeListItemProps extends TypeStyledComponentsCommonProps {
+interface TypeListItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
     /** If true, adds a border and padding around the list item which looks like a card or button */
     isBordered?: boolean;
     /** Children to display inside the list item */
@@ -27,7 +38,7 @@ interface TypeListItemProps extends TypeStyledComponentsCommonProps {
     /** Inline styles to apply to the list item element */
     style?: React.CSSProperties;
 }
-interface TypeListItemContentProps extends TypeStyledComponentsCommonProps {
+interface TypeListItemContentProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">, TypeStyledComponentsCommonProps, TypeBorderSystemProps, TypeColorSystemProps, TypeFlexboxSystemProps, TypeGridSystemProps, TypeLayoutSystemProps, TypePositionSystemProps, TypeSpaceSystemProps, TypeTypographySystemProps {
     /** Main text displayed as SmallSubheadline */
     text: React.ReactNode;
     /** Details text displayed as Byline below the main text */
@@ -42,10 +53,20 @@ interface TypeListItemContentProps extends TypeStyledComponentsCommonProps {
     actions?: React.ReactNode;
 }
 
+/**
+ * ListItem automatically routes between the Tailwind implementation (preferred)
+ * and the styled-components implementation (for consumers using system props
+ * or a styled() extension).
+ */
 declare const ListItem: React.ForwardRefExoticComponent<Omit<TypeListItemProps, "ref"> & React.RefAttributes<HTMLLIElement>>;
 
+/**
+ * ListItemContent automatically routes between the Tailwind implementation
+ * (preferred) and the styled-components implementation (for consumers using
+ * system props or a styled() extension).
+ */
 declare const ListItemContent: {
-    ({ text, details, aside, iconName, iconLabel, actions, ...rest }: TypeListItemContentProps): react_jsx_runtime.JSX.Element;
+    (props: TypeListItemContentProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -39,6 +39,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/ListHybrid.tsx
+var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
+
 // src/styles.tsx
 var import_styled_components = __toESM(require("styled-components"));
 var Container = import_styled_components.default.ul`
@@ -48,21 +51,85 @@ var Container = import_styled_components.default.ul`
 `;
 var styles_default = Container;
 
-// src/List.tsx
+// src/ListStyled.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var List = ({ as = "ul", children, ...rest }) => {
+var ListStyled = ({ as = "ul", children, ...rest }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { as, ...rest, children });
 };
+ListStyled.displayName = "List";
+var ListStyled_default = ListStyled;
+
+// src/ListTailwind.tsx
+var React = require("react");
+
+// src/cn.ts
+function cn(...inputs) {
+  const classes = [];
+  for (const input of inputs) {
+    if (!input) continue;
+    if (typeof input === "string") {
+      classes.push(input);
+    } else if (typeof input === "object") {
+      for (const [key, value] of Object.entries(input)) {
+        if (value) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+  return classes.join(" ");
+}
+
+// src/ListTailwind.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ListTailwind = ({
+  as: Element = "ul",
+  children,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Element,
+    {
+      className: cn("seeds-list", className),
+      ...rest,
+      children
+    }
+  );
+};
+ListTailwind.displayName = "List";
+var ListTailwind_default = ListTailwind;
+
+// src/ListHybrid.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ListHybrid = (props) => {
+  if ((0, import_seeds_react_system_props.hasStyledProps)(props) || (0, import_seeds_react_system_props.isStyledExtension)(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ListStyled_default, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ListTailwind_default, { ...props });
+};
+ListHybrid.displayName = "List";
+var ListHybrid_default = ListHybrid;
+
+// src/List.tsx
+var List = ListHybrid_default;
 List.displayName = "List";
 var List_default = List;
 
 // src/ListItem.tsx
-var React = __toESM(require("react"));
+var React5 = __toESM(require("react"));
+
+// src/ListItemHybrid.tsx
+var React4 = __toESM(require("react"));
+var import_seeds_react_system_props2 = require("@sproutsocial/seeds-react-system-props");
+
+// src/ListItemStyled.tsx
+var React2 = __toESM(require("react"));
 var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ListItem = React.forwardRef(
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ListItemStyled = React2.forwardRef(
   ({ isBordered, children, ...rest }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_seeds_react_box.default,
       {
         as: "li",
@@ -80,16 +147,64 @@ var ListItem = React.forwardRef(
     );
   }
 );
+ListItemStyled.displayName = "ListItem";
+var ListItemStyled_default = ListItemStyled;
+
+// src/ListItemTailwind.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ListItemTailwind = React3.forwardRef(
+  ({ isBordered, children, className, ...rest }, ref) => {
+    const classes = cn(
+      "seeds-list-item",
+      { "seeds-list-item-bordered": !!isBordered },
+      className
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "li",
+      {
+        ref,
+        className: classes,
+        ...rest,
+        children
+      }
+    );
+  }
+);
+ListItemTailwind.displayName = "ListItem";
+var ListItemTailwind_default = ListItemTailwind;
+
+// src/ListItemHybrid.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ListItemHybrid = React4.forwardRef(
+  (props, ref) => {
+    if ((0, import_seeds_react_system_props2.hasStyledProps)(props) || (0, import_seeds_react_system_props2.isStyledExtension)(props)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListItemStyled_default, { ...props, ref });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ListItemTailwind_default, { ...props, ref });
+  }
+);
+ListItemHybrid.displayName = "ListItem";
+var ListItemHybrid_default = ListItemHybrid;
+
+// src/ListItem.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var ListItem = React5.forwardRef(
+  (props, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ListItemHybrid_default, { ...props, ref })
+);
 ListItem.displayName = "ListItem";
 var ListItem_default = ListItem;
 
-// src/ListItemContent.tsx
-var React2 = require("react");
+// src/ListItemContentHybrid.tsx
+var import_seeds_react_system_props3 = require("@sproutsocial/seeds-react-system-props");
+
+// src/ListItemContentStyled.tsx
+var React6 = require("react");
 var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_text = __toESM(require("@sproutsocial/seeds-react-text"));
 var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var ListItemContent = ({
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var ListItemContentStyled = ({
   text,
   details,
   aside,
@@ -98,7 +213,7 @@ var ListItemContent = ({
   actions,
   ...rest
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     import_seeds_react_box2.default,
     {
       display: "flex",
@@ -107,39 +222,94 @@ var ListItemContent = ({
       alignItems: "baseline",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box2.default, { display: "flex", flex: "1", children: [
-          iconName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon.Icon, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box2.default, { flex: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text.default.SmallSubHeadline, { as: "div", children: text }),
-            details && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text.default.Byline, { as: "div", mt: 200, children: details })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_seeds_react_box2.default, { display: "flex", flex: "1", children: [
+          iconName && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_icon.Icon, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_seeds_react_box2.default, { flex: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_text.default.SmallSubHeadline, { as: "div", children: text }),
+            details && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_text.default.Byline, { as: "div", mt: 200, children: details })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: [
-          aside && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text.default.Byline, { as: "div", children: aside }),
-          actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", children: actions })
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: [
+          aside && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_text.default.Byline, { as: "div", children: aside }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_seeds_react_box2.default, { display: "flex", alignItems: "center", children: actions })
         ] })
       ]
     }
   );
 };
+ListItemContentStyled.displayName = "ListItemContent";
+var ListItemContentStyled_default = ListItemContentStyled;
+
+// src/ListItemContentTailwind.tsx
+var React7 = require("react");
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var ListItemContentTailwind = ({
+  text,
+  details,
+  aside,
+  iconName,
+  iconLabel,
+  actions,
+  className,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "div",
+    {
+      className: cn("seeds-list-item-content", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "seeds-list-item-content-main", children: [
+          iconName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "seeds-list-item-content-icon", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_icon2.Icon, { name: iconName, size: "small", ariaLabel: iconLabel }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "seeds-list-item-content-text", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_text2.default.SmallSubHeadline, { as: "div", children: text }),
+            details && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_text2.default.Byline, { as: "div", className: "seeds-list-item-content-details", children: details })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "seeds-list-item-content-aside", children: [
+          aside && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_seeds_react_text2.default.Byline, { as: "div", children: aside }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "seeds-list-item-content-actions", children: actions })
+        ] })
+      ]
+    }
+  );
+};
+ListItemContentTailwind.displayName = "ListItemContent";
+var ListItemContentTailwind_default = ListItemContentTailwind;
+
+// src/ListItemContentHybrid.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ListItemContentHybrid = (props) => {
+  if ((0, import_seeds_react_system_props3.hasStyledProps)(props) || (0, import_seeds_react_system_props3.isStyledExtension)(props)) {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItemContentStyled_default, { ...props });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ListItemContentTailwind_default, { ...props });
+};
+ListItemContentHybrid.displayName = "ListItemContent";
+var ListItemContentHybrid_default = ListItemContentHybrid;
+
+// src/ListItemContent.tsx
+var ListItemContent = ListItemContentHybrid_default;
 ListItemContent.displayName = "ListItemContent";
 var ListItemContent_default = ListItemContent;
 
 // src/DataList.tsx
-var React4 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_react = require("react");
 
 // src/DataItemSkeleton.tsx
-var React3 = require("react");
+var React8 = require("react");
 var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_skeleton = __toESM(require("@sproutsocial/seeds-react-skeleton"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var DataItemSkeleton = ({
   hasIcon = false,
   hasAside = false,
   hasSubtext = false
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     import_seeds_react_box3.default,
     {
       display: "flex",
@@ -148,14 +318,14 @@ var DataItemSkeleton = ({
       alignItems: "flex-start",
       mb: 100,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box3.default, { display: "flex", flex: "1", children: [
-          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_box3.default, { mr: 300, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_skeleton.default, { width: 21, height: 21, borderRadius: "pill" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_seeds_react_box3.default, { flex: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_skeleton.default, { width: "80%", height: 21, borderRadius: "inner" }),
-            hasSubtext && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_skeleton.default, { width: "60%", height: 16, mt: 300, borderRadius: "inner" })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_seeds_react_box3.default, { display: "flex", flex: "1", children: [
+          hasIcon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_box3.default, { mr: 300, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_skeleton.default, { width: 21, height: 21, borderRadius: "pill" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_seeds_react_box3.default, { flex: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_skeleton.default, { width: "80%", height: 21, borderRadius: "inner" }),
+            hasSubtext && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_skeleton.default, { width: "60%", height: 16, mt: 300, borderRadius: "inner" })
           ] })
         ] }),
-        hasAside && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_box3.default, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_seeds_react_skeleton.default, { width: 60, height: 21, borderRadius: "inner" }) })
+        hasAside && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_box3.default, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_skeleton.default, { width: 60, height: 21, borderRadius: "inner" }) })
       ]
     }
   );
@@ -167,7 +337,7 @@ var DataItemSkeleton_default = DataItemSkeleton;
 var import_seeds_react_box4 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_styled_components2 = __toESM(require("styled-components"));
 var import_seeds_react_pagination = require("@sproutsocial/seeds-react-pagination");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var HeaderContent = (0, import_styled_components2.default)(import_seeds_react_box4.default)`
   width: 100%;
   transition: transform 0.4s ease-in-out;
@@ -199,7 +369,7 @@ var DataList = ({
   const pageSize = controlledPageSize ?? internalPageSize;
   const handlePageChange = onPageChange ?? setInternalPageIndex;
   const handlePageSizeChange = onPageSizeChange ?? setInternalPageSize;
-  const displayData = React4.useMemo(() => {
+  const displayData = React9.useMemo(() => {
     if (!paginationConfig) {
       return data;
     }
@@ -209,8 +379,8 @@ var DataList = ({
   }, [data, paginationConfig, currentPageIndex, pageSize]);
   const totalRows = totalItems !== void 0 ? totalItems : data.length;
   if (isLoading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      Header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      Header && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         HeaderContent,
         {
           style: {
@@ -224,11 +394,11 @@ var DataList = ({
           children: Header
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(List_default, { as, ...rest, children: loadingItems.map((index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListItem_default, { ...listItemProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(LoadingComponent, {}) }, index)) })
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(List_default, { as, ...rest, children: loadingItems.map((index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ListItem_default, { ...listItemProps, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoadingComponent, {}) }, index)) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-    Header && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    Header && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       HeaderContent,
       {
         style: {
@@ -242,8 +412,8 @@ var DataList = ({
         children: Header
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(List_default, { as, ...rest, children: displayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ListItem_default, { ...listItemProps, children: renderItem(item, index) }, index)) }),
-    paginationConfig && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(List_default, { as, ...rest, children: displayData.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ListItem_default, { ...listItemProps, children: renderItem(item, index) }, index)) }),
+    paginationConfig && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       import_seeds_react_pagination.Pagination,
       {
         paginationConfig,
@@ -260,13 +430,13 @@ DataList.displayName = "DataList";
 var DataList_default = DataList;
 
 // src/VirtualizedDataList.tsx
-var React5 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 var import_seeds_react_box5 = __toESM(require("@sproutsocial/seeds-react-box"));
 var import_seeds_react_loader = __toESM(require("@sproutsocial/seeds-react-loader"));
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_react_intersection_observer = require("react-intersection-observer");
 var import_styled_components3 = __toESM(require("styled-components"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var HeaderContent2 = (0, import_styled_components3.default)(import_seeds_react_box5.default)`
   width: 100%;
   transition: transform 0.4s ease-in-out;
@@ -286,7 +456,7 @@ var Experimental_VirtualizedDataList = ({
   ...rest
 }) => {
   const afterInView = (0, import_react_intersection_observer.useInView)();
-  const parentRef = React5.useRef(null);
+  const parentRef = React10.useRef(null);
   const count = data.length;
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count,
@@ -296,9 +466,9 @@ var Experimental_VirtualizedDataList = ({
   });
   const items = virtualizer.getVirtualItems();
   const offset = virtualizer.scrollOffset ?? 0;
-  const prevOffsetRef = React5.useRef(offset);
-  const [headerVisible, setHeaderVisible] = React5.useState(true);
-  React5.useEffect(() => {
+  const prevOffsetRef = React10.useRef(offset);
+  const [headerVisible, setHeaderVisible] = React10.useState(true);
+  React10.useEffect(() => {
     const prev = prevOffsetRef.current;
     const scrollingUp = offset < prev;
     prevOffsetRef.current = offset;
@@ -309,12 +479,12 @@ var Experimental_VirtualizedDataList = ({
     }
   }, [offset, removeHeaderDepth]);
   const transform = headerVisible ? "translateY(0px)" : `translateY(-${headerHeight}px)`;
-  React5.useEffect(() => {
+  React10.useEffect(() => {
     if (afterInView.inView) {
       onEndReached?.();
     }
   }, [onEndReached, afterInView.inView]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: parentRef,
@@ -326,7 +496,7 @@ var Experimental_VirtualizedDataList = ({
         contain: "strict"
       },
       children: [
-        Header && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        Header && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           HeaderContent2,
           {
             style: {
@@ -341,7 +511,7 @@ var Experimental_VirtualizedDataList = ({
             children: Header
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           List_default,
           {
             as,
@@ -351,7 +521,7 @@ var Experimental_VirtualizedDataList = ({
               position: "relative"
             },
             children: items.map((virtualRow) => {
-              return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 ListItem_default,
                 {
                   "data-index": virtualRow.index,
@@ -370,7 +540,7 @@ var Experimental_VirtualizedDataList = ({
             })
           }
         ),
-        hasNextPage && !isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: afterInView.ref, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_seeds_react_loader.default, { delay: false }) })
+        hasNextPage && !isFetchingNextPage && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: afterInView.ref, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_seeds_react_loader.default, { delay: false }) })
       ]
     }
   );
@@ -379,13 +549,13 @@ Experimental_VirtualizedDataList.displayName = "Experimental_VirtualizedDataList
 var VirtualizedDataList_default = Experimental_VirtualizedDataList;
 
 // src/ListTypes.ts
-var React6 = require("react");
+var React11 = require("react");
 
 // src/ListItemTypes.ts
-var React7 = require("react");
+var React12 = require("react");
 
 // src/DataListTypes.ts
-var React8 = require("react");
+var React13 = require("react");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   DataItemSkeleton,