@ledgerhq/lumen-ui-rnative 0.1.7 → 0.1.9

package/dist/module/lib/Components/ContentBanner/ContentBanner.mdx

@@ -0,0 +1,246 @@
+import { Meta, Story, Canvas, Controls } from '@storybook/addon-docs/blocks';
+import * as ContentBannerStories from './ContentBanner.stories';
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  ContentBannerDescription,
+} from './ContentBanner';
+import { Box } from '../Utility';
+import { CustomTabs, Tab } from '../../../../.storybook/components';
+import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
+import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
+
+<Meta title='Components/ContentBanner' of={ContentBannerStories} />
+
+# ContentBanner
+
+<CustomTabs>
+  <Tab label="Overview">
+
+## Introduction
+
+ContentBanner is a composable banner component used to display contextual information with an optional leading visual, title, description, and close button. It follows a composite component pattern for maximum flexibility.
+
+> View in [Figma](https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7/2.-Components-Library?node-id=11235-5966).
+
+## Anatomy
+
+<Canvas of={ContentBannerStories.Base} />
+
+- **ContentBanner**: Root container with surface background and rounded corners
+- **Leading element**: Any visual element (Spot, Icon, Avatar) passed as a direct child
+- **ContentBannerContent**: Container for title and description
+- **ContentBannerTitle**: The main label of the banner (clamps at 2 lines)
+- **ContentBannerDescription**: Provides additional context below the title (clamps at 2 lines)
+- **Close button**: Optional InteractiveIcon, rendered via the `onClose` prop (positioned absolute top-right)
+
+## Properties
+
+### Overview
+
+<Canvas of={ContentBannerStories.Base} />
+<Controls of={ContentBannerStories.Base} />
+
+### Content Variations
+
+ContentBanners follow a composite component pattern that allows flexible content composition.
+
+<Canvas of={ContentBannerStories.ContentVariationsShowcase} />
+
+### With Stepper
+
+A Stepper can be used as the leading element to display progress within a multi-step flow.
+
+<Canvas of={ContentBannerStories.WithStepper} />
+
+### Dismissible
+
+When `onClose` is provided, a close button (InteractiveIcon) is rendered in the top-right corner of the banner.
+
+<Canvas of={ContentBannerStories.WithClose} />
+
+## Responsive Layout
+
+ContentBanner adapts to its container width. Title and description clamp at two lines when content overflows.
+
+<Canvas of={ContentBannerStories.ResponsiveLayout} />
+
+> **Key behaviors:**
+>
+> - Automatically fits container width
+> - Title clamps to two lines
+> - Description clamps to two lines
+> - Leading visual and close button maintain fixed sizes
+
+## Accessibility
+
+- The close button includes an `accessibilityLabel` (customizable via `closeAccessibilityLabel` prop or auto-translated)
+- The close button uses `InteractiveIcon` with proper press states
+- All sub-components forward refs and spread View props for accessibility support
+
+</Tab>
+<Tab label="Implementation">
+
+## Setup
+
+Install and set up the library with our [Setup Guide →](?path=/docs/getting-started-setup--docs).
+
+## Basic Usage
+
+The ContentBanner uses a composite component pattern for maximum flexibility:
+
+```tsx
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  ContentBannerDescription,
+  Spot,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ContentBanner>
+      <Spot appearance='icon' icon={Settings} size={48} />
+      <ContentBannerContent>
+        <ContentBannerTitle>Title</ContentBannerTitle>
+        <ContentBannerDescription>
+          Description text for the content banner.
+        </ContentBannerDescription>
+      </ContentBannerContent>
+    </ContentBanner>
+  );
+}
+```
+
+### With Close Button
+
+Add an `onClose` callback to render a dismissible close button in the top-right corner:
+
+```tsx
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  ContentBannerDescription,
+  Spot,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Wallet } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ContentBanner
+      onClose={() => console.log('Closed')}
+      closeAccessibilityLabel='Close banner'
+    >
+      <Spot appearance='icon' icon={Wallet} size={48} />
+      <ContentBannerContent>
+        <ContentBannerTitle>Dismissible Banner</ContentBannerTitle>
+        <ContentBannerDescription>
+          Press the close button to dismiss.
+        </ContentBannerDescription>
+      </ContentBannerContent>
+    </ContentBanner>
+  );
+}
+```
+
+### With Stepper
+
+Use a `Stepper` as the leading element to show progress in a multi-step flow:
+
+```tsx
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  ContentBannerDescription,
+  Stepper,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <ContentBanner onClose={() => console.log('Closed')}>
+      <Stepper currentStep={2} totalSteps={4} />
+      <ContentBannerContent>
+        <ContentBannerTitle>Setup your wallet</ContentBannerTitle>
+        <ContentBannerDescription>
+          Complete all steps to secure your wallet.
+        </ContentBannerDescription>
+      </ContentBannerContent>
+    </ContentBanner>
+  );
+}
+```
+
+### Without Leading Visual
+
+The leading visual is optional. You can use ContentBanner with just title and description:
+
+```tsx
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  ContentBannerDescription,
+} from '@ledgerhq/lumen-ui-rnative';
+
+function MyComponent() {
+  return (
+    <ContentBanner onClose={() => console.log('Closed')}>
+      <ContentBannerContent>
+        <ContentBannerTitle>No Icon</ContentBannerTitle>
+        <ContentBannerDescription>
+          A content banner without a leading visual element.
+        </ContentBannerDescription>
+      </ContentBannerContent>
+    </ContentBanner>
+  );
+}
+```
+
+### Title Only
+
+Description is optional:
+
+```tsx
+import {
+  ContentBanner,
+  ContentBannerContent,
+  ContentBannerTitle,
+  Spot,
+} from '@ledgerhq/lumen-ui-rnative';
+import { Settings } from '@ledgerhq/lumen-ui-rnative/symbols';
+
+function MyComponent() {
+  return (
+    <ContentBanner>
+      <Spot appearance='icon' icon={Settings} size={48} />
+      <ContentBannerContent>
+        <ContentBannerTitle>Title Only</ContentBannerTitle>
+      </ContentBannerContent>
+    </ContentBanner>
+  );
+}
+```
+
+### Layout Adjustments with lx
+
+Use the `lx` prop for layout adjustments like margins or positioning:
+
+```tsx
+<ContentBanner lx={{ marginTop: 's16', marginBottom: 's8' }}>
+  <Spot appearance='icon' icon={Settings} size={48} />
+  <ContentBannerContent>
+    <ContentBannerTitle>With Margin</ContentBannerTitle>
+    <ContentBannerDescription>
+      This banner has layout adjustments via lx.
+    </ContentBannerDescription>
+  </ContentBannerContent>
+</ContentBanner>
+```
+
+</Tab>
+</CustomTabs>

