@sproutsocial/seeds-react-content-block 0.2.11 → 0.3.2

package/.turbo/turbo-build.log

@@ -3,19 +3,19 @@ $ 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-content-block/tsup.config.ts
+CLI Using tsup config: /home/runner/_work/seeds/seeds/seeds-react/seeds-react-content-block/tsup.config.ts
 CLI Target: es2022
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js     4.24 KB
-CJS dist/index.js.map 3.56 KB
-CJS ⚡️ Build success in 224ms
-ESM dist/esm/index.js     2.02 KB
-ESM dist/esm/index.js.map 3.52 KB
-ESM ⚡️ Build success in 213ms
+CJS dist/index.js     4.32 KB
+CJS dist/index.js.map 5.44 KB
+CJS ⚡️ Build success in 13ms
+ESM dist/esm/index.js     2.67 KB
+ESM dist/esm/index.js.map 5.44 KB
+ESM ⚡️ Build success in 13ms
 DTS Build start
-DTS ⚡️ Build success in 30246ms
-DTS dist/index.d.ts  521.00 B
-DTS dist/index.d.mts 521.00 B
-Done in 37.40s.
+DTS ⚡️ Build success in 1433ms
+DTS dist/index.d.ts  1.29 KB
+DTS dist/index.d.mts 1.29 KB
+Done in 2.15s.

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # @sproutsocial/seeds-react-content-block
 
+## 0.3.2
+
+### Patch Changes
+
+- Updated dependencies [7d54d67]
+  - @sproutsocial/seeds-react-button@1.4.0
+
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [17d4f12]
+  - @sproutsocial/seeds-react-theme@3.6.0
+  - @sproutsocial/seeds-react-box@1.1.14
+  - @sproutsocial/seeds-react-container@0.3.8
+  - @sproutsocial/seeds-react-loader@1.0.14
+  - @sproutsocial/seeds-react-content-header@0.2.1
+  - @sproutsocial/seeds-react-button@1.3.20
+
+## 0.3.0
+
+### Minor Changes
+
+- 5bb63e1: ContentBlock now uses ContentHeader/CollapsibleContentHeader internally and supports optional collapsible behavior via isCollapsible prop.
+
+### Patch Changes
+
+- Updated dependencies [5bb63e1]
+- Updated dependencies [5bb63e1]
+  - @sproutsocial/seeds-react-content-header@0.2.0
+  - @sproutsocial/seeds-react-container@0.3.7
+  - @sproutsocial/seeds-react-button@1.3.19
+  - @sproutsocial/seeds-react-loader@1.0.13
+
+## 0.2.13
+
+### Patch Changes
+
+- Updated dependencies [118e300]
+  - @sproutsocial/seeds-react-theme@3.5.1
+  - @sproutsocial/seeds-react-box@1.1.13
+  - @sproutsocial/seeds-react-container@0.3.6
+  - @sproutsocial/seeds-react-icon@2.2.4
+  - @sproutsocial/seeds-react-loader@1.0.12
+  - @sproutsocial/seeds-react-button@1.3.18
+
+## 0.2.12
+
+### Patch Changes
+
+- @sproutsocial/seeds-react-icon@2.2.3
+- @sproutsocial/seeds-react-button@1.3.17
+
 ## 0.2.11
 
 ### Patch Changes

package/dist/esm/index.js

@@ -1,29 +1,29 @@
 // src/ContentBlock.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 { useState } from "react";
 import { Box } from "@sproutsocial/seeds-react-box";
-var ContentBlockHeader = 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 ContentBlockContent = styled(Box)`
-  padding: ${({ theme }) => theme.space[400]};
-`;
-
-// src/ContentBlock.tsx
+import { Loader } from "@sproutsocial/seeds-react-loader";
+import { Collapsible } from "@sproutsocial/seeds-react-collapsible";
+import {
+  ContentHeader,
+  CollapsibleContentHeader
+} from "@sproutsocial/seeds-react-content-header";
 import { Container } from "@sproutsocial/seeds-react-container";
 import { jsx, jsxs } from "react/jsx-runtime";
