@hubspot/cms-component-library 0.1.0 → 0.2.0

package/components/componentLibrary/List/stories/List.stories.tsx

@@ -27,12 +27,13 @@ export const Default: Story = {
     listType: 'unordered',
     variant: 'primary',
     gap: '0',
+    showMarker: true,
   },
   render: args => (
     <List {...args}>
-      <ListItem showIcon={false}>First item</ListItem>
-      <ListItem showIcon={false}>Second item</ListItem>
-      <ListItem showIcon={false}>Third item</ListItem>
+      <ListItem>First item</ListItem>
+      <ListItem>Second item</ListItem>
+      <ListItem>Third item</ListItem>
     </List>
   ),
 };
@@ -44,9 +45,9 @@ export const OrderedList: Story = {
       <SBContainer addBackground>
         <h4>Numbered List</h4>
         <List listType="ordered" variant="primary">
-          <ListItem showIcon={false}>First step</ListItem>
-          <ListItem showIcon={false}>Second step</ListItem>
-          <ListItem showIcon={false}>Third step</ListItem>
+          <ListItem>First step</ListItem>
+          <ListItem>Second step</ListItem>
+          <ListItem>Third step</ListItem>
         </List>
       </SBContainer>
     </SBContainer>
@@ -60,9 +61,9 @@ export const UnorderedList: Story = {
       <SBContainer addBackground>
         <h4>Bulleted List</h4>
         <List listType="unordered" variant="primary">
-          <ListItem showIcon={false}>First item</ListItem>
-          <ListItem showIcon={false}>Second item</ListItem>
-          <ListItem showIcon={false}>Third item</ListItem>
+          <ListItem>First item</ListItem>
+          <ListItem>Second item</ListItem>
+          <ListItem>Third item</ListItem>
         </List>
       </SBContainer>
     </SBContainer>
@@ -93,14 +94,7 @@ export const DynamicRendering: Story = {
           <h4>Feature List (Mapped from Array)</h4>
           <List listType="unordered" variant="primary">
             {features.map((item, index) => (
-              <ListItem
-                key={index}
-                showIcon={false}
-                index={index}
-                itemsFieldPath="features"
-              >
-                {item.text}
-              </ListItem>
+              <ListItem key={index}>{item.text}</ListItem>
             ))}
           </List>
         </SBContainer>
@@ -109,14 +103,7 @@ export const DynamicRendering: Story = {
           <h4>Step-by-Step Instructions</h4>
           <List listType="ordered" variant="primary">
             {steps.map((item, index) => (
-              <ListItem
-                key={index}
-                showIcon={false}
-                index={index}
-                itemsFieldPath="steps"
-              >
-                {item.text}
-              </ListItem>
+              <ListItem key={index}>{item.text}</ListItem>
             ))}
           </List>
         </SBContainer>
@@ -125,40 +112,24 @@ export const DynamicRendering: Story = {
   },
 };
 
-export const WithIcons: Story = {
-  name: 'List with Icons',
+export const NoMarkers: Story = {
+  name: 'List without Markers',
   render: () => (
     <SBContainer flex direction="column" gap="large">
       <SBContainer addBackground>
-        <h4>List Items with Icons</h4>
-        <List listType="unordered" variant="primary">
-          <ListItem
-            showIcon={true}
-            iconName="icon"
-            iconSize={16}
-            itemsFieldPath="items"
-            index={0}
-          >
-            Item with icon
-          </ListItem>
-          <ListItem
-            showIcon={true}
-            iconName="icon"
-            iconSize={16}
-            itemsFieldPath="items"
-            index={1}
-          >
-            Another item with icon
-          </ListItem>
-          <ListItem
-            showIcon={true}
-            iconName="icon"
-            iconSize={16}
-            itemsFieldPath="items"
-            index={2}
-          >
-            Third item with icon
-          </ListItem>
+        <h4>Unordered List (No Markers)</h4>
+        <List listType="unordered" variant="primary" showMarker={false}>
+          <ListItem>First item without bullet</ListItem>
+          <ListItem>Second item without bullet</ListItem>
+          <ListItem>Third item without bullet</ListItem>
+        </List>
+      </SBContainer>
+      <SBContainer addBackground>
+        <h4>Ordered List (No Markers)</h4>
+        <List listType="ordered" variant="primary" showMarker={false}>
+          <ListItem>First step without number</ListItem>
+          <ListItem>Second step without number</ListItem>
+          <ListItem>Third step without number</ListItem>
         </List>
       </SBContainer>
     </SBContainer>
@@ -172,18 +143,18 @@ export const Spacing: Story = {
       <SBContainer addBackground>
         <h4>Default Spacing (gap 0 but inherits li styles)</h4>
         <List listType="unordered" variant="primary">
-          <ListItem showIcon={false}>Default item one</ListItem>
-          <ListItem showIcon={false}>Default item two</ListItem>
-          <ListItem showIcon={false}>Default item three</ListItem>
+          <ListItem>Default item one</ListItem>
+          <ListItem>Default item two</ListItem>
+          <ListItem>Default item three</ListItem>
         </List>
       </SBContainer>
 
       <SBContainer addBackground>
         <h4>Generous Spacing (1rem)</h4>
         <List listType="unordered" variant="primary" gap="1rem">
-          <ListItem showIcon={false}>Generous item one</ListItem>
-          <ListItem showIcon={false}>Generous item two</ListItem>
-          <ListItem showIcon={false}>Generous item three</ListItem>
+          <ListItem>Generous item one</ListItem>
+          <ListItem>Generous item two</ListItem>
+          <ListItem>Generous item three</ListItem>
         </List>
       </SBContainer>
     </SBContainer>
@@ -197,20 +168,20 @@ export const NestedLists: Story = {
       <SBContainer addBackground>
         <h4>Nested Unordered Lists</h4>
         <List listType="unordered" variant="primary">
-          <ListItem showIcon={false}>Parent item one</ListItem>
+          <ListItem>Parent item one</ListItem>
           <li>
             Parent item two
             <List listType="unordered" variant="primary">
-              <ListItem showIcon={false}>Child item one</ListItem>
-              <ListItem showIcon={false}>Child item two</ListItem>
+              <ListItem>Child item one</ListItem>
+              <ListItem>Child item two</ListItem>
             </List>
           </li>
-          <ListItem showIcon={false}>Parent item three</ListItem>
+          <ListItem>Parent item three</ListItem>
           <li>
             Parent item four
             <List listType="unordered" variant="primary">
-              <ListItem showIcon={false}>Child item one</ListItem>
-              <ListItem showIcon={false}>Child item two</ListItem>
+              <ListItem>Child item one</ListItem>
+              <ListItem>Child item two</ListItem>
             </List>
           </li>
         </List>
@@ -219,21 +190,21 @@ export const NestedLists: Story = {
       <SBContainer addBackground>
         <h4>Nested Ordered Lists</h4>
         <List listType="ordered" variant="primary">
-          <ListItem showIcon={false}>Step one</ListItem>
+          <ListItem>Step one</ListItem>
           <li>
             Step two
             <List listType="ordered" variant="secondary" gap="0.25rem">
-              <ListItem showIcon={false}>Sub-step A</ListItem>
-              <ListItem showIcon={false}>Sub-step B</ListItem>
+              <ListItem>Sub-step A</ListItem>
+              <ListItem>Sub-step B</ListItem>
             </List>
           </li>
-          <ListItem showIcon={false}>Step three</ListItem>
-          <ListItem showIcon={false}>Step four</ListItem>
+          <ListItem>Step three</ListItem>
+          <ListItem>Step four</ListItem>
           <li>
             Step five
             <List listType="ordered" variant="secondary" gap="0.25rem">
-              <ListItem showIcon={false}>Sub-step A</ListItem>
-              <ListItem showIcon={false}>Sub-step B</ListItem>
+              <ListItem>Sub-step A</ListItem>
+              <ListItem>Sub-step B</ListItem>
             </List>
           </li>
         </List>
@@ -249,11 +220,16 @@ export const EdgeCases: Story = {
       <SBContainer addBackground>
         <h4>Long Text Content</h4>
         <List listType="unordered" variant="primary">
-          <ListItem showIcon={false}>
-            This is a very long list item that demonstrates how the component handles overflow and wrapping of content across multiple lines when the text becomes too long to fit on a single line.
+          <ListItem>
+            This is a very long list item that demonstrates how the component
+            handles overflow and wrapping of content across multiple lines when
+            the text becomes too long to fit on a single line.
           </ListItem>
-          <ListItem showIcon={false}>
-            Another extremely long list item with lots of text to show the wrapping behavior and how the component maintains proper spacing and alignment even when the content spans multiple lines in the list item element.
+          <ListItem>
+            Another extremely long list item with lots of text to show the
+            wrapping behavior and how the component maintains proper spacing and
+            alignment even when the content spans multiple lines in the list
+            item element.
           </ListItem>
         </List>
       </SBContainer>
@@ -266,7 +242,7 @@ export const EdgeCases: Story = {
       <SBContainer addBackground>
         <h4>Single Item</h4>
         <List listType="unordered" variant="primary">
-          <ListItem showIcon={false}>Only one item</ListItem>
+          <ListItem>Only one item</ListItem>
         </List>
       </SBContainer>
     </SBContainer>

package/components/componentLibrary/List/stories/ListDecorator.tsx

@@ -2,12 +2,9 @@ import type { Decorator } from '@storybook/react';
 import type { CSSVariables } from '../../utils/types.js';
 
 const defaultListStyles: CSSVariables = {
-  '--hscl-listItem-textColor-primary': '#33475b',
-  '--hscl-listItem-textColor-secondary': '#516f90',
-  '--hscl-listItem-textColor-tertiary': '#7c98b6',
-  '--hscl-listItem-iconColor-primary': '#33475b',
-  '--hscl-listItem-iconColor-secondary': '#516f90',
-  '--hscl-listItem-iconColor-tertiary': '#7c98b6',
+  '--hscl-listItem-color-primary': '#33475b',
+  '--hscl-listItem-color-secondary': '#516f90',
+  '--hscl-listItem-color-tertiary': '#7c98b6',
 };
 
 export const withListStyles: Decorator = Story => (

package/components/componentLibrary/List/types.ts

@@ -10,6 +10,7 @@ export type ListProps = {
   listType?: ListType;
   variant?: ListVariant;
   gap?: GapValue;
+  showMarker?: boolean;
   className?: string;
   style?: CSSVariables;
   children?: React.ReactNode;
@@ -25,7 +26,4 @@ export type StyleFieldsProps = {
   variantName?: string;
   variantLabel?: string;
   variantDefault?: ListVariant;
-  gapName?: string;
-  gapLabel?: string;
-  gapDefault?: GapValue;
 };

package/components/componentLibrary/Logo/_dummyLogoData.ts

@@ -0,0 +1,12 @@
+import { LogoData } from './types.js';
+import hubspotLogo from './assets/hubspot-logo.png';
+
+export const dummyLogoData: { logo: LogoData } = {
+  logo: {
+    src: hubspotLogo,
+    alt: 'HubSpot Logo',
+    width: 150,
+    height: 50,
+    link: 'https://www.hubspot.com',
+  },
+};

package/components/componentLibrary/Logo/index.module.scss

@@ -0,0 +1,22 @@
+.logo {
+  display: var(--hscl-logo-display, inline-block);
+  text-decoration: none;
+  inline-size: fit-content;
+  max-inline-size: var(--hscl-logo-maxWidth, 100%);
+  max-block-size: var(--hscl-logo-maxHeight, none);
+
+  &:hover {
+    cursor: var(--hscl-logo-cursor-hover, default);
+  }
+
+  &.link,
+  &.link:hover {
+    cursor: var(--hscl-logo-cursor-hover, pointer);
+  }
+
+  .logoImage {
+    display: block;
+    max-inline-size: var(--hscl-logo-maxWidth, 100%);
+    max-block-size: var(--hscl-logo-maxHeight, none);
+  }
+}

package/components/componentLibrary/Logo/index.tsx

@@ -0,0 +1,73 @@
+import { useMemo } from 'react';
+import { useBrandSettings } from '@hubspot/cms-components';
+import { dummyLogoData } from './_dummyLogoData.js';
+import { LogoData, LogoProps } from './types.js';
+import styles from './index.module.scss';
+import cx from '../utils/classname.js';
+import Link from '../Link/index.js';
+import Image from '../Image/index.js';
+import type { CSSVariables } from '../utils/types.js';
+
+export const Logo = ({
+  useDummyLogo = false,
+  className = '',
+  style = {},
+  loading = 'eager',
+  maxWidth,
+  maxHeight,
+}: LogoProps) => {
+  const { primaryLogo } = useBrandSettings() ?? {};
+
+  const logo: LogoData | undefined = useMemo(() => {
+    return useDummyLogo ? dummyLogoData.logo : primaryLogo;
+  }, [useDummyLogo, primaryLogo]);
+
+  if (!logo?.src) {
+    return null;
+  }
+
+  const hasOnlyMaxHeight = maxHeight && !maxWidth;
+
+  const defaultClasses = styles.logo;
+  const combinedClasses = cx(defaultClasses, className);
+  const imageClasses = styles.logoImage;
+
+  const wrapperStyle: CSSVariables = {
+    ...(maxWidth && { '--hscl-logo-maxWidth': maxWidth }),
+    ...(maxHeight && { '--hscl-logo-maxHeight': maxHeight }),
+    ...(hasOnlyMaxHeight && { '--hscl-logo-maxWidth': 'fit-content' }),
+    ...style,
+  };
+
+  const imageStyle: CSSVariables = {
+    ...(hasOnlyMaxHeight && {
+      inlineSize: 'auto',
+      blockSize: 'auto',
+    }),
+  };
+
+  const content = (
+    <Image
+      src={logo.src}
+      alt={logo.alt ?? 'Logo'}
+      loading={loading}
+      width={logo.width}
+      height={logo.height}
+      className={imageClasses}
+      style={imageStyle}
+      responsive={true}
+    />
+  );
+
+  return logo.link ? (
+    <Link href={logo.link} className={combinedClasses} style={wrapperStyle}>
+      {content}
+    </Link>
+  ) : (
+    <div className={combinedClasses} style={wrapperStyle}>
+      {content}
+    </div>
+  );
+};
+
+export default Logo;

package/components/componentLibrary/Logo/llm.txt

@@ -0,0 +1,262 @@
+# Logo Component
+
+A responsive logo component that displays brand logos from HubSpot brand settings with optional link wrapping, size constraints, and loading optimization.
+
+## Import path
+```tsx
+import Logo from '@hubspot/cms-component-library/Logo';
+```
+
+## Purpose
+
+The Logo component automatically integrates with HubSpot's brand settings to display the primary brand logo. It handles responsive image rendering, optional link wrapping for navigation, size constraints for different layout contexts (navigation bars, footers, headers), and loading optimization. This component eliminates the need to manually configure logo images across modules and ensures brand consistency throughout the site.
+
+## Component Structure
+
+```
+Logo/
+├── index.tsx                   # Main component with render logic
+├── types.tsx                   # TypeScript type definitions
+├── index.module.scss           # CSS module with design tokens
+├── _dummyLogoData.ts           # Test data for development
+└── assets/
+    └── hubspot-logo.png        # Default dummy logo asset
+```
+
+## Props
+
+```tsx
+{
+  useDummyLogo?: boolean;       // Use test logo instead of brand settings (development only)
+  className?: string;           // Additional CSS classes
+  style?: React.CSSProperties;  // Inline styles (including CSS variables)
+  maxWidth?: string;            // Maximum width constraint (e.g., "150px", "10rem", "50%")
+  maxHeight?: string;           // Maximum height constraint (e.g., "50px", "5rem", "10vh")
+  loading?: 'lazy' | 'eager' | 'disabled';  // Image loading behavior (defaults to 'eager')
+}
+```
+
+**Note:** The Logo component does not accept `width` or `height` props directly. The intrinsic dimensions come from the brand settings logo data (`LogoData.width` and `LogoData.height`), which are used to set the image's intrinsic size via the `width` and `height` attributes on the `<img>` element. If no `maxWidth` or `maxHeight` props are provided, the logo will display at its intrinsic size from brand settings (constrained by responsive CSS to a maximum of 100% of the container width). Use `maxWidth` and `maxHeight` to constrain the display size while maintaining the logo's aspect ratio. Both props accept any valid CSS dimension value (pixels, rem, percentages, viewport units, etc.).
+
+**Brand Settings Data Structure:**
+The component uses `useBrandSettings()` which returns logo data in this format:
+```tsx
+{
+  src: string;        // Logo image URL
+  alt?: string;       // Alt text for accessibility
+  width?: number;     // Intrinsic width in pixels (sets image width attribute; establishes initial size when no maxWidth/maxHeight provided)
+  height?: number;    // Intrinsic height in pixels (sets image height attribute; establishes initial size when no maxWidth/maxHeight provided)
+  link?: string;      // Optional URL for logo link
+}
+```
+
+## Usage Examples
+
+### Basic Logo
+
+```tsx
+import Logo from '@hubspot/cms-component-library/Logo';
+
+<Logo />
+```
+
+### Logo in Navigation Bar
+
+When you need to constrain logo size in a navigation header:
+
+```tsx
+<nav>
+  <Logo maxWidth="120px" />
+  {/* Navigation items */}
+</nav>
+```
+
+### Logo with Lazy Loading
+
+For logos that appear below the fold:
+
+```tsx
+<Logo
+  loading="lazy"
+  maxWidth="150px"
+/>
+```
+
+### Height-Only Constraint
+
+When you only need to constrain the height (e.g., in a navigation bar with fixed height), use `maxHeight` alone. The component automatically maintains the aspect ratio:
+
+```tsx
+<nav>
+  <Logo maxHeight="50px" />
+  {/* Navigation items */}
+</nav>
+```
+
+**Special Behavior:** When only `maxHeight` is provided (without `maxWidth`), the component automatically:
+- Sets `maxWidth` to `fit-content` via the `--hscl-logo-maxWidth` CSS variable
+- Sets the image's `inlineSize` and `blockSize` to `auto`
+- This ensures the logo maintains its natural aspect ratio while respecting the height constraint, allowing the width to scale proportionally
+
+### Custom Sizing
+
+Constrain logo size using both maxWidth and maxHeight while maintaining aspect ratio:
+
+```tsx
+<Logo
+  maxWidth="250px"
+  maxHeight="80px"
+/>
+```
+
+### Local Development Testing
+
+When testing locally on the dev server where brand settings aren't available, use test data:
+
+```tsx
+<Logo useDummyLogo={true} maxWidth="150px" />
+```
+
+## HubSpot CMS Integration
+
+### Brand Settings Integration
+
+The Logo component automatically retrieves logo data from HubSpot brand settings using the `useBrandSettings()` hook from `@hubspot/cms-components`. While this hook provides access to multiple logos, this component specifically uses only the primary logo configured in the HubSpot brand kit settings.
+
+### Module Usage Example
+
+```tsx
+import Logo from '@hubspot/cms-component-library/Logo';
+
+export default function HeaderModule({ fieldValues }) {
+  return (
+    <header>
+      <Logo
+        maxWidth={fieldValues.logoMaxWidth}
+        loading="eager"
+      />
+      <nav>{/* Navigation items */}</nav>
+    </header>
+  );
+}
+```
+
+### Field Configuration
+
+The Logo component currently does not require field configuration. All logo data comes from the HubSpot brand settings via the `useBrandSettings()` hook, or can be passed down from the parent module. This eliminates the need for repetitive logo field configuration across modules and ensures brand consistency.
+
+## Styling
+
+### CSS Variables
+
+The Logo component uses CSS variables for theming and customization:
+
+**Layout:**
+- `--hscl-logo-display`: Display property (default: `inline-block`)
+- `--hscl-logo-maxWidth`: Maximum width constraint (set via `maxWidth` prop, defaults to `100%`). When only `maxHeight` is provided, this is automatically set to `fit-content` via the component logic to maintain aspect ratio
+- `--hscl-logo-maxHeight`: Maximum height constraint (set via `maxHeight` prop, defaults to `none`)
+
+**Interactive States:**
+- `--hscl-logo-cursor-hover`: Cursor style on hover when logo is wrapped in a link (default: `pointer`). When the logo is not wrapped in a link, the default cursor is `default`.
+- `--hscl-logo-outlineWidth-focus`: Focus outline width (default: `2px`)
+- `--hscl-logo-outlineColor-focus`: Focus outline color (default: `currentColor`)
+- `--hscl-logo-outlineOffset-focus`: Focus outline offset (default: `2px`)
+
+## Accessibility
+
+The Logo component follows accessibility best practices:
+
+- **Alt Text**: Uses alt text from brand settings for screen readers. Always provide meaningful alt text in your brand settings (e.g., "Company Name Logo" rather than just "Logo")
+- **Semantic Links**: When a link is configured in brand settings, the logo automatically wraps in a semantic `<Link>` component with proper accessibility attributes
+- **Keyboard Navigation**: Focus states are clearly visible with customizable outline styles for keyboard users
+- **Image Loading**: The `loading` prop allows control over image loading behavior, preventing layout shifts that can confuse assistive technology users
+- **Responsive Images**: Uses the Image component internally to provide responsive image handling for better performance across devices
+
+## Best Practices
+
+### Brand Settings Configuration
+- **Data source**: Logo data comes from HubSpot brand settings via the `useBrandSettings()` hook. If logo data is not showing up correctly, check the brand settings configuration first
+- **Alt text**: The component uses alt text from brand settings. If accessibility issues arise, verify that meaningful alt text (e.g., "Acme Corporation Logo") is configured in brand settings rather than generic text
+- **Logo linking**: The component automatically wraps the logo in a link if a link URL is configured in brand settings. If linking behavior is unexpected, check the brand settings link configuration
+- **Image quality**: Logo display quality depends on the image uploaded to brand settings. For debugging display issues, verify that appropriately sized images (recommended 2x resolution for retina displays) are configured
+
+### Size Constraints
+- **Use maxWidth in constrained layouts**: Navigation bars and footers often need size limits to maintain layout integrity
+- **Use maxHeight for height-only constraints**: When you only need to constrain height, the component automatically handles width sizing to maintain aspect ratio
+- **Maintain aspect ratio**: The component preserves the logo's aspect ratio from brand settings. Use `maxWidth` and `maxHeight` together to constrain both dimensions, or use one alone to constrain a single dimension
+- **Consider responsive breakpoints**: Use CSS variables or style prop with media queries for responsive sizing
+
+### Performance
+- **Use eager loading for above-the-fold logos**: Navigation logos should load immediately (`loading="eager"`)
+- **Use lazy loading for below-the-fold logos**: Footer or secondary logos can use `loading="lazy"` to improve initial page load
+- **Optimize source images**: Ensure logos in brand settings are appropriately sized and compressed
+
+### Development
+- **Use useDummyLogo only in development**: This prop is for testing and should not be used in production code
+- **Test with real brand settings**: Always test your modules with actual brand settings before deployment
+
+### Layout Integration
+- **Combine with navigation components**: Logos commonly appear alongside navigation menus in headers
+- **Provide adequate spacing**: Use CSS margins or padding to ensure the logo has breathing room
+- **Consider dark/light themes**: If your site has theme variations, test logo visibility in both contexts
+
+## Integration with Other Components
+
+The Logo component internally uses:
+
+- **Image Component**: For responsive image rendering with proper attributes
+- **Link Component**: For accessible link wrapping when logo.link is configured
+
+This ensures consistency with other components in the library and leverages shared functionality for images and navigation.
+
+## Performance Considerations
+
+### Loading Behavior
+- `loading="eager"`: Image loads immediately (default) - use for critical above-the-fold logos
+- `loading="lazy"`: Image loads when near viewport - use for below-the-fold logos to improve initial page load
+
+### Responsive Images
+The component uses the Image component internally, which handles:
+- Responsive image sizing based on container
+- Proper aspect ratio maintenance
+- Efficient loading strategies
+
+## Common Use Cases
+
+### Navigation Header
+```tsx
+<header style={{ display: 'flex', alignItems: 'center', padding: '1rem' }}>
+  <Logo maxHeight="50px" loading="eager" />
+  <nav>{/* Navigation menu */}</nav>
+</header>
+```
+
+### Footer Branding
+```tsx
+<footer style={{ padding: '2rem', backgroundColor: '#f5f5f5' }}>
+  <Logo maxWidth="180px" loading="lazy" />
+  <p>© 2026 Company Name. All rights reserved.</p>
+</footer>
+```
+
+### Centered Hero Logo
+```tsx
+<section style={{ textAlign: 'center', padding: '4rem' }}>
+  <Logo
+    maxWidth="300px"
+    style={{ '--hscl-logo-display': 'block', margin: '0 auto' }}
+  />
+  <h1>Welcome to Our Site</h1>
+</section>
+```
+
+### Sidebar Logo
+```tsx
+<aside>
+  <Logo
+    maxWidth="100px"
+    style={{ '--hscl-logo-display': 'block' }}
+  />
+  {/* Sidebar content */}
+</aside>
+```