@box/blueprint-web 7.3.1 → 7.4.0

package/lib-esm/index.css

@@ -3650,6 +3650,53 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .bp_navigation_menu_module_navigationMenuSeparator--79f80{
   margin-block:var(--space-2);
 }
+
+.bp_page_section_module_pageSectionContainer--30452{
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-8);
+}
+@media (width > 767px){
+  .bp_page_section_module_pageSectionContainer--30452{
+    gap:var(--space-12);
+  }
+}
+
+.bp_page_section_module_pageSection--30452{
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-7);
+}
+@media (width > 767px){
+  .bp_page_section_module_pageSection--30452{
+    flex-direction:row;
+    gap:var(--space-20);
+  }
+}
+
+.bp_page_section_module_pageSectionHeader--30452{
+  display:flex;
+  flex-direction:column;
+  gap:var(--space-2);
+}
+@media (width > 767px){
+  .bp_page_section_module_pageSectionHeader--30452{
+    width:200px;
+  }
+}
+@media (width > 1023px){
+  .bp_page_section_module_pageSectionHeader--30452{
+    width:242px;
+  }
+}
+
+.bp_page_section_module_pageSectionContent--30452{
+  flex-grow:1;
+}
+
+.bp_page_section_module_pageSectionDivider--30452{
+  width:100%;
+}
 .bp_chip_module_chip--34343{
   align-items:center;
   border:none;

package/lib-esm/index.d.ts

@@ -25,6 +25,7 @@ export * from './list-item/list-item';
 export * from './loading-indicator/loading-indicator';
 export * from './modal';
 export * from './navigation-menu';
+export * from './page-section';
 export * from './primitives/calendar';
 export * from './primitives/chips/filter-chip';
 export * from './primitives/context-menu';

package/lib-esm/index.js

@@ -27,6 +27,7 @@ export { ActionCell, Cell, Column, DropIndicator, Row, Table, TableBody, TableHe
 export { LoadingIndicator } from './loading-indicator/loading-indicator.js';
 export { Modal } from './modal/modal.js';
 export { NavigationMenu } from './navigation-menu/index.js';
+export { PageSection } from './page-section/index.js';
 export { Calendar } from './primitives/calendar/calendar.js';
 export { CalendarDate, CalendarDateTime, DateFormatter, Time, ZonedDateTime } from './primitives/calendar/classes.util.js';
 export { fromAbsolute } from './primitives/calendar/from-absolute.util.js';

package/lib-esm/page-section/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const PageSection: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>> & {
+    Container: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Header: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Divider: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
+};

package/lib-esm/page-section/index.js

@@ -0,0 +1,14 @@
+import { PageSection as PageSection$1 } from './page-section.js';
+import { PageSectionContainer } from './page-section-container.js';
+import { PageSectionContent } from './page-section-content.js';
+import { PageSectionDivider } from './page-section-divider.js';
+import { PageSectionHeader } from './page-section-header.js';
+
+const PageSection = Object.assign(PageSection$1, {
+  Container: PageSectionContainer,
+  Content: PageSectionContent,
+  Header: PageSectionHeader,
+  Divider: PageSectionDivider
+});
+
+export { PageSection };

package/lib-esm/page-section/page-section-container.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageSectionContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page-section/page-section-container.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page-section.module.js';
+
+const PageSectionContainer = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.pageSectionContainer, className)
+  });
+});
+PageSectionContainer.displayName = 'PageSection.Container';
+
+export { PageSectionContainer };

package/lib-esm/page-section/page-section-content.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageSectionContent: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page-section/page-section-content.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page-section.module.js';
+
+const PageSectionContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.pageSectionContent, className)
+  });
+});
+PageSectionContent.displayName = 'PageSection.Content';
+
+export { PageSectionContent };

package/lib-esm/page-section/page-section-divider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageSectionDivider: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;

package/lib-esm/page-section/page-section-divider.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Divider } from '../divider/divider.js';
+import styles from './page-section.module.js';
+
+const PageSectionDivider = /*#__PURE__*/forwardRef((_, forwardedRef) => {
+  return jsx(Divider, {
+    ref: forwardedRef,
+    className: styles.pageSectionDivider
+  });
+});
+PageSectionDivider.displayName = 'PageSection.Divider';
+
+export { PageSectionDivider };

package/lib-esm/page-section/page-section-header.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageSectionHeader: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page-section/page-section-header.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page-section.module.js';
+
+const PageSectionHeader = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.pageSectionHeader, className)
+  });
+});
+PageSectionHeader.displayName = 'PageSection.Header';
+
+export { PageSectionHeader };

package/lib-esm/page-section/page-section.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PageSection: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page-section/page-section.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page-section.module.js';
+
+const PageSection = /*#__PURE__*/forwardRef(({
+  className,
+  ...rest
+}, forwardedRef) => {
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.pageSection, className)
+  });
+});
+PageSection.displayName = 'PageSection';
+
+export { PageSection };

package/lib-esm/page-section/page-section.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"pageSectionContainer":"bp_page_section_module_pageSectionContainer--30452","pageSection":"bp_page_section_module_pageSection--30452","pageSectionHeader":"bp_page_section_module_pageSectionHeader--30452","pageSectionContent":"bp_page_section_module_pageSectionContent--30452","pageSectionDivider":"bp_page_section_module_pageSectionDivider--30452"};
+
+export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.3.1",
+    "version": "7.4.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -58,7 +58,7 @@
         "@box/storybook-utils": "^0.2.0",
         "react-stately": "^3.31.1"
     },
-    "gitHead": "ab5974d6dd25a5257f13ce3cce54f257960b6a0b",
+    "gitHead": "b47b6c859b0acae07254d87a87f916a26656367d",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {