@akinon/pz-theme 2.0.96-rc.0 → 2.0.97-beta.0

package/src/blocks/__tests__/social-icons-list-block.test.tsx

@@ -0,0 +1,243 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import SocialIconsListBlock from '../social-icons-list-block';
+
+/**
+ * The block descriptor is pz-dynamic-widget
+ * `src/config/blocks/block-registry.ts` (BlockType.SOCIAL_ICONS_LIST): one
+ * property, `icons`, written by `social-icons-editor.tsx` as
+ * `{icon, link, size?, color?}`, plus one block-level style, `gap`.
+ */
+const props = (properties: Record<string, unknown>, extra = {}) =>
+  ({
+    block: {
+      id: 'b1',
+      type: 'social-icons-list',
+      label: 'Social Icons',
+      value: '',
+      properties,
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'footer',
+    sectionId: 's1',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...extra
+  } as never);
+
+/** What the panel actually saves when a merchant adds two icons. */
+const STORED_ICONS = [
+  {
+    icon: 'instagram',
+    link: 'https://instagram.com/superstep',
+    size: 24,
+    color: '#000000'
+  },
+  {
+    icon: 'whatsapp',
+    link: 'https://wa.me/905550000000',
+    size: 20,
+    color: '#25d366'
+  }
+];
+
+describe('social-icons-list — a stored list', () => {
+  it('draws one link per entry, labelled by platform', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: STORED_ICONS })} />
+    );
+
+    const links = container.querySelectorAll('[data-social-icon]');
+    expect(links.length).toBe(2);
+    expect(links[0].getAttribute('aria-label')).toBe('Instagram');
+    expect(links[0].getAttribute('href')).toBe(
+      'https://instagram.com/superstep'
+    );
+    expect(links[1].getAttribute('aria-label')).toBe('Whatsapp');
+  });
+
+  it('draws the platform glyph at the size stored on the entry', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: STORED_ICONS })} />
+    );
+
+    const icons = container.querySelectorAll('svg[data-part="icon"]');
+    expect(icons.length).toBe(2);
+    expect(icons[0].getAttribute('width')).toBe('24');
+    expect(icons[1].getAttribute('width')).toBe('20');
+    // Instagram is three shapes; an unresolved platform would have drawn an
+    // empty <svg>.
+    expect(icons[0].children.length).toBe(3);
+  });
+
+  it('carries the per-entry colour on the link, leaving the icon part free', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: STORED_ICONS })} />
+    );
+
+    const link = container.querySelector<HTMLElement>(
+      '[data-social-icon="whatsapp"]'
+    )!;
+    expect(link.style.color).toBe('rgb(37, 211, 102)');
+    // The glyph itself must stay uncoloured, or a `icon/color` part rule
+    // would have nothing left to override.
+    expect(
+      link.querySelector<HTMLElement>('svg')!.getAttribute('style')
+    ).toBeNull();
+  });
+
+  it('falls back to the globe glyph for a platform the table does not know', () => {
+    const { container } = render(
+      <SocialIconsListBlock
+        {...props({
+          icons: [{ icon: 'bluesky', link: 'https://bsky.app/profile/lulu' }]
+        })}
+      />
+    );
+
+    const icon = container.querySelector('[data-social-icon="bluesky"] svg')!;
+    // The globe is three shapes.
+    expect(icon.children.length).toBe(3);
+  });
+});
+
+describe('social-icons-list — the property key is `icons`', () => {
+  /**
+   * The sibling `social-links` block stores its entries under `items`. This
+   * descriptor does not, and reading the wrong key is invisible: the block
+   * renders as if the merchant had authored nothing.
+   */
+  it('ignores an `items` list', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ items: STORED_ICONS })} />
+    );
+    expect(container.querySelector('[data-social-icon]')).toBeNull();
+  });
+});
+
+describe('social-icons-list — how the list is read', () => {
+  it('resolves a per-breakpoint list at the breakpoint being drawn', () => {
+    const { container } = render(
+      <SocialIconsListBlock
+        {...props(
+          {
+            icons: {
+              desktop: STORED_ICONS,
+              mobile: [{ icon: 'facebook', link: 'https://facebook.com/lulu' }]
+            }
+          },
+          { currentBreakpoint: 'mobile' }
+        )}
+      />
+    );
+
+    const links = container.querySelectorAll('[data-social-icon]');
+    expect(links.length).toBe(1);
+    expect(links[0].getAttribute('data-social-icon')).toBe('facebook');
+  });
+
+  it('treats a stored value that is not a list as no list', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: 'instagram' })} />
+    );
+    expect(container.querySelector('[data-social-icon]')).toBeNull();
+  });
+});
+
+describe('social-icons-list — links', () => {
+  it('opens an off-site link in a new tab and keeps an in-site one in place', () => {
+    const { container } = render(
+      <SocialIconsListBlock
+        {...props({
+          icons: [
+            { icon: 'facebook', link: 'https://facebook.com/lulu' },
+            { icon: 'email', link: '/contact' }
+          ]
+        })}
+      />
+    );
+
+    const external = container.querySelector('[data-social-icon="facebook"]')!;
+    expect(external.getAttribute('target')).toBe('_blank');
+    expect(external.getAttribute('rel')).toBe('noopener noreferrer');
+
+    const internal = container.querySelector('[data-social-icon="email"]')!;
+    expect(internal.getAttribute('target')).toBeNull();
+  });
+
+  it('is inert inside the designer, so an author cannot navigate away', () => {
+    const { container } = render(
+      <SocialIconsListBlock
+        {...props({ icons: STORED_ICONS }, { isDesigner: true })}
+      />
+    );
+
+    const link = container.querySelector('[data-social-icon="instagram"]')!;
+    expect(link.getAttribute('href')).toBe('#');
+    expect(link.getAttribute('target')).toBeNull();
+  });
+
+  it('draws an entry with no link as a labelled image, not a dead anchor', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: [{ icon: 'spotify' }] })} />
+    );
+
+    const entry = container.querySelector('[data-social-icon="spotify"]')!;
+    expect(entry.tagName).toBe('SPAN');
+    expect(entry.getAttribute('role')).toBe('img');
+    expect(entry.getAttribute('aria-label')).toBe('Spotify');
+  });
+});
+
+describe('social-icons-list — no box of its own', () => {
+  /**
+   * The row layout comes from the merchant's own `display`/`gap` on the block,
+   * and those rules land on the `[data-block-id]` wrapper. A container drawn
+   * here would swallow them and leave the icons unarranged inside it.
+   */
+  it('returns the entries as siblings, with nothing wrapping them', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: STORED_ICONS })} />
+    );
+
+    expect(container.children.length).toBe(2);
+    expect(
+      Array.from(container.children).every((child) =>
+        child.hasAttribute('data-social-icon')
+      )
+    ).toBe(true);
+  });
+
+  it('applies no layout style of its own to an entry', () => {
+    const { container } = render(
+      <SocialIconsListBlock
+        {...props({ icons: [{ icon: 'facebook', link: 'https://x.test' }] })}
+      />
+    );
+
+    const link = container.querySelector<HTMLElement>('[data-social-icon]')!;
+    expect(link.style.display).toBe('');
+    expect(link.style.gap).toBe('');
+    expect(link.style.alignItems).toBe('');
+  });
+});
+
+describe('social-icons-list — empty', () => {
+  it('shows a labelled band in the designer', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: [] }, { isDesigner: true })} />
+    );
+
+    expect(container.querySelector('[data-social-icons-list]')).not.toBeNull();
+    expect(container.textContent).toContain('Social icons');
+  });
+
+  it('shows a shopper nothing at all', () => {
+    const { container } = render(
+      <SocialIconsListBlock {...props({ icons: [] })} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+});

package/src/blocks/__tests__/value-props-list-block.test.tsx

@@ -0,0 +1,231 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ValuePropsListBlock from '../value-props-list-block';
+import { ThemeSettingsProvider } from '../../theme-settings-context';
+
+/**
+ * The block descriptor is pz-dynamic-widget
+ * `src/config/blocks/block-registry.ts` (BlockType.VALUE_PROPS_LIST): one
+ * property, `items`, written by `value-props-editor.tsx` as
+ * `{icon, title, description?}`, plus one block-level style, `gap`.
+ */
+const props = (properties: Record<string, unknown>, extra = {}) =>
+  ({
+    block: {
+      id: 'b1',
+      type: 'value-props-list',
+      label: 'Value Propositions',
+      value: '',
+      properties,
+      styles: {},
+      order: 0,
+      hidden: false
+    },
+    placeholderId: 'footer',
+    sectionId: 's1',
+    isDesigner: false,
+    currentBreakpoint: 'desktop',
+    ...extra
+  } as never);
+
+/**
+ * Copied verbatim from the descriptor's `getDefaultValue()`. This is the whole
+ * reason the list read matters here: the block arrives on the canvas already
+ * carrying three rows, so a read that quietly produced nothing would ship as
+ * an empty strip in the footer rather than as an obvious blank block.
+ */
+const SEEDED_ITEMS = [
+  { icon: 'home', title: 'Free Shipping', description: 'On orders over $50' },
+  {
+    icon: 'add',
+    title: 'Secure Payment',
+    description: '256-bit SSL encryption'
+  },
+  { icon: 'search', title: 'Easy Returns', description: '30-day return policy' }
+];
+
+describe('value-props-list — the seeded default', () => {
+  it('draws the three rows the descriptor inserts the block with', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: SEEDED_ITEMS })} />
+    );
+
+    const rows = container.querySelectorAll('[data-value-prop]');
+    expect(rows.length).toBe(3);
+    expect(
+      Array.from(container.querySelectorAll('[data-part="title"]')).map(
+        (node) => node.textContent
+      )
+    ).toEqual(['Free Shipping', 'Secure Payment', 'Easy Returns']);
+    expect(
+      container.querySelector('[data-part="description"]')!.textContent
+    ).toBe('On orders over $50');
+  });
+
+  it('resolves every seeded icon to a drawn glyph', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: SEEDED_ITEMS })} />
+    );
+
+    const icons = container.querySelectorAll('svg[data-part="icon"]');
+    expect(icons.length).toBe(3);
+    // Each glyph is at least one shape; an unresolved key draws no <svg>.
+    expect(Array.from(icons).every((icon) => icon.children.length > 0)).toBe(
+      true
+    );
+  });
+});
+
+describe('value-props-list — how the list is read', () => {
+  it('resolves a per-breakpoint list at the breakpoint being drawn', () => {
+    const { container } = render(
+      <ValuePropsListBlock
+        {...props(
+          {
+            items: {
+              desktop: SEEDED_ITEMS,
+              mobile: [{ icon: 'gift', title: 'Gift wrapping' }]
+            }
+          },
+          { currentBreakpoint: 'mobile' }
+        )}
+      />
+    );
+
+    const rows = container.querySelectorAll('[data-value-prop]');
+    expect(rows.length).toBe(1);
+    expect(rows[0].textContent).toBe('Gift wrapping');
+  });
+
+  it('treats a stored value that is not a list as no list', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: { title: 'Free Shipping' } })} />
+    );
+    expect(container.querySelector('[data-value-prop]')).toBeNull();
+  });
+});
+
+describe('value-props-list — icons', () => {
+  /**
+   * The panel's add form starts on the icon name `truck`, which is in no
+   * catalogue and in no default theme settings, so a merchant who types a
+   * title and saves without opening the picker stores an icon nothing can
+   * draw. The row still has to carry its text.
+   */
+  it('keeps the row when the stored icon key resolves to nothing', () => {
+    const { container } = render(
+      <ValuePropsListBlock
+        {...props({
+          items: [{ icon: 'truck', title: 'Same-day delivery' }]
+        })}
+      />
+    );
+
+    const row = container.querySelector('[data-value-prop]')!;
+    expect(row.querySelector('[data-part="icon"]')).toBeNull();
+    expect(row.textContent).toBe('Same-day delivery');
+  });
+
+  it("prefers the brand's uploaded mark over the catalogue glyph", () => {
+    const { container } = render(
+      <ThemeSettingsProvider
+        value={{ icons: { gift: '<svg id="brand-gift"><rect /></svg>' } }}
+      >
+        <ValuePropsListBlock
+          {...props({ items: [{ icon: 'gift', title: 'Gift wrapping' }] })}
+        />
+      </ThemeSettingsProvider>
+    );
+
+    expect(container.querySelector('#brand-gift')).not.toBeNull();
+  });
+
+  it('draws a stored media path as an image, not as a missing glyph', () => {
+    const { container } = render(
+      <ValuePropsListBlock
+        {...props({
+          items: [{ icon: '/icons/lorry.svg', title: 'Free delivery' }]
+        })}
+      />
+    );
+
+    const image = container.querySelector<HTMLImageElement>(
+      'img[data-part="icon"]'
+    )!;
+    expect(image.getAttribute('src')).toBe('/icons/lorry.svg');
+    // The title beside it already names the row; a repeated alt announces the
+    // same thing twice.
+    expect(image.getAttribute('alt')).toBe('');
+  });
+});
+
+describe('value-props-list — row shape', () => {
+  it('keeps the title and description together in one text box', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: [SEEDED_ITEMS[0]] })} />
+    );
+
+    const text = container.querySelector('[data-part="text"]')!;
+    expect(text.querySelector('[data-part="title"]')).not.toBeNull();
+    expect(text.querySelector('[data-part="description"]')).not.toBeNull();
+    // The icon stays outside it, so the row can be laid out as icon + column.
+    expect(text.querySelector('[data-part="icon"]')).toBeNull();
+  });
+
+  it('omits the description when the entry has none', () => {
+    const { container } = render(
+      <ValuePropsListBlock
+        {...props({ items: [{ icon: 'gift', title: 'Gift wrapping' }] })}
+      />
+    );
+    expect(container.querySelector('[data-part="description"]')).toBeNull();
+  });
+});
+
+describe('value-props-list — no box of its own', () => {
+  /**
+   * The three-across desktop grid and the stacked mobile list both come from
+   * the merchant's own `display`/`grid-template-columns`/`gap`, and those
+   * rules land on the `[data-block-id]` wrapper. A container drawn here would
+   * take them and leave the rows unarranged inside it.
+   */
+  it('returns the rows as siblings, with nothing wrapping them', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: SEEDED_ITEMS })} />
+    );
+
+    expect(container.children.length).toBe(3);
+    expect(
+      Array.from(container.children).every((child) =>
+        child.hasAttribute('data-value-prop')
+      )
+    ).toBe(true);
+  });
+
+  it('applies no layout style of its own to a row', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: [SEEDED_ITEMS[0]] })} />
+    );
+
+    const row = container.querySelector<HTMLElement>('[data-value-prop]')!;
+    expect(row.getAttribute('style')).toBeNull();
+  });
+});
+
+describe('value-props-list — empty', () => {
+  it('shows a labelled band in the designer', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: [] }, { isDesigner: true })} />
+    );
+
+    expect(container.querySelector('[data-value-props-list]')).not.toBeNull();
+    expect(container.textContent).toContain('Value propositions');
+  });
+
+  it('shows a shopper nothing at all', () => {
+    const { container } = render(
+      <ValuePropsListBlock {...props({ items: [] })} />
+    );
+    expect(container.innerHTML).toBe('');
+  });
+});