package/dist/module/lib/Components/ContentBanner/ContentBanner.stories.js

@@ -0,0 +1,238 @@
+"use strict";
+
+import React from 'react';
+import { Settings, Wallet } from "../../Symbols/index.js";
+import { Button } from "../Button/index.js";
+import { Spot } from "../Spot/index.js";
+import { Stepper } from "../Stepper/index.js";
+import { Box, Text } from "../Utility/index.js";
+import { ContentBanner, ContentBannerContent, ContentBannerDescription, ContentBannerTitle } from "./ContentBanner.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const meta = {
+  component: ContentBanner,
+  title: 'Communication/ContentBanner',
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        format: true,
+        type: 'code'
+      }
+    }
+  },
+  argTypes: {
+    onClose: {
+      control: 'select',
+      description: 'Close action callback',
+      options: ['With Close', 'None'],
+      mapping: {
+        'With Close': () => {
+          console.log('Close clicked');
+        },
+        None: undefined
+      }
+    },
+    closeAccessibilityLabel: {
+      control: 'text',
+      description: 'Accessibility label for the close button'
+    }
+  }
+};
+export default meta;
+export const Base = {
+  args: {
+    closeAccessibilityLabel: 'Close content banner'
+  },
+  render: args => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      maxWidth: 's400'
+    },
+    children: /*#__PURE__*/_jsxs(ContentBanner, {
+      ...args,
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Settings,
+        size: 48
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Content Banner"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "This is a description for the content banner."
+        })]
+      })]
+    })
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `
+<ContentBanner>
+  <Spot appearance="icon" icon={Settings} size={48} />
+  <ContentBannerContent>
+    <ContentBannerTitle>Content Banner</ContentBannerTitle>
+    <ContentBannerDescription>
+      This is a description for the content banner.
+    </ContentBannerDescription>
+  </ContentBannerContent>
+</ContentBanner>
+`
+      }
+    }
+  }
+};
+export const WithClose = {
+  render: () => {
+    const [visible, setVisible] = React.useState(true);
+    if (!visible) {
+      return /*#__PURE__*/_jsx(Button, {
+        appearance: "transparent",
+        size: "sm",
+        onPress: () => setVisible(true),
+        children: "Show banner again"
+      });
+    }
+    return /*#__PURE__*/_jsx(Box, {
+      lx: {
+        maxWidth: 's400'
+      },
+      children: /*#__PURE__*/_jsxs(ContentBanner, {
+        onClose: () => setVisible(false),
+        closeAccessibilityLabel: "Close content banner",
+        children: [/*#__PURE__*/_jsx(Spot, {
+          appearance: "icon",
+          icon: Settings,
+          size: 48
+        }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+          children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Dismissible Banner"
+          }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+            children: "Press the close button to dismiss this banner."
+          })]
+        })]
+      })
+    });
+  }
+};
+export const ContentVariationsShowcase = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      flexDirection: 'column',
+      maxWidth: 's400',
+      gap: 's16',
+      padding: 's8'
+    },
+    children: [/*#__PURE__*/_jsxs(ContentBanner, {
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Settings,
+        size: 48
+      }), /*#__PURE__*/_jsx(ContentBannerContent, {
+        children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Title Only"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ContentBanner, {
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Wallet,
+        size: 48
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Title with Description"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "This is a description for the content banner."
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(ContentBanner, {
+      onClose: () => console.log('close'),
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Wallet,
+        size: 48
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "With Close Button"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "A content banner with a leading icon and close button."
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(ContentBanner, {
+      onClose: () => console.log('close'),
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Settings,
+        size: 48
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Longer Title That Demonstrates Clamping Behavior With a Long Description"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "This is a longer description that demonstrates how the content banner handles overflow. It should be clamped at two lines."
+        })]
+      })]
+    })]
+  })
+};
+export const WithStepper = {
+  render: () => /*#__PURE__*/_jsx(Box, {
+    lx: {
+      maxWidth: 's400'
+    },
+    children: /*#__PURE__*/_jsxs(ContentBanner, {
+      onClose: () => console.log('close'),
+      children: [/*#__PURE__*/_jsx(Stepper, {
+        currentStep: 2,
+        totalSteps: 4
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Setup your wallet"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "Complete all steps to secure your wallet."
+        })]
+      })]
+    })
+  })
+};
+export const ResponsiveLayout = {
+  render: () => /*#__PURE__*/_jsxs(Box, {
+    lx: {
+      width: 's400',
+      flexDirection: 'column',
+      gap: 's16',
+      backgroundColor: 'mutedPressed',
+      padding: 's16'
+    },
+    children: [/*#__PURE__*/_jsx(Text, {
+      typography: "body4SemiBold",
+      lx: {
+        color: 'muted'
+      },
+      children: "Container with a fixed width"
+    }), /*#__PURE__*/_jsxs(ContentBanner, {
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Settings,
+        size: 48
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Short Title"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "Short description"
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs(ContentBanner, {
+      onClose: () => console.log('close'),
+      children: [/*#__PURE__*/_jsx(Spot, {
+        appearance: "icon",
+        icon: Wallet,
+        size: 48
+      }), /*#__PURE__*/_jsxs(ContentBannerContent, {
+        children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+          children: "Longer Title That Might Overflow When Container is Smaller"
+        }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+          children: "This is a longer description that demonstrates how the content banner handles longer content within its constraints. It should be clamped at two lines with an ellipsis."
+        })]
+      })]
+    })]
+  })
+};
+//# sourceMappingURL=ContentBanner.stories.js.map

