@sproutsocial/seeds-react-container 0.1.4 → 0.2.0

package/.eslintrc.js

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

package/.turbo/turbo-build.log

@@ -8,14 +8,14 @@ $ tsup --dts
 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 180ms
-ESM dist/esm/index.js     2.20 KB
-ESM dist/esm/index.js.map 3.94 KB
-ESM ⚡️ Build success in 168ms
+CJS dist/index.js     2.51 KB
+CJS dist/index.js.map 1.58 KB
+CJS ⚡️ Build success in 130ms
+ESM dist/esm/index.js     813.00 B
+ESM dist/esm/index.js.map 1.41 KB
+ESM ⚡️ Build success in 130ms
 DTS Build start
-DTS ⚡️ Build success in 28699ms
-DTS dist/index.d.ts  503.00 B
-DTS dist/index.d.mts 503.00 B
-Done in 35.75s.
+DTS ⚡️ Build success in 25056ms
+DTS dist/index.d.ts  241.00 B
+DTS dist/index.d.mts 241.00 B
+Done in 32.02s.

package/CHANGELOG.md

@@ -1,44 +1,23 @@
 # @sproutsocial/seeds-react-container
 
-## 0.1.4
+## 0.2.0
 
-### Patch Changes
-
-- @sproutsocial/seeds-react-icon@2.0.2
-- @sproutsocial/seeds-react-button@1.3.7
-
-## 0.1.3
-
-### Patch Changes
-
-- 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-loader@1.0.6
-  - @sproutsocial/seeds-react-button@1.3.6
-
-## 0.1.2
-
-### Patch Changes
+### Minor Changes
 
-- Updated dependencies [40248a0]
-  - @sproutsocial/seeds-react-icon@2.0.0
-  - @sproutsocial/seeds-react-button@1.3.5
+- 1de0863: **Breaking Changes**
 
-## 0.1.1
+  `@sproutsocial/seeds-react-container` has been simplified to a basic styled container component. It now only provides border, background, and border-radius styling as a wrapper around Box, accepting all Box props.
 
-### Patch Changes
+  The previous Container component functionality (with title, subtitle, loading states, and header actions) has been moved to a new package: `@sproutsocial/seeds-react-content-block`.
 
-- Updated dependencies [8f6ba8d]
-  - @sproutsocial/seeds-react-theme@3.2.0
-  - @sproutsocial/seeds-react-box@1.1.6
-  - @sproutsocial/seeds-react-icon@1.1.8
-  - @sproutsocial/seeds-react-loader@1.0.5
-  - @sproutsocial/seeds-react-button@1.3.4
+  **Migration**
 
-## 0.1.0
+  If you were using the old Container component with `title`, `subtitle`, `isLoading`, or `headerActions` props, switch to `@sproutsocial/seeds-react-content-block`:
 
-### Minor Changes
+  ```tsx
+  // Before
+  import { Container } from "@sproutsocial/seeds-react-container";
 
-- 5f6fee3: Created new component called Container that accepts a title, subtitle, header action, and can display a loading state"
+  // After
+  import { ContentBlock } from "@sproutsocial/seeds-react-content-block";
+  ```

package/dist/esm/index.js

@@ -1,70 +1,27 @@
 // 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";
+import * as React from "react";
 
-// src/styles.ts
+// src/styles.tsx
 import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
-var ContainerStyles = styled.section`
+var StyledContainer = styled(Box)`
   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
