@ankhorage/zora 1.4.12 → 1.5.1

package/src/patterns/zora-tab-bar/ZoraTabBar.tsx

@@ -1,25 +1,48 @@
-import { TabBar as SurfaceTabBar } from '@ankhorage/surface';
 import React from 'react';
+import { Pressable, Text as ReactNativeText } from 'react-native';
 
-import { Surface } from '../../foundation';
+import { Icon } from '../../components/icon';
+import { Box, Surface } from '../../foundation';
 import {
   createTabBarItemPressHandler,
   resolveNavigationItems,
 } from '../../internal/resolveZoraNavigationItems';
+import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ZoraTabBarProps } from './types';
 
+function resolveAccessibilityLabel(
+  label: React.ReactNode,
+  explicitLabel?: string,
+): string | undefined {
+  if (explicitLabel !== undefined) {
+    return explicitLabel;
+  }
+
+  if (typeof label === 'string') {
+    return label;
+  }
+
+  if (typeof label === 'number') {
+    return String(label);
+  }
+
+  return undefined;
+}
+
 function ZoraTabBarInner({
   themeId: _themeId,
   mode: _mode,
   state,
   navigation,
   descriptors,
+  insets,
   routeMap,
   compact = false,
   chrome = 'raised',
   testID,
 }: ZoraTabBarProps) {
+  const { theme } = useZoraTheme();
   const resolved = resolveNavigationItems({
     state,
     descriptors,
@@ -27,19 +50,85 @@ function ZoraTabBarInner({
     kind: 'tab',
   });
 
-  const items = resolved.map((item) => ({
-    id: item.route.key,
-    label: item.label,
-    icon: item.metadata?.icon,
-    badge: item.metadata?.badge,
-    active: item.active,
-    disabled: item.disabled,
-    onPress: createTabBarItemPressHandler({ item, navigation }),
-    accessibilityLabel: item.metadata?.accessibilityLabel,
-    testID: item.metadata?.testID,
-  }));
-
-  const content = <SurfaceTabBar compact={compact} items={items} testID={testID} />;
+  const bottomInset = insets?.bottom ?? 0;
+  const minHeight = compact ? 56 : 64;
+  const labelSize = compact ? theme.typography.sizes.xs : theme.typography.sizes.s;
+  const labelWeight = theme.typography.weights.medium;
+  const content = (
+    <Box
+      bg="surface"
+      style={{
+        borderTopColor: theme.semantics.border.default,
+        borderTopWidth: 1,
+        flexDirection: 'row',
+        minHeight: minHeight + bottomInset,
+        paddingBottom: bottomInset,
+      }}
+      testID={testID}
+    >
+      {resolved.map((item) => {
+        const { active } = item;
+        const { disabled } = item;
+        const contentColor = disabled
+          ? theme.semantics.content.subtle
+          : active
+            ? theme.semantics.action.primary.base
+            : theme.semantics.content.muted;
+        const backgroundColor = active
+          ? theme.semantics.action.primary.softBg
+          : theme.semantics.surface.default;
+
+        return (
+          <Pressable
+            accessibilityLabel={resolveAccessibilityLabel(
+              item.label,
+              item.metadata?.accessibilityLabel,
+            )}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active, disabled }}
+            disabled={disabled}
+            key={item.route.key}
+            onPress={createTabBarItemPressHandler({ item, navigation })}
+            style={{
+              alignItems: 'center',
+              backgroundColor,
+              flex: 1,
+              justifyContent: 'center',
+              minHeight,
+              opacity: disabled ? 0.48 : 1,
+              paddingHorizontal: theme.spacing.s,
+              paddingVertical: compact ? theme.spacing.xs : theme.spacing.s,
+            }}
+            testID={
+              item.metadata?.testID ?? (testID ? `${testID}-item-${item.route.key}` : undefined)
+            }
+          >
+            {item.metadata?.icon ? (
+              <Icon
+                color={contentColor}
+                name={item.metadata.icon.name}
+                provider={item.metadata.icon.provider}
+                size={compact ? theme.spacing.m : theme.spacing.l}
+              />
+            ) : null}
+            <ReactNativeText
+              numberOfLines={1}
+              style={{
+                color: contentColor,
+                fontSize: labelSize,
+                fontWeight: labelWeight,
+                lineHeight: compact ? 16 : 20,
+                marginTop: item.metadata?.icon ? theme.spacing.xs : 0,
+                textAlign: 'center',
+              }}
+            >
+              {item.label}
+            </ReactNativeText>
+          </Pressable>
+        );
+      })}
+    </Box>
+  );
 
   if (chrome === 'none') {
     return content;

package/src/showcaseCoverage.test.ts

@@ -69,9 +69,8 @@ const REQUIRED_SHOWCASE_COVERAGE = {
   layouts: [
     'AppShell',
     'AuthLayout',
-    'Page',
-    'PageHeader',
-    'PageSection',
+    'Screen',
+    'ScreenSection',
     'SettingsLayout',
     'SidebarLayout',
     'TopbarLayout',

package/src/theme/themeScopeStructure.test.ts

@@ -84,9 +84,8 @@ const scopedComponentFiles = [
 
   join(srcDir, 'layout', 'app-shell', 'AppShell.tsx'),
   join(srcDir, 'layout', 'auth-layout', 'AuthLayout.tsx'),
-  join(srcDir, 'layout', 'page', 'Page.tsx'),
-  join(srcDir, 'layout', 'page-header', 'PageHeader.tsx'),
-  join(srcDir, 'layout', 'page-section', 'PageSection.tsx'),
+  join(srcDir, 'layout', 'screen', 'Screen.tsx'),
+  join(srcDir, 'layout', 'screen-section', 'ScreenSection.tsx'),
   join(srcDir, 'layout', 'settings-layout', 'SettingsLayout.tsx'),
   join(srcDir, 'layout', 'sidebar-layout', 'SidebarLayout.tsx'),
   join(srcDir, 'layout', 'topbar-layout', 'TopbarLayout.tsx'),
@@ -154,9 +153,8 @@ const scopedPropTypeFiles = [
 
   join(srcDir, 'layout', 'app-shell', 'types.ts'),
   join(srcDir, 'layout', 'auth-layout', 'types.ts'),
-  join(srcDir, 'layout', 'page', 'types.ts'),
-  join(srcDir, 'layout', 'page-header', 'types.ts'),
-  join(srcDir, 'layout', 'page-section', 'types.ts'),
+  join(srcDir, 'layout', 'screen', 'types.ts'),
+  join(srcDir, 'layout', 'screen-section', 'types.ts'),
   join(srcDir, 'layout', 'settings-layout', 'types.ts'),
   join(srcDir, 'layout', 'sidebar-layout', 'types.ts'),
   join(srcDir, 'layout', 'topbar-layout', 'types.ts'),

package/dist/layout/page/Page.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { PageProps } from './types';
-export declare const Page: (props: PageProps) => React.ReactElement | null;
-//# sourceMappingURL=Page.d.ts.map

package/dist/layout/page/Page.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAsBzC,eAAO,MAAM,IAAI,iDAAgC,CAAC"}

package/dist/layout/page/Page.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Container, Stack } from '../../foundation';
-import { resolvePageMaxWidth } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function PageInner({ themeId: _themeId, mode: _mode, children, header, footer, width = 'default', testID, }) {
-    return (<Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
-      <Stack gap="l">
-        {header}
-        {children}
-        {footer}
-      </Stack>
-    </Container>);
-}
-export const Page = withZoraThemeScope(PageInner);
-//# sourceMappingURL=Page.js.map

package/dist/layout/page/Page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Page.js","sourceRoot":"","sources":["../../../src/layout/page/Page.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,SAAS,CAAC,EACjB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAK,GAAG,SAAS,EACjB,MAAM,GACI;IACV,OAAO,CACL,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,mBAAmB,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CACtE;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;QAAA,CAAC,MAAM,CACP;QAAA,CAAC,QAAQ,CACT;QAAA,CAAC,MAAM,CACT;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Container, Stack } from '../../foundation';\nimport { resolvePageMaxWidth } from '../../internal/recipes';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PageProps } from './types';\n\nfunction PageInner({\n  themeId: _themeId,\n  mode: _mode,\n  children,\n  header,\n  footer,\n  width = 'default',\n  testID,\n}: PageProps) {\n  return (\n    <Container maxWidth={resolvePageMaxWidth(width)} py=\"xl\" testID={testID}>\n      <Stack gap=\"l\">\n        {header}\n        {children}\n        {footer}\n      </Stack>\n    </Container>\n  );\n}\n\nexport const Page = withZoraThemeScope(PageInner);\n"]}

package/dist/layout/page/index.d.ts

@@ -1,3 +0,0 @@
-export { Page } from './Page';
-export type { PageProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/layout/page/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist/layout/page/index.js

@@ -1,2 +0,0 @@
-export { Page } from './Page';
-//# sourceMappingURL=index.js.map

package/dist/layout/page/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/page/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC","sourcesContent":["export { Page } from './Page';\nexport type { PageProps } from './types';\n"]}

package/dist/layout/page/meta.d.ts

@@ -1,19 +0,0 @@
-export declare const pageMeta: {
-    readonly name: "Page";
-    readonly category: "layout";
-    readonly directManifestNode: true;
-    readonly allowedChildren: readonly ["PageHeader", "PageSection", "Box", "Stack", "Grid", "Container", "Divider", "Text", "Heading", "Button", "Input", "Textarea", "FormField", "Card", "Panel", "Notice", "EmptyState", "SectionHeader", "SettingsRow", "PostCard", "ChatListItem", "MessageBubble"];
-    readonly blueprint: {
-        readonly label: "Page";
-    };
-    readonly props: {
-        readonly width: {
-            readonly type: "enum";
-            readonly category: "Layout";
-            readonly label: "Width";
-            readonly enum: readonly ["narrow", "default", "wide"];
-            readonly default: "default";
-        };
-    };
-};
-//# sourceMappingURL=meta.d.ts.map

package/dist/layout/page/meta.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/layout/page/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;CAiBiB,CAAC"}

package/dist/layout/page/meta.js

@@ -1,20 +0,0 @@
-import { PAGE_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';
-export const pageMeta = {
-    name: 'Page',
-    category: 'layout',
-    directManifestNode: true,
-    allowedChildren: [...PAGE_ALLOWED_CHILDREN],
-    blueprint: {
-        label: 'Page',
-    },
-    props: {
-        width: {
-            type: 'enum',
-            category: 'Layout',
-            label: 'Width',
-            enum: ['narrow', 'default', 'wide'],
-            default: 'default',
-        },
-    },
-};
-//# sourceMappingURL=meta.js.map

package/dist/layout/page/meta.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/layout/page/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAEvE,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,QAAQ,EAAE,QAAQ;IAClB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,qBAAqB,CAAC;IAC3C,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE,QAAQ;YAClB,KAAK,EAAE,OAAO;YACd,IAAI,EAAE,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,CAAC;YACnC,OAAO,EAAE,SAAS;SACnB;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { PAGE_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nexport const pageMeta = {\n  name: 'Page',\n  category: 'layout',\n  directManifestNode: true,\n  allowedChildren: [...PAGE_ALLOWED_CHILDREN],\n  blueprint: {\n    label: 'Page',\n  },\n  props: {\n    width: {\n      type: 'enum',\n      category: 'Layout',\n      label: 'Width',\n      enum: ['narrow', 'default', 'wide'],\n      default: 'default',\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/layout/page/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/page/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,aAAa;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,gBAAgB,CAAC;CAC1B"}

package/dist/layout/page/types.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=types.js.map

package/dist/layout/page/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/page/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraContentWidth } from '../../internal/recipes';\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface PageProps extends ZoraBaseProps {\n  children?: React.ReactNode;\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n  width?: ZoraContentWidth;\n}\n"]}

package/dist/layout/page-header/PageHeader.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { PageHeaderProps } from './types';
-export declare const PageHeader: (props: PageHeaderProps) => React.ReactElement | null;
-//# sourceMappingURL=PageHeader.d.ts.map

package/dist/layout/page-header/PageHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/layout/page-header/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAyC/C,eAAO,MAAM,UAAU,uDAAsC,CAAC"}

package/dist/layout/page-header/PageHeader.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import { Heading } from '../../components/heading';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-function PageHeaderInner({ themeId: _themeId, mode: _mode, title, description, eyebrow, actions, meta, testID, }) {
-    return (<Stack align={{ base: 'flex-start', md: 'center' }} direction={{ base: 'column', md: 'row' }} gap="l" justify="space-between" testID={testID}>
-      <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-        <Stack gap="s">
-          {eyebrow ? (<Text tone="muted" variant="caption" weight="semiBold">
-              {eyebrow}
-            </Text>) : null}
-          <Heading level={1}>{title}</Heading>
-          {description ? (<Text tone="muted" variant="body">
-              {description}
-            </Text>) : null}
-          {meta ? <Box pt="xs">{meta}</Box> : null}
-        </Stack>
-      </Box>
-      {actions ? <Box>{actions}</Box> : null}
-    </Stack>);
-}
-export const PageHeader = withZoraThemeScope(PageHeaderInner);
-//# sourceMappingURL=PageHeader.js.map

package/dist/layout/page-header/PageHeader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageHeader.js","sourceRoot":"","sources":["../../../src/layout/page-header/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAC7C,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,eAAe,CAAC,EACvB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,GACU;IAChB,OAAO,CACL,CAAC,KAAK,CACJ,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAC5C,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CACzC,GAAG,CAAC,GAAG,CACP,OAAO,CAAC,eAAe,CACvB,MAAM,CAAC,CAAC,MAAM,CAAC,CAEf;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,CACxD;QAAA,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CACZ;UAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CACT,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CACpD;cAAA,CAAC,OAAO,CACV;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,CACnC;UAAA,CAAC,WAAW,CAAC,CAAC,CAAC,CACb,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAC/B;cAAA,CAAC,WAAW,CACd;YAAA,EAAE,IAAI,CAAC,CACR,CAAC,CAAC,CAAC,IAAI,CACR;UAAA,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;QAAA,EAAE,KAAK,CACT;MAAA,EAAE,GAAG,CACL;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Heading } from '../../components/heading';\nimport { Text } from '../../components/text';\nimport { Box, Stack } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PageHeaderProps } from './types';\n\nfunction PageHeaderInner({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  eyebrow,\n  actions,\n  meta,\n  testID,\n}: PageHeaderProps) {\n  return (\n    <Stack\n      align={{ base: 'flex-start', md: 'center' }}\n      direction={{ base: 'column', md: 'row' }}\n      gap=\"l\"\n      justify=\"space-between\"\n      testID={testID}\n    >\n      <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>\n        <Stack gap=\"s\">\n          {eyebrow ? (\n            <Text tone=\"muted\" variant=\"caption\" weight=\"semiBold\">\n              {eyebrow}\n            </Text>\n          ) : null}\n          <Heading level={1}>{title}</Heading>\n          {description ? (\n            <Text tone=\"muted\" variant=\"body\">\n              {description}\n            </Text>\n          ) : null}\n          {meta ? <Box pt=\"xs\">{meta}</Box> : null}\n        </Stack>\n      </Box>\n      {actions ? <Box>{actions}</Box> : null}\n    </Stack>\n  );\n}\n\nexport const PageHeader = withZoraThemeScope(PageHeaderInner);\n"]}

package/dist/layout/page-header/index.d.ts

@@ -1,3 +0,0 @@
-export { PageHeader } from './PageHeader';
-export type { PageHeaderProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/layout/page-header/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC"}

package/dist/layout/page-header/index.js

@@ -1,2 +0,0 @@
-export { PageHeader } from './PageHeader';
-//# sourceMappingURL=index.js.map

package/dist/layout/page-header/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC","sourcesContent":["export { PageHeader } from './PageHeader';\nexport type { PageHeaderProps } from './types';\n"]}

package/dist/layout/page-header/meta.d.ts

@@ -1,38 +0,0 @@
-export declare const pageHeaderMeta: {
-    readonly name: "PageHeader";
-    readonly category: "layout";
-    readonly directManifestNode: true;
-    readonly allowedChildren: readonly [];
-    readonly blueprint: {
-        readonly label: "Page header";
-        readonly defaultProps: {
-            readonly title: "Page title";
-            readonly description: "Short description.";
-        };
-    };
-    readonly props: {
-        readonly title: {
-            readonly type: "string";
-            readonly category: "Content";
-            readonly label: "Title";
-            readonly default: "Page title";
-        };
-        readonly description: {
-            readonly type: "string";
-            readonly category: "Content";
-            readonly label: "Description";
-            readonly default: "Short description.";
-        };
-        readonly eyebrow: {
-            readonly type: "string";
-            readonly category: "Content";
-            readonly label: "Eyebrow";
-        };
-        readonly meta: {
-            readonly type: "string";
-            readonly category: "Content";
-            readonly label: "Meta";
-        };
-    };
-};
-//# sourceMappingURL=meta.d.ts.map

package/dist/layout/page-header/meta.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/layout/page-header/meta.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCW,CAAC"}

package/dist/layout/page-header/meta.js

@@ -1,38 +0,0 @@
-export const pageHeaderMeta = {
-    name: 'PageHeader',
-    category: 'layout',
-    directManifestNode: true,
-    allowedChildren: [],
-    blueprint: {
-        label: 'Page header',
-        defaultProps: {
-            title: 'Page title',
-            description: 'Short description.',
-        },
-    },
-    props: {
-        title: {
-            type: 'string',
-            category: 'Content',
-            label: 'Title',
-            default: 'Page title',
-        },
-        description: {
-            type: 'string',
-            category: 'Content',
-            label: 'Description',
-            default: 'Short description.',
-        },
-        eyebrow: {
-            type: 'string',
-            category: 'Content',
-            label: 'Eyebrow',
-        },
-        meta: {
-            type: 'string',
-            category: 'Content',
-            label: 'Meta',
-        },
-    },
-};
-//# sourceMappingURL=meta.js.map

package/dist/layout/page-header/meta.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/layout/page-header/meta.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,QAAQ;IAClB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,EAAE;IACnB,SAAS,EAAE;QACT,KAAK,EAAE,aAAa;QACpB,YAAY,EAAE;YACZ,KAAK,EAAE,YAAY;YACnB,WAAW,EAAE,oBAAoB;SAClC;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,YAAY;SACtB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,aAAa;YACpB,OAAO,EAAE,oBAAoB;SAC9B;QACD,OAAO,EAAE;YACP,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,SAAS;SACjB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,MAAM;SACd;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\n\nexport const pageHeaderMeta = {\n  name: 'PageHeader',\n  category: 'layout',\n  directManifestNode: true,\n  allowedChildren: [],\n  blueprint: {\n    label: 'Page header',\n    defaultProps: {\n      title: 'Page title',\n      description: 'Short description.',\n    },\n  },\n  props: {\n    title: {\n      type: 'string',\n      category: 'Content',\n      label: 'Title',\n      default: 'Page title',\n    },\n    description: {\n      type: 'string',\n      category: 'Content',\n      label: 'Description',\n      default: 'Short description.',\n    },\n    eyebrow: {\n      type: 'string',\n      category: 'Content',\n      label: 'Eyebrow',\n    },\n    meta: {\n      type: 'string',\n      category: 'Content',\n      label: 'Meta',\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/layout/page-header/types.d.ts

@@ -1,10 +0,0 @@
-import type React from 'react';
-import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
-export interface PageHeaderProps extends ZoraBaseProps {
-    title: React.ReactNode;
-    description?: React.ReactNode;
-    eyebrow?: React.ReactNode;
-    actions?: React.ReactNode;
-    meta?: React.ReactNode;
-}
-//# sourceMappingURL=types.d.ts.map

package/dist/layout/page-header/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/page-header/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,eAAgB,SAAQ,aAAa;IACpD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB"}

package/dist/layout/page-header/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/page-header/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface PageHeaderProps extends ZoraBaseProps {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  eyebrow?: React.ReactNode;\n  actions?: React.ReactNode;\n  meta?: React.ReactNode;\n}\n"]}

package/dist/layout/page-section/PageSection.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { PageSectionProps } from './types';
-export declare const PageSection: (props: PageSectionProps) => React.ReactElement | null;
-//# sourceMappingURL=PageSection.d.ts.map

package/dist/layout/page-section/PageSection.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageSection.d.ts","sourceRoot":"","sources":["../../../src/layout/page-section/PageSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAmBhD,eAAO,MAAM,WAAW,wDAAuC,CAAC"}

package/dist/layout/page-section/PageSection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PageSection.js","sourceRoot":"","sources":["../../../src/layout/page-section/PageSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAQ,EACR,MAAM,GACW;IACjB,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC5B;MAAA,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAG,CAAC,CAAC,CAAC,IAAI,CAC3F;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../foundation';\nimport { SectionHeader } from '../../patterns/section-header';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { PageSectionProps } from './types';\n\nfunction PageSectionInner({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  actions,\n  children,\n  testID,\n}: PageSectionProps) {\n  return (\n    <Stack gap=\"m\" testID={testID}>\n      {title ? <SectionHeader actions={actions} description={description} title={title} /> : null}\n      {children}\n    </Stack>\n  );\n}\n\nexport const PageSection = withZoraThemeScope(PageSectionInner);\n"]}

package/dist/layout/page-section/index.d.ts

@@ -1,3 +0,0 @@
-export { PageSection } from './PageSection';
-export type { PageSectionProps } from './types';
-//# sourceMappingURL=index.d.ts.map

package/dist/layout/page-section/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/layout/page-section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/layout/page-section/index.js

@@ -1,2 +0,0 @@
-export { PageSection } from './PageSection';
-//# sourceMappingURL=index.js.map

package/dist/layout/page-section/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/layout/page-section/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC","sourcesContent":["export { PageSection } from './PageSection';\nexport type { PageSectionProps } from './types';\n"]}

package/dist/layout/page-section/meta.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/layout/page-section/meta.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BU,CAAC"}

package/dist/layout/page-section/meta.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"meta.js","sourceRoot":"","sources":["../../../src/layout/page-section/meta.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,6BAA6B,EAAE,MAAM,gCAAgC,CAAC;AAE/E,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,QAAQ;IAClB,kBAAkB,EAAE,IAAI;IACxB,eAAe,EAAE,CAAC,GAAG,6BAA6B,CAAC;IACnD,SAAS,EAAE;QACT,KAAK,EAAE,cAAc;QACrB,YAAY,EAAE;YACZ,KAAK,EAAE,SAAS;YAChB,WAAW,EAAE,sBAAsB;SACpC;KACF;IACD,KAAK,EAAE;QACL,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,OAAO;YACd,OAAO,EAAE,SAAS;SACnB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,QAAQ;YACd,QAAQ,EAAE,SAAS;YACnB,KAAK,EAAE,aAAa;YACpB,OAAO,EAAE,sBAAsB;SAChC;KACF;CACmC,CAAC","sourcesContent":["import type { ZoraComponentMeta } from '../../metadata';\nimport { PAGE_SECTION_ALLOWED_CHILDREN } from '../../metadata/allowedChildren';\n\nexport const pageSectionMeta = {\n  name: 'PageSection',\n  category: 'layout',\n  directManifestNode: true,\n  allowedChildren: [...PAGE_SECTION_ALLOWED_CHILDREN],\n  blueprint: {\n    label: 'Page section',\n    defaultProps: {\n      title: 'Section',\n      description: 'Section description.',\n    },\n  },\n  props: {\n    title: {\n      type: 'string',\n      category: 'Content',\n      label: 'Title',\n      default: 'Section',\n    },\n    description: {\n      type: 'string',\n      category: 'Content',\n      label: 'Description',\n      default: 'Section description.',\n    },\n  },\n} as const satisfies ZoraComponentMeta;\n"]}

package/dist/layout/page-section/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/layout/page-section/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,aAAa;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/layout/page-section/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/layout/page-section/types.ts"],"names":[],"mappings":"","sourcesContent":["import type React from 'react';\n\nimport type { ZoraBaseProps } from '../../theme/ZoraBaseProps';\n\nexport interface PageSectionProps extends ZoraBaseProps {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n  children?: React.ReactNode;\n}\n"]}

package/src/layout/page/Page.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { Container, Stack } from '../../foundation';
-import { resolvePageMaxWidth } from '../../internal/recipes';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { PageProps } from './types';
-
-function PageInner({
-  themeId: _themeId,
-  mode: _mode,
-  children,
-  header,
-  footer,
-  width = 'default',
-  testID,
-}: PageProps) {
-  return (
-    <Container maxWidth={resolvePageMaxWidth(width)} py="xl" testID={testID}>
-      <Stack gap="l">
-        {header}
-        {children}
-        {footer}
-      </Stack>
-    </Container>
-  );
-}
-
-export const Page = withZoraThemeScope(PageInner);

package/src/layout/page/index.ts

@@ -1,2 +0,0 @@
-export { Page } from './Page';
-export type { PageProps } from './types';

package/src/layout/page-header/PageHeader.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { Heading } from '../../components/heading';
-import { Text } from '../../components/text';
-import { Box, Stack } from '../../foundation';
-import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
-import type { PageHeaderProps } from './types';
-
-function PageHeaderInner({
-  themeId: _themeId,
-  mode: _mode,
-  title,
-  description,
-  eyebrow,
-  actions,
-  meta,
-  testID,
-}: PageHeaderProps) {
-  return (
-    <Stack
-      align={{ base: 'flex-start', md: 'center' }}
-      direction={{ base: 'column', md: 'row' }}
-      gap="l"
-      justify="space-between"
-      testID={testID}
-    >
-      <Box flex={{ md: 1 }} width={{ base: '100%', md: 'auto' }}>
-        <Stack gap="s">
-          {eyebrow ? (
-            <Text tone="muted" variant="caption" weight="semiBold">
-              {eyebrow}
-            </Text>
-          ) : null}
-          <Heading level={1}>{title}</Heading>
-          {description ? (
-            <Text tone="muted" variant="body">
-              {description}
-            </Text>
-          ) : null}
-          {meta ? <Box pt="xs">{meta}</Box> : null}
-        </Stack>
-      </Box>
-      {actions ? <Box>{actions}</Box> : null}
-    </Stack>
-  );
-}
-
-export const PageHeader = withZoraThemeScope(PageHeaderInner);

package/src/layout/page-header/index.ts

@@ -1,2 +0,0 @@
-export { PageHeader } from './PageHeader';
-export type { PageHeaderProps } from './types';