@sproutsocial/seeds-react-container 0.1.0

package/.eslintignore

@@ -0,0 +1,6 @@
+# Node modules
+node_modules/
+
+# Build output
+dist/
+coverage/

package/.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: ["eslint-config-seeds/racine"],
+};

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-container/tsup.config.ts
+CLI Target: es2022
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+CJS dist/index.js     4.40 KB
+CJS dist/index.js.map 3.99 KB
+CJS ⚡️ Build success in 238ms
+ESM dist/esm/index.js     2.20 KB
+ESM dist/esm/index.js.map 3.94 KB
+ESM ⚡️ Build success in 248ms
+DTS Build start
+DTS ⚡️ Build success in 30962ms
+DTS dist/index.d.ts  503.00 B
+DTS dist/index.d.mts 503.00 B
+Done in 38.60s.

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @sproutsocial/seeds-react-container
+
+## 0.1.0
+
+### Minor Changes
+
+- 5f6fee3: Created new component called Container that accepts a title, subtitle, header action, and can display a loading state"

package/dist/esm/index.js

@@ -0,0 +1,70 @@
+// src/Container.tsx
+import "react";
+import { Box as Box2 } from "@sproutsocial/seeds-react-box";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Loader } from "@sproutsocial/seeds-react-loader";
+
+// src/styles.ts
+import styled from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+var ContainerStyles = styled.section`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+`;
+var ContainerHeader = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  color: ${({ theme }) => theme.colors.text.headline};
+  padding: ${({ theme }) => theme.space[400]};
+`;
+var ContainerContent = styled(Box)`
+  padding: ${({ theme }) => theme.space[400]};
+`;
+
+// src/Container.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Container = ({
+  title,
+  subtitle,
+  titleAs = "h2",
+  subtitleAs = "h3",
+  content,
+  isLoading,
+  headerActions,
+  contentProps,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ jsxs(ContainerStyles, { as: "section", ...boxProps, children: [
+    /* @__PURE__ */ jsxs(ContainerHeader, { children: [
+      /* @__PURE__ */ jsxs(Box2, { children: [
+        /* @__PURE__ */ jsx(Text.Headline, { as: titleAs, children: title }),
+        /* @__PURE__ */ jsx(Text.Byline, { as: subtitleAs, fontWeight: "normal", children: subtitle })
+      ] }),
+      headerActions && /* @__PURE__ */ jsx(Box2, { children: headerActions })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box2,
+      {
+        p: 400,
+        ...contentProps,
+        borderBottomLeftRadius: "outer",
+        borderBottomRightRadius: "outer",
+        children: isLoading ? /* @__PURE__ */ jsx(Box2, { my: 400, children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) : content
+      }
+    )
+  ] });
+};
+var Container_default = Container;
+
+// src/index.ts
+var index_default = Container_default;
+export {
+  Container_default as Container,
+  index_default as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/Container.tsx","../../src/styles.ts","../../src/index.ts"],"sourcesContent":["import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { ContainerHeader, ContainerStyles } from \"./styles\";\n\nexport interface ContainerProps {\n  title: string;\n  subtitle: string;\n  titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  content?: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n}\n\nconst Container: React.FC<ContainerProps> = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  content,\n  isLoading,\n  headerActions,\n  contentProps,\n  ...boxProps\n}) => {\n  return (\n    <ContainerStyles as=\"section\" {...boxProps}>\n      <ContainerHeader>\n        <Box>\n          <Text.Headline as={titleAs}>{title}</Text.Headline>\n          <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n            {subtitle}\n          </Text.Byline>\n        </Box>\n        {headerActions && <Box>{headerActions}</Box>}\n      </ContainerHeader>\n      <Box\n        p={400}\n        {...contentProps}\n        borderBottomLeftRadius=\"outer\"\n        borderBottomRightRadius=\"outer\"\n      >\n        {isLoading ? (\n          <Box my={400}>\n            <Loader delay={false} />\n          </Box>\n        ) : (\n          content\n        )}\n      </Box>\n    </ContainerStyles>\n  );\n};\n\nexport default Container;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContainerStyles = styled.section`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const ContainerHeader = styled(Box)`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  color: ${({ theme }) => theme.colors.text.headline};\n  padding: ${({ theme }) => theme.space[400]};\n`;\n\nexport const ContainerContent = styled(Box)`\n  padding: ${({ theme }) => theme.space[400]};\n`;\n","import Container from \"./Container\";\n\nexport type { ContainerProps } from \"./Container\";\n\nexport default Container;\nexport { Container };\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,OAAAA,YAAW;AACpB,SAAS,YAAY;AACrB,SAAS,cAAc;;;ACHvB,OAAO,YAAY;AACnB,SAAS,WAAW;AAEb,IAAM,kBAAkB,OAAO;AAAA,gBACtB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,YACzD,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA;AAG5C,IAAM,kBAAkB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,mBAItB,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,WAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,aACvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGrC,IAAM,mBAAmB,OAAO,GAAG;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;;;ADUpC,SACE,KADF;AAdR,IAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,mBAAgB,IAAG,WAAW,GAAG,UAChC;AAAA,yBAAC,mBACC;AAAA,2BAACC,MAAA,EACC;AAAA,4BAAC,KAAK,UAAL,EAAc,IAAI,SAAU,iBAAM;AAAA,QACnC,oBAAC,KAAK,QAAL,EAAY,IAAI,YAAY,YAAW,UACrC,oBACH;AAAA,SACF;AAAA,MACC,iBAAiB,oBAACA,MAAA,EAAK,yBAAc;AAAA,OACxC;AAAA,IACA;AAAA,MAACA;AAAA,MAAA;AAAA,QACC,GAAG;AAAA,QACF,GAAG;AAAA,QACJ,wBAAuB;AAAA,QACvB,yBAAwB;AAAA,QAEvB,sBACC,oBAACA,MAAA,EAAI,IAAI,KACP,8BAAC,UAAO,OAAO,OAAO,GACxB,IAEA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,oBAAQ;;;AErDf,IAAO,gBAAQ;","names":["Box","Box"]}