package/dist/module/lib/Components/ContentBanner/ContentBanner.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Settings","Wallet","Button","Spot","Stepper","Box","Text","ContentBanner","ContentBannerContent","ContentBannerDescription","ContentBannerTitle","jsx","_jsx","jsxs","_jsxs","meta","component","title","parameters","docs","source","language","format","type","argTypes","onClose","control","description","options","mapping","With Close","console","log","None","undefined","closeAccessibilityLabel","Base","args","render","lx","maxWidth","children","appearance","icon","size","code","WithClose","visible","setVisible","useState","onPress","ContentVariationsShowcase","flexDirection","gap","padding","WithStepper","currentStep","totalSteps","ResponsiveLayout","width","backgroundColor","typography","color"],"sourceRoot":"../../../../../src","sources":["lib/Components/ContentBanner/ContentBanner.stories.tsx"],"mappings":"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","ignoreList":[]}

package/dist/module/lib/Components/ContentBanner/ContentBanner.test.js

@@ -0,0 +1,139 @@
+"use strict";
+
+import { describe, it, expect, jest } from '@jest/globals';
+import { ledgerLiveThemes } from '@ledgerhq/lumen-design-core';
+import { fireEvent, render } from '@testing-library/react-native';
+import React from 'react';
+import { Settings } from "../../Symbols/index.js";
+import { Spot } from "../Spot/index.js";
+import { ThemeProvider } from "../ThemeProvider/ThemeProvider.js";
+import { ContentBanner, ContentBannerContent, ContentBannerTitle, ContentBannerDescription } from "./ContentBanner.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const TestWrapper = ({
+  children
+}) => /*#__PURE__*/_jsx(ThemeProvider, {
+  themes: ledgerLiveThemes,
+  colorScheme: "dark",
+  locale: "en",
+  children: children
+});
+describe('ContentBanner', () => {
+  it('should render children', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(ContentBanner, {
+        children: /*#__PURE__*/_jsx(ContentBannerContent, {
+          children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Title"
+          })
+        })
+      })
+    }));
+    getByText('Title');
+  });
+  it('should render title and description', () => {
+    const {
+      getByText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(ContentBanner, {
+        children: /*#__PURE__*/_jsxs(ContentBannerContent, {
+          children: [/*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Banner Title"
+          }), /*#__PURE__*/_jsx(ContentBannerDescription, {
+            children: "Banner description"
+          })]
+        })
+      })
+    }));
+    getByText('Banner Title');
+    getByText('Banner description');
+  });
+  it('should render close button when onClose is provided', () => {
+    const handleClose = jest.fn();
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(ContentBanner, {
+        onClose: handleClose,
+        children: /*#__PURE__*/_jsx(ContentBannerContent, {
+          children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Title"
+          })
+        })
+      })
+    }));
+    const closeButton = getByTestId('content-banner-close-button');
+    expect(closeButton).toBeTruthy();
+    fireEvent.press(closeButton);
+    expect(handleClose).toHaveBeenCalledTimes(1);
+  });
+  it('should not render close button when onClose is not provided', () => {
+    const {
+      queryByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(ContentBanner, {
+        children: /*#__PURE__*/_jsx(ContentBannerContent, {
+          children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Title"
+          })
+        })
+      })
+    }));
+    expect(queryByTestId('content-banner-close-button')).toBeNull();
+  });
+  it('should apply custom closeAccessibilityLabel', () => {
+    const handleClose = jest.fn();
+    const {
+      getByLabelText
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(ContentBanner, {
+        onClose: handleClose,
+        closeAccessibilityLabel: "Dismiss",
+        children: /*#__PURE__*/_jsx(ContentBannerContent, {
+          children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Title"
+          })
+        })
+      })
+    }));
+    expect(getByLabelText('Dismiss')).toBeTruthy();
+  });
+  it('should render with a leading element', () => {
+    const {
+      getByText,
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsxs(ContentBanner, {
+        testID: "content-banner",
+        children: [/*#__PURE__*/_jsx(Spot, {
+          appearance: "icon",
+          icon: Settings
+        }), /*#__PURE__*/_jsx(ContentBannerContent, {
+          children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "With Spot"
+          })
+        })]
+      })
+    }));
+    expect(getByTestId('content-banner')).toBeTruthy();
+    getByText('With Spot');
+  });
+  it('should apply surface background color', () => {
+    const {
+      getByTestId
+    } = render(/*#__PURE__*/_jsx(TestWrapper, {
+      children: /*#__PURE__*/_jsx(ContentBanner, {
+        testID: "content-banner",
+        children: /*#__PURE__*/_jsx(ContentBannerContent, {
+          children: /*#__PURE__*/_jsx(ContentBannerTitle, {
+            children: "Title"
+          })
+        })
+      })
+    }));
+    const banner = getByTestId('content-banner');
+    expect(banner.props.style.backgroundColor).toBe(ledgerLiveThemes.dark.colors.bg.surface);
+  });
+});
+//# sourceMappingURL=ContentBanner.test.js.map

