@sproutsocial/seeds-react-list 0.0.1

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+yarn run v1.22.22
+$ tsup --dts
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.0
+CLI Using tsup config: /home/runner/work/seeds/seeds/seeds-react/seeds-react-list/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     5.48 KB
+CJS dist/index.js.map 6.82 KB
+CJS ⚡️ Build success in 136ms
+ESM dist/esm/index.js     2.94 KB
+ESM dist/esm/index.js.map 6.31 KB
+ESM ⚡️ Build success in 129ms
+DTS Build start
+DTS ⚡️ Build success in 14352ms
+DTS dist/index.d.ts  2.00 KB
+DTS dist/index.d.mts 2.00 KB
+Done in 17.89s.

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @sproutsocial/seeds-react-list
+
+## 0.0.1
+
+### Patch Changes
+
+- 9234e88: Correct list dependency versions
+- ca88301: initial implementation of list
+- Updated dependencies [fa7579a]
+  - @sproutsocial/seeds-react-theme@3.2.1
+  - @sproutsocial/seeds-react-box@1.1.7
+  - @sproutsocial/seeds-react-icon@2.0.1
+  - @sproutsocial/seeds-react-button@1.3.6

package/dist/esm/index.js

@@ -0,0 +1,104 @@
+// 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`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  > li:first-child {
+    margin-top: 0;
+  }
+`;
+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)) });
+};
+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 { 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
+    }
+  );
+};
+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 { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ListItemContent = ({
+  text,
+  details,
+  aside,
+  iconName,
+  iconLabel,
+  actions,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Box3,
+    {
+      display: "flex",
+      justifyContent: "space-between",
+      borderRadius: "outer",
+      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(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 })
+        ] })
+      ]
+    }
+  );
+};
+ListItemContent.displayName = "ListItemContent";
+var ListItemContent_default = ListItemContent;
+
+// src/ListTypes.ts
+import "react";
+
+// src/ListItemTypes.ts
+import "react";
+export {
+  List_default as List,
+  ListItem_default as ListItem,
+  ListItemContent_default as ListItemContent
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/List.tsx","../../src/styles.tsx","../../src/ListItem.tsx","../../src/ListItemContent.tsx","../../src/ListTypes.ts","../../src/ListItemTypes.ts"],"sourcesContent":["import * as React from \"react\";\nimport { Children } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Container from \"./styles\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst List = ({ as = \"ul\", children, ...rest }: TypeListProps) => {\n  const listItems = Children.toArray(children);\n\n  return (\n    <Container as={as} {...rest}>\n      {listItems.map((item, index) => (\n        <Box as=\"li\" key={index} mt={300}>\n          {item}\n        </Box>\n      ))}\n    </Container>\n  );\n};\n\nList.displayName = \"List\";\n\nexport default List;\n","import styled from \"styled-components\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst Container = styled.ul<TypeListProps>`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  > li:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\n\nconst ListItem = ({ isBordered, children, ...rest }: TypeListItemProps) => {\n  return (\n    <Box\n      borderRadius=\"outer\"\n      {...(isBordered\n        ? {\n            border: 500,\n            borderColor: \"container.border.base\",\n            p: 300,\n          }\n        : {})}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = \"ListItem\";\n\nexport default ListItem;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeListItemContentProps } from \"./ListItemTypes\";\n\nconst ListItemContent = ({\n  text,\n  details,\n  aside,\n  iconName,\n  iconLabel,\n  actions,\n  ...rest\n}: TypeListItemContentProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      justifyContent=\"space-between\"\n      borderRadius=\"outer\"\n      alignItems=\"baseline\"\n      {...rest}\n    >\n      <Box display=\"flex\" flex=\"1\">\n        {iconName && (\n          <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\n        )}\n        <Box flex=\"1\">\n          <Text.SmallSubHeadline as=\"div\">{text}</Text.SmallSubHeadline>\n          {details && (\n            <Text.Byline as=\"div\" mt={200}>\n              {details}\n            </Text.Byline>\n          )}\n        </Box>\n      </Box>\n      <Box display=\"flex\" alignItems=\"center\" gap={300} flexShrink={0}>\n        {aside && <Text.Byline as=\"div\">{aside}</Text.Byline>}\n        {actions && (\n          <Box display=\"flex\" alignItems=\"center\">\n            {actions}\n          </Box>\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nListItemContent.displayName = \"ListItemContent\";\n\nexport default ListItemContent;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeListElement = \"ul\" | \"ol\";\n\nexport interface TypeListProps extends TypeStyledComponentsCommonProps {\n  /** The HTML element to render as - either \"ul\" or \"ol\" */\n  as?: TypeListElement;\n  /** Array of elements to render as list items */\n  children: React.ReactNode;\n}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\n\nexport interface TypeListItemProps extends TypeStyledComponentsCommonProps {\n  /** If true, adds a border and padding around the list item which looks like a card or button */\n  isBordered?: boolean;\n  /** Children to display inside the list item */\n  children: React.ReactNode;\n}\n\nexport interface TypeListItemContentProps\n  extends TypeStyledComponentsCommonProps {\n  /** Main text displayed as SmallSubheadline */\n  text: React.ReactNode;\n  /** Details text displayed as Byline below the main text */\n  details?: React.ReactNode;\n  /** Aside text displayed as Byline on the right side */\n  aside?: React.ReactNode;\n  /** Optional icon name to display on the left */\n  iconName?: TypeIconName;\n  /** Label used to describe the icon if not used with an accompanying visual label */\n  iconLabel?: string;\n  /** Actions to display on the right side (e.g., buttons, menus) */\n  actions?: React.ReactNode;\n}\n"],"mappings":";AAAA,OAAuB;AACvB,SAAS,gBAAgB;AACzB,OAAO,SAAS;;;ACFhB,OAAO,YAAY;AAGnB,IAAM,YAAY,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,IAAO,iBAAQ;;;ADDP;AANR,IAAM,OAAO,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,KAAK,MAAqB;AAChE,QAAM,YAAY,SAAS,QAAQ,QAAQ;AAE3C,SACE,oBAAC,kBAAU,IAAS,GAAG,MACpB,oBAAU,IAAI,CAAC,MAAM,UACpB,oBAAC,OAAI,IAAG,MAAiB,IAAI,KAC1B,kBADe,KAElB,CACD,GACH;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;AEtBf,OAAuB;AACvB,OAAOA,UAAS;AAChB,OAAiB;AACjB,OAAqB;AAKjB,gBAAAC,YAAA;AAFJ,IAAM,WAAW,CAAC,EAAE,YAAY,UAAU,GAAG,KAAK,MAAyB;AACzE,SACE,gBAAAA;AAAA,IAACD;AAAA,IAAA;AAAA,MACC,cAAa;AAAA,MACZ,GAAI,aACD;AAAA,QACE,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,GAAG;AAAA,MACL,IACA,CAAC;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;;;AC1Bf,OAAuB;AACvB,OAAOE,UAAS;AAChB,OAAOC,WAAU;AACjB,SAAS,QAAAC,aAAY;AAsBX,gBAAAC,MAEF,YAFE;AAnBV,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,SACE;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,6BAACA,MAAA,EAAI,SAAQ,QAAO,MAAK,KACtB;AAAA,sBACC,gBAAAG,KAACD,OAAA,EAAK,IAAI,KAAK,MAAM,UAAU,MAAK,SAAQ,WAAW,WAAW;AAAA,UAEpE,qBAACF,MAAA,EAAI,MAAK,KACR;AAAA,4BAAAG,KAACF,MAAK,kBAAL,EAAsB,IAAG,OAAO,gBAAK;AAAA,YACrC,WACC,gBAAAE,KAACF,MAAK,QAAL,EAAY,IAAG,OAAM,IAAI,KACvB,mBACH;AAAA,aAEJ;AAAA,WACF;AAAA,QACA,qBAACD,MAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,KAAK,YAAY,GAC3D;AAAA,mBAAS,gBAAAG,KAACF,MAAK,QAAL,EAAY,IAAG,OAAO,iBAAM;AAAA,UACtC,WACC,gBAAAE,KAACH,MAAA,EAAI,SAAQ,QAAO,YAAW,UAC5B,mBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;AClDf,OAAuB;;;ACAvB,OAAuB;","names":["Box","jsx","Box","Text","Icon","jsx"]}