-var ContentBlock = ({
+var ContentArea = ({
+  isLoading,
+  children,
+  contentProps
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    p: 400,
+    ...contentProps,
+    borderBottomLeftRadius: "outer",
+    borderBottomRightRadius: "outer",
+    children: isLoading ? /* @__PURE__ */ jsx(Box, { my: 400, children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) : children
+  }
+);
+var CollapsibleContentBlock = ({
   title,
   subtitle,
   titleAs = "h2",
@@ -32,26 +32,60 @@ var ContentBlock = ({
   isLoading,
   headerActions,
   contentProps,
-  ...boxProps
+  isOpen: controlledIsOpen,
+  defaultOpen = true,
+  onOpenChange
 }) => {
-  return /* @__PURE__ */ jsxs(Container, { as: "section", ...boxProps, children: [
-    /* @__PURE__ */ jsxs(ContentBlockHeader, { 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 })
-    ] }),
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
+  const handleOpenChange = (newOpen) => {
+    if (controlledIsOpen === void 0) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+  return /* @__PURE__ */ jsx(Collapsible, { isOpen: open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(Container, { as: "section", children: [
+    /* @__PURE__ */ jsx(
+      CollapsibleContentHeader,
+      {
+        title,
+        subtitle,
+        headingLevel: titleAs,
+        subtitleAs,
+        headerActions,
+        trigger: Collapsible.Trigger,
+        triggerPosition: "left"
+      }
+    ),
+    /* @__PURE__ */ jsx(Collapsible.Panel, { children: /* @__PURE__ */ jsx(ContentArea, { isLoading, contentProps, children }) })
+  ] }) });
+};
+var ContentBlock = ({ isCollapsible, ...props }) => {
+  if (isCollapsible) {
+    return /* @__PURE__ */ jsx(CollapsibleContentBlock, { ...props });
+  }
+  const {
+    title,
+    subtitle,
+    titleAs = "h2",
+    subtitleAs = "h3",
+    children,
+    isLoading,
+    headerActions,
+    contentProps
+  } = props;
+  return /* @__PURE__ */ jsxs(Container, { as: "section", children: [
     /* @__PURE__ */ jsx(
-      Box2,
+      ContentHeader,
       {
-        p: 400,
-        ...contentProps,
-        borderBottomLeftRadius: "outer",
-        borderBottomRightRadius: "outer",
-        children: isLoading ? /* @__PURE__ */ jsx(Box2, { my: 400, children: /* @__PURE__ */ jsx(Loader, { delay: false }) }) : children
+        title,
+        subtitle,
+        headingLevel: titleAs,
+        subtitleAs,
+        headerActions
       }
-    )
+    ),
+    /* @__PURE__ */ jsx(ContentArea, { isLoading, contentProps, children })
   ] });
 };
 var ContentBlock_default = ContentBlock;

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ContentBlock.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 { ContentBlockHeader } from \"./styles\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\nexport interface ContentBlockProps {\n  title: string;\n  subtitle: string;\n  titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n}\n\nconst ContentBlock: React.FC<ContentBlockProps> = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  contentProps,\n  ...boxProps\n}) => {\n  return (\n    <Container as=\"section\" {...boxProps}>\n      <ContentBlockHeader>\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      </ContentBlockHeader>\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          children\n        )}\n      </Box>\n    </Container>\n  );\n};\n\nexport default ContentBlock;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContentBlockHeader = 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 ContentBlockContent = styled(Box)`\n  padding: ${({ theme }) => theme.space[400]};\n`;\n","import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n"],"mappings":";AAAA,OAAkB;AAClB,SAAS,OAAAA,YAAW;AACpB,SAAS,YAAY;AACrB,SAAS,cAAc;;;ACHvB,OAAO,YAAY;AACnB,SAAS,WAAW;AAEb,IAAM,qBAAqB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,mBAIzB,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,sBAAsB,OAAO,GAAG;AAAA,aAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;;;ADT5C,SAAS,iBAAiB;AA2BlB,SACE,KADF;AAdR,IAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,qBAAC,aAAU,IAAG,WAAW,GAAG,UAC1B;AAAA,yBAAC,sBACC;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,uBAAQ;;;AEtDf,IAAO,gBAAQ;","names":["Box","Box"]}
+{"version":3,"sources":["../../src/ContentBlock.tsx","../../src/index.ts"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { Collapsible } from \"@sproutsocial/seeds-react-collapsible\";\nimport {\n  ContentHeader,\n  CollapsibleContentHeader,\n} from \"@sproutsocial/seeds-react-content-header\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\ninterface ContentBlockBaseProps {\n  title: string;\n  subtitle: string;\n  titleAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n}\n\ntype StaticContentBlockProps = ContentBlockBaseProps & {\n  isCollapsible?: false;\n  isOpen?: never;\n  defaultOpen?: never;\n  onOpenChange?: never;\n};\n\ntype CollapsibleContentBlockProps = ContentBlockBaseProps & {\n  /** Enables collapse/expand behavior on the content area */\n  isCollapsible: true;\n  /** Controlled open state. When provided, the component is in controlled mode. */\n  isOpen?: boolean;\n  /** Initial open state for uncontrolled mode. Defaults to true. */\n  defaultOpen?: boolean;\n  /** Called when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport type ContentBlockProps =\n  | StaticContentBlockProps\n  | CollapsibleContentBlockProps;\n\nconst ContentArea = ({\n  isLoading,\n  children,\n  contentProps,\n}: Pick<ContentBlockBaseProps, \"isLoading\" | \"children\" | \"contentProps\">) => (\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      children\n    )}\n  </Box>\n);\n\nconst CollapsibleContentBlock = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  contentProps,\n  isOpen: controlledIsOpen,\n  defaultOpen = true,\n  onOpenChange,\n}: Omit<CollapsibleContentBlockProps, \"isCollapsible\">) => {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>\n      <Container as=\"section\">\n        <CollapsibleContentHeader\n          title={title}\n          subtitle={subtitle}\n          headingLevel={titleAs}\n          subtitleAs={subtitleAs}\n          headerActions={headerActions}\n          trigger={Collapsible.Trigger}\n          triggerPosition=\"left\"\n        />\n        <Collapsible.Panel>\n          <ContentArea isLoading={isLoading} contentProps={contentProps}>\n            {children}\n          </ContentArea>\n        </Collapsible.Panel>\n      </Container>\n    </Collapsible>\n  );\n};\n\nconst ContentBlock = ({ isCollapsible, ...props }: ContentBlockProps) => {\n  if (isCollapsible) {\n    return <CollapsibleContentBlock {...props} />;\n  }\n\n  const {\n    title,\n    subtitle,\n    titleAs = \"h2\",\n    subtitleAs = \"h3\",\n    children,\n    isLoading,\n    headerActions,\n    contentProps,\n  } = props;\n\n  return (\n    <Container as=\"section\">\n      <ContentHeader\n        title={title}\n        subtitle={subtitle}\n        headingLevel={titleAs}\n        subtitleAs={subtitleAs}\n        headerActions={headerActions}\n      />\n      <ContentArea isLoading={isLoading} contentProps={contentProps}>\n        {children}\n      </ContentArea>\n    </Container>\n  );\n};\n\nexport default ContentBlock;\n","import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n"],"mappings":";AAAA,SAAgB,gBAAgB;AAChC,SAAS,WAAW;AACpB,SAAS,cAAc;AACvB,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OACK;AACP,SAAS,iBAAiB;AAgDlB,cAiCF,YAjCE;AAbR,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,GAAG;AAAA,IACF,GAAG;AAAA,IACJ,wBAAuB;AAAA,IACvB,yBAAwB;AAAA,IAEvB,sBACC,oBAAC,OAAI,IAAI,KACP,8BAAC,UAAO,OAAO,OAAO,GACxB,IAEA;AAAA;AAEJ;AAGF,IAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AACF,MAA2D;AACzD,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,WAAW;AAC5D,QAAM,OAAO,qBAAqB,SAAY,mBAAmB;AAEjE,QAAM,mBAAmB,CAAC,YAAqB;AAC7C,QAAI,qBAAqB,QAAW;AAClC,sBAAgB,OAAO;AAAA,IACzB;AACA,mBAAe,OAAO;AAAA,EACxB;AAEA,SACE,oBAAC,eAAY,QAAQ,MAAM,cAAc,kBACvC,+BAAC,aAAU,IAAG,WACZ;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB,iBAAgB;AAAA;AAAA,IAClB;AAAA,IACA,oBAAC,YAAY,OAAZ,EACC,8BAAC,eAAY,WAAsB,cAChC,UACH,GACF;AAAA,KACF,GACF;AAEJ;AAEA,IAAM,eAAe,CAAC,EAAE,eAAe,GAAG,MAAM,MAAyB;AACvE,MAAI,eAAe;AACjB,WAAO,oBAAC,2BAAyB,GAAG,OAAO;AAAA,EAC7C;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE,qBAAC,aAAU,IAAG,WACZ;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,eAAY,WAAsB,cAChC,UACH;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;;;ACzIf,IAAO,gBAAQ;","names":[]}

package/dist/index.d.mts

@@ -1,16 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { Box } from '@sproutsocial/seeds-react-box';
 
-interface ContentBlockProps {
+interface ContentBlockBaseProps {
     title: string;
     subtitle: string;
-    titleAs: "h1" | "h2" | "h3" | "h4";
-    subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
+    titleAs?: "h1" | "h2" | "h3" | "h4";
+    subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
     isLoading?: boolean;
     children: React.ReactNode;
     headerActions?: React.ReactNode;
     contentProps?: React.ComponentProps<typeof Box>;
 }
-declare const ContentBlock: React.FC<ContentBlockProps>;
+type StaticContentBlockProps = ContentBlockBaseProps & {
+    isCollapsible?: false;
+    isOpen?: never;
+    defaultOpen?: never;
+    onOpenChange?: never;
+};
+type CollapsibleContentBlockProps = ContentBlockBaseProps & {
+    /** Enables collapse/expand behavior on the content area */
+    isCollapsible: true;
+    /** Controlled open state. When provided, the component is in controlled mode. */
+    isOpen?: boolean;
+    /** Initial open state for uncontrolled mode. Defaults to true. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+};
+type ContentBlockProps = StaticContentBlockProps | CollapsibleContentBlockProps;
+declare const ContentBlock: ({ isCollapsible, ...props }: ContentBlockProps) => react_jsx_runtime.JSX.Element;
 
 export { ContentBlock, type ContentBlockProps, ContentBlock as default };

package/dist/index.d.ts

@@ -1,16 +1,34 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import React from 'react';
 import { Box } from '@sproutsocial/seeds-react-box';
 
-interface ContentBlockProps {
+interface ContentBlockBaseProps {
     title: string;
     subtitle: string;
-    titleAs: "h1" | "h2" | "h3" | "h4";
-    subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
+    titleAs?: "h1" | "h2" | "h3" | "h4";
+    subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
     isLoading?: boolean;
     children: React.ReactNode;
     headerActions?: React.ReactNode;
     contentProps?: React.ComponentProps<typeof Box>;
 }
-declare const ContentBlock: React.FC<ContentBlockProps>;
+type StaticContentBlockProps = ContentBlockBaseProps & {
+    isCollapsible?: false;
+    isOpen?: never;
+    defaultOpen?: never;
+    onOpenChange?: never;
+};
+type CollapsibleContentBlockProps = ContentBlockBaseProps & {
+    /** Enables collapse/expand behavior on the content area */
+    isCollapsible: true;
+    /** Controlled open state. When provided, the component is in controlled mode. */
+    isOpen?: boolean;
+    /** Initial open state for uncontrolled mode. Defaults to true. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes */
+    onOpenChange?: (open: boolean) => void;
+};
+type ContentBlockProps = StaticContentBlockProps | CollapsibleContentBlockProps;
+declare const ContentBlock: ({ isCollapsible, ...props }: ContentBlockProps) => react_jsx_runtime.JSX.Element;
 
 export { ContentBlock, type ContentBlockProps, ContentBlock as default };

package/dist/index.js

@@ -1,9 +1,7 @@
 "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)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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
@@ -37,30 +27,27 @@ module.exports = __toCommonJS(index_exports);
 
 // src/ContentBlock.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 ContentBlockHeader = (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 ContentBlockContent = (0, import_styled_components.default)(import_seeds_react_box.Box)`
-  padding: ${({ theme }) => theme.space[400]};
-`;
-
-// src/ContentBlock.tsx
+var import_seeds_react_loader = require("@sproutsocial/seeds-react-loader");
+var import_seeds_react_collapsible = require("@sproutsocial/seeds-react-collapsible");
+var import_seeds_react_content_header = require("@sproutsocial/seeds-react-content-header");
 var import_seeds_react_container = require("@sproutsocial/seeds-react-container");
 var import_jsx_runtime = require("react/jsx-runtime");
-var ContentBlock = ({
+var ContentArea = ({
+  isLoading,
+  children,
+  contentProps
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  import_seeds_react_box.Box,
+  {
+    p: 400,
+    ...contentProps,
+    borderBottomLeftRadius: "outer",
+    borderBottomRightRadius: "outer",
+    children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_box.Box, { my: 400, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_loader.Loader, { delay: false }) }) : children
+  }
+);
+var CollapsibleContentBlock = ({
   title,
   subtitle,
   titleAs = "h2",
@@ -69,26 +56,60 @@ var ContentBlock = ({
   isLoading,
   headerActions,
   contentProps,
-  ...boxProps
+  isOpen: controlledIsOpen,
+  defaultOpen = true,
+  onOpenChange
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_container.Container, { as: "section", ...boxProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ContentBlockHeader, { 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 })
-    ] }),
+  const [internalOpen, setInternalOpen] = (0, import_react.useState)(defaultOpen);
+  const open = controlledIsOpen !== void 0 ? controlledIsOpen : internalOpen;
+  const handleOpenChange = (newOpen) => {
+    if (controlledIsOpen === void 0) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_collapsible.Collapsible, { isOpen: open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_container.Container, { as: "section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_seeds_react_content_header.CollapsibleContentHeader,
+      {
+        title,
+        subtitle,
+        headingLevel: titleAs,
+        subtitleAs,
+        headerActions,
+        trigger: import_seeds_react_collapsible.Collapsible.Trigger,
+        triggerPosition: "left"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_seeds_react_collapsible.Collapsible.Panel, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentArea, { isLoading, contentProps, children }) })
+  ] }) });
+};
+var ContentBlock = ({ isCollapsible, ...props }) => {
+  if (isCollapsible) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CollapsibleContentBlock, { ...props });
+  }
+  const {
+    title,
+    subtitle,
+    titleAs = "h2",
+    subtitleAs = "h3",
+    children,
+    isLoading,
+    headerActions,
+    contentProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_seeds_react_container.Container, { as: "section", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_seeds_react_box2.Box,
+      import_seeds_react_content_header.ContentHeader,
       {
-        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 }) }) : children
+        title,
+        subtitle,
+        headingLevel: titleAs,
+        subtitleAs,
+        headerActions
       }
-    )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContentArea, { isLoading, contentProps, children })
   ] });
 };
 var ContentBlock_default = ContentBlock;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/ContentBlock.tsx","../src/styles.ts"],"sourcesContent":["import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\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 { ContentBlockHeader } from \"./styles\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\nexport interface ContentBlockProps {\n  title: string;\n  subtitle: string;\n  titleAs: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n}\n\nconst ContentBlock: React.FC<ContentBlockProps> = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  contentProps,\n  ...boxProps\n}) => {\n  return (\n    <Container as=\"section\" {...boxProps}>\n      <ContentBlockHeader>\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      </ContentBlockHeader>\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          children\n        )}\n      </Box>\n    </Container>\n  );\n};\n\nexport default ContentBlock;\n","import styled from \"styled-components\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\n\nexport const ContentBlockHeader = 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 ContentBlockContent = 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,yBAAqB,yBAAAC,SAAO,0BAAG;AAAA;AAAA;AAAA;AAAA,mBAIzB,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,0BAAsB,yBAAAA,SAAO,0BAAG;AAAA,aAChC,CAAC,EAAE,MAAM,MAAM,MAAM,MAAM,GAAG,CAAC;AAAA;;;ADT5C,mCAA0B;AA2BlB;AAdR,IAAM,eAA4C,CAAC;AAAA,EACjD;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE,6CAAC,0CAAU,IAAG,WAAW,GAAG,UAC1B;AAAA,iDAAC,sBACC;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,uBAAQ;;;ADtDf,IAAO,gBAAQ;","names":["import_seeds_react_box","styled"]}
+{"version":3,"sources":["../src/index.ts","../src/ContentBlock.tsx"],"sourcesContent":["import ContentBlock from \"./ContentBlock\";\n\nexport type { ContentBlockProps } from \"./ContentBlock\";\n\nexport default ContentBlock;\nexport { ContentBlock };\n","import React, { useState } from \"react\";\nimport { Box } from \"@sproutsocial/seeds-react-box\";\nimport { Loader } from \"@sproutsocial/seeds-react-loader\";\nimport { Collapsible } from \"@sproutsocial/seeds-react-collapsible\";\nimport {\n  ContentHeader,\n  CollapsibleContentHeader,\n} from \"@sproutsocial/seeds-react-content-header\";\nimport { Container } from \"@sproutsocial/seeds-react-container\";\n\ninterface ContentBlockBaseProps {\n  title: string;\n  subtitle: string;\n  titleAs?: \"h1\" | \"h2\" | \"h3\" | \"h4\";\n  subtitleAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"p\";\n  isLoading?: boolean;\n  children: React.ReactNode;\n  headerActions?: React.ReactNode;\n  contentProps?: React.ComponentProps<typeof Box>;\n}\n\ntype StaticContentBlockProps = ContentBlockBaseProps & {\n  isCollapsible?: false;\n  isOpen?: never;\n  defaultOpen?: never;\n  onOpenChange?: never;\n};\n\ntype CollapsibleContentBlockProps = ContentBlockBaseProps & {\n  /** Enables collapse/expand behavior on the content area */\n  isCollapsible: true;\n  /** Controlled open state. When provided, the component is in controlled mode. */\n  isOpen?: boolean;\n  /** Initial open state for uncontrolled mode. Defaults to true. */\n  defaultOpen?: boolean;\n  /** Called when the open state changes */\n  onOpenChange?: (open: boolean) => void;\n};\n\nexport type ContentBlockProps =\n  | StaticContentBlockProps\n  | CollapsibleContentBlockProps;\n\nconst ContentArea = ({\n  isLoading,\n  children,\n  contentProps,\n}: Pick<ContentBlockBaseProps, \"isLoading\" | \"children\" | \"contentProps\">) => (\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      children\n    )}\n  </Box>\n);\n\nconst CollapsibleContentBlock = ({\n  title,\n  subtitle,\n  titleAs = \"h2\",\n  subtitleAs = \"h3\",\n  children,\n  isLoading,\n  headerActions,\n  contentProps,\n  isOpen: controlledIsOpen,\n  defaultOpen = true,\n  onOpenChange,\n}: Omit<CollapsibleContentBlockProps, \"isCollapsible\">) => {\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (controlledIsOpen === undefined) {\n      setInternalOpen(newOpen);\n    }\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>\n      <Container as=\"section\">\n        <CollapsibleContentHeader\n          title={title}\n          subtitle={subtitle}\n          headingLevel={titleAs}\n          subtitleAs={subtitleAs}\n          headerActions={headerActions}\n          trigger={Collapsible.Trigger}\n          triggerPosition=\"left\"\n        />\n        <Collapsible.Panel>\n          <ContentArea isLoading={isLoading} contentProps={contentProps}>\n            {children}\n          </ContentArea>\n        </Collapsible.Panel>\n      </Container>\n    </Collapsible>\n  );\n};\n\nconst ContentBlock = ({ isCollapsible, ...props }: ContentBlockProps) => {\n  if (isCollapsible) {\n    return <CollapsibleContentBlock {...props} />;\n  }\n\n  const {\n    title,\n    subtitle,\n    titleAs = \"h2\",\n    subtitleAs = \"h3\",\n    children,\n    isLoading,\n    headerActions,\n    contentProps,\n  } = props;\n\n  return (\n    <Container as=\"section\">\n      <ContentHeader\n        title={title}\n        subtitle={subtitle}\n        headingLevel={titleAs}\n        subtitleAs={subtitleAs}\n        headerActions={headerActions}\n      />\n      <ContentArea isLoading={isLoading} contentProps={contentProps}>\n        {children}\n      </ContentArea>\n    </Container>\n  );\n};\n\nexport default ContentBlock;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAAgC;AAChC,6BAAoB;AACpB,gCAAuB;AACvB,qCAA4B;AAC5B,wCAGO;AACP,mCAA0B;AAgDlB;AAbR,IAAM,cAAc,CAAC;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AACF,MACE;AAAA,EAAC;AAAA;AAAA,IACC,GAAG;AAAA,IACF,GAAG;AAAA,IACJ,wBAAuB;AAAA,IACvB,yBAAwB;AAAA,IAEvB,sBACC,4CAAC,8BAAI,IAAI,KACP,sDAAC,oCAAO,OAAO,OAAO,GACxB,IAEA;AAAA;AAEJ;AAGF,IAAM,0BAA0B,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,cAAc;AAAA,EACd;AACF,MAA2D;AACzD,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,WAAW;AAC5D,QAAM,OAAO,qBAAqB,SAAY,mBAAmB;AAEjE,QAAM,mBAAmB,CAAC,YAAqB;AAC7C,QAAI,qBAAqB,QAAW;AAClC,sBAAgB,OAAO;AAAA,IACzB;AACA,mBAAe,OAAO;AAAA,EACxB;AAEA,SACE,4CAAC,8CAAY,QAAQ,MAAM,cAAc,kBACvC,uDAAC,0CAAU,IAAG,WACZ;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,SAAS,2CAAY;AAAA,QACrB,iBAAgB;AAAA;AAAA,IAClB;AAAA,IACA,4CAAC,2CAAY,OAAZ,EACC,sDAAC,eAAY,WAAsB,cAChC,UACH,GACF;AAAA,KACF,GACF;AAEJ;AAEA,IAAM,eAAe,CAAC,EAAE,eAAe,GAAG,MAAM,MAAyB;AACvE,MAAI,eAAe;AACjB,WAAO,4CAAC,2BAAyB,GAAG,OAAO;AAAA,EAC7C;AAEA,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,SACE,6CAAC,0CAAU,IAAG,WACZ;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,cAAc;AAAA,QACd;AAAA,QACA;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,eAAY,WAAsB,cAChC,UACH;AAAA,KACF;AAEJ;AAEA,IAAO,uBAAQ;;;ADzIf,IAAO,gBAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-content-block",
-  "version": "0.2.11",
+  "version": "0.3.2",
   "description": "Seeds React ContentBlock",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -18,14 +18,13 @@
     "test:watch": "jest --watch --coverage=false"
   },
   "dependencies": {
-    "@sproutsocial/seeds-react-box": "^1.1.12",
-    "@sproutsocial/seeds-react-button": "^1.3.16",
-    "@sproutsocial/seeds-react-container": "^0.3.5",
-    "@sproutsocial/seeds-react-icon": "^2.2.2",
-    "@sproutsocial/seeds-react-loader": "^1.0.11",
-    "@sproutsocial/seeds-react-system-props": "^3.0.2",
-    "@sproutsocial/seeds-react-text": "^1.4.0",
-    "@sproutsocial/seeds-react-theme": "^3.5.0"
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-button": "^1.4.0",
+    "@sproutsocial/seeds-react-collapsible": "^2.0.0",
+    "@sproutsocial/seeds-react-container": "^0.3.8",
+    "@sproutsocial/seeds-react-content-header": "^0.2.1",
+    "@sproutsocial/seeds-react-loader": "^1.0.14",
+    "@sproutsocial/seeds-react-theme": "^3.6.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",

package/src/ContentBlock.stories.tsx

@@ -1,3 +1,4 @@
+import React, { useState } from "react";
 import ContentBlock from "./ContentBlock";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Text } from "@sproutsocial/seeds-react-text";
@@ -50,3 +51,70 @@ export const WithContentStyles: Story = {
     <ContentBlock {...args} contentProps={{ p: 0, py: 400, bg: "blue.300" }} />
   ),
 };
+
+export const Collapsible: Story = {
+  render: (args) => (
+    <ContentBlock {...args} isCollapsible>
+      <Text.SmallBodyCopy>
+        This content can be collapsed and expanded by clicking the header.
+      </Text.SmallBodyCopy>
+    </ContentBlock>
+  ),
+};
+
+export const CollapsibleDefaultClosed: Story = {
+  name: "Collapsible (Default Closed)",
+  render: (args) => (
+    <ContentBlock {...args} isCollapsible defaultOpen={false}>
+      <Text.SmallBodyCopy>
+        This content starts collapsed and can be expanded by clicking the
+        header.
+      </Text.SmallBodyCopy>
+    </ContentBlock>
+  ),
+};
+
+export const CollapsibleWithHeaderActions: Story = {
+  name: "Collapsible with Header Actions",
+  render: (args) => (
+    <ContentBlock
+      {...args}
+      isCollapsible
+      headerActions={
+        <Button size="small">
+          <Icon name="face-frown-open-solid" />
+        </Button>
+      }
+    >
+      <Text.SmallBodyCopy>
+        The header actions are independent from the collapse trigger. Clicking
+        the action button does not toggle the content.
+      </Text.SmallBodyCopy>
+    </ContentBlock>
+  ),
+};
+
+export const CollapsibleControlled: Story = {
+  name: "Collapsible (Controlled)",
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return (
+      <>
+        <Button onClick={() => setIsOpen(!isOpen)} mb={400}>
+          {isOpen ? "Close" : "Open"} externally
+        </Button>
+        <ContentBlock
+          {...args}
+          isCollapsible
+          isOpen={isOpen}
+          onOpenChange={setIsOpen}
+        >
+          <Text.SmallBodyCopy>
+            This content block is controlled externally. Use the button above or
+            click the header to toggle.
+          </Text.SmallBodyCopy>
+        </ContentBlock>
+      </>
+    );
+  },
+};

package/src/ContentBlock.tsx

@@ -1,22 +1,68 @@
-import React from "react";
+import React, { useState } from "react";
 import { Box } from "@sproutsocial/seeds-react-box";
-import { Text } from "@sproutsocial/seeds-react-text";
 import { Loader } from "@sproutsocial/seeds-react-loader";
-import { ContentBlockHeader } from "./styles";
+import { Collapsible } from "@sproutsocial/seeds-react-collapsible";
+import {
+  ContentHeader,
+  CollapsibleContentHeader,
+} from "@sproutsocial/seeds-react-content-header";
 import { Container } from "@sproutsocial/seeds-react-container";
 
-export interface ContentBlockProps {
+interface ContentBlockBaseProps {
   title: string;
   subtitle: string;
-  titleAs: "h1" | "h2" | "h3" | "h4";
-  subtitleAs: "h2" | "h3" | "h4" | "h5" | "p";
+  titleAs?: "h1" | "h2" | "h3" | "h4";
+  subtitleAs?: "h2" | "h3" | "h4" | "h5" | "p";
   isLoading?: boolean;
   children: React.ReactNode;
   headerActions?: React.ReactNode;
   contentProps?: React.ComponentProps<typeof Box>;
 }
 
-const ContentBlock: React.FC<ContentBlockProps> = ({
+type StaticContentBlockProps = ContentBlockBaseProps & {
+  isCollapsible?: false;
+  isOpen?: never;
+  defaultOpen?: never;
+  onOpenChange?: never;
+};
+
+type CollapsibleContentBlockProps = ContentBlockBaseProps & {
+  /** Enables collapse/expand behavior on the content area */
+  isCollapsible: true;
+  /** Controlled open state. When provided, the component is in controlled mode. */
+  isOpen?: boolean;
+  /** Initial open state for uncontrolled mode. Defaults to true. */
+  defaultOpen?: boolean;
+  /** Called when the open state changes */
+  onOpenChange?: (open: boolean) => void;
+};
+
+export type ContentBlockProps =
+  | StaticContentBlockProps
+  | CollapsibleContentBlockProps;
+
+const ContentArea = ({
+  isLoading,
+  children,
+  contentProps,
+}: Pick<ContentBlockBaseProps, "isLoading" | "children" | "contentProps">) => (
+  <Box
+    p={400}
+    {...contentProps}
+    borderBottomLeftRadius="outer"
+    borderBottomRightRadius="outer"
+  >
+    {isLoading ? (
+      <Box my={400}>
+        <Loader delay={false} />
+      </Box>
+    ) : (
+      children
+    )}
+  </Box>
+);
+
+const CollapsibleContentBlock = ({
   title,
   subtitle,
   titleAs = "h2",
@@ -25,33 +71,70 @@ const ContentBlock: React.FC<ContentBlockProps> = ({
   isLoading,
   headerActions,
   contentProps,
-  ...boxProps
-}) => {
+  isOpen: controlledIsOpen,
+  defaultOpen = true,
+  onOpenChange,
+}: Omit<CollapsibleContentBlockProps, "isCollapsible">) => {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledIsOpen !== undefined ? controlledIsOpen : internalOpen;
+
+  const handleOpenChange = (newOpen: boolean) => {
+    if (controlledIsOpen === undefined) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  };
+
   return (
-    <Container as="section" {...boxProps}>
-      <ContentBlockHeader>
-        <Box>
-          <Text.Headline as={titleAs}>{title}</Text.Headline>
-          <Text.Byline as={subtitleAs} fontWeight="normal">
-            {subtitle}
-          </Text.Byline>
-        </Box>
-        {headerActions && <Box>{headerActions}</Box>}
-      </ContentBlockHeader>
-      <Box
-        p={400}
-        {...contentProps}
-        borderBottomLeftRadius="outer"
-        borderBottomRightRadius="outer"
-      >
-        {isLoading ? (
-          <Box my={400}>
-            <Loader delay={false} />
-          </Box>
-        ) : (
-          children
-        )}
-      </Box>
+    <Collapsible isOpen={open} onOpenChange={handleOpenChange}>
+      <Container as="section">
+        <CollapsibleContentHeader
+          title={title}
+          subtitle={subtitle}
+          headingLevel={titleAs}
+          subtitleAs={subtitleAs}
+          headerActions={headerActions}
+          trigger={Collapsible.Trigger}
+          triggerPosition="left"
+        />
+        <Collapsible.Panel>
+          <ContentArea isLoading={isLoading} contentProps={contentProps}>
+            {children}
+          </ContentArea>
+        </Collapsible.Panel>
+      </Container>
+    </Collapsible>
+  );
+};
+
+const ContentBlock = ({ isCollapsible, ...props }: ContentBlockProps) => {
+  if (isCollapsible) {
+    return <CollapsibleContentBlock {...props} />;
+  }
+
+  const {
+    title,
+    subtitle,
+    titleAs = "h2",
+    subtitleAs = "h3",
+    children,
+    isLoading,
+    headerActions,
+    contentProps,
+  } = props;
+
+  return (
+    <Container as="section">
+      <ContentHeader
+        title={title}
+        subtitle={subtitle}
+        headingLevel={titleAs}
+        subtitleAs={subtitleAs}
+        headerActions={headerActions}
+      />
+      <ContentArea isLoading={isLoading} contentProps={contentProps}>
+        {children}
+      </ContentArea>
     </Container>
   );
 };

package/src/__tests__/content-block.test.tsx

@@ -1,4 +1,9 @@
-import { render, screen } from "@sproutsocial/seeds-react-testing-library";
+import React, { useState } from "react";
+import {
+  render,
+  screen,
+  fireEvent,
+} from "@sproutsocial/seeds-react-testing-library";
 import ContentBlock from "../ContentBlock";
 
 describe("ContentBlock Features", () => {
@@ -56,3 +61,150 @@ describe("ContentBlock Features", () => {
     ).toBeInTheDocument();
   });
 });
+
+describe("ContentBlock Collapsible", () => {
+  test("does not render chevron when not collapsible", () => {
+    render(
+      <ContentBlock title="Title" subtitle="Subtitle">
+        Content
+      </ContentBlock>
+    );
+
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  test("renders chevron icon when collapsible", () => {
+    render(
+      <ContentBlock title="Title" subtitle="Subtitle" isCollapsible>
+        Content
+      </ContentBlock>
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toBeInTheDocument();
+  });
+
+  test("defaults to open when collapsible", () => {
+    render(
+      <ContentBlock title="Title" subtitle="Subtitle" isCollapsible>
+        Visible Content
+      </ContentBlock>
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("Visible Content")).toBeInTheDocument();
+  });
+
+  test("can default to closed", () => {
+    render(
+      <ContentBlock
+        title="Title"
+        subtitle="Subtitle"
+        isCollapsible
+        defaultOpen={false}
+      >
+        Hidden Content
+      </ContentBlock>
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+  });
+
+  test("toggles content on trigger click", () => {
+    render(
+      <ContentBlock title="Title" subtitle="Subtitle" isCollapsible>
+        Toggle Content
+      </ContentBlock>
+    );
+
+    const trigger = screen.getByRole("button");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(trigger);
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("controlled mode respects isOpen prop", () => {
+    const ControlledContentBlock = () => {
+      const [open, setOpen] = useState(false);
+      return (
+        <>
+          <button onClick={() => setOpen(!open)}>External Toggle</button>
+          <ContentBlock
+            title="Title"
+            subtitle="Subtitle"
+            isCollapsible
+            isOpen={open}
+            onOpenChange={setOpen}
+          >
+            Controlled Content
+          </ContentBlock>
+        </>
+      );
+    };
+
+    render(<ControlledContentBlock />);
+
+    const trigger = screen.getByRole("button", { name: /External Toggle/i });
+    const collapsibleTrigger = screen
+      .getAllByRole("button")
+      .find((btn) => btn.getAttribute("aria-expanded") !== null);
+
+    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "false");
+
+    fireEvent.click(trigger);
+    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("headerActions render alongside trigger and do not toggle collapse", () => {
+    const actionClick = jest.fn();
+
+    render(
+      <ContentBlock
+        title="Title"
+        subtitle="Subtitle"
+        isCollapsible
+        headerActions={<button onClick={actionClick}>Action</button>}
+      >
+        Content
+      </ContentBlock>
+    );
+
+    const actionButton = screen.getByText("Action");
+    expect(actionButton).toBeInTheDocument();
+
+    const collapsibleTrigger = screen
+      .getAllByRole("button")
+      .find((btn) => btn.getAttribute("aria-expanded") !== null);
+    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
+
+    fireEvent.click(actionButton);
+    expect(actionClick).toHaveBeenCalledTimes(1);
+    // Collapse state should not change from clicking the action
+    expect(collapsibleTrigger).toHaveAttribute("aria-expanded", "true");
+  });
+
+  test("calls onOpenChange when toggled", () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <ContentBlock
+        title="Title"
+        subtitle="Subtitle"
+        isCollapsible
+        onOpenChange={onOpenChange}
+      >
+        Content
+      </ContentBlock>
+    );
+
+    const trigger = screen.getByRole("button");
+    fireEvent.click(trigger);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/styles.ts

@@ -1,16 +1,6 @@
 import styled from "styled-components";
 import { Box } from "@sproutsocial/seeds-react-box";
 
-export const ContentBlockHeader = 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 ContentBlockContent = styled(Box)`
   padding: ${({ theme }) => theme.space[400]};
 `;