package/src/blocks/block-renderer-registry.tsx

@@ -90,6 +90,14 @@ import ResetPasswordBlock from './reset-password-block';
 import StoreLocatorBlock from './store-locator-block';
 import FaqAccordionBlock from './faq-accordion-block';
 import ShareBlock from './share-block';
+import ContainerBlock from './container-block';
+import CarouselItemBlock from './carousel-item-block';
+import HoverShowcaseItemBlock from './hover-showcase-item-block';
+import IconGroupBlock from './icon-group-block';
+import IconGroupColoredBlock from './icon-group-colored-block';
+import IconButtonBlock from './icon-button-block';
+import SocialIconsListBlock from './social-icons-list-block';
+import ValuePropsListBlock from './value-props-list-block';
 
 export interface BlockRendererProps {
   block: Block;
@@ -240,4 +248,17 @@ blockRendererRegistry.register('store-locator', StoreLocatorBlock);
 blockRendererRegistry.register('faq-accordion', FaqAccordionBlock);
 blockRendererRegistry.register('share', ShareBlock);
 
+
+// ZERO-5007: the types the Add Block picker offered while pz-theme had no
+// renderer for them. Until this landed each drew a label in the designer and
+// nothing at all on the live site.
+blockRendererRegistry.register('container', ContainerBlock);
+blockRendererRegistry.register('carousel-item', CarouselItemBlock);
+blockRendererRegistry.register('hover-showcase-item', HoverShowcaseItemBlock);
+blockRendererRegistry.register('icon-group', IconGroupBlock);
+blockRendererRegistry.register('icon-group-colored', IconGroupColoredBlock);
+blockRendererRegistry.register('icon-button', IconButtonBlock);
+blockRendererRegistry.register('social-icons-list', SocialIconsListBlock);
+blockRendererRegistry.register('value-props-list', ValuePropsListBlock);
+
 export default blockRendererRegistry;

package/src/blocks/carousel-item-block.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { getResponsiveValue, resolveOption } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+import { renderComposedChildren } from './render-composed-children';
+
+const SCRIPT_SCHEME = /^(?:javascript|vbscript|data):/;
+
+/**
+ * Browsers strip whitespace and control characters while parsing a url, so a
+ * tab wedged into "javascript:" still resolves to a live handler; the authored
+ * value is normalised the same way before it is judged.
+ *
+ * `[^!-~]` keeps printable ASCII and drops everything else, which covers every
+ * space and control character a url parser would drop. It also drops accented
+ * and non-Latin characters, which costs nothing here: the normalised string is
+ * only ever tested against the scheme pattern, never used as the href.
+ */
+const isScriptUrl = (value: string): boolean =>
+  SCRIPT_SCHEME.test(value.replace(/[^!-~]/g, '').toLowerCase());
+
+/**
+ * Whether the authored url is a destination at all.
+ *
+ * `#` is not a typo to route around — it is what the descriptor SEEDS
+ * (`url: { desktop: '#', mobile: '#' }`), so every slide starts life carrying
+ * it and a campaign slide that is only a picture keeps it forever. That makes
+ * "not a link" the ordinary state of this block rather than an edge case, and
+ * it is why the anchor below is conditional: wrapping a non-link slide in
+ * `<a href="#">` would put a focus stop and a link announcement in front of
+ * every shopper on the carousel, and a click on the slide would jump the page
+ * to the top and leave a `#` in the address bar.
+ *
+ * A real in-page target (`#reviews`) is a destination and stays one — only the
+ * bare hash is the seed.
+ */
+const isNavigable = (url: string): boolean =>
+  Boolean(url) && url !== '#' && !isScriptUrl(url);
+
+/**
+ * One slide of a carousel: a box the designer fills with blocks, optionally
+ * wrapped in a link to wherever the campaign points.
+ *
+ * Everything the slide LOOKS like is authored as style on the block, and the
+ * generated sheet already applies it to the `[data-block-id]` wrapper — the
+ * descriptor declares no style keys of its own, so `block.styles` is never
+ * read here. Everything it CONTAINS is authored as child blocks: the seed
+ * ships one image, but a slide is just as often an image plus a headline and a
+ * button, which is why the children go through the shared child renderer
+ * rather than through a special case for the seeded image.
+ *
+ * Properties: url, target.
+ * Parts: none — the descriptor declares `styles: []`, so there is no part for
+ * a `partAttrs()` stamp to address.
+ */
+const CarouselItemBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  /**
+   * Both properties are seeded PER BREAKPOINT by the descriptor
+   * (`{ desktop: '#', mobile: '#' }`), which is the shape a flat read hands
+   * straight to `href` as "[object Object]". A merchant pointing the mobile
+   * slide at a different campaign authors exactly that shape on purpose.
+   */
+  const url = String(
+    getResponsiveValue(block.properties?.url, currentBreakpoint, '')
+  ).trim();
+
+  // Explicit type argument: without it the fallback narrows the generic to
+  // '_self' alone and the option list stops type-checking against it.
+  const target = resolveOption<'_self' | '_blank'>(
+    block.properties?.target,
+    currentBreakpoint,
+    '_self',
+    ['_self', '_blank']
+  );
+
+  const children = renderComposedChildren({
+    blocks: block.blocks,
+    placeholderId,
+    sectionId,
+    isDesigner,
+    selectedBlockId,
+    currentBreakpoint
+  });
+
+  /**
+   * Nothing to draw. The count is taken AFTER the shared renderer has filtered
+   * hidden children, so a slide whose only image is hidden ships nothing at all
+   * rather than an empty anchor sitting in the carousel track and claiming a
+   * slot in the dots.
+   */
+  if (children.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Carousel item (drop blocks here)"
+        attribute="data-carousel-item-placeholder"
+      />
+    ) : null;
+  }
+
+  /*
+   * The ordinary case: no element of this block's own.
+   *
+   * The box the merchant paints already exists — `collectBlockCSS` routes the
+   * block's root styles to `[data-block-id]`, the WithDesignerFeatures div
+   * around this component. An element added here would be a second box inside
+   * the painted one, and an authored `display: flex` / `grid` with its `gap`
+   * and `grid-template-columns` lands on that same wrapper: every child would
+   * end up inside one single flex item and the layout controls would look
+   * inert.
+   */
+  if (!isNavigable(url)) {
+    return <>{children}</>;
+  }
+
+  /**
+   * Designer-only, and `preventDefault` only: navigating inside the canvas
+   * iframe would drop the author out of the page they are editing. No
+   * `stopPropagation` — the click still has to reach the wrapper that selects
+   * the block.
+   */
+  const handleDesignerClick = (event: React.MouseEvent) => {
+    event.preventDefault();
+  };
+
+  return (
+    <NextLink
+      href={isDesigner ? '#' : url}
+      target={isDesigner ? undefined : target}
+      // The descriptor has no `rel` property, so there is no authored value to
+      // merge: `_blank` gets the security pair, and nothing else gets the
+      // attribute at all.
+      rel={
+        !isDesigner && target === '_blank' ? 'noopener noreferrer' : undefined
+      }
+      /*
+       * `display: contents` for the same reason the fragment above draws
+       * nothing: this anchor exists only to carry the href, and a slide that
+       * became a box would swallow the layout the merchant authored on the
+       * wrapper. Hit testing is unaffected — a click anywhere on the children
+       * still activates the anchor.
+       */
+      className="contents"
+      /*
+       * No handler at all on the live site. An authored action is wired
+       * centrally onto the wrapper (`with-designer-features.tsx`), and every
+       * interactive action calls `preventDefault` on the click as it bubbles up
+       * from here — which cancels this navigation. So an action authored on a
+       * slide that also carries a url replaces the navigation instead of racing
+       * it, without this renderer reading a single action property.
+       */
+      onClick={isDesigner ? handleDesignerClick : undefined}
+    >
+      {children}
+    </NextLink>
+  );
+};
+
+export default CarouselItemBlock;