package/dist/index.d.mts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+
+type TypeListElement = "ul" | "ol";
+interface TypeListProps extends TypeStyledComponentsCommonProps {
+    /** The HTML element to render as - either "ul" or "ol" */
+    as?: TypeListElement;
+    /** Array of elements to render as list items */
+    children: React.ReactNode;
+}
+
+declare const List: {
+    ({ as, children, ...rest }: TypeListProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TypeListItemProps extends TypeStyledComponentsCommonProps {
+    /** 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 */
+    children: React.ReactNode;
+}
+interface TypeListItemContentProps extends TypeStyledComponentsCommonProps {
+    /** Main text displayed as SmallSubheadline */
+    text: React.ReactNode;
+    /** Details text displayed as Byline below the main text */
+    details?: React.ReactNode;
+    /** Aside text displayed as Byline on the right side */
+    aside?: React.ReactNode;
+    /** Optional icon name to display on the left */
+    iconName?: TypeIconName;
+    /** Label used to describe the icon if not used with an accompanying visual label */
+    iconLabel?: string;
+    /** Actions to display on the right side (e.g., buttons, menus) */
+    actions?: React.ReactNode;
+}
+
+declare const ListItem: {
+    ({ isBordered, children, ...rest }: TypeListItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ListItemContent: {
+    ({ text, details, aside, iconName, iconLabel, actions, ...rest }: TypeListItemContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { List, ListItem, ListItemContent, type TypeListElement, type TypeListItemContentProps, type TypeListItemProps, type TypeListProps };

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { TypeStyledComponentsCommonProps } from '@sproutsocial/seeds-react-system-props';
+import { TypeIconName } from '@sproutsocial/seeds-react-icon';
+
+type TypeListElement = "ul" | "ol";
+interface TypeListProps extends TypeStyledComponentsCommonProps {
+    /** The HTML element to render as - either "ul" or "ol" */
+    as?: TypeListElement;
+    /** Array of elements to render as list items */
+    children: React.ReactNode;
+}
+
+declare const List: {
+    ({ as, children, ...rest }: TypeListProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface TypeListItemProps extends TypeStyledComponentsCommonProps {
+    /** 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 */
+    children: React.ReactNode;
+}
+interface TypeListItemContentProps extends TypeStyledComponentsCommonProps {
+    /** Main text displayed as SmallSubheadline */
+    text: React.ReactNode;
+    /** Details text displayed as Byline below the main text */
+    details?: React.ReactNode;
+    /** Aside text displayed as Byline on the right side */
+    aside?: React.ReactNode;
+    /** Optional icon name to display on the left */
+    iconName?: TypeIconName;
+    /** Label used to describe the icon if not used with an accompanying visual label */
+    iconLabel?: string;
+    /** Actions to display on the right side (e.g., buttons, menus) */
+    actions?: React.ReactNode;
+}
+
+declare const ListItem: {
+    ({ isBordered, children, ...rest }: TypeListItemProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const ListItemContent: {
+    ({ text, details, aside, iconName, iconLabel, actions, ...rest }: TypeListItemContentProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { List, ListItem, ListItemContent, type TypeListElement, type TypeListItemContentProps, type TypeListItemProps, type TypeListProps };

package/dist/index.js

@@ -0,0 +1,143 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  List: () => List_default,
+  ListItem: () => ListItem_default,
+  ListItemContent: () => ListItemContent_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/List.tsx
+var React = require("react");
+var import_react = require("react");
+var import_seeds_react_box = __toESM(require("@sproutsocial/seeds-react-box"));
+
+// src/styles.tsx
+var import_styled_components = __toESM(require("styled-components"));
+var Container = import_styled_components.default.ul`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  > li:first-child {
+    margin-top: 0;
+  }
+`;
+var styles_default = Container;
+
+// src/List.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var List = ({ as = "ul", children, ...rest }) => {
+  const listItems = import_react.Children.toArray(children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { as, ...rest, children: listItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.default, { as: "li", mt: 300, children: item }, index)) });
+};
+List.displayName = "List";
+var List_default = List;
+
+// src/ListItem.tsx
+var React2 = require("react");
+var import_seeds_react_box2 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
+var import_seeds_react_icon = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ListItem = ({ isBordered, children, ...rest }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_seeds_react_box2.default,
+    {
+      borderRadius: "outer",
+      ...isBordered ? {
+        border: 500,
+        borderColor: "container.border.base",
+        p: 300
+      } : {},
+      ...rest,
+      children
+    }
+  );
+};
+ListItem.displayName = "ListItem";
+var ListItem_default = ListItem;
+
+// src/ListItemContent.tsx
+var React3 = require("react");
+var import_seeds_react_box3 = __toESM(require("@sproutsocial/seeds-react-box"));
+var import_seeds_react_text2 = __toESM(require("@sproutsocial/seeds-react-text"));
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ListItemContent = ({
+  text,
+  details,
+  aside,
+  iconName,
+  iconLabel,
+  actions,
+  ...rest
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_seeds_react_box3.default,
+    {
+      display: "flex",
+      justifyContent: "space-between",
+      borderRadius: "outer",
+      alignItems: "baseline",
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box3.default, { display: "flex", flex: "1", children: [
+          iconName && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_icon2.Icon, { mr: 300, name: iconName, size: "small", ariaLabel: iconLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box3.default, { flex: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text2.default.SmallSubHeadline, { as: "div", children: text }),
+            details && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text2.default.Byline, { as: "div", mt: 200, children: details })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_seeds_react_box3.default, { display: "flex", alignItems: "center", gap: 300, flexShrink: 0, children: [
+          aside && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_text2.default.Byline, { as: "div", children: aside }),
+          actions && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_seeds_react_box3.default, { display: "flex", alignItems: "center", children: actions })
+        ] })
+      ]
+    }
+  );
+};
+ListItemContent.displayName = "ListItemContent";
+var ListItemContent_default = ListItemContent;
+
+// src/ListTypes.ts
+var React4 = require("react");
+
+// src/ListItemTypes.ts
+var React5 = require("react");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  List,
+  ListItem,
+  ListItemContent
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/List.tsx","../src/styles.tsx","../src/ListItem.tsx","../src/ListItemContent.tsx","../src/ListTypes.ts","../src/ListItemTypes.ts"],"sourcesContent":["import List from \"./List\";\nimport ListItem from \"./ListItem\";\nimport ListItemContent from \"./ListItemContent\";\n\nexport { List, ListItem, ListItemContent };\nexport * from \"./ListTypes\";\nexport * from \"./ListItemTypes\";\n","import * as React from \"react\";\nimport { Children } from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Container from \"./styles\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst List = ({ as = \"ul\", children, ...rest }: TypeListProps) => {\n  const listItems = Children.toArray(children);\n\n  return (\n    <Container as={as} {...rest}>\n      {listItems.map((item, index) => (\n        <Box as=\"li\" key={index} mt={300}>\n          {item}\n        </Box>\n      ))}\n    </Container>\n  );\n};\n\nList.displayName = \"List\";\n\nexport default List;\n","import styled from \"styled-components\";\nimport type { TypeListProps } from \"./ListTypes\";\n\nconst Container = styled.ul<TypeListProps>`\n  margin: 0;\n  padding: 0;\n  list-style: none;\n\n  > li:first-child {\n    margin-top: 0;\n  }\n`;\n\nexport default Container;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeListItemProps } from \"./ListItemTypes\";\n\nconst ListItem = ({ isBordered, children, ...rest }: TypeListItemProps) => {\n  return (\n    <Box\n      borderRadius=\"outer\"\n      {...(isBordered\n        ? {\n            border: 500,\n            borderColor: \"container.border.base\",\n            p: 300,\n          }\n        : {})}\n      {...rest}\n    >\n      {children}\n    </Box>\n  );\n};\n\nListItem.displayName = \"ListItem\";\n\nexport default ListItem;\n","import * as React from \"react\";\nimport Box from \"@sproutsocial/seeds-react-box\";\nimport Text from \"@sproutsocial/seeds-react-text\";\nimport { Icon } from \"@sproutsocial/seeds-react-icon\";\nimport type { TypeListItemContentProps } from \"./ListItemTypes\";\n\nconst ListItemContent = ({\n  text,\n  details,\n  aside,\n  iconName,\n  iconLabel,\n  actions,\n  ...rest\n}: TypeListItemContentProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      justifyContent=\"space-between\"\n      borderRadius=\"outer\"\n      alignItems=\"baseline\"\n      {...rest}\n    >\n      <Box display=\"flex\" flex=\"1\">\n        {iconName && (\n          <Icon mr={300} name={iconName} size=\"small\" ariaLabel={iconLabel} />\n        )}\n        <Box flex=\"1\">\n          <Text.SmallSubHeadline as=\"div\">{text}</Text.SmallSubHeadline>\n          {details && (\n            <Text.Byline as=\"div\" mt={200}>\n              {details}\n            </Text.Byline>\n          )}\n        </Box>\n      </Box>\n      <Box display=\"flex\" alignItems=\"center\" gap={300} flexShrink={0}>\n        {aside && <Text.Byline as=\"div\">{aside}</Text.Byline>}\n        {actions && (\n          <Box display=\"flex\" alignItems=\"center\">\n            {actions}\n          </Box>\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nListItemContent.displayName = \"ListItemContent\";\n\nexport default ListItemContent;\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\n\nexport type TypeListElement = \"ul\" | \"ol\";\n\nexport interface TypeListProps extends TypeStyledComponentsCommonProps {\n  /** The HTML element to render as - either \"ul\" or \"ol\" */\n  as?: TypeListElement;\n  /** Array of elements to render as list items */\n  children: React.ReactNode;\n}\n","import * as React from \"react\";\nimport type { TypeStyledComponentsCommonProps } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeIconName } from \"@sproutsocial/seeds-react-icon\";\n\nexport interface TypeListItemProps extends TypeStyledComponentsCommonProps {\n  /** If true, adds a border and padding around the list item which looks like a card or button */\n  isBordered?: boolean;\n  /** Children to display inside the list item */\n  children: React.ReactNode;\n}\n\nexport interface TypeListItemContentProps\n  extends TypeStyledComponentsCommonProps {\n  /** Main text displayed as SmallSubheadline */\n  text: React.ReactNode;\n  /** Details text displayed as Byline below the main text */\n  details?: React.ReactNode;\n  /** Aside text displayed as Byline on the right side */\n  aside?: React.ReactNode;\n  /** Optional icon name to display on the left */\n  iconName?: TypeIconName;\n  /** Label used to describe the icon if not used with an accompanying visual label */\n  iconLabel?: string;\n  /** Actions to display on the right side (e.g., buttons, menus) */\n  actions?: React.ReactNode;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AACvB,mBAAyB;AACzB,6BAAgB;;;ACFhB,+BAAmB;AAGnB,IAAM,YAAY,yBAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUzB,IAAO,iBAAQ;;;ADDP;AANR,IAAM,OAAO,CAAC,EAAE,KAAK,MAAM,UAAU,GAAG,KAAK,MAAqB;AAChE,QAAM,YAAY,sBAAS,QAAQ,QAAQ;AAE3C,SACE,4CAAC,kBAAU,IAAS,GAAG,MACpB,oBAAU,IAAI,CAAC,MAAM,UACpB,4CAAC,uBAAAC,SAAA,EAAI,IAAG,MAAiB,IAAI,KAC1B,kBADe,KAElB,CACD,GACH;AAEJ;AAEA,KAAK,cAAc;AAEnB,IAAO,eAAQ;;;AEtBf,IAAAC,SAAuB;AACvB,IAAAC,0BAAgB;AAChB,8BAAiB;AACjB,8BAAqB;AAKjB,IAAAC,sBAAA;AAFJ,IAAM,WAAW,CAAC,EAAE,YAAY,UAAU,GAAG,KAAK,MAAyB;AACzE,SACE;AAAA,IAAC,wBAAAC;AAAA,IAAA;AAAA,MACC,cAAa;AAAA,MACZ,GAAI,aACD;AAAA,QACE,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,GAAG;AAAA,MACL,IACA,CAAC;AAAA,MACJ,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,cAAc;AAEvB,IAAO,mBAAQ;;;AC1Bf,IAAAC,SAAuB;AACvB,IAAAC,0BAAgB;AAChB,IAAAC,2BAAiB;AACjB,IAAAC,2BAAqB;AAsBX,IAAAC,sBAAA;AAnBV,IAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,SACE;AAAA,IAAC,wBAAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,gBAAe;AAAA,MACf,cAAa;AAAA,MACb,YAAW;AAAA,MACV,GAAG;AAAA,MAEJ;AAAA,sDAAC,wBAAAA,SAAA,EAAI,SAAQ,QAAO,MAAK,KACtB;AAAA,sBACC,6CAAC,iCAAK,IAAI,KAAK,MAAM,UAAU,MAAK,SAAQ,WAAW,WAAW;AAAA,UAEpE,8CAAC,wBAAAA,SAAA,EAAI,MAAK,KACR;AAAA,yDAAC,yBAAAC,QAAK,kBAAL,EAAsB,IAAG,OAAO,gBAAK;AAAA,YACrC,WACC,6CAAC,yBAAAA,QAAK,QAAL,EAAY,IAAG,OAAM,IAAI,KACvB,mBACH;AAAA,aAEJ;AAAA,WACF;AAAA,QACA,8CAAC,wBAAAD,SAAA,EAAI,SAAQ,QAAO,YAAW,UAAS,KAAK,KAAK,YAAY,GAC3D;AAAA,mBAAS,6CAAC,yBAAAC,QAAK,QAAL,EAAY,IAAG,OAAO,iBAAM;AAAA,UACtC,WACC,6CAAC,wBAAAD,SAAA,EAAI,SAAQ,QAAO,YAAW,UAC5B,mBACH;AAAA,WAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,gBAAgB,cAAc;AAE9B,IAAO,0BAAQ;;;AClDf,IAAAE,SAAuB;;;ACAvB,IAAAC,SAAuB;","names":["styled","Box","React","import_seeds_react_box","import_jsx_runtime","Box","React","import_seeds_react_box","import_seeds_react_text","import_seeds_react_icon","import_jsx_runtime","Box","Text","React","React"]}

package/jest.config.js

@@ -0,0 +1,9 @@
+const baseConfig = require("@sproutsocial/seeds-testing");
+
+/** * @type {import('jest').Config} */
+const config = {
+  ...baseConfig,
+  displayName: "seeds-react-list",
+};
+
+module.exports = config;

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sproutsocial/seeds-react-list",
+  "version": "0.0.1",
+  "description": "Seeds React List",
+  "author": "Sprout Social, Inc.",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsup --dts",
+    "build:debug": "tsup --dts --metafile",
+    "dev": "tsup --watch --dts",
+    "clean": "rm -rf .turbo dist",
+    "clean:modules": "rm -rf node_modules",
+    "typecheck": "tsc --noEmit",
+    "test": "jest",
+    "test:watch": "jest --watch --coverage=false"
+  },
+  "dependencies": {
+    "@sproutsocial/seeds-react-theme": "^3.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.0.2",
+    "@sproutsocial/seeds-react-box": "^1.1.7",
+    "@sproutsocial/seeds-react-text": "^1.3.2",
+    "@sproutsocial/seeds-react-icon": "^2.0.1",
+    "@sproutsocial/seeds-react-button": "^1.3.6"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/styled-components": "^5.1.26",
+    "@sproutsocial/eslint-config-seeds": "*",
+    "react": "^18.0.0",
+    "styled-components": "^5.2.3",
+    "tsup": "^8.3.4",
+    "typescript": "^5.6.2",
+    "@sproutsocial/seeds-tsconfig": "*",
+    "@sproutsocial/seeds-testing": "*",
+    "@sproutsocial/seeds-react-testing-library": "*",
+    "@sproutsocial/seeds-react-menu": "^1.6.17"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/List.stories.tsx

@@ -0,0 +1,362 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import type { Meta, StoryObj } from "@storybook/react";
+import List from "./List";
+import ListItem from "./ListItem";
+import ListItemButton from "./ListItemButton";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import {
+  ActionMenu,
+  MenuToggleButton,
+  MenuContent,
+  MenuItem,
+} from "@sproutsocial/seeds-react-menu";
+import { Message } from "@sproutsocial/seeds-react-message";
+import Box from "@sproutsocial/seeds-react-box";
+import ListItemContent from "./ListItemContent";
+type CustomListArgs = React.ComponentProps<typeof List>;
+
+const meta = {
+  title: "Components/List",
+  component: List,
+  decorators: [
+    (Story) => (
+      <Box maxWidth="500px">
+        <Story />
+      </Box>
+    ),
+  ],
+} satisfies Meta<typeof List>;
+
+export default meta;
+type Story = StoryObj<CustomListArgs>;
+
+export const UnorderedList: Story = {
+  name: "Unordered List",
+  render: () => {
+    return (
+      <List>
+        <ListItem>First item</ListItem>
+        <ListItem>Second item</ListItem>
+        <ListItem>Third item</ListItem>
+      </List>
+    );
+  },
+};
+
+export const OrderedList: Story = {
+  name: "Ordered List",
+  render: () => {
+    return (
+      <List as="ol">
+        <ListItem>First item</ListItem>
+        <ListItem>Second item</ListItem>
+        <ListItem>Third item</ListItem>
+      </List>
+    );
+  },
+};
+
+export const WithListItems: Story = {
+  name: "With List Items",
+  render: () => {
+    return (
+      <List>
+        <ListItem>
+          <ListItemContent
+            text="Negative Spikes – Snouts Paws & Tails"
+            details="Are there any negative sentiment spikes in Snouts Paws & Tails Brand?"
+            aside="Nov 5"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemContent
+            text="Another Item"
+            details="This is a detail about the item"
+            aside="Dec 10"
+          />
+        </ListItem>
+      </List>
+    );
+  },
+};
+
+export const WithBorder: Story = {
+  name: "With Border",
+  render: () => {
+    return (
+      <List>
+        <ListItem isBordered>
+          <ListItemContent
+            text="Negative Spikes – Snouts Paws & Tails"
+            details="Are there any negative sentiment spikes in Snouts Paws & Tails Brand?"
+            aside="Nov 5"
+          />
+        </ListItem>
+        <ListItem isBordered>
+          <ListItemContent
+            text="Another Item"
+            details="This is a detail about the item"
+            aside="Dec 10"
+          />
+        </ListItem>
+        <ListItem isBordered>
+          <ListItemContent
+            text="Item without icon"
+            details="This item doesn't have an icon"
+            aside="Jan 1"
+          />
+        </ListItem>
+      </List>
+    );
+  },
+};
+
+export const WithIcons: Story = {
+  name: "With Icons",
+  render: () => {
+    return (
+      <List>
+        <ListItem>
+          <ListItemContent
+            iconName="tag-solid"
+            text="Negative Spikes – Snouts Paws & Tails"
+            details="Are there any negative sentiment spikes in Snouts Paws & Tails Brand?"
+            aside="Nov 5"
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemContent
+            text="Another Item"
+            details="This is a detail about the item"
+            aside="Dec 10"
+            iconName="tag-outline"
+          />
+        </ListItem>
+      </List>
+    );
+  },
+};
+
+// We will revisit this story when we have a more correct button component
+/*
+export const WithListItemButtons: Story = {
+  name: "With List Item Buttons",
+  render: () => {
+    return (
+      <List>
+        <ListItem>
+          <ListItemButton>
+            <ListItemContent
+              iconName="tag-solid"
+              text="Negative Spikes – Snouts Paws & Tails"
+              details="Are there any negative sentiment spikes in Snouts Paws & Tails Brand?"
+              aside="Nov 5"
+            />
+          </ListItemButton>
+        </ListItem>
+        <ListItem>
+          <ListItemButton>
+            <ListItemContent
+              iconName="tag-outline"
+              text="Another Item"
+              details="This is a detail about the item"
+              aside="Dec 10"
+            />
+          </ListItemButton>
+        </ListItem>
+      </List>
+    );
+  },
+};
+*/
+
+export const WithActions: Story = {
+  name: "With Actions",
+  render: () => {
+    return (
+      <List>
+        <ListItem>
+          <ListItemContent
+            iconName="tag-solid"
+            text="Groupon Babies is disconnected"
+            details="It looks like your Facebook profile needs reauthorization due to the..."
+            aside="2 days ago"
+            actions={
+              <Button appearance="unstyled" aria-label="Reconnect">
+                <Icon name="tag-outline" size="small" aria-hidden="true" />
+              </Button>
+            }
+          />
+        </ListItem>
+        <ListItem>
+          <ListItemContent
+            iconName="tag-outline"
+            text="New secure forms submission received in a message."
+            aside="Nov 3, 2025"
+            actions={
+              <ActionMenu
+                menuToggleElement={
+                  <MenuToggleButton
+                    appearance="unstyled"
+                    aria-label="More actions"
+                  >
+                    <Icon
+                      name="ellipsis-horizontal-outline"
+                      size="small"
+                      aria-hidden="true"
+                    />
+                  </MenuToggleButton>
+                }
+              >
+                <MenuContent>
+                  <MenuItem
+                    id="edit"
+                    onClick={() => console.log("Edit clicked")}
+                  >
+                    Edit
+                  </MenuItem>
+                  <MenuItem
+                    id="delete"
+                    onClick={() => console.log("Delete clicked")}
+                  >
+                    Delete
+                  </MenuItem>
+                </MenuContent>
+              </ActionMenu>
+            }
+          />
+        </ListItem>
+      </List>
+    );
+  },
+};
+
+const ErrorListItem = styled(ListItem)`
+  border: 1px solid ${(props: any) => props.theme.colors.container.border.base};
+  border-left: 4px solid
+    ${(props: any) => props.theme.colors.container.border.error};
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: ${(props: any) => props.theme.space[300]};
+`;
+const InfoListItem = styled(ListItem)`
+  border: 1px solid ${(props: any) => props.theme.colors.container.border.base};
+  border-left: 4px solid
+    ${(props: any) => props.theme.colors.container.border.info};
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  padding: ${(props: any) => props.theme.space[300]};
+`;
+export const WithCustomStyles: Story = {
+  name: "With custom styles",
+  render: () => {
+    return (
+      <List>
+        <ErrorListItem>
+          <ListItemContent
+            iconName="tag-solid"
+            text="Groupon Babies is disconnected"
+            details="It looks like your Facebook profile needs reauthorization due to the..."
+            aside="2 days ago"
+          />
+        </ErrorListItem>
+        <InfoListItem>
+          <ListItemContent
+            iconName="tag-outline"
+            text="New secure forms submission received in a message."
+            aside="Nov 3, 2025"
+          />
+        </InfoListItem>
+        <ErrorListItem>
+          <ListItemContent
+            iconName="tag-solid"
+            text="Instagram's API periodically requires reauthorization"
+            details="Instagram's API periodically requires reauthorization. An Instagra..."
+            aside="Nov 3, 2025"
+          />
+        </ErrorListItem>
+      </List>
+    );
+  },
+};
+
+export const WithMessages: Story = {
+  name: "With Messages",
+  render: () => {
+    return (
+      <List>
+        <ListItem>
+          <Message density="condensed">
+            <Message.Header>
+              <Box display="flex" alignItems="center">
+                <Message.Avatar mr={350} appearance="leaf" name="Chase McCoy" />
+                Attribution
+              </Box>
+              <Box>
+                <Message.Checkbox
+                  id="message-checkbox-1"
+                  ariaLabel="Message Checkbox"
+                  onChange={() => {}}
+                />
+              </Box>
+            </Message.Header>
+            <Message.Body>Message Content</Message.Body>
+            <Message.Footer>
+              <>
+                <Box ml={-350}>
+                  <Message.Button>
+                    <Icon name="comments-outline" mr={200} aria-hidden />
+                    button with text
+                  </Message.Button>
+                </Box>
+                <Box>
+                  <Message.Button aria-label="Heart Icon Example">
+                    <Icon name="heart-outline" aria-hidden />
+                  </Message.Button>
+                  <Message.Button aria-label="Tag Icon Example">
+                    <Icon name="tag-outline" aria-hidden />
+                  </Message.Button>
+                </Box>
+              </>
+            </Message.Footer>
+          </Message>
+        </ListItem>
+        <ListItem>
+          <Message density="condensed">
+            <Message.Header>
+              <Box display="flex" alignItems="center">
+                <Message.Avatar mr={350} appearance="leaf" name="Jane Doe" />
+                Another User
+              </Box>
+              <Box>
+                <Message.Checkbox
+                  id="message-checkbox-2"
+                  ariaLabel="Message Checkbox"
+                  onChange={() => {}}
+                />
+              </Box>
+            </Message.Header>
+            <Message.Body>Another message with different content</Message.Body>
+            <Message.Footer>
+              <>
+                <Box ml={-350}>
+                  <Message.Button>
+                    <Icon name="reply-outline" mr={200} aria-hidden />
+                    Reply
+                  </Message.Button>
+                </Box>
+                <Box>
+                  <Message.Button aria-label="Heart Icon Example">
+                    <Icon name="heart-outline" aria-hidden />
+                  </Message.Button>
+                </Box>
+              </>
+            </Message.Footer>
+          </Message>
+        </ListItem>
+      </List>
+    );
+  },
+};

package/src/List.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Children } from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Container from "./styles";
+import type { TypeListProps } from "./ListTypes";
+
+const List = ({ as = "ul", children, ...rest }: TypeListProps) => {
+  const listItems = Children.toArray(children);
+
+  return (
+    <Container as={as} {...rest}>
+      {listItems.map((item, index) => (
+        <Box as="li" key={index} mt={300}>
+          {item}
+        </Box>
+      ))}
+    </Container>
+  );
+};
+
+List.displayName = "List";
+
+export default List;

package/src/ListItem.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypeListItemProps } from "./ListItemTypes";
+
+const ListItem = ({ isBordered, children, ...rest }: TypeListItemProps) => {
+  return (
+    <Box
+      borderRadius="outer"
+      {...(isBordered
+        ? {
+            border: 500,
+            borderColor: "container.border.base",
+            p: 300,
+          }
+        : {})}
+      {...rest}
+    >
+      {children}
+    </Box>
+  );
+};
+
+ListItem.displayName = "ListItem";
+
+export default ListItem;

package/src/ListItemButton.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import styled from "styled-components";
+import Button from "@sproutsocial/seeds-react-button";
+import Box from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypeListItemButtonProps } from "./ListItemButtonTypes";
+
+const StyledButton = styled(Button)`
+  border: 1px solid ${(props) => props.theme.colors.container.border.base};
+  text-align: initial;
+  font-weight: initial;
+`;
+
+// This button is not currently used. It is possible to pass interactive elements inside the button which is an accessibility violation.
+// In order to reintroduce it, we will want to mimic confluence's approach of using relative positioning to add a sibling to content which allows clicking
+const ListItemButton = ({
+  appearance = "unstyled",
+  width = "100%",
+  children,
+  ...rest
+}: TypeListItemButtonProps) => {
+  return (
+    <StyledButton appearance={appearance} width={width} {...rest}>
+      {children}
+    </StyledButton>
+  );
+};
+
+ListItemButton.displayName = "ListItemButton";
+
+export default ListItemButton;

package/src/ListItemButtonTypes.ts

@@ -0,0 +1,3 @@
+import type { TypeButtonProps } from "@sproutsocial/seeds-react-button";
+
+export interface TypeListItemButtonProps extends TypeButtonProps {}

package/src/ListItemContent.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import Box from "@sproutsocial/seeds-react-box";
+import Text from "@sproutsocial/seeds-react-text";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+import type { TypeListItemContentProps } from "./ListItemTypes";
+
+const ListItemContent = ({
+  text,
+  details,
+  aside,
+  iconName,
+  iconLabel,
+  actions,
+  ...rest
+}: TypeListItemContentProps) => {
+  return (
+    <Box
+      display="flex"
+      justifyContent="space-between"
+      borderRadius="outer"
+      alignItems="baseline"
+      {...rest}
+    >
+      <Box display="flex" flex="1">
+        {iconName && (
+          <Icon mr={300} name={iconName} size="small" ariaLabel={iconLabel} />
+        )}
+        <Box flex="1">
+          <Text.SmallSubHeadline as="div">{text}</Text.SmallSubHeadline>
+          {details && (
+            <Text.Byline as="div" mt={200}>
+              {details}
+            </Text.Byline>
+          )}
+        </Box>
+      </Box>
+      <Box display="flex" alignItems="center" gap={300} flexShrink={0}>
+        {aside && <Text.Byline as="div">{aside}</Text.Byline>}
+        {actions && (
+          <Box display="flex" alignItems="center">
+            {actions}
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+ListItemContent.displayName = "ListItemContent";
+
+export default ListItemContent;

package/src/ListItemTypes.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-system-props";
+import type { TypeIconName } from "@sproutsocial/seeds-react-icon";
+
+export interface TypeListItemProps extends TypeStyledComponentsCommonProps {
+  /** 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 */
+  children: React.ReactNode;
+}
+
+export interface TypeListItemContentProps
+  extends TypeStyledComponentsCommonProps {
+  /** Main text displayed as SmallSubheadline */
+  text: React.ReactNode;
+  /** Details text displayed as Byline below the main text */
+  details?: React.ReactNode;
+  /** Aside text displayed as Byline on the right side */
+  aside?: React.ReactNode;
+  /** Optional icon name to display on the left */
+  iconName?: TypeIconName;
+  /** Label used to describe the icon if not used with an accompanying visual label */
+  iconLabel?: string;
+  /** Actions to display on the right side (e.g., buttons, menus) */
+  actions?: React.ReactNode;
+}

package/src/ListTypes.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import type { TypeStyledComponentsCommonProps } from "@sproutsocial/seeds-react-system-props";
+
+export type TypeListElement = "ul" | "ol";
+
+export interface TypeListProps extends TypeStyledComponentsCommonProps {
+  /** The HTML element to render as - either "ul" or "ol" */
+  as?: TypeListElement;
+  /** Array of elements to render as list items */
+  children: React.ReactNode;
+}

package/src/__tests__/List.test.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import List from "../List";
+
+describe("List", () => {
+  it("should render properly", async () => {
+    const { container, runA11yCheck } = render(
+      <List as="ul">
+        <div>Item 1</div>
+        <div>Item 2</div>
+      </List>
+    );
+    expect(container).toBeTruthy();
+    await runA11yCheck();
+  });
+
+  it("should render as ul when as='ul'", () => {
+    const { container } = render(
+      <List as="ul">
+        <div>Item 1</div>
+      </List>
+    );
+    const listElement = container.querySelector("ul");
+    expect(listElement).toBeInTheDocument();
+  });
+
+  it("should render as ol when as='ol'", () => {
+    const { container } = render(
+      <List as="ol">
+        <div>Item 1</div>
+      </List>
+    );
+    const listElement = container.querySelector("ol");
+    expect(listElement).toBeInTheDocument();
+  });
+
+  it("should wrap each child in an li element", () => {
+    const { container } = render(
+      <List as="ul">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </List>
+    );
+    const listItems = container.querySelectorAll("li");
+    expect(listItems).toHaveLength(3);
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+    expect(screen.getByText("Item 3")).toBeInTheDocument();
+  });
+
+  it("should add mt={300} to all items except the first", () => {
+    const { container } = render(
+      <List as="ul">
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </List>
+    );
+    const listItems = container.querySelectorAll("li");
+
+    // Verify we have 3 items
+    expect(listItems).toHaveLength(3);
+
+    // First item should not have margin-top
+    const firstItem = listItems[0];
+    expect(firstItem).toBeInTheDocument();
+
+    // Other items should have mt={300} applied
+    // The mt prop will be converted to margin-top via styled-system
+    expect(listItems[1]).toBeInTheDocument();
+    expect(listItems[2]).toBeInTheDocument();
+  });
+});

package/src/index.ts

@@ -0,0 +1,7 @@
+import List from "./List";
+import ListItem from "./ListItem";
+import ListItemContent from "./ListItemContent";
+
+export { List, ListItem, ListItemContent };
+export * from "./ListTypes";
+export * from "./ListItemTypes";

package/src/styles.tsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import type { TypeListProps } from "./ListTypes";
+
+const Container = styled.ul<TypeListProps>`
+  margin: 0;
+  padding: 0;
+  list-style: none;
+
+  > li:first-child {
+    margin-top: 0;
+  }
+`;
+
+export default Container;

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@sproutsocial/seeds-tsconfig/bundler/dom/library-monorepo",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.stories.tsx", "**/*.stories.ts"]
+}

package/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig((options) => ({
+  entry: ["src/index.ts"],
+  format: ["cjs", "esm"],
+  clean: true,
+  legacyOutput: true,
+  dts: options.dts,
+  external: ["react"],
+  sourcemap: true,
+  metafile: options.metafile,
+}));