@ankhorage/zora 16.0.0 → 17.0.0

package/dist/patterns/collection-editor/CollectionEditor.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '../../features/button/public';
 import { IconButton } from '../../features/button/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Panel } from '../panel';
@@ -10,14 +10,14 @@ function CollectionEditorInner({ themeId: _themeId, mode: _mode, title, descript
     return (<Panel compact description={description} interactionPolicy={interactionPolicy} testID={testID} title={title} actions={onAdd ? (<Button variant="soft" size="s" disabled={disabled} interactionPolicy={interactionPolicy} onPress={onAdd}>
             {addLabel}
           </Button>) : null}>
-      <Stack gap="s">
-        {isEmpty ? (<Box py="m">
+      <View gap="s">
+        {isEmpty ? (<View py="m">
             <Text align="center" emphasis="muted">
               {emptyLabel}
             </Text>
-          </Box>) : (items.map((item, index) => (<Box key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
-              <Stack direction="row" gap="m" align="center">
-                <Box flex={1}>
+          </View>) : (items.map((item, index) => (<View key={index} bg="subtle" p="s" radius="m" borderColor="border" borderWidth={1}>
+              <View direction="row" gap="m" align="center">
+                <View flex={1}>
                   {renderItem({
                 item,
                 index,
@@ -27,17 +27,17 @@ function CollectionEditorInner({ themeId: _themeId, mode: _mode, title, descript
                 canMoveUp: index > 0,
                 canMoveDown: index < items.length - 1,
             })}
-                </Box>
-                <Stack direction="row" gap="xs">
+                </View>
+                <View direction="row" gap="xs">
                   {onMove ? (<>
                       <IconButton icon={{ name: 'arrow-up-outline' }} label="Move Up" disabled={disabled ?? index === 0} interactionPolicy={interactionPolicy} onPress={() => onMove(index, index - 1)} size="s" variant="ghost"/>
                       <IconButton icon={{ name: 'arrow-down-outline' }} label="Move Down" disabled={disabled ?? index === items.length - 1} interactionPolicy={interactionPolicy} onPress={() => onMove(index, index + 1)} size="s" variant="ghost"/>
                     </>) : null}
                   {onRemove ? (<IconButton icon={{ name: 'trash-outline' }} label="Remove" color="danger" disabled={disabled} interactionPolicy={interactionPolicy} onPress={() => onRemove(index)} size="s" variant="ghost"/>) : null}
-                </Stack>
-              </Stack>
-            </Box>)))}
-      </Stack>
+                </View>
+              </View>
+            </View>)))}
+      </View>
     </Panel>);
 }
 /***

package/dist/patterns/collection-editor/CollectionEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionEditor.js","sourceRoot":"","sources":["../../../src/patterns/collection-editor/CollectionEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../features/button/public';\nimport { IconButton } from '../../features/button/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { CollectionEditorProps } from './types';\n\nfunction CollectionEditorInner<TItem>({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  items,\n  renderItem,\n  onAdd,\n  onRemove,\n  onMove,\n  addLabel = 'Add Item',\n  emptyLabel = 'No items yet.',\n  disabled,\n  testID,\n  interactionPolicy,\n}: CollectionEditorProps<TItem>) {\n  const isEmpty = items.length === 0;\n\n  return (\n    <Panel\n      compact\n      description={description}\n      interactionPolicy={interactionPolicy}\n      testID={testID}\n      title={title}\n      actions={\n        onAdd ? (\n          <Button\n            variant=\"soft\"\n            size=\"s\"\n            disabled={disabled}\n            interactionPolicy={interactionPolicy}\n            onPress={onAdd}\n          >\n            {addLabel}\n          </Button>\n        ) : null\n      }\n    >\n      <Stack gap=\"s\">\n        {isEmpty ? (\n          <Box py=\"m\">\n            <Text align=\"center\" emphasis=\"muted\">\n              {emptyLabel}\n            </Text>\n          </Box>\n        ) : (\n          items.map((item, index) => (\n            <Box key={index} bg=\"subtle\" p=\"s\" radius=\"m\" borderColor=\"border\" borderWidth={1}>\n              <Stack direction=\"row\" gap=\"m\" align=\"center\">\n                <Box flex={1}>\n                  {renderItem({\n                    item,\n                    index,\n                    remove: () => onRemove?.(index),\n                    moveUp: () => onMove?.(index, index - 1),\n                    moveDown: () => onMove?.(index, index + 1),\n                    canMoveUp: index > 0,\n                    canMoveDown: index < items.length - 1,\n                  })}\n                </Box>\n                <Stack direction=\"row\" gap=\"xs\">\n                  {onMove ? (\n                    <>\n                      <IconButton\n                        icon={{ name: 'arrow-up-outline' }}\n                        label=\"Move Up\"\n                        disabled={disabled ?? index === 0}\n                        interactionPolicy={interactionPolicy}\n                        onPress={() => onMove(index, index - 1)}\n                        size=\"s\"\n                        variant=\"ghost\"\n                      />\n                      <IconButton\n                        icon={{ name: 'arrow-down-outline' }}\n                        label=\"Move Down\"\n                        disabled={disabled ?? index === items.length - 1}\n                        interactionPolicy={interactionPolicy}\n                        onPress={() => onMove(index, index + 1)}\n                        size=\"s\"\n                        variant=\"ghost\"\n                      />\n                    </>\n                  ) : null}\n                  {onRemove ? (\n                    <IconButton\n                      icon={{ name: 'trash-outline' }}\n                      label=\"Remove\"\n                      color=\"danger\"\n                      disabled={disabled}\n                      interactionPolicy={interactionPolicy}\n                      onPress={() => onRemove(index)}\n                      size=\"s\"\n                      variant=\"ghost\"\n                    />\n                  ) : null}\n                </Stack>\n              </Stack>\n            </Box>\n          ))\n        )}\n      </Stack>\n    </Panel>\n  );\n}\n\n/***\n * Editor pattern for adding, removing, and reordering a collection of items.\n *\n \n */\nexport const CollectionEditor = withZoraThemeScope(CollectionEditorInner);\n"]}
+{"version":3,"file":"CollectionEditor.js","sourceRoot":"","sources":["../../../src/patterns/collection-editor/CollectionEditor.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../features/button/public';\nimport { IconButton } from '../../features/button/public';\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { Panel } from '../panel';\nimport type { CollectionEditorProps } from './types';\n\nfunction CollectionEditorInner<TItem>({\n  themeId: _themeId,\n  mode: _mode,\n  title,\n  description,\n  items,\n  renderItem,\n  onAdd,\n  onRemove,\n  onMove,\n  addLabel = 'Add Item',\n  emptyLabel = 'No items yet.',\n  disabled,\n  testID,\n  interactionPolicy,\n}: CollectionEditorProps<TItem>) {\n  const isEmpty = items.length === 0;\n\n  return (\n    <Panel\n      compact\n      description={description}\n      interactionPolicy={interactionPolicy}\n      testID={testID}\n      title={title}\n      actions={\n        onAdd ? (\n          <Button\n            variant=\"soft\"\n            size=\"s\"\n            disabled={disabled}\n            interactionPolicy={interactionPolicy}\n            onPress={onAdd}\n          >\n            {addLabel}\n          </Button>\n        ) : null\n      }\n    >\n      <View gap=\"s\">\n        {isEmpty ? (\n          <View py=\"m\">\n            <Text align=\"center\" emphasis=\"muted\">\n              {emptyLabel}\n            </Text>\n          </View>\n        ) : (\n          items.map((item, index) => (\n            <View key={index} bg=\"subtle\" p=\"s\" radius=\"m\" borderColor=\"border\" borderWidth={1}>\n              <View direction=\"row\" gap=\"m\" align=\"center\">\n                <View flex={1}>\n                  {renderItem({\n                    item,\n                    index,\n                    remove: () => onRemove?.(index),\n                    moveUp: () => onMove?.(index, index - 1),\n                    moveDown: () => onMove?.(index, index + 1),\n                    canMoveUp: index > 0,\n                    canMoveDown: index < items.length - 1,\n                  })}\n                </View>\n                <View direction=\"row\" gap=\"xs\">\n                  {onMove ? (\n                    <>\n                      <IconButton\n                        icon={{ name: 'arrow-up-outline' }}\n                        label=\"Move Up\"\n                        disabled={disabled ?? index === 0}\n                        interactionPolicy={interactionPolicy}\n                        onPress={() => onMove(index, index - 1)}\n                        size=\"s\"\n                        variant=\"ghost\"\n                      />\n                      <IconButton\n                        icon={{ name: 'arrow-down-outline' }}\n                        label=\"Move Down\"\n                        disabled={disabled ?? index === items.length - 1}\n                        interactionPolicy={interactionPolicy}\n                        onPress={() => onMove(index, index + 1)}\n                        size=\"s\"\n                        variant=\"ghost\"\n                      />\n                    </>\n                  ) : null}\n                  {onRemove ? (\n                    <IconButton\n                      icon={{ name: 'trash-outline' }}\n                      label=\"Remove\"\n                      color=\"danger\"\n                      disabled={disabled}\n                      interactionPolicy={interactionPolicy}\n                      onPress={() => onRemove(index)}\n                      size=\"s\"\n                      variant=\"ghost\"\n                    />\n                  ) : null}\n                </View>\n              </View>\n            </View>\n          ))\n        )}\n      </View>\n    </Panel>\n  );\n}\n\n/***\n * Editor pattern for adding, removing, and reordering a collection of items.\n *\n \n */\nexport const CollectionEditor = withZoraThemeScope(CollectionEditorInner);\n"]}

package/dist/patterns/confirm-dialog/ConfirmDialog.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import { Button } from '../../features/button/public';
 import { Dialog } from '../../features/dialog/public';
-import { Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function ConfirmDialogInner({ themeId: _themeId, mode: _mode, visible, title, description, children, confirmLabel = 'Confirm', cancelLabel = 'Cancel', confirmColor = 'danger', confirmVariant = 'solid', busy = false, closeOnBackdrop = true, onConfirm, onCancel, testID, interactionPolicy, }) {
-    return (<Dialog closeOnBackdrop={closeOnBackdrop} description={description} interactionPolicy={interactionPolicy} footer={<Stack direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
+    return (<Dialog closeOnBackdrop={closeOnBackdrop} description={description} interactionPolicy={interactionPolicy} footer={<View direction={{ base: 'column', md: 'row' }} gap="s" justify="flex-end">
           <Button variant="soft" interactionPolicy={interactionPolicy} onPress={onCancel} color="neutral">
             {cancelLabel}
           </Button>
           <Button variant={confirmVariant} loading={busy} interactionPolicy={interactionPolicy} onPress={onConfirm} color={confirmColor}>
             {confirmLabel}
           </Button>
-        </Stack>} onDismiss={onCancel} testID={testID} title={title} visible={visible} width="narrow">
+        </View>} onDismiss={onCancel} testID={testID} title={title} visible={visible} width="narrow">
       {children}
     </Dialog>);
 }

package/dist/patterns/confirm-dialog/ConfirmDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/patterns/confirm-dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,YAAY,GAAG,SAAS,EACxB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,QAAQ,EACvB,cAAc,GAAG,OAAO,EACxB,IAAI,GAAG,KAAK,EACZ,eAAe,GAAG,IAAI,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,iBAAiB,GACE;IACnB,OAAO,CACL,CAAC,MAAM,CACL,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,MAAM,CAAC,CACL,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,CACzE;UAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,KAAK,CAAC,SAAS,CAEf;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,OAAO,CAAC,CAAC,IAAI,CAAC,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,KAAK,CAAC,CAAC,YAAY,CAAC,CAEpB;YAAA,CAAC,YAAY,CACf;UAAA,EAAE,MAAM,CACV;QAAA,EAAE,KAAK,CACT,CAAC,CACD,SAAS,CAAC,CAAC,QAAQ,CAAC,CACpB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,QAAQ,CAEd;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../features/button/public';\nimport { Dialog } from '../../features/dialog/public';\nimport { Stack } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ConfirmDialogProps } from './types';\n\nfunction ConfirmDialogInner({\n  themeId: _themeId,\n  mode: _mode,\n  visible,\n  title,\n  description,\n  children,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  confirmColor = 'danger',\n  confirmVariant = 'solid',\n  busy = false,\n  closeOnBackdrop = true,\n  onConfirm,\n  onCancel,\n  testID,\n  interactionPolicy,\n}: ConfirmDialogProps) {\n  return (\n    <Dialog\n      closeOnBackdrop={closeOnBackdrop}\n      description={description}\n      interactionPolicy={interactionPolicy}\n      footer={\n        <Stack direction={{ base: 'column', md: 'row' }} gap=\"s\" justify=\"flex-end\">\n          <Button\n            variant=\"soft\"\n            interactionPolicy={interactionPolicy}\n            onPress={onCancel}\n            color=\"neutral\"\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            variant={confirmVariant}\n            loading={busy}\n            interactionPolicy={interactionPolicy}\n            onPress={onConfirm}\n            color={confirmColor}\n          >\n            {confirmLabel}\n          </Button>\n        </Stack>\n      }\n      onDismiss={onCancel}\n      testID={testID}\n      title={title}\n      visible={visible}\n      width=\"narrow\"\n    >\n      {children}\n    </Dialog>\n  );\n}\n\n/***\n * Confirmation dialog pattern with cancel/confirm actions.\n *\n \n */\nexport const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);\n"]}
+{"version":3,"file":"ConfirmDialog.js","sourceRoot":"","sources":["../../../src/patterns/confirm-dialog/ConfirmDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,kBAAkB,CAAC,EAC1B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAQ,EACR,YAAY,GAAG,SAAS,EACxB,WAAW,GAAG,QAAQ,EACtB,YAAY,GAAG,QAAQ,EACvB,cAAc,GAAG,OAAO,EACxB,IAAI,GAAG,KAAK,EACZ,eAAe,GAAG,IAAI,EACtB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,iBAAiB,GACE;IACnB,OAAO,CACL,CAAC,MAAM,CACL,eAAe,CAAC,CAAC,eAAe,CAAC,CACjC,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,MAAM,CAAC,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,CAAC,UAAU,CACxE;UAAA,CAAC,MAAM,CACL,OAAO,CAAC,MAAM,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,QAAQ,CAAC,CAClB,KAAK,CAAC,SAAS,CAEf;YAAA,CAAC,WAAW,CACd;UAAA,EAAE,MAAM,CACR;UAAA,CAAC,MAAM,CACL,OAAO,CAAC,CAAC,cAAc,CAAC,CACxB,OAAO,CAAC,CAAC,IAAI,CAAC,CACd,iBAAiB,CAAC,CAAC,iBAAiB,CAAC,CACrC,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,KAAK,CAAC,CAAC,YAAY,CAAC,CAEpB;YAAA,CAAC,YAAY,CACf;UAAA,EAAE,MAAM,CACV;QAAA,EAAE,IAAI,CACR,CAAC,CACD,SAAS,CAAC,CAAC,QAAQ,CAAC,CACpB,MAAM,CAAC,CAAC,MAAM,CAAC,CACf,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,QAAQ,CAEd;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,kBAAkB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Button } from '../../features/button/public';\nimport { Dialog } from '../../features/dialog/public';\nimport { View } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ConfirmDialogProps } from './types';\n\nfunction ConfirmDialogInner({\n  themeId: _themeId,\n  mode: _mode,\n  visible,\n  title,\n  description,\n  children,\n  confirmLabel = 'Confirm',\n  cancelLabel = 'Cancel',\n  confirmColor = 'danger',\n  confirmVariant = 'solid',\n  busy = false,\n  closeOnBackdrop = true,\n  onConfirm,\n  onCancel,\n  testID,\n  interactionPolicy,\n}: ConfirmDialogProps) {\n  return (\n    <Dialog\n      closeOnBackdrop={closeOnBackdrop}\n      description={description}\n      interactionPolicy={interactionPolicy}\n      footer={\n        <View direction={{ base: 'column', md: 'row' }} gap=\"s\" justify=\"flex-end\">\n          <Button\n            variant=\"soft\"\n            interactionPolicy={interactionPolicy}\n            onPress={onCancel}\n            color=\"neutral\"\n          >\n            {cancelLabel}\n          </Button>\n          <Button\n            variant={confirmVariant}\n            loading={busy}\n            interactionPolicy={interactionPolicy}\n            onPress={onConfirm}\n            color={confirmColor}\n          >\n            {confirmLabel}\n          </Button>\n        </View>\n      }\n      onDismiss={onCancel}\n      testID={testID}\n      title={title}\n      visible={visible}\n      width=\"narrow\"\n    >\n      {children}\n    </Dialog>\n  );\n}\n\n/***\n * Confirmation dialog pattern with cancel/confirm actions.\n *\n \n */\nexport const ConfirmDialog = withZoraThemeScope(ConfirmDialogInner);\n"]}

package/dist/patterns/filter-bar/FilterBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAqB9C;;;;GAIG;AACH,eAAO,MAAM,SAAS,sDAAqC,CAAC"}
+{"version":3,"file":"FilterBar.d.ts","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAqB9C;;;;GAIG;AACH,eAAO,MAAM,SAAS,sDAAqC,CAAC"}

package/dist/patterns/filter-bar/FilterBar.js

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Box } from '../../features/layout/public';
-import { Inline } from '../../foundation';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function FilterBarInner({ themeId: _themeId, mode: _mode, interactionPolicy: _interactionPolicy, testID, leading, trailing, children, wrap = true, }) {
-    return (<Inline align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
-      {leading ? <Box>{leading}</Box> : null}
-      <Box flex={1}>{children}</Box>
-      {trailing ? <Box>{trailing}</Box> : null}
-    </Inline>);
+    return (<View direction="row" align="center" gap="s" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>
+      {leading ? <View>{leading}</View> : null}
+      <View flex={1}>{children}</View>
+      {trailing ? <View>{trailing}</View> : null}
+    </View>);
 }
 /***
  * Horizontal filter/action bar layout with leading/trailing slots.

package/dist/patterns/filter-bar/FilterBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,GACI;IACf,OAAO,CACL,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC5E;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACtC;MAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAC7B;MAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Box } from '../../features/layout/public';\nimport { Inline } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { FilterBarProps } from './types';\n\nfunction FilterBarInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  testID,\n  leading,\n  trailing,\n  children,\n  wrap = true,\n}: FilterBarProps) {\n  return (\n    <Inline align=\"center\" gap=\"s\" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>\n      {leading ? <Box>{leading}</Box> : null}\n      <Box flex={1}>{children}</Box>\n      {trailing ? <Box>{trailing}</Box> : null}\n    </Inline>\n  );\n}\n\n/***\n * Horizontal filter/action bar layout with leading/trailing slots.\n *\n \n */\nexport const FilterBar = withZoraThemeScope(FilterBarInner);\n"]}
+{"version":3,"file":"FilterBar.js","sourceRoot":"","sources":["../../../src/patterns/filter-bar/FilterBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,iBAAiB,EAAE,kBAAkB,EACrC,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,IAAI,GACI;IACf,OAAO,CACL,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAC1F;MAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;MAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAC/B;MAAA,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC5C;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { View } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { FilterBarProps } from './types';\n\nfunction FilterBarInner({\n  themeId: _themeId,\n  mode: _mode,\n  interactionPolicy: _interactionPolicy,\n  testID,\n  leading,\n  trailing,\n  children,\n  wrap = true,\n}: FilterBarProps) {\n  return (\n    <View direction=\"row\" align=\"center\" gap=\"s\" testID={testID} wrap={wrap ? 'wrap' : 'nowrap'}>\n      {leading ? <View>{leading}</View> : null}\n      <View flex={1}>{children}</View>\n      {trailing ? <View>{trailing}</View> : null}\n    </View>\n  );\n}\n\n/***\n * Horizontal filter/action bar layout with leading/trailing slots.\n *\n \n */\nexport const FilterBar = withZoraThemeScope(FilterBarInner);\n"]}

package/dist/patterns/inspector-field/InspectorField.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { FormField } from '../../features/form/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function InspectorFieldInner({ themeId: _themeId, mode: _mode, label, control, children, interactionPolicy: _interactionPolicy, ...props }) {
     return (<FormField {...props} label={label}>
-      <Stack direction="row" gap="s" align="center">
-        <Box flex={1}>{children}</Box>
-        {control ? <Box>{control}</Box> : null}
-      </Stack>
+      <View direction="row" gap="s" align="center">
+        <View flex={1}>{children}</View>
+        {control ? <View>{control}</View> : null}
+      </View>
     </FormField>);
 }
 /***

package/dist/patterns/inspector-field/InspectorField.js.map

@@ -1 +1 @@
-{"version":3,"file":"InspectorField.js","sourceRoot":"","sources":["../../../src/patterns/inspector-field/InspectorField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,mBAAmB,CAAC,EAC3B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,KAAK,EACY;IACpB,OAAO,CACL,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACjC;MAAA,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAC3C;QAAA,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,CAC7B;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CACxC;MAAA,EAAE,KAAK,CACT;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { FormField } from '../../features/form/public';\nimport { Box, Stack } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { InspectorFieldProps } from './types';\n\nfunction InspectorFieldInner({\n  themeId: _themeId,\n  mode: _mode,\n  label,\n  control,\n  children,\n  interactionPolicy: _interactionPolicy,\n  ...props\n}: InspectorFieldProps) {\n  return (\n    <FormField {...props} label={label}>\n      <Stack direction=\"row\" gap=\"s\" align=\"center\">\n        <Box flex={1}>{children}</Box>\n        {control ? <Box>{control}</Box> : null}\n      </Stack>\n    </FormField>\n  );\n}\n\n/***\n * Inspector row pattern with label, description, and control slot.\n *\n \n */\nexport const InspectorField = withZoraThemeScope(InspectorFieldInner);\n"]}
+{"version":3,"file":"InspectorField.js","sourceRoot":"","sources":["../../../src/patterns/inspector-field/InspectorField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAGpE,SAAS,mBAAmB,CAAC,EAC3B,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,KAAK,EACL,OAAO,EACP,QAAQ,EACR,iBAAiB,EAAE,kBAAkB,EACrC,GAAG,KAAK,EACY;IACpB,OAAO,CACL,CAAC,SAAS,CAAC,IAAI,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CACjC;MAAA,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,QAAQ,CAC1C;QAAA,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,IAAI,CAC/B;QAAA,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAC1C;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC,mBAAmB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { FormField } from '../../features/form/public';\nimport { View } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { InspectorFieldProps } from './types';\n\nfunction InspectorFieldInner({\n  themeId: _themeId,\n  mode: _mode,\n  label,\n  control,\n  children,\n  interactionPolicy: _interactionPolicy,\n  ...props\n}: InspectorFieldProps) {\n  return (\n    <FormField {...props} label={label}>\n      <View direction=\"row\" gap=\"s\" align=\"center\">\n        <View flex={1}>{children}</View>\n        {control ? <View>{control}</View> : null}\n      </View>\n    </FormField>\n  );\n}\n\n/***\n * Inspector row pattern with label, description, and control slot.\n *\n \n */\nexport const InspectorField = withZoraThemeScope(InspectorFieldInner);\n"]}

package/dist/patterns/list/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAkB,SAAS,EAAgC,MAAM,SAAS,CAAC;AAiEvF;;;;GAIG;AACH,eAAO,MAAM,IAAI,iDAAgC,CAAC"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAkB,SAAS,EAAgC,MAAM,SAAS,CAAC;AAiEvF;;;;GAIG;AACH,eAAO,MAAM,IAAI,iDAAgC,CAAC"}

package/dist/patterns/list/List.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Divider, Stack } from '../../features/layout/public';
-import { Spacer } from '../../foundation';
+import { Divider, View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { ListRow } from './ListRow';
 import { resolveListSeparator } from './resolveListSeparator';
@@ -11,26 +10,26 @@ function resolveRowCompact({ item, compact, }) {
     return item.compact ?? compact ?? false;
 }
 function ListItemsInner({ themeId: _themeId, mode: _mode, testID, items, rowVariant = 'divider', compact, }) {
-    return (<Stack gap="none" testID={testID}>
+    return (<View gap="none" testID={testID}>
       {items.map((item, index) => {
             const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });
             const separator = resolveListSeparator(effectiveVariant, index);
             return (<React.Fragment key={`${index}`}>
             {separator === 'divider' ? <Divider /> : null}
-            {separator === 'spacer' ? <Spacer size="s"/> : null}
+            {separator === 'spacer' ? <View height="s"/> : null}
             <ListRow {...item} compact={resolveRowCompact({ item, compact })} variant={effectiveVariant}/>
           </React.Fragment>);
         })}
-    </Stack>);
+    </View>);
 }
 function ListInner(props) {
     if ('items' in props) {
         return <ListItemsInner {...props}/>;
     }
     const { themeId: _themeId, mode: _mode, children, testID } = props;
-    return (<Stack gap="none" testID={testID}>
+    return (<View gap="none" testID={testID}>
       {children}
-    </Stack>);
+    </View>);
 }
 /***
  * List container pattern for composing `ListRow` and `ListSection`.

package/dist/patterns/list/List.js.map

@@ -1 +1 @@
-{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/patterns/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,cAAc,GAIf;IACC,OAAO,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC;AACxC,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,GAIR;IACC,OAAO,IAAI,CAAC,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC;AAC1C,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,UAAU,GAAG,SAAS,EACtB,OAAO,GACQ;IACf,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC/B;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC;YACjF,MAAM,SAAS,GAAG,oBAAoB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;YAEhE,OAAO,CACL,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAC9B;YAAA,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,IAAI,CAC7C;YAAA,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAG,CAAC,CAAC,CAAC,IAAI,CACpD;YAAA,CAAC,OAAO,CACN,IAAI,IAAI,CAAC,CACT,OAAO,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAC9C,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAE9B;UAAA,EAAE,KAAK,CAAC,QAAQ,CAAC,CAClB,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAgB;IACjC,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;IACvC,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnE,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC/B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Divider, Stack } from '../../features/layout/public';\nimport { Spacer } from '../../foundation';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { ListRow } from './ListRow';\nimport { resolveListSeparator } from './resolveListSeparator';\nimport type { ListItemsProps, ListProps, ListRowProps, ListRowVariant } from './types';\n\nfunction resolveRowVariant({\n  item,\n  defaultVariant,\n}: {\n  item: ListRowProps;\n  defaultVariant: ListRowVariant;\n}): ListRowVariant {\n  return item.variant ?? defaultVariant;\n}\n\nfunction resolveRowCompact({\n  item,\n  compact,\n}: {\n  item: ListRowProps;\n  compact: boolean | undefined;\n}): boolean {\n  return item.compact ?? compact ?? false;\n}\n\nfunction ListItemsInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  items,\n  rowVariant = 'divider',\n  compact,\n}: ListItemsProps) {\n  return (\n    <Stack gap=\"none\" testID={testID}>\n      {items.map((item, index) => {\n        const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });\n        const separator = resolveListSeparator(effectiveVariant, index);\n\n        return (\n          <React.Fragment key={`${index}`}>\n            {separator === 'divider' ? <Divider /> : null}\n            {separator === 'spacer' ? <Spacer size=\"s\" /> : null}\n            <ListRow\n              {...item}\n              compact={resolveRowCompact({ item, compact })}\n              variant={effectiveVariant}\n            />\n          </React.Fragment>\n        );\n      })}\n    </Stack>\n  );\n}\n\nfunction ListInner(props: ListProps) {\n  if ('items' in props) {\n    return <ListItemsInner {...props} />;\n  }\n\n  const { themeId: _themeId, mode: _mode, children, testID } = props;\n  return (\n    <Stack gap=\"none\" testID={testID}>\n      {children}\n    </Stack>\n  );\n}\n\n/***\n * List container pattern for composing `ListRow` and `ListSection`.\n *\n \n */\nexport const List = withZoraThemeScope(ListInner);\n"]}
+{"version":3,"file":"List.js","sourceRoot":"","sources":["../../../src/patterns/list/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAG9D,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,cAAc,GAIf;IACC,OAAO,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC;AACxC,CAAC;AAED,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,GAIR;IACC,OAAO,IAAI,CAAC,OAAO,IAAI,OAAO,IAAI,KAAK,CAAC;AAC1C,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,UAAU,GAAG,SAAS,EACtB,OAAO,GACQ;IACf,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC9B;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACzB,MAAM,gBAAgB,GAAG,iBAAiB,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,UAAU,EAAE,CAAC,CAAC;YACjF,MAAM,SAAS,GAAG,oBAAoB,CAAC,gBAAgB,EAAE,KAAK,CAAC,CAAC;YAEhE,OAAO,CACL,CAAC,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAC9B;YAAA,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,IAAI,CAC7C;YAAA,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAG,CAAC,CAAC,CAAC,IAAI,CACpD;YAAA,CAAC,OAAO,CACN,IAAI,IAAI,CAAC,CACT,OAAO,CAAC,CAAC,iBAAiB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAC9C,OAAO,CAAC,CAAC,gBAAgB,CAAC,EAE9B;UAAA,EAAE,KAAK,CAAC,QAAQ,CAAC,CAClB,CAAC;QACJ,CAAC,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAgB;IACjC,IAAI,OAAO,IAAI,KAAK,EAAE,CAAC;QACrB,OAAO,CAAC,cAAc,CAAC,IAAI,KAAK,CAAC,EAAG,CAAC;IACvC,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IACnE,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC9B;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,kBAAkB,CAAC,SAAS,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Divider, View } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { ListRow } from './ListRow';\nimport { resolveListSeparator } from './resolveListSeparator';\nimport type { ListItemsProps, ListProps, ListRowProps, ListRowVariant } from './types';\n\nfunction resolveRowVariant({\n  item,\n  defaultVariant,\n}: {\n  item: ListRowProps;\n  defaultVariant: ListRowVariant;\n}): ListRowVariant {\n  return item.variant ?? defaultVariant;\n}\n\nfunction resolveRowCompact({\n  item,\n  compact,\n}: {\n  item: ListRowProps;\n  compact: boolean | undefined;\n}): boolean {\n  return item.compact ?? compact ?? false;\n}\n\nfunction ListItemsInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  items,\n  rowVariant = 'divider',\n  compact,\n}: ListItemsProps) {\n  return (\n    <View gap=\"none\" testID={testID}>\n      {items.map((item, index) => {\n        const effectiveVariant = resolveRowVariant({ item, defaultVariant: rowVariant });\n        const separator = resolveListSeparator(effectiveVariant, index);\n\n        return (\n          <React.Fragment key={`${index}`}>\n            {separator === 'divider' ? <Divider /> : null}\n            {separator === 'spacer' ? <View height=\"s\" /> : null}\n            <ListRow\n              {...item}\n              compact={resolveRowCompact({ item, compact })}\n              variant={effectiveVariant}\n            />\n          </React.Fragment>\n        );\n      })}\n    </View>\n  );\n}\n\nfunction ListInner(props: ListProps) {\n  if ('items' in props) {\n    return <ListItemsInner {...props} />;\n  }\n\n  const { themeId: _themeId, mode: _mode, children, testID } = props;\n  return (\n    <View gap=\"none\" testID={testID}>\n      {children}\n    </View>\n  );\n}\n\n/***\n * List container pattern for composing `ListRow` and `ListSection`.\n *\n \n */\nexport const List = withZoraThemeScope(ListInner);\n"]}