package/dist/module/lib/Components/ContentBanner/ContentBanner.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["describe","it","expect","jest","ledgerLiveThemes","fireEvent","render","React","Settings","Spot","ThemeProvider","ContentBanner","ContentBannerContent","ContentBannerTitle","ContentBannerDescription","jsx","_jsx","jsxs","_jsxs","TestWrapper","children","themes","colorScheme","locale","getByText","handleClose","fn","getByTestId","onClose","closeButton","toBeTruthy","press","toHaveBeenCalledTimes","queryByTestId","toBeNull","getByLabelText","closeAccessibilityLabel","testID","appearance","icon","banner","props","style","backgroundColor","toBe","dark","colors","bg","surface"],"sourceRoot":"../../../../../src","sources":["lib/Components/ContentBanner/ContentBanner.test.tsx"],"mappings":";;AAAA,SAASA,QAAQ,EAAEC,EAAE,EAAEC,MAAM,EAAEC,IAAI,QAAQ,eAAe;AAC1D,SAASC,gBAAgB,QAAQ,6BAA6B;AAC9D,SAASC,SAAS,EAAEC,MAAM,QAAQ,+BAA+B;AACjE,OAAOC,KAAK,MAAM,OAAO;AACzB,SAASC,QAAQ,QAAQ,wBAAe;AACxC,SAASC,IAAI,QAAQ,kBAAS;AAC9B,SAASC,aAAa,QAAQ,mCAAgC;AAC9D,SACEC,aAAa,EACbC,oBAAoB,EACpBC,kBAAkB,EAClBC,wBAAwB,QACnB,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEzB,MAAMC,WAAW,GAAGA,CAAC;EAAEC;AAAwC,CAAC,kBAC9DJ,IAAA,CAACN,aAAa;EAACW,MAAM,EAAEjB,gBAAiB;EAACkB,WAAW,EAAC,MAAM;EAACC,MAAM,EAAC,IAAI;EAAAH,QAAA,EACpEA;AAAQ,CACI,CAChB;AAEDpB,QAAQ,CAAC,eAAe,EAAE,MAAM;EAC9BC,EAAE,CAAC,wBAAwB,EAAE,MAAM;IACjC,MAAM;MAAEuB;IAAU,CAAC,GAAGlB,MAAM,cAC1BU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVJ,IAAA,CAACL,aAAa;QAAAS,QAAA,eACZJ,IAAA,CAACJ,oBAAoB;UAAAQ,QAAA,eACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAK,CAAoB;QAAC,CAC1B;MAAC,CACV;IAAC,CACL,CACf,CAAC;IAEDI,SAAS,CAAC,OAAO,CAAC;EACpB,CAAC,CAAC;EAEFvB,EAAE,CAAC,qCAAqC,EAAE,MAAM;IAC9C,MAAM;MAAEuB;IAAU,CAAC,GAAGlB,MAAM,cAC1BU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVJ,IAAA,CAACL,aAAa;QAAAS,QAAA,eACZF,KAAA,CAACN,oBAAoB;UAAAQ,QAAA,gBACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAY,CAAoB,CAAC,eACrDJ,IAAA,CAACF,wBAAwB;YAAAM,QAAA,EAAC;UAE1B,CAA0B,CAAC;QAAA,CACP;MAAC,CACV;IAAC,CACL,CACf,CAAC;IAEDI,SAAS,CAAC,cAAc,CAAC;IACzBA,SAAS,CAAC,oBAAoB,CAAC;EACjC,CAAC,CAAC;EAEFvB,EAAE,CAAC,qDAAqD,EAAE,MAAM;IAC9D,MAAMwB,WAAW,GAAGtB,IAAI,CAACuB,EAAE,CAAC,CAAC;IAC7B,MAAM;MAAEC;IAAY,CAAC,GAAGrB,MAAM,cAC5BU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVJ,IAAA,CAACL,aAAa;QAACiB,OAAO,EAAEH,WAAY;QAAAL,QAAA,eAClCJ,IAAA,CAACJ,oBAAoB;UAAAQ,QAAA,eACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAK,CAAoB;QAAC,CAC1B;MAAC,CACV;IAAC,CACL,CACf,CAAC;IAED,MAAMS,WAAW,GAAGF,WAAW,CAAC,6BAA6B,CAAC;IAC9DzB,MAAM,CAAC2B,WAAW,CAAC,CAACC,UAAU,CAAC,CAAC;IAChCzB,SAAS,CAAC0B,KAAK,CAACF,WAAW,CAAC;IAC5B3B,MAAM,CAACuB,WAAW,CAAC,CAACO,qBAAqB,CAAC,CAAC,CAAC;EAC9C,CAAC,CAAC;EAEF/B,EAAE,CAAC,6DAA6D,EAAE,MAAM;IACtE,MAAM;MAAEgC;IAAc,CAAC,GAAG3B,MAAM,cAC9BU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVJ,IAAA,CAACL,aAAa;QAAAS,QAAA,eACZJ,IAAA,CAACJ,oBAAoB;UAAAQ,QAAA,eACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAK,CAAoB;QAAC,CAC1B;MAAC,CACV;IAAC,CACL,CACf,CAAC;IAEDlB,MAAM,CAAC+B,aAAa,CAAC,6BAA6B,CAAC,CAAC,CAACC,QAAQ,CAAC,CAAC;EACjE,CAAC,CAAC;EAEFjC,EAAE,CAAC,6CAA6C,EAAE,MAAM;IACtD,MAAMwB,WAAW,GAAGtB,IAAI,CAACuB,EAAE,CAAC,CAAC;IAC7B,MAAM;MAAES;IAAe,CAAC,GAAG7B,MAAM,cAC/BU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVJ,IAAA,CAACL,aAAa;QAACiB,OAAO,EAAEH,WAAY;QAACW,uBAAuB,EAAC,SAAS;QAAAhB,QAAA,eACpEJ,IAAA,CAACJ,oBAAoB;UAAAQ,QAAA,eACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAK,CAAoB;QAAC,CAC1B;MAAC,CACV;IAAC,CACL,CACf,CAAC;IAEDlB,MAAM,CAACiC,cAAc,CAAC,SAAS,CAAC,CAAC,CAACL,UAAU,CAAC,CAAC;EAChD,CAAC,CAAC;EAEF7B,EAAE,CAAC,sCAAsC,EAAE,MAAM;IAC/C,MAAM;MAAEuB,SAAS;MAAEG;IAAY,CAAC,GAAGrB,MAAM,cACvCU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVF,KAAA,CAACP,aAAa;QAAC0B,MAAM,EAAC,gBAAgB;QAAAjB,QAAA,gBACpCJ,IAAA,CAACP,IAAI;UAAC6B,UAAU,EAAC,MAAM;UAACC,IAAI,EAAE/B;QAAS,CAAE,CAAC,eAC1CQ,IAAA,CAACJ,oBAAoB;UAAAQ,QAAA,eACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAS,CAAoB;QAAC,CAC9B,CAAC;MAAA,CACV;IAAC,CACL,CACf,CAAC;IAEDlB,MAAM,CAACyB,WAAW,CAAC,gBAAgB,CAAC,CAAC,CAACG,UAAU,CAAC,CAAC;IAClDN,SAAS,CAAC,WAAW,CAAC;EACxB,CAAC,CAAC;EAEFvB,EAAE,CAAC,uCAAuC,EAAE,MAAM;IAChD,MAAM;MAAE0B;IAAY,CAAC,GAAGrB,MAAM,cAC5BU,IAAA,CAACG,WAAW;MAAAC,QAAA,eACVJ,IAAA,CAACL,aAAa;QAAC0B,MAAM,EAAC,gBAAgB;QAAAjB,QAAA,eACpCJ,IAAA,CAACJ,oBAAoB;UAAAQ,QAAA,eACnBJ,IAAA,CAACH,kBAAkB;YAAAO,QAAA,EAAC;UAAK,CAAoB;QAAC,CAC1B;MAAC,CACV;IAAC,CACL,CACf,CAAC;IAED,MAAMoB,MAAM,GAAGb,WAAW,CAAC,gBAAgB,CAAC;IAC5CzB,MAAM,CAACsC,MAAM,CAACC,KAAK,CAACC,KAAK,CAACC,eAAe,CAAC,CAACC,IAAI,CAC7CxC,gBAAgB,CAACyC,IAAI,CAACC,MAAM,CAACC,EAAE,CAACC,OAClC,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}

package/dist/module/lib/Components/ContentBanner/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+export * from "./ContentBanner.js";
+export * from "./types.js";
+//# sourceMappingURL=index.js.map

package/dist/module/lib/Components/ContentBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/ContentBanner/index.ts"],"mappings":";;AAAA,cAAc,oBAAiB;AAC/B,cAAc,YAAS","ignoreList":[]}

package/dist/module/lib/Components/ContentBanner/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/dist/module/lib/Components/ContentBanner/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../../src","sources":["lib/Components/ContentBanner/types.ts"],"mappings":"","ignoreList":[]}