package/dist/index.d.mts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@sproutsocial/seeds-react-box';
+
+interface ContainerProps {
+    title: string;
+    subtitle: string;
+    titleAs: "h1" | "h2" | "h3" | "h4";
+    subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
+    isLoading?: boolean;
+    content?: React.ReactNode;
+    headerActions?: React.ReactNode;
+    contentProps?: React.ComponentProps<typeof Box>;
+}
+declare const Container: React.FC<ContainerProps>;
+
+export { Container, type ContainerProps, Container as default };

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Box } from '@sproutsocial/seeds-react-box';
+
+interface ContainerProps {
+    title: string;
+    subtitle: string;
+    titleAs: "h1" | "h2" | "h3" | "h4";
+    subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
+    isLoading?: boolean;
+    content?: React.ReactNode;
+    headerActions?: React.ReactNode;
+    contentProps?: React.ComponentProps<typeof Box>;
+}
+declare const Container: React.FC<ContainerProps>;
+
+export { Container, type ContainerProps, Container as default };

package/dist/index.js

@@ -0,0 +1,107 @@
+"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, {
+  Container: () => Container_default,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Container.tsx
+var import_react = require("react");
+var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_text = require("@sproutsocial/seeds-react-text");
+var import_seeds_react_loader = require("@sproutsocial/seeds-react-loader");
+
+// src/styles.ts
+var import_styled_components = __toESM(require("styled-components"));
+var import_seeds_react_box = require("@sproutsocial/seeds-react-box");
+var ContainerStyles = import_styled_components.default.section`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+`;
+var ContainerHeader = (0, import_styled_components.default)(import_seeds_react_box.Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  color: ${({ theme }) => theme.colors.text.headline};
+  padding: ${({ theme }) => theme.space[400]};
+`;
+var ContainerContent = (0, import_styled_components.default)(import_seeds_react_box.Box)`
+  padding: ${({ theme }) => theme.space[400]};
+`;
+
+// src/Container.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Container = ({
+  title,
+  subtitle,
+  titleAs = "h2",
+  subtitleAs = "h3",
+  content,
+  isLoading,
+  headerActions,
+  contentProps,
+  ...boxProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContainerStyles, { as: "section", ...boxProps, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContainerHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_box2.Box, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text.Headline, { as: titleAs, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_text.Text.Byline, { as: subtitleAs, fontWeight: "normal", children: subtitle })
+      ] }),
+      headerActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.Box, { children: headerActions })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_seeds_react_box2.Box,
+      {
+        p: 400,
+        ...contentProps,
+        borderBottomLeftRadius: "outer",
+        borderBottomRightRadius: "outer",
+        children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box2.Box, { my: 400, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_loader.Loader, { delay: false }) }) : content
+      }
+    )
+  ] });
+};
+var Container_default = Container;
+
+// src/index.ts
+var index_default = Container_default;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Container
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/Container.tsx","../src/styles.ts"],"sourcesContent":["import Container from \"./Container\";\n\nexport type { ContainerProps } from \"./Container\";\n\nexport default Container;\nexport { Container };\n","import React from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Text } from \"@sproutsocial/seeds-react-text\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { ContainerHeader, ContainerStyles } from \"./styles\";\n\nexport interface ContainerProps {\n  title: string;\n  subtitle: string;\n  titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  content?: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n}\n\nconst Container: React.FC<ContainerProps> = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  content,\n  isLoading,\n  headerActions,\n  contentProps,\n  ...boxProps\n}) => {\n  return (\n    <ContainerStyles as=\"section\" {...boxProps}>\n      <ContainerHeader>\n        <Box>\n          <Text.Headline as={titleAs}>{title}</Text.Headline>\n          <Text.Byline as={subtitleAs} fontWeight=\"normal\">\n            {subtitle}\n          </Text.Byline>\n        </Box>\n        {headerActions && <Box>{headerActions}</Box>}\n      </ContainerHeader>\n      <Box\n        p={400}\n        {...contentProps}\n        borderBottomLeftRadius=\"outer\"\n        borderBottomRightRadius=\"outer\"\n      >\n        {isLoading ? (\n          <Box my={400}>\n            <Loader delay={false} />\n          </Box>\n        ) : (\n          content\n        )}\n      </Box>\n    </ContainerStyles>\n  );\n};\n\nexport default Container;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContainerStyles = styled.section`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n`;\n\nexport const ContainerHeader = styled(Box)`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid\n    ${({ theme }) => theme.colors.container.border.base};\n  color: ${({ theme }) => theme.colors.text.headline};\n  padding: ${({ theme }) => theme.space[400]};\n`;\n\nexport const ContainerContent = styled(Box)`\n  padding: ${({ theme }) => theme.space[400]};\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAkB;AAClB,IAAAA,0BAAoB;AACpB,8BAAqB;AACrB,gCAAuB;;;ACHvB,+BAAmB;AACnB,6BAAoB;AAEb,IAAM,kBAAkB,yBAAAC,QAAO;AAAA,gBACtB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,YACzD,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,mBACpC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA;AAG5C,IAAM,sBAAkB,yBAAAA,SAAO,0BAAG;AAAA;AAAA;AAAA;AAAA,mBAItB,CAAC,EAAE,MAAM,MAAM,MAAM,aAAa,GAAG,CAAC;AAAA,MACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA,WAC5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,KAAK,QAAQ;AAAA,aACvC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;AAGrC,IAAM,uBAAmB,yBAAAA,SAAO,0BAAG;AAAA,aAC7B,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;;;ADUpC;AAdR,IAAM,YAAsC,CAAC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,6CAAC,mBAAgB,IAAG,WAAW,GAAG,UAChC;AAAA,iDAAC,mBACC;AAAA,mDAAC,+BACC;AAAA,oDAAC,6BAAK,UAAL,EAAc,IAAI,SAAU,iBAAM;AAAA,QACnC,4CAAC,6BAAK,QAAL,EAAY,IAAI,YAAY,YAAW,UACrC,oBACH;AAAA,SACF;AAAA,MACC,iBAAiB,4CAAC,+BAAK,yBAAc;AAAA,OACxC;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAG;AAAA,QACF,GAAG;AAAA,QACJ,wBAAuB;AAAA,QACvB,yBAAwB;AAAA,QAEvB,sBACC,4CAAC,+BAAI,IAAI,KACP,sDAAC,oCAAO,OAAO,OAAO,GACxB,IAEA;AAAA;AAAA,IAEJ;AAAA,KACF;AAEJ;AAEA,IAAO,oBAAQ;;;ADrDf,IAAO,gBAAQ;","names":["import_seeds_react_box","styled"]}

package/jest.config.js

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

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sproutsocial/seeds-react-container",
+  "version": "0.1.0",
+  "description": "Seeds React Container",
+  "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-box": "^1.1.5",
+    "@sproutsocial/seeds-react-button": "^1.3.2",
+    "@sproutsocial/seeds-react-icon": "^1.1.6",
+    "@sproutsocial/seeds-react-loader": "^1.0.4",
+    "@sproutsocial/seeds-react-system-props": "^3.0.2",
+    "@sproutsocial/seeds-react-text": "^1.3.2",
+    "@sproutsocial/seeds-react-theme": "^3.1.1"
+  },
+  "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": "*"
+  },
+  "peerDependencies": {
+    "styled-components": "^5.2.3"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}