package/dist/patterns/list/ListRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/ListRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,SAAS,CAAC;AAyL5D;;;;GAIG;AACH,eAAO,MAAM,OAAO,oDAAmC,CAAC"}
+{"version":3,"file":"ListRow.d.ts","sourceRoot":"","sources":["../../../src/patterns/list/ListRow.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,SAAS,CAAC;AAyL5D;;;;GAIG;AACH,eAAO,MAAM,OAAO,oDAAmC,CAAC"}

package/dist/patterns/list/ListRow.js

@@ -1,8 +1,7 @@
 import { ButtonBase } from '@ankhorage/surface';
 import React from 'react';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
-import { Inline, Spacer } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function resolvePadding(compact) {
@@ -42,16 +41,16 @@ function ListRowInner({ themeId: _themeId, mode: _mode, testID, title, descripti
     const { theme } = useZoraTheme();
     const padding = resolvePadding(compact);
     const isInteractive = Boolean(onPress) && !action;
-    const content = (<Stack align="center" direction="row" style={{
+    const content = (<View align="center" direction="row" style={{
             flex: 1,
         }}>
       {leading ? (<>
-          <Box>{leading}</Box>
-          <Spacer axis="horizontal" size="m"/>
+          <View>{leading}</View>
+          <View width="m"/>
         </>) : null}
 
-      <Box flex={1}>
-        <Stack gap="xxs">
+      <View flex={1}>
+        <View gap="xxs">
           <Text variant="body" weight={selected ? 'semiBold' : 'medium'}>
             {title}
           </Text>
@@ -61,17 +60,17 @@ function ListRowInner({ themeId: _themeId, mode: _mode, testID, title, descripti
           {meta ? (<Text emphasis="subtle" variant="caption">
               {meta}
             </Text>) : null}
-        </Stack>
-      </Box>
+        </View>
+      </View>
 
       {trailing || action ? (<>
-          <Spacer axis="horizontal" size="m"/>
-          <Inline align="center" gap="s" wrap="nowrap">
+          <View width="m"/>
+          <View direction="row" align="center" gap="s" wrap="nowrap">
             {trailing}
             {action}
-          </Inline>
+          </View>
         </>) : null}
-    </Stack>);
+    </View>);
     if (!isInteractive) {
         const styles = resolveContainerStyles({
             variant,
@@ -81,11 +80,11 @@ function ListRowInner({ themeId: _themeId, mode: _mode, testID, title, descripti
             hovered: false,
             disabled,
         });
-        return (<Box bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={styles.radius} testID={testID} style={{
+        return (<View bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={styles.radius} testID={testID} style={{
                 opacity: styles.opacity,
             }}>
         {content}
-      </Box>);
+      </View>);
     }
     return (<ButtonBase accessibilityRole="button" accessibilityState={{ disabled, selected }} disabled={disabled} onPress={onPress} radius={variant === 'card' ? 'l' : 'm'} testID={testID}>
       {(state) => {
@@ -97,11 +96,11 @@ function ListRowInner({ themeId: _themeId, mode: _mode, testID, title, descripti
                 hovered: state.hovered,
                 disabled: state.disabled,
             });
-            return (<Box bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={styles.radius} style={{
+            return (<View bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={styles.radius} style={{
                     opacity: styles.opacity,
                 }}>
             {content}
-          </Box>);
+          </View>);
         }}
     </ButtonBase>);
 }

package/dist/patterns/list/ListRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListRow.js","sourceRoot":"","sources":["../../../src/patterns/list/ListRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { Box, Stack } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { Inline, Spacer } from '../../foundation';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ListRowProps, ListRowVariant } from './types';\n\nfunction resolvePadding(compact: boolean) {\n  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveContainerStyles({\n  variant,\n  theme,\n  selected,\n  pressed,\n  hovered,\n  disabled,\n}: {\n  variant: ListRowVariant;\n  theme: ReturnType<typeof useZoraTheme>['theme'];\n  selected: boolean;\n  pressed: boolean;\n  hovered: boolean;\n  disabled: boolean;\n}) {\n  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;\n  const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';\n\n  if (variant === 'card') {\n    return {\n      bg: pressed\n        ? theme.semantics.neutral.surfaceActive\n        : hovered\n          ? theme.semantics.neutral.surfaceHover\n          : theme.semantics.surface.raised,\n      borderColor,\n      borderWidth: 1,\n      radius: 'l' as const,\n      opacity: disabled ? 0.72 : 1,\n    };\n  }\n\n  return {\n    bg: pressed\n      ? theme.semantics.neutral.surfaceActive\n      : hovered\n        ? theme.semantics.neutral.surfaceHover\n        : selected\n          ? theme.semantics.neutral.surface\n          : 'transparent',\n    borderColor: dividerBorderColor,\n    borderWidth: selected ? 1 : 0,\n    radius: 'm' as const,\n    opacity: disabled ? 0.72 : 1,\n  };\n}\n\nfunction ListRowInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  title,\n  description,\n  meta,\n  leading,\n  trailing,\n  action,\n  onPress,\n  selected = false,\n  disabled = false,\n  compact = false,\n  variant = 'divider',\n}: ListRowProps) {\n  const { theme } = useZoraTheme();\n  const padding = resolvePadding(compact);\n  const isInteractive = Boolean(onPress) && !action;\n\n  const content = (\n    <Stack\n      align=\"center\"\n      direction=\"row\"\n      style={{\n        flex: 1,\n      }}\n    >\n      {leading ? (\n        <>\n          <Box>{leading}</Box>\n          <Spacer axis=\"horizontal\" size=\"m\" />\n        </>\n      ) : null}\n\n      <Box flex={1}>\n        <Stack gap=\"xxs\">\n          <Text variant=\"body\" weight={selected ? 'semiBold' : 'medium'}>\n            {title}\n          </Text>\n          {description ? (\n            <Text emphasis=\"muted\" variant=\"bodySmall\">\n              {description}\n            </Text>\n          ) : null}\n          {meta ? (\n            <Text emphasis=\"subtle\" variant=\"caption\">\n              {meta}\n            </Text>\n          ) : null}\n        </Stack>\n      </Box>\n\n      {trailing || action ? (\n        <>\n          <Spacer axis=\"horizontal\" size=\"m\" />\n          <Inline align=\"center\" gap=\"s\" wrap=\"nowrap\">\n            {trailing}\n            {action}\n          </Inline>\n        </>\n      ) : null}\n    </Stack>\n  );\n\n  if (!isInteractive) {\n    const styles = resolveContainerStyles({\n      variant,\n      theme,\n      selected,\n      pressed: false,\n      hovered: false,\n      disabled,\n    });\n\n    return (\n      <Box\n        bg={styles.bg}\n        borderColor={styles.borderColor}\n        borderWidth={styles.borderWidth}\n        px={padding.px}\n        py={padding.py}\n        radius={styles.radius}\n        testID={testID}\n        style={{\n          opacity: styles.opacity,\n        }}\n      >\n        {content}\n      </Box>\n    );\n  }\n\n  return (\n    <ButtonBase\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled, selected }}\n      disabled={disabled}\n      onPress={onPress}\n      radius={variant === 'card' ? 'l' : 'm'}\n      testID={testID}\n    >\n      {(state) => {\n        const styles = resolveContainerStyles({\n          variant,\n          theme,\n          selected,\n          pressed: state.pressed,\n          hovered: state.hovered,\n          disabled: state.disabled,\n        });\n\n        return (\n          <Box\n            bg={styles.bg}\n            borderColor={styles.borderColor}\n            borderWidth={styles.borderWidth}\n            px={padding.px}\n            py={padding.py}\n            radius={styles.radius}\n            style={{\n              opacity: styles.opacity,\n            }}\n          >\n            {content}\n          </Box>\n        );\n      }}\n    </ButtonBase>\n  );\n}\n\n/***\n * Row pattern for lists with leading/trailing slots and optional press behavior.\n *\n \n */\nexport const ListRow = withZoraThemeScope(ListRowInner);\n"]}
+{"version":3,"file":"ListRow.js","sourceRoot":"","sources":["../../../src/patterns/list/ListRow.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ButtonBase } from '@ankhorage/surface';\nimport React from 'react';\n\nimport { View } from '../../features/layout/public';\nimport { Text } from '../../features/typography/public';\nimport { useZoraTheme } from '../../theme/useZoraTheme';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport type { ListRowProps, ListRowVariant } from './types';\n\nfunction resolvePadding(compact: boolean) {\n  return compact ? { px: 'm' as const, py: 's' as const } : { px: 'm' as const, py: 'm' as const };\n}\n\nfunction resolveContainerStyles({\n  variant,\n  theme,\n  selected,\n  pressed,\n  hovered,\n  disabled,\n}: {\n  variant: ListRowVariant;\n  theme: ReturnType<typeof useZoraTheme>['theme'];\n  selected: boolean;\n  pressed: boolean;\n  hovered: boolean;\n  disabled: boolean;\n}) {\n  const borderColor = selected ? theme.semantics.border.focus : theme.semantics.border.default;\n  const dividerBorderColor = selected ? theme.semantics.border.focus : 'transparent';\n\n  if (variant === 'card') {\n    return {\n      bg: pressed\n        ? theme.semantics.neutral.surfaceActive\n        : hovered\n          ? theme.semantics.neutral.surfaceHover\n          : theme.semantics.surface.raised,\n      borderColor,\n      borderWidth: 1,\n      radius: 'l' as const,\n      opacity: disabled ? 0.72 : 1,\n    };\n  }\n\n  return {\n    bg: pressed\n      ? theme.semantics.neutral.surfaceActive\n      : hovered\n        ? theme.semantics.neutral.surfaceHover\n        : selected\n          ? theme.semantics.neutral.surface\n          : 'transparent',\n    borderColor: dividerBorderColor,\n    borderWidth: selected ? 1 : 0,\n    radius: 'm' as const,\n    opacity: disabled ? 0.72 : 1,\n  };\n}\n\nfunction ListRowInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  title,\n  description,\n  meta,\n  leading,\n  trailing,\n  action,\n  onPress,\n  selected = false,\n  disabled = false,\n  compact = false,\n  variant = 'divider',\n}: ListRowProps) {\n  const { theme } = useZoraTheme();\n  const padding = resolvePadding(compact);\n  const isInteractive = Boolean(onPress) && !action;\n\n  const content = (\n    <View\n      align=\"center\"\n      direction=\"row\"\n      style={{\n        flex: 1,\n      }}\n    >\n      {leading ? (\n        <>\n          <View>{leading}</View>\n          <View width=\"m\" />\n        </>\n      ) : null}\n\n      <View flex={1}>\n        <View gap=\"xxs\">\n          <Text variant=\"body\" weight={selected ? 'semiBold' : 'medium'}>\n            {title}\n          </Text>\n          {description ? (\n            <Text emphasis=\"muted\" variant=\"bodySmall\">\n              {description}\n            </Text>\n          ) : null}\n          {meta ? (\n            <Text emphasis=\"subtle\" variant=\"caption\">\n              {meta}\n            </Text>\n          ) : null}\n        </View>\n      </View>\n\n      {trailing || action ? (\n        <>\n          <View width=\"m\" />\n          <View direction=\"row\" align=\"center\" gap=\"s\" wrap=\"nowrap\">\n            {trailing}\n            {action}\n          </View>\n        </>\n      ) : null}\n    </View>\n  );\n\n  if (!isInteractive) {\n    const styles = resolveContainerStyles({\n      variant,\n      theme,\n      selected,\n      pressed: false,\n      hovered: false,\n      disabled,\n    });\n\n    return (\n      <View\n        bg={styles.bg}\n        borderColor={styles.borderColor}\n        borderWidth={styles.borderWidth}\n        px={padding.px}\n        py={padding.py}\n        radius={styles.radius}\n        testID={testID}\n        style={{\n          opacity: styles.opacity,\n        }}\n      >\n        {content}\n      </View>\n    );\n  }\n\n  return (\n    <ButtonBase\n      accessibilityRole=\"button\"\n      accessibilityState={{ disabled, selected }}\n      disabled={disabled}\n      onPress={onPress}\n      radius={variant === 'card' ? 'l' : 'm'}\n      testID={testID}\n    >\n      {(state) => {\n        const styles = resolveContainerStyles({\n          variant,\n          theme,\n          selected,\n          pressed: state.pressed,\n          hovered: state.hovered,\n          disabled: state.disabled,\n        });\n\n        return (\n          <View\n            bg={styles.bg}\n            borderColor={styles.borderColor}\n            borderWidth={styles.borderWidth}\n            px={padding.px}\n            py={padding.py}\n            radius={styles.radius}\n            style={{\n              opacity: styles.opacity,\n            }}\n          >\n            {content}\n          </View>\n        );\n      }}\n    </ButtonBase>\n  );\n}\n\n/***\n * Row pattern for lists with leading/trailing slots and optional press behavior.\n *\n \n */\nexport const ListRow = withZoraThemeScope(ListRowInner);\n"]}

package/dist/patterns/list/ListSection.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import { Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { SectionHeader } from '../section-header';
 import { List } from './List';
 function ListSectionInner({ themeId: _themeId, mode: _mode, testID, title, description, eyebrow, actions, ...props }) {
     const hasHeader = title !== undefined;
-    return (<Stack gap="s" testID={testID}>
+    return (<View gap="s" testID={testID}>
       {hasHeader ? (<SectionHeader actions={actions} description={description} eyebrow={eyebrow} title={title}/>) : null}
       <List {...props}/>
-    </Stack>);
+    </View>);
 }
 /***
  * Section wrapper for lists with optional title and description.

package/dist/patterns/list/ListSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListSection.js","sourceRoot":"","sources":["../../../src/patterns/list/ListSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,KAAK,EAAE,MAAM,8BAA8B,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACS;IACjB,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;IAEtC,OAAO,CACL,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC5B;MAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,aAAa,CACZ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAClB;IAAA,EAAE,KAAK,CAAC,CACT,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { Stack } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { SectionHeader } from '../section-header';\nimport { List } from './List';\nimport type { ListSectionProps } from './types';\n\nfunction ListSectionInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  title,\n  description,\n  eyebrow,\n  actions,\n  ...props\n}: ListSectionProps) {\n  const hasHeader = title !== undefined;\n\n  return (\n    <Stack gap=\"s\" testID={testID}>\n      {hasHeader ? (\n        <SectionHeader\n          actions={actions}\n          description={description}\n          eyebrow={eyebrow}\n          title={title}\n        />\n      ) : null}\n      <List {...props} />\n    </Stack>\n  );\n}\n\n/***\n * Section wrapper for lists with optional title and description.\n *\n \n */\nexport const ListSection = withZoraThemeScope(ListSectionInner);\n"]}
+{"version":3,"file":"ListSection.js","sourceRoot":"","sources":["../../../src/patterns/list/ListSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,SAAS,gBAAgB,CAAC,EACxB,OAAO,EAAE,QAAQ,EACjB,IAAI,EAAE,KAAK,EACX,MAAM,EACN,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,GAAG,KAAK,EACS;IACjB,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;IAEtC,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAC3B;MAAA,CAAC,SAAS,CAAC,CAAC,CAAC,CACX,CAAC,aAAa,CACZ,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,KAAK,CAAC,CAAC,KAAK,CAAC,EACb,CACH,CAAC,CAAC,CAAC,IAAI,CACR;MAAA,CAAC,IAAI,CAAC,IAAI,KAAK,CAAC,EAClB;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED;;;;GAIG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,kBAAkB,CAAC,gBAAgB,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport { View } from '../../features/layout/public';\nimport { withZoraThemeScope } from '../../theme/withZoraThemeScope';\nimport { SectionHeader } from '../section-header';\nimport { List } from './List';\nimport type { ListSectionProps } from './types';\n\nfunction ListSectionInner({\n  themeId: _themeId,\n  mode: _mode,\n  testID,\n  title,\n  description,\n  eyebrow,\n  actions,\n  ...props\n}: ListSectionProps) {\n  const hasHeader = title !== undefined;\n\n  return (\n    <View gap=\"s\" testID={testID}>\n      {hasHeader ? (\n        <SectionHeader\n          actions={actions}\n          description={description}\n          eyebrow={eyebrow}\n          title={title}\n        />\n      ) : null}\n      <List {...props} />\n    </View>\n  );\n}\n\n/***\n * Section wrapper for lists with optional title and description.\n *\n \n */\nexport const ListSection = withZoraThemeScope(ListSectionInner);\n"]}

package/dist/patterns/message-bubble/MessageBubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/MessageBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,KAAK,EAGV,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AA6PjB;;;;GAIG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}
+{"version":3,"file":"MessageBubble.d.ts","sourceRoot":"","sources":["../../../src/patterns/message-bubble/MessageBubble.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAGV,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAiQjB;;;;GAIG;AACH,eAAO,MAAM,aAAa,0DAAyC,CAAC"}

package/dist/patterns/message-bubble/MessageBubble.js

@@ -1,9 +1,8 @@
 import { ButtonBase } from '@ankhorage/surface';
 import React from 'react';
 import { Avatar } from '../../features/avatar/public';
-import { Box, Stack } from '../../features/layout/public';
+import { View } from '../../features/layout/public';
 import { Text } from '../../features/typography/public';
-import { Inline } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 function resolveAvatarName({ avatar, authorName, }) {
@@ -83,16 +82,16 @@ function MessageBubbleInner({ themeId: _themeId, mode: _mode, interactionPolicy,
     const hasMetaRow = timestamp != null || meta != null || renderedStatus != null;
     const renderBubble = ({ pressed, hovered }) => {
         const styles = resolveBubbleStyles({ direction, disabled, hovered, pressed, selected, theme });
-        return (<Box bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={isSystem ? 'm' : 'l'} style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}>
-        <Stack align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
+        return (<View bg={styles.bg} borderColor={styles.borderColor} borderWidth={styles.borderWidth} px={padding.px} py={padding.py} radius={isSystem ? 'm' : 'l'} style={{ maxWidth: compact ? 420 : 560, opacity: styles.opacity }}>
+        <View align={isSystem ? 'center' : 'flex-start'} gap={compact ? 'xxs' : 'xs'}>
           {hasAuthorName ? (<Text emphasis="muted" variant="caption" weight="semiBold">
               {authorName}
             </Text>) : null}
           {text != null ? (<Text align={isSystem ? 'center' : undefined} emphasis={disabled ? 'muted' : 'default'}>
               {text}
             </Text>) : null}
-          {children != null ? <Box width="100%">{children}</Box> : null}
-          {hasMetaRow ? (<Inline align="center" gap="xs" justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'} wrap="wrap">
+          {children != null ? <View width="100%">{children}</View> : null}
+          {hasMetaRow ? (<View direction="row" align="center" gap="xs" justify={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'} wrap="wrap">
               {timestamp != null ? (<Text emphasis="subtle" variant="caption">
                   {timestamp}
                 </Text>) : null}
@@ -102,26 +101,28 @@ function MessageBubbleInner({ themeId: _themeId, mode: _mode, interactionPolicy,
               {renderedStatus != null ? (<Text color={status === 'failed' ? 'danger' : undefined} emphasis={status === 'failed' ? 'default' : 'subtle'} variant="caption">
                   {renderedStatus}
                 </Text>) : null}
-            </Inline>) : null}
-        </Stack>
-      </Box>);
+            </View>) : null}
+        </View>
+      </View>);
     };
     const bubbleContent = isInteractive ? (<ButtonBase accessibilityLabel={accessibilityLabel} accessibilityRole="button" accessibilityState={{ disabled, selected }} disabled={disabled} interactionPolicy={interactionPolicy} onPress={onPress} radius={isSystem ? 'm' : 'l'} testID={testID}>
       {(state) => renderBubble({ pressed: state.pressed, hovered: state.hovered })}
-    </ButtonBase>) : (<Box testID={testID}>{renderBubble({ pressed: false, hovered: false })}</Box>);
-    return (<Stack gap="xs" style={{ width: '100%' }}>
-      <Inline align="flex-end" gap="s" justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'} wrap="nowrap">
-        {!isOutgoing && !isSystem ? (<Box>
+    </ButtonBase>) : (<View testID={testID}>{renderBubble({ pressed: false, hovered: false })}</View>);
+    return (<View gap="xs" style={{ width: '100%' }}>
+      <View direction="row" align="flex-end" gap="s" justify={isSystem ? 'center' : isOutgoing ? 'flex-end' : 'flex-start'} wrap="nowrap">
+        {!isOutgoing && !isSystem ? (<View>
             {leading ??
                 (hasAvatar ? (<MessageAvatar avatar={authorAvatar} authorName={authorName} compact={compact}/>) : null)}
-          </Box>) : null}
-        {isOutgoing && trailing ? <Box>{trailing}</Box> : null}
+          </View>) : null}
+        {isOutgoing && trailing ? <View>{trailing}</View> : null}
         {bubbleContent}
-        {isOutgoing && leading ? <Box>{leading}</Box> : null}
-        {!isOutgoing && !isSystem && trailing ? <Box>{trailing}</Box> : null}
-      </Inline>
-      {footer != null ? (<Box alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>{footer}</Box>) : null}
-    </Stack>);
+        {isOutgoing && leading ? <View>{leading}</View> : null}
+        {!isOutgoing && !isSystem && trailing ? <View>{trailing}</View> : null}
+      </View>
+      {footer != null ? (<View alignSelf={isOutgoing ? 'flex-end' : isSystem ? 'center' : 'flex-start'}>
+          {footer}
+        </View>) : null}
+    </View>);
 }
 /***
  * Message bubble pattern for chat UIs with direction and status styling.