+  border: ${({ theme }) => theme.borders[500]}
     ${({ 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]};
 `;
+var styles_default = StyledContainer;
 
 // 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
-      }
-    )
-  ] });
-};
+import { jsx } from "react/jsx-runtime";
+var Container = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsx(styles_default, { ...props, ref });
+  }
+);
+Container.displayName = "Container";
 var Container_default = Container;
-
-// src/index.ts
-var index_default = Container_default;
 export {
-  Container_default as Container,
-  index_default as default
+  Container_default as Container
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../../src/Container.tsx","../../src/styles.tsx"],"sourcesContent":["import * as React from \"react\";\nimport StyledContainer from \"./styles\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    return <StyledContainer {...props} ref={ref} />;\n  }\n);\n\nContainer.displayName = \"Container\";\n\nexport default Container;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst StyledContainer = styled(Box)<TypeBoxProps>`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n  border: ${({ theme }) => theme.borders[500]}\n    ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport default StyledContainer;\n"],"mappings":";AAAA,YAAY,WAAW;;;ACAvB,OAAO,YAAY;AACnB,SAAS,WAAW;AAGpB,IAAM,kBAAkB,OAAO,GAAG;AAAA,gBAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,mBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA,YACvC,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,MACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAGvD,IAAO,iBAAQ;;;ADLJ;AAFX,IAAM,YAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,WAAO,oBAAC,kBAAiB,GAAG,OAAO,KAAU;AAAA,EAC/C;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":[]}

package/dist/index.d.mts

@@ -1,16 +1,6 @@
-import React from 'react';
-import { Box } from '@sproutsocial/seeds-react-box';
+import * as React from 'react';
+import { TypeBoxProps } 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>;
+declare const Container: React.ForwardRefExoticComponent<Omit<TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-export { Container, type ContainerProps, Container as default };
+export { Container };

package/dist/index.d.ts

@@ -1,16 +1,6 @@
-import React from 'react';
-import { Box } from '@sproutsocial/seeds-react-box';
+import * as React from 'react';
+import { TypeBoxProps } 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>;
+declare const Container: React.ForwardRefExoticComponent<Omit<TypeBoxProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
-export { Container, type ContainerProps, Container as default };
+export { Container };

package/dist/index.js

@@ -30,76 +30,33 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  Container: () => Container_default,
-  default: () => index_default
+  Container: () => Container_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");
+var React = __toESM(require("react"));
 
-// src/styles.ts
+// src/styles.tsx
 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`
+var StyledContainer = (0, import_styled_components.default)(import_seeds_react_box.Box)`
   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
+  border: ${({ theme }) => theme.borders[500]}
     ${({ 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]};
 `;
+var styles_default = StyledContainer;
 
 // 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 = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(styles_default, { ...props, ref });
+  }
+);
+Container.displayName = "Container";
 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

package/dist/index.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../src/index.ts","../src/Container.tsx","../src/styles.tsx"],"sourcesContent":["import Container from \"./Container\";\n\nexport { Container };\nexport * from \"./ContainerTypes\";\n","import * as React from \"react\";\nimport StyledContainer from \"./styles\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst Container = React.forwardRef<HTMLDivElement, TypeBoxProps>(\n  (props, ref) => {\n    return <StyledContainer {...props} ref={ref} />;\n  }\n);\n\nContainer.displayName = \"Container\";\n\nexport default Container;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport type { TypeBoxProps } from \"@sproutsocial/seeds-react-box\";\n\nconst StyledContainer = styled(Box)<TypeBoxProps>`\n  background: ${({ theme }) => theme.colors.container.background.base};\n  border-radius: ${({ theme }) => theme.radii.outer};\n  border: ${({ theme }) => theme.borders[500]}\n    ${({ theme }) => theme.colors.container.border.base};\n`;\n\nexport default StyledContainer;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;;;ACAvB,+BAAmB;AACnB,6BAAoB;AAGpB,IAAM,sBAAkB,yBAAAA,SAAO,0BAAG;AAAA,gBAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,WAAW,IAAI;AAAA,mBAClD,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,KAAK;AAAA,YACvC,CAAC,EAAE,MAAM,MAAM,MAAM,QAAQ,GAAG,CAAC;AAAA,MACvC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,UAAU,OAAO,IAAI;AAAA;AAGvD,IAAO,iBAAQ;;;ADLJ;AAFX,IAAM,YAAkB;AAAA,EACtB,CAAC,OAAO,QAAQ;AACd,WAAO,4CAAC,kBAAiB,GAAG,OAAO,KAAU;AAAA,EAC/C;AACF;AAEA,UAAU,cAAc;AAExB,IAAO,oBAAQ;","names":["styled"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-container",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Seeds React Container",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -19,12 +19,8 @@
   },
   "dependencies": {
     "@sproutsocial/seeds-react-box": "^1.1.7",
-    "@sproutsocial/seeds-react-button": "^1.3.7",
-    "@sproutsocial/seeds-react-icon": "^2.0.2",
-    "@sproutsocial/seeds-react-loader": "^1.0.6",
-    "@sproutsocial/seeds-react-system-props": "^3.0.2",
-    "@sproutsocial/seeds-react-text": "^1.3.2",
-    "@sproutsocial/seeds-react-theme": "^3.2.1"
+    "@sproutsocial/seeds-react-theme": "^3.2.1",
+    "@sproutsocial/seeds-react-system-props": "^3.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/Container.stories.tsx

@@ -1,52 +1,17 @@
-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";
+import Container from "./Container";
 
-const meta: Meta<typeof Container> = {
+const meta = {
   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,
-  },
-};
+} satisfies Meta<typeof Container>;
 
 export default meta;
-
-type Story = StoryObj<typeof Container>;
+type Story = StoryObj<typeof meta>;
 
 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" }} />
-  ),
+  args: {
+    children: "This is a container.",
+  },
+  render: (args) => <Container p={400} {...args} />,
 };

package/src/Container.tsx

@@ -1,58 +1,13 @@
-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";
+import * as React from "react";
+import StyledContainer from "./styles";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
 
-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.forwardRef<HTMLDivElement, TypeBoxProps>(
+  (props, ref) => {
+    return <StyledContainer {...props} ref={ref} />;
+  }
+);
 
-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>
-  );
-};
+Container.displayName = "Container";
 
 export default Container;

package/src/ContainerTypes.ts

@@ -0,0 +1 @@
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";

package/src/__tests__/container.test.tsx

@@ -1,53 +1,10 @@
 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"
-      />
-    );
+describe("Container", () => {
+  it("should render properly", () => {
+    render(<Container>Test...</Container>);
 
-    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();
+    expect(screen.getByText("Test...")).toBeInTheDocument();
   });
 });

package/src/index.ts

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

package/src/styles.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { Box } from "@sproutsocial/seeds-react-box";
+import type { TypeBoxProps } from "@sproutsocial/seeds-react-box";
+
+const StyledContainer = styled(Box)<TypeBoxProps>`
+  background: ${({ theme }) => theme.colors.container.background.base};
+  border-radius: ${({ theme }) => theme.radii.outer};
+  border: ${({ theme }) => theme.borders[500]}
+    ${({ theme }) => theme.colors.container.border.base};
+`;
+
+export default StyledContainer;

package/tsconfig.json

@@ -5,5 +5,5 @@
     "module": "esnext"
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist", "coverage"]
+  "exclude": ["node_modules", "dist", "**/*.stories.tsx", "**/*.stories.ts"]
 }

package/src/styled.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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]};
-`;