package/src/Container.stories.tsx

@@ -0,0 +1,52 @@
+import Container from "./Container";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Button } from "@sproutsocial/seeds-react-button";
+import { Icon } from "@sproutsocial/seeds-react-icon";
+
+const meta: Meta<typeof Container> = {
+  title: "Components/Container",
+  component: Container,
+  args: {
+    title: "Volume Breakdown - Outbound",
+    subtitle: "View a breakdown of your outbound volume.",
+    content: (
+      <Text.SmallBodyCopy>
+        Here is some content inside the container.
+      </Text.SmallBodyCopy>
+    ),
+    isLoading: false,
+    headerActions: null,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Container>;
+
+export const Default: Story = {
+  render: (args) => <Container {...args} />,
+};
+
+export const WithHeaderActions: Story = {
+  render: (args) => (
+    <Container
+      {...args}
+      headerActions={
+        <Button size="small">
+          <Icon name="face-frown-open-solid" />
+        </Button>
+      }
+    />
+  ),
+};
+
+export const LoadingState: Story = {
+  render: (args) => <Container {...args} isLoading={true} />,
+};
+
+export const WithContentStyles: Story = {
+  render: (args) => (
+    <Container {...args} contentProps={{ p: 0, py: 400, bg: "blue.300" }} />
+  ),
+};

package/src/Container.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Box } from "@sproutsocial/seeds-react-box";
+import { Text } from "@sproutsocial/seeds-react-text";
+import { Loader } from "@sproutsocial/seeds-react-loader";
+import { ContainerHeader, ContainerStyles } from "./styles";
+
+export interface ContainerProps {
+  title: string;
+  subtitle: string;
+  titleAs: "h1" | "h2" | "h3" | "h4";
+  subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
+  isLoading?: boolean;
+  content?: React.ReactNode;
+  headerActions?: React.ReactNode;
+  contentProps?: React.ComponentProps<typeof Box>;
+}
+
+const Container: React.FC<ContainerProps> = ({
+  title,
+  subtitle,
+  titleAs = "h2",
+  subtitleAs = "h3",
+  content,
+  isLoading,
+  headerActions,
+  contentProps,
+  ...boxProps
+}) => {
+  return (
+    <ContainerStyles as="section" {...boxProps}>
+      <ContainerHeader>
+        <Box>
+          <Text.Headline as={titleAs}>{title}</Text.Headline>
+          <Text.Byline as={subtitleAs} fontWeight="normal">
+            {subtitle}
+          </Text.Byline>
+        </Box>
+        {headerActions && <Box>{headerActions}</Box>}
+      </ContainerHeader>
+      <Box
+        p={400}
+        {...contentProps}
+        borderBottomLeftRadius="outer"
+        borderBottomRightRadius="outer"
+      >
+        {isLoading ? (
+          <Box my={400}>
+            <Loader delay={false} />
+          </Box>
+        ) : (
+          content
+        )}
+      </Box>
+    </ContainerStyles>
+  );
+};
+
+export default Container;

package/src/__tests__/container.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import Container from "../Container";
+
+describe("Container Features", () => {
+  test("renders title and subtitle with correct semantic elements", () => {
+    render(
+      <Container
+        title="Test Title"
+        subtitle="Test Subtitle"
+        titleAs="h1"
+        subtitleAs="h2"
+      />
+    );
+
+    const titleElement = screen.getByText("Test Title");
+    const subtitleElement = screen.getByText("Test Subtitle");
+
+    expect(titleElement.tagName).toBe("H1");
+    expect(subtitleElement.tagName).toBe("H2");
+  });
+
+  test("renders content when not loading", () => {
+    render(
+      <Container
+        title="Test Title"
+        subtitle="Test Subtitle"
+        titleAs="h2"
+        subtitleAs="h3"
+        isLoading={false}
+        content={<div>Loaded Content</div>}
+      />
+    );
+    expect(screen.getByText("Loaded Content")).toBeInTheDocument();
+  });
+
+  test("renders loader when loading", () => {
+    render(
+      <Container
+        title="Test Title"
+        subtitle="Test Subtitle"
+        titleAs="h2"
+        subtitleAs="h3"
+        isLoading={true}
+      />
+    );
+
+    expect(
+      screen.getByDataQaLabel({
+        loader: "",
+      })
+    ).toBeInTheDocument();
+  });
+});

package/src/index.ts

@@ -0,0 +1,6 @@
+import Container from "./Container";
+
+export type { ContainerProps } from "./Container";
+
+export default Container;
+export { Container };

package/src/styled.d.ts

@@ -0,0 +1,7 @@
+import "styled-components";
+import { TypeTheme } from "@sproutsocial/seeds-react-theme";
+
+declare module "styled-components" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface DefaultTheme extends TypeTheme {}
+}

package/src/styles.ts

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+
+export const ContainerStyles = styled.section`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+`;
+
+export const ContainerHeader = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: ${({ theme }) => theme.borderWidths[500]} solid
+    ${({ theme }) => theme.colors.container.border.base};
+  color: ${({ theme }) => theme.colors.text.headline};
+  padding: ${({ theme }) => theme.space[400]};
+`;
+
+export const ContainerContent = styled(Box)`
+  padding: ${({ theme }) => theme.space[400]};
+`;

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", "coverage"]
+}

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,
+}));