@boostdev/design-system-components 1.2.2 → 1.2.4

package/src/components/ui/Tooltip/Tooltip.native.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Text } from 'react-native';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Tooltip } from './Tooltip.native';
+
+const meta = {
+  tags: ['!stable', 'alpha'],
+  title: 'React Native/UI/Tooltip',
+  component: Tooltip,
+  decorators: [
+    (Story) => (
+      <ThemeProvider colorScheme="light">
+        <div style={{ padding: '60px 20px 20px' }}>
+          <Story />
+        </div>
+      </ThemeProvider>
+    ),
+  ],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: 'Helpful tooltip text',
+    children: <Text>Long press me</Text>,
+  },
+};
+
+export const LongContent: Story = {
+  args: {
+    content: 'This is a longer tooltip that provides more detailed information about the element.',
+    children: <Text>Long press for details</Text>,
+  },
+};

package/src/components/ui/Tooltip/Tooltip.native.tsx

@@ -0,0 +1,57 @@
+import { ReactNode, useState } from 'react';
+import { StyleSheet, View, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { spacing, font, border } from '../../../native/tokens';
+import { useTheme } from '../../../native/ThemeContext';
+
+interface TooltipProps {
+  content: string;
+  children: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+  },
+  tooltip: {
+    position: 'absolute',
+    bottom: '100%',
+    start: 0,
+    marginBottom: spacing.xxs,
+    paddingVertical: spacing.xxs,
+    paddingHorizontal: spacing.xs,
+    borderRadius: border.radius.full,
+    zIndex: 10,
+    alignSelf: 'flex-start',
+  },
+  text: {
+    fontSize: font.size.bodyS,
+    fontFamily: font.family.body,
+  },
+});
+
+export function Tooltip({ content, children, style }: Readonly<TooltipProps>) {
+  const { colors } = useTheme();
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <View style={[styles.wrapper, style]}>
+      <Pressable
+        onLongPress={() => setVisible(true)}
+        onPressOut={() => setVisible(false)}
+        accessibilityHint={content}
+      >
+        {children}
+      </Pressable>
+      {visible && (
+        <View
+          style={[styles.tooltip, { backgroundColor: colors.colorOnBg }]}
+          accessibilityRole="text"
+          accessibilityLabel={content}
+        >
+          <Text style={[styles.text, { color: colors.colorBg }]}>{content}</Text>
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/ui/Typography/Typography.native.spec.tsx

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../../native/ThemeContext';
+import { Typography } from './Typography.native';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(<ThemeProvider>{ui}</ThemeProvider>);
+}
+
+describe('Typography (native)', () => {
+  it('renders children text', () => {
+    renderWithTheme(<Typography>Hello world</Typography>);
+    expect(screen.getByText('Hello world')).toBeInTheDocument();
+  });
+
+  it('defaults to body variant without heading role', () => {
+    renderWithTheme(<Typography>Body text</Typography>);
+    expect(screen.getByText('Body text')).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('has heading role for h1 variant', () => {
+    renderWithTheme(<Typography variant="h1">Heading 1</Typography>);
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByText('Heading 1')).toBeInTheDocument();
+  });
+
+  it('has heading role for h2 variant', () => {
+    renderWithTheme(<Typography variant="h2">Heading 2</Typography>);
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByText('Heading 2')).toBeInTheDocument();
+  });
+
+  it('has heading role for h3 variant', () => {
+    renderWithTheme(<Typography variant="h3">Heading 3</Typography>);
+    expect(screen.getByRole('heading')).toBeInTheDocument();
+    expect(screen.getByText('Heading 3')).toBeInTheDocument();
+  });
+
+  it('does not have heading role for body_s variant', () => {
+    renderWithTheme(<Typography variant="body_s">Small body</Typography>);
+    expect(screen.getByText('Small body')).toBeInTheDocument();
+    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
+  });
+
+  it('accepts custom style', () => {
+    renderWithTheme(<Typography style={{ marginTop: 10 }}>Styled</Typography>);
+    expect(screen.getByText('Styled')).toBeInTheDocument();
+  });
+});

package/src/components/ui/Typography/Typography.native.stories.tsx

@@ -7,7 +7,7 @@ const meta = {
   tags: ['!stable', 'alpha'],
   title: 'React Native/UI/Typography',
   component: Typography,
-  decorators: [(Story) => <ThemeProvider><Story /></ThemeProvider>],
+  decorators: [(Story) => <ThemeProvider colorScheme="light"><Story /></ThemeProvider>],
   parameters: { layout: 'padded' },
   argTypes: {
     variant: { control: 'select', options: ['h1', 'h2', 'h3', 'body', 'body_s'] },
@@ -25,14 +25,12 @@ export const BodySmall: Story = { args: { children: 'The quick brown fox jumps o
 export const AllVariants: Story = {
   args: { children: '' },
   render: () => (
-    <ThemeProvider>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-        <Typography variant="h1">Heading 1</Typography>
-        <Typography variant="h2">Heading 2</Typography>
-        <Typography variant="h3">Heading 3</Typography>
-        <Typography variant="body">Body — The quick brown fox jumps over the lazy dog.</Typography>
-        <Typography variant="body_s">Body Small — The quick brown fox jumps over the lazy dog.</Typography>
-      </div>
-    </ThemeProvider>
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      <Typography variant="h1">Heading 1</Typography>
+      <Typography variant="h2">Heading 2</Typography>
+      <Typography variant="h3">Heading 3</Typography>
+      <Typography variant="body">Body — The quick brown fox jumps over the lazy dog.</Typography>
+      <Typography variant="body_s">Body Small — The quick brown fox jumps over the lazy dog.</Typography>
+    </div>
   ),
 };

package/src/native/ThemeContext.tsx

@@ -11,9 +11,9 @@ interface ThemeContextValue {
 
 const ThemeContext = createContext<ThemeContextValue | null>(null);
 
-export function ThemeProvider({ children }: { children: ReactNode }) {
-  const scheme = useColorScheme();
-  const isDark = scheme === 'dark';
+export function ThemeProvider({ children, colorScheme }: { children: ReactNode; colorScheme?: 'light' | 'dark' }) {
+  const systemScheme = useColorScheme();
+  const isDark = (colorScheme ?? systemScheme) === 'dark';
   const value = useMemo<ThemeContextValue>(
     () => ({ colors: isDark ? colors.dark : colors.light, isDark }),
     [isDark],

package/src/native.ts

@@ -15,6 +15,24 @@ export { Progress } from './components/ui/Progress/Progress.native';
 export { Skeleton } from './components/ui/Skeleton/Skeleton.native';
 export { Alert } from './components/ui/Alert/Alert.native';
 export { NotificationBanner } from './components/ui/NotificationBanner/NotificationBanner.native';
+export { Link } from './components/ui/Link/Link.native';
+export { DescriptionList } from './components/ui/DescriptionList/DescriptionList.native';
+export type { DescriptionItem } from './components/ui/DescriptionList/DescriptionList.native';
+export { Breadcrumb } from './components/ui/Breadcrumb/Breadcrumb.native';
+export type { BreadcrumbItem } from './components/ui/Breadcrumb/Breadcrumb.native';
+export { ProgressCircle } from './components/ui/ProgressCircle/ProgressCircle.native';
+export { Tooltip } from './components/ui/Tooltip/Tooltip.native';
+export { Pagination } from './components/ui/Pagination/Pagination.native';
+export { Collapsible } from './components/ui/Collapsible/Collapsible.native';
+export type { CollapsibleProps } from './components/ui/Collapsible/Collapsible.native';
+export { Accordion } from './components/ui/Accordion/Accordion.native';
+export type { AccordionItem } from './components/ui/Accordion/Accordion.native';
+export { Tabs } from './components/ui/Tabs/Tabs.native';
+export type { TabItem } from './components/ui/Tabs/Tabs.native';
+export { Table } from './components/ui/Table/Table.native';
+export type { TableColumn } from './components/ui/Table/Table.native';
+export { Calendar } from './components/ui/Calendar/Calendar.native';
+export { Carousel } from './components/ui/Carousel/Carousel.native';
 
 // Layout
 export { Card } from './components/layout/Card/Card.native';
@@ -26,10 +44,29 @@ export type { ButtonGroupProps } from './components/layout/ButtonGroup/ButtonGro
 
 // Interaction
 export { Button } from './components/interaction/Button/Button.native';
+export { Rating } from './components/interaction/Rating/Rating.native';
 export type { ButtonProps } from './components/interaction/Button/Button.native';
 export { Switch } from './components/interaction/form/Switch/Switch.native';
 export { Checkbox } from './components/interaction/form/Checkbox/Checkbox.native';
+export { CheckboxGroup } from './components/interaction/form/CheckboxGroup/CheckboxGroup.native';
 export { Radio } from './components/interaction/form/Radio/Radio.native';
+export { RadioGroup } from './components/interaction/form/RadioGroup/RadioGroup.native';
+export { FileInput } from './components/interaction/form/FileInput/FileInput.native';
+export { Combobox } from './components/interaction/form/Combobox/Combobox.native';
+export type { ComboboxOption } from './components/interaction/form/Combobox/Combobox.native';
+export { SegmentedControl } from './components/interaction/form/SegmentedControl/SegmentedControl.native';
+export { FormInput } from './components/interaction/form/FormInput/FormInput.native';
+export { Textarea } from './components/interaction/form/Textarea/Textarea.native';
+export { Select } from './components/interaction/form/Select/Select.native';
+export type { SelectOption } from './components/interaction/form/Select/Select.native';
+export { Slider } from './components/interaction/form/Slider/Slider.native';
+export { NumberInput } from './components/interaction/form/NumberInput/NumberInput.native';
+export { Dialog } from './components/interaction/Dialog/Dialog.native';
+export { Drawer } from './components/interaction/Drawer/Drawer.native';
+export { ToastProvider, useToast } from './components/interaction/Toast/Toast.native';
+export { DropdownMenu } from './components/interaction/DropdownMenu/DropdownMenu.native';
+export type { DropdownMenuItem } from './components/interaction/DropdownMenu/DropdownMenu.native';
+export { Popover } from './components/interaction/Popover/Popover.native';
 
 // Atoms
 export { Label } from './components/interaction/form/atoms/Label.native';

package/src/stories/ReactNative.mdx

@@ -6,7 +6,7 @@ import { Meta } from '@storybook/blocks';
 
 > **Status: alpha** — components and APIs may change before stable release.
 
-`@boostdev/components` ships native implementations for 19 components. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
+`@boostdev/components` ships native implementations for 47 components — near-complete parity with the React web library. These use React Native primitives (`View`, `Text`, `Pressable`, `StyleSheet`, `Modal`, `Animated`) rather than HTML elements, and consume a dedicated token layer instead of CSS custom properties.
 
 ## Installation
 
@@ -65,47 +65,82 @@ function MyComponent() {
 }
 ```
 
-## Available Components
+## Available Components (47)
 
-### UI
+### UI (22)
 
 | Component | Description |
 |-----------|-------------|
-| `Typography` | Text with semantic variants: `h1`, `h2`, `h3`, `body`, `body_s` |
-| `Badge` | Short status label with 5 semantic variants |
-| `Avatar` | Initials-based avatar with 3 sizes |
+| `Accordion` | Expandable sections, exclusive or multi-open mode |
 | `Alert` | Inline status message with optional title and dismiss |
+| `Avatar` | Initials-based avatar with 3 sizes |
+| `Badge` | Short status label with 5 semantic variants |
+| `Breadcrumb` | Navigation trail with pressable items |
+| `Calendar` | Month grid date picker with min/max constraints |
+| `Carousel` | Horizontal paging scroll with dot indicators |
+| `Collapsible` | Animated expand/collapse section |
+| `DescriptionList` | Key-value pair display |
+| `Link` | Pressable text that opens URLs via `Linking` |
+| `Loading` | Animated loading spinner |
 | `NotificationBanner` | Full-width banner notification |
+| `Pagination` | Page navigation with prev/next and page buttons |
 | `Progress` | Linear progress bar |
-| `Skeleton` | Loading placeholder |
-| `Loading` | Animated loading spinner |
+| `ProgressCircle` | Circular progress indicator |
+| `Rating` | Read-only star rating display |
 | `Separator` | Visual divider |
+| `Skeleton` | Loading placeholder |
+| `Table` | Scrollable data table with sortable columns |
+| `Tabs` | Tabbed interface with pressable tab headers |
+| `Tooltip` | Long-press tooltip overlay |
+| `Typography` | Text with semantic variants: `h1`, `h2`, `h3`, `body`, `body_s` |
 
-### Layout
+### Layout (4)
 
 | Component | Description |
 |-----------|-------------|
-| `Card` | Elevated content container |
-| `SectionHeader` | Section heading with optional action |
 | `ButtonGroup` | Horizontal or vertical button row |
+| `Card` | Elevated content container |
 | `IconWrapper` | Consistent icon sizing wrapper |
+| `SectionHeader` | Section heading with optional action |
 
-### Interaction
+### Interaction (8)
 
 | Component | Description |
 |-----------|-------------|
 | `Button` | Primary action element with `onPress` |
+| `Dialog` | Modal dialog with backdrop and close button |
+| `Drawer` | Sliding side panel with animated transitions |
+| `DropdownMenu` | Bottom-sheet menu with pressable items |
+| `Popover` | Modal-based popover overlay |
+| `ToastProvider` / `useToast` | Toast notification system with auto-dismiss |
 
-### Form
+### Form (13)
 
 | Component | Description |
 |-----------|-------------|
 | `Checkbox` | Controlled checkbox with label, hint, and error |
+| `CheckboxGroup` | Group wrapper with legend for multiple checkboxes |
+| `Combobox` | Text input with filtered dropdown options |
+| `FileInput` | File selection button with file name display |
+| `FormInput` | Labeled text input with hint/error support |
+| `NumberInput` | Numeric input with stepper buttons |
 | `Radio` | Controlled radio button |
+| `RadioGroup` | Group wrapper with legend for radio buttons |
+| `SegmentedControl` | Horizontal segmented button group |
+| `Select` | Bottom-sheet option picker |
+| `Slider` | Draggable range input with value display |
 | `Switch` | Toggle switch |
+| `Textarea` | Multiline text input |
 | `Label` | Form field label atom |
 | `Message` | Form field hint/error atom |
 
+### Not available (deferred)
+
+| Component | Reason |
+|-----------|--------|
+| `Command` | Depends on cmdk library (browser-only) |
+| `SkipLink` | Browser-only accessibility pattern |
+
 ## Key differences from the web components
 
 | Web | React Native |

package/src/web-components/interaction/BdsAccordion.stories.tsx

@@ -59,7 +59,7 @@ function BdsAccordionStory({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Accordion',
+  title: 'Web Components/UI/Accordion',
   component: BdsAccordionStory,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'padded' },

package/src/web-components/interaction/BdsCollapsible.stories.tsx

@@ -23,7 +23,7 @@ function BdsCollapsible({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Collapsible',
+  title: 'Web Components/UI/Collapsible',
   component: BdsCollapsible,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'padded' },

package/src/web-components/interaction/BdsSkipLink.stories.tsx

@@ -18,7 +18,7 @@ function BdsSkipLink({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/SkipLink',
+  title: 'Web Components/UI/SkipLink',
   component: BdsSkipLink,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'padded' },

package/src/web-components/interaction/BdsTabs.stories.tsx

@@ -27,7 +27,7 @@ function BdsTabs({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Tabs',
+  title: 'Web Components/UI/Tabs',
   component: BdsTabs,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'padded' },

package/src/web-components/interaction/BdsTooltip.stories.tsx

@@ -21,7 +21,7 @@ function BdsTooltip({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Tooltip',
+  title: 'Web Components/UI/Tooltip',
   component: BdsTooltip,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsCheckbox.stories.tsx

@@ -31,7 +31,7 @@ function BdsCheckbox({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Checkbox',
+  title: 'Web Components/Form/Checkbox',
   component: BdsCheckbox,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsCheckboxGroup.stories.tsx

@@ -31,7 +31,7 @@ function BdsCheckboxGroup({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/CheckboxGroup',
+  title: 'Web Components/Form/CheckboxGroup',
   component: BdsCheckboxGroup,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsCombobox.stories.tsx

@@ -40,7 +40,7 @@ function BdsCombobox({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Combobox',
+  title: 'Web Components/Form/Combobox',
   component: BdsCombobox,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsFileInput.stories.tsx

@@ -28,7 +28,7 @@ function BdsFileInput({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/FileInput',
+  title: 'Web Components/Form/FileInput',
   component: BdsFileInput,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsFormInput.stories.tsx

@@ -53,7 +53,7 @@ function BdsFormInput({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/FormInput',
+  title: 'Web Components/Form/FormInput',
   component: BdsFormInput,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsNumberInput.stories.tsx

@@ -28,7 +28,7 @@ function BdsNumberInput({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/NumberInput',
+  title: 'Web Components/Form/NumberInput',
   component: BdsNumberInput,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsRadio.stories.tsx

@@ -31,7 +31,7 @@ function BdsRadio({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Radio',
+  title: 'Web Components/Form/Radio',
   component: BdsRadio,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsRadioGroup.stories.tsx

@@ -34,7 +34,7 @@ function BdsRadioGroup({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/RadioGroup',
+  title: 'Web Components/Form/RadioGroup',
   component: BdsRadioGroup,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsSegmentedControl.stories.tsx

@@ -43,7 +43,7 @@ function BdsSegmentedControl({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/SegmentedControl',
+  title: 'Web Components/Form/SegmentedControl',
   component: BdsSegmentedControl,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsSelect.stories.tsx

@@ -43,7 +43,7 @@ function BdsSelect({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Select',
+  title: 'Web Components/Form/Select',
   component: BdsSelect,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsSlider.stories.tsx

@@ -28,7 +28,7 @@ function BdsSlider({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Slider',
+  title: 'Web Components/Form/Slider',
   component: BdsSlider,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsSwitch.stories.tsx

@@ -31,7 +31,7 @@ function BdsSwitch({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Switch',
+  title: 'Web Components/Form/Switch',
   component: BdsSwitch,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/interaction/form/BdsTextarea.stories.tsx

@@ -28,7 +28,7 @@ function BdsTextarea({
 }
 
 const meta = {
-  title: 'Web Components/Interaction/Form/Textarea',
+  title: 'Web Components/Form/Textarea',
   component: BdsTextarea,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/ui/BdsButtonGroup.stories.tsx

@@ -20,7 +20,7 @@ function BdsButtonGroup({
 }
 
 const meta = {
-  title: 'Web Components/UI/ButtonGroup',
+  title: 'Web Components/Layout/ButtonGroup',
   component: BdsButtonGroup,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/ui/BdsCard.stories.tsx

@@ -32,7 +32,7 @@ function BdsCard({
 }
 
 const meta = {
-  title: 'Web Components/UI/Card',
+  title: 'Web Components/Layout/Card',
   component: BdsCard,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/ui/BdsIconWrapper.stories.tsx

@@ -23,7 +23,7 @@ function BdsIconWrapper({
 }
 
 const meta = {
-  title: 'Web Components/UI/IconWrapper',
+  title: 'Web Components/Layout/IconWrapper',
   component: BdsIconWrapper,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/ui/BdsRating.stories.tsx

@@ -13,7 +13,7 @@ function BdsRating({
 }
 
 const meta = {
-  title: 'Web Components/UI/Rating',
+  title: 'Web Components/Interaction/Rating',
   component: BdsRating,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'centered' },

package/src/web-components/ui/BdsSectionHeader.stories.tsx

@@ -19,7 +19,7 @@ function BdsSectionHeader({
 }
 
 const meta = {
-  title: 'Web Components/UI/SectionHeader',
+  title: 'Web Components/Layout/SectionHeader',
   component: BdsSectionHeader,
   tags: ['!stable', 'experimental'],
   parameters: { layout: 'padded' },