@nimbus-ds/patterns 1.0.0-rc.1

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
+
+## 2022-04-06 `1.0.0`
+
+#### 🎉 New features
+
+- Added `@nimbus-ds/app-shell` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/callout-card` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/data-list` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/data-table` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/empty-message` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/formfield` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/interactive-list` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/layout` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/menu` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/menubutton` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/nav-tabs` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/page` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/productupdates` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/sidemodal` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/thumbnail-with-action` to pattern pack. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+
+#### 📚 3rd party library updates
+
+- Added `@nimbus-ds/components@4.x`. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))
+- Added `@nimbus-ds/icons@1.x`. ([#33](https://github.com/TiendaNube/nimbus-patterns/pull/33) by [@juniorconquista](https://github.com/juniorconquista))

package/README.md

@@ -0,0 +1,235 @@
+# `@nimbus-ds/patterns`
+
+[![@nimbus-ds/patterns](https://img.shields.io/npm/v/@nimbus-ds/patterns?label=%40nimbus-ds%2Fpatterns)](https://www.npmjs.com/package/@nimbus-ds/patterns)
+
+Nimbus components is a component library built with [React](https://reactjs.org), designed to help our teams and ecosystem build better products for our merchants.
+
+## 🚀 Getting started
+
+Install `@nimbus-ds/patterns` using any package manager.
+
+```sh
+$ yarn add @nimbus-ds/patterns
+# or
+$ npm install @nimbus-ds/patterns
+```
+
+## 💻 Usage
+
+```jsx
+import { Button } from "@nimbus-ds/patterns";
+
+const ComponentExample = () => <Button>Hello World</Button>;
+```
+
+For more information about our components, check out our [Storybook](https://tiendanube.github.io/nimbus-design-system/).
+
+### Folder & file structures 📁 📄
+
+- For best practices in structure files please read this [document](https://redux.js.org/style-guide/style-guide#structure-files-as-feature-folders-with-single-file-logic)
+- When creating a new component, do so inside the **src/atomic** or **src/composite** directory
+
+```
+  ├─ 📁 src
+  │  └─ 📁 components
+```
+
+- Every directory must contain a 📄 **CHANGELOG.md** which serves to document all changes and changes made to each component.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  └─ CHANGELOG.md
+```
+
+- Every directory should contain a 📄 **README.md** which serves to document the installation steps and a brief summary of each component.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- The directory should have the same name as the component. The component file should have the name of the component in Pascal Case format and the extension `.tsx`
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  └─ ComponentExample.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every directory should contain a 📄 **index.ts** which serves as an entry point for the module, component, utils and/or hooks.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  └─ ComponentExample.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every component, utils and/or hooks should come with a test. The test must have the same name as the file being tested and the extension must be `.spec.tsx`
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  └─ componentExample.spec.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every component must come with documentation. The documentation must have the same name as the file being documented and the extension must be `.stories.tsx`.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  ├─ componentExample.spec.tsx
+  │  │  │  │  └─ componentExample.stories.tsx
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- Every component must come with a typing. The type must have the same name as the file being documented and the extension must be `.types.tsx`.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  ├─ componentExample.spec.tsx
+  │  │  │  │  ├─ componentExample.stories.tsx
+  │  │  │  │  └─ componentExample.types.ts
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+- If a component has one or more children components, a subdirectory **📁 components** must be created inside de main directory of the component.
+
+```
+  ├─ 📁 src
+  │  ├─ 📁 components
+  │  │  ├─ 📁 ComponentExample
+  │  │  │  ├─ 📁 src
+  │  │  │  │  ├─ 📁 components
+  │  │  │  │  │  ├─ 📁 ComponentChild
+  │  │  │  │  │  │  ├─ index.ts
+  │  │  │  │  │  │  ├─ ComponentChild.tsx
+  │  │  │  │  │  │  ├─ componentChild.spec.tsx
+  │  │  │  │  │  │  └─ componentExample.types.ts
+  │  │  │  │  │  └─ index.ts
+  │  │  │  │  ├─ index.ts
+  │  │  │  │  ├─ ComponentExample.tsx
+  │  │  │  │  ├─ componentExample.spec.tsx
+  │  │  │  │  ├─ componentExample.stories.tsx
+  │  │  │  │  └─ componentExample.types.ts
+  │  │  │  ├─ CHANGELOG.md
+  │  │  │  └─ README.md
+```
+
+### Component coding 🤖 ⌨️
+
+- The component should have the same name as the file using Pascal Case format. It should be declared in a Arrow Function, always typying the expected answer and making the default export at the end of the file.
+
+  ```jsx
+  // ComponentExample.tsx
+  import React from "react";
+
+  const ComponentExample: React.FC = () => <div>...</div>;
+
+  export { ComponentExample };
+  ```
+
+- If the component has props, they will be imported from the corresponding `.definitions.ts` file adding initial prefix corresponding to their type. Example interface ` ILogin`, type `TLogin`, enum `ELogin`.
+
+  ```jsx
+  // ComponentExample.tsx
+  import React from "react";
+  import { ComponentExampleProps } from "./componentExampleProps.types";
+
+  const ComponentExample: React.FC<ComponentExampleProps> = ({
+    title,
+    description,
+  }) => (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+    </div>
+  );
+
+  export { ComponentExample };
+  ```
+
+### Testing 🧪🔬
+
+- For testing best practices, please read this [document](https://kentcdodds.com/blog/common-mistakes-with-react-testing-library).
+- To create a test is necessary to import from the testing library both the render and the screen.
+
+```jsx
+import { render, screen } from "@testing-library/react";
+```
+
+- The component to be tested should also be imported.
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { ComponentExample } from "./ComponentExample";
+```
+
+- The heading of the tests must be written following the order Given-When-Then [Documentation](https://cucumber.io/docs/gherkin/reference/)
+  - **Given** represents a precondition
+  - **When** an action
+  - **Then** a result or consequence of the action (user acceptance criteria).
+  - **And** a result or consequence of other consequence (user acceptance criteria).
+  - **But** a result which should not be possibly observable
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { ComponentExample } from "./ComponentExample";
+
+describe("GIVEN <ComponentExample />", () => {
+  describe("WHEN rendered", () => {
+      it("THEN should display the correct text", () => {
+        ...
+      });
+  });
+});
+```
+
+- In this first instance, we will verify the right rendering of the component by checking the text in each of the elements.
+
+```jsx
+import { render, screen } from "@testing-library/react";
+import { ComponentExample } from "./ComponentExample";
+
+describe("GIVEN <ComponentExample />", () => {
+  describe("WHEN rendered", () => {
+    it("THEN should display the correct text", () => {
+      render(<ComponentExample title="title" description="description" />);
+      expect(screen.getByText(/title/i)).toBeInTheDocument();
+      expect(screen.getByText(/description/i)).toBeInTheDocument();
+    });
+  });
+});
+```

package/dist/index.d.ts

@@ -0,0 +1,325 @@
+// Generated by dts-bundle-generator v8.0.0
+
+import { BoxProps, ButtonProps, CheckboxProps, IconButtonProps, Link, PaginationProps, PopoverProps, RadioProps, SidebarProps, TableProps, TableRowProps, ThumbnailProps, ToggleProps } from '@nimbus-ds/components';
+import { IconProps } from '@nimbus-ds/icons';
+import { PolymorphicForwardRefComponent } from '@nimbus-ds/typings';
+import React from 'react';
+import { ButtonHTMLAttributes, ComponentPropsWithRef, FC, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+
+export interface AppShellHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Optional content for the left-hand-side slot */
+	leftSlot?: ReactNode;
+	/** Optional content for the right-hand-side slot */
+	rightSlot?: ReactNode;
+}
+declare const AppShellHeader: React.FC<AppShellHeaderProps>;
+export interface AppShellComponents {
+	Header: typeof AppShellHeader;
+}
+export interface AppShellProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content for the body of the application */
+	children: ReactNode;
+	/** Optional slot for left sidebar menu */
+	menu?: ReactNode;
+}
+export declare const AppShell: React.FC<AppShellProps> & AppShellComponents;
+export interface CalloutCardProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** CalloutCard color */
+	appearance: "primary" | "success" | "warning" | "danger" | "neutral";
+	icon: FC<IconProps>;
+	/** Title */
+	title: string;
+	/** Subtitle */
+	subtitle: string;
+	/** Subtitle */
+	link?: ComponentPropsWithRef<typeof Link>;
+	/** Event fired when clicking the component */
+	onClick?: MouseEventHandler<HTMLElement>;
+}
+export declare const CalloutCard: React.FC<CalloutCardProps>;
+export interface DataListRowProperties {
+	/** Optional padding for the row */
+	padding?: "small" | "base" | "none";
+	/** Content of the row */
+	children: ReactNode;
+}
+export type DataListRowProps = DataListRowProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProps, "padding">;
+declare const DataListRow: React.FC<DataListRowProps>;
+export interface DataListComponents {
+	Row: typeof DataListRow;
+}
+export interface DataListProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content of the List component */
+	children: ReactNode;
+}
+export declare const DataList: React.FC<DataListProps> & DataListComponents;
+export interface DataTableBulkActionsProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Properties of the checkbox element rendered in the Bulk Actions component */
+	checkbox: Omit<CheckboxProps, "label" | "id">;
+	/** Optional link element rendered next to the Bulk Actions controller */
+	link?: ReactNode;
+	/** Action component that controls the Bulk Actions */
+	action: ReactNode;
+	/** Lable for the checkbox element */
+	label: string;
+}
+declare const DataTableBulkActions: React.FC<DataTableBulkActionsProps>;
+export interface DataTableFooterProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Left-hand side text intended for displaying an item count */
+	itemCount: string;
+	/** Pagination element rendered on the right-side of the footer */
+	pagination?: PaginationProps;
+}
+declare const DataTableFooter: React.FC<DataTableFooterProps>;
+export interface DataTableHeaderProps extends HTMLAttributes<HTMLElement> {
+	/** Checkbox element rendered on the table header that controls all rows */
+	checkbox: CheckboxProps;
+	/** Row content */
+	children: ReactNode;
+}
+declare const DataTableHeader: React.FC<DataTableHeaderProps>;
+export type DataTableRowExtends = TableRowProps & HTMLAttributes<HTMLElement>;
+export interface DataTableRowProps extends DataTableRowExtends {
+	/** Checkbox element rendered on the row that controls whether the row is selected */
+	checkbox: CheckboxProps;
+	/** Content of the row */
+	children: ReactNode;
+}
+declare const DataTableRow: React.FC<DataTableRowProps>;
+export type DataTableExtend = TableProps & HTMLAttributes<HTMLElement>;
+export interface DataTableComponents {
+	BulkActions: typeof DataTableBulkActions;
+	Header: typeof DataTableHeader;
+	Footer: typeof DataTableFooter;
+	Row: typeof DataTableRow;
+}
+export interface DataTableProps extends DataTableExtend {
+	/** Bulk actions component rendered with a sticky position over the top of the table element */
+	bulkActions?: ReactNode;
+	/** Table header content */
+	header: ReactNode;
+	/** Optional table footer content */
+	footer?: ReactNode;
+	/** Table body content */
+	children: ReactNode;
+}
+export declare const DataTable: React.FC<DataTableProps> & DataTableComponents;
+export interface EmptyMessageProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Optional node that contains an illustration for the component. Will stack vertically on mobile and horizontally on desktop. */
+	illustration?: ReactNode;
+	/** Optional icon to display on top of the text. */
+	icon?: ReactNode;
+	/** Title of the component */
+	title: string;
+	/** Optional content text for additional context. */
+	text?: string;
+	/** Optional node to showcase buttons or actions. */
+	actions?: ReactNode;
+}
+export declare const EmptyMessage: React.FC<EmptyMessageProps>;
+export interface InteractiveListStructureProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Title of the list item element. Also used to generate the ID for the interactive element */
+	title: string;
+	/** Determines if the title is visible or not */
+	showTitle?: boolean;
+	/** Description of the list item element */
+	description?: string;
+	/** Custom content for the list item element */
+	children?: ReactNode;
+}
+declare const InteractiveListStructure: React.FC<InteractiveListStructureProps>;
+export interface InteractiveListCheckboxItemProperties {
+	/** Checkbox props inherited from Nimbus components */
+	checkbox: CheckboxProps;
+}
+export type InteractiveListCheckboxItemProps = InteractiveListCheckboxItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+declare const InteractiveListCheckboxItem: React.FC<InteractiveListCheckboxItemProps>;
+export interface InteractiveListRadioItemProperties {
+	/** Radio props inherited from Nimbus components */
+	radio: RadioProps;
+}
+export type InteractiveListRadioItemProps = InteractiveListRadioItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+declare const InteractiveListRadioItem: React.FC<InteractiveListRadioItemProps>;
+export interface InteractiveListToggleItemProperties {
+	/** Toggle props inherited from Nimbus components */
+	toggle: ToggleProps;
+}
+export type InteractiveListToggleItemProps = InteractiveListToggleItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+declare const InteractiveListToggleItem: React.FC<InteractiveListToggleItemProps>;
+export interface InteractiveListButtonItemProperties {
+	/** Button props inherited from Nimbus components */
+	iconButton: Omit<IconButtonProps, "backgroundColor" | "borderColor" | "size" | "source">;
+}
+export type InteractiveListButtonItemProps = InteractiveListButtonItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & InteractiveListStructureProps;
+declare const InteractiveListButtonItem: React.FC<InteractiveListButtonItemProps>;
+export interface InteractiveListComponents {
+	Structure: typeof InteractiveListStructure;
+	ButtonItem: typeof InteractiveListButtonItem;
+	CheckboxItem: typeof InteractiveListCheckboxItem;
+	ToggleItem: typeof InteractiveListToggleItem;
+	RadioItem: typeof InteractiveListRadioItem;
+}
+export interface InteractiveListProps extends HTMLAttributes<HTMLElement> {
+	/** Content of the InteractiveList */
+	children: ReactNode;
+}
+export declare const InteractiveList: React.FC<InteractiveListProps> & InteractiveListComponents;
+export interface LayoutSectionProperties {
+	/** Content of the section body */
+	children: ReactNode;
+}
+export type LayoutSectionProps = LayoutSectionProperties & Omit<BoxProps, "children" | "boxSizing" | "display" | "flexDirection"> & Omit<HTMLAttributes<HTMLElement>, "color">;
+declare const LayoutSection: React.FC<LayoutSectionProps>;
+export interface LayoutComponents {
+	Section: typeof LayoutSection;
+}
+export interface LayoutProperties {
+	/** Content to be rendered inside the layout. */
+	children: ReactNode;
+	/** Number of columns to be rendered for the children */
+	columns?: "1" | "2 - symmetric" | "2 - asymmetric" | "3";
+}
+export type LayoutProps = LayoutProperties & Omit<BoxProps, "children" | "boxSizing" | "display" | "gridTemplateColumns"> & HTMLAttributes<HTMLElement>;
+export declare const Layout: React.FC<LayoutProps> & LayoutComponents;
+export interface MenuButtonBaseProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+	/** Text label for the button */
+	label: string;
+	/** Function executed when clicking the button */
+	onClick?: () => void;
+	/** Sets an icon element on the left of the button */
+	startIcon?: FC<IconProps>;
+	/** Sets the state of the button as active/inactive */
+	active?: boolean;
+	/** Inner components displayed on the right of the button component */
+	children?: ReactNode;
+}
+export declare const MenuButton: PolymorphicForwardRefComponent<"a" | "button", MenuButtonBaseProps>;
+export type MenuButtonProps = ComponentPropsWithRef<typeof MenuButton>;
+export interface MenuHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content of the menu header */
+	children: ReactNode;
+}
+declare const MenuHeader: React.FC<MenuHeaderProps>;
+export interface MenuBodyProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content of the menu body */
+	children: ReactNode;
+}
+declare const MenuBody: React.FC<MenuBodyProps>;
+export type MenuFooterProps = Omit<MenuButtonProps, "children">;
+declare const MenuFooter: React.FC<MenuFooterProps>;
+export interface MenuSectionProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Optional title of the section */
+	title?: string;
+	/** Content of the menu section */
+	children: ReactNode;
+}
+declare const MenuSection: React.FC<MenuSectionProps>;
+export interface MenuComponents {
+	Section: typeof MenuSection;
+	Button: typeof MenuButton;
+	Header: typeof MenuHeader;
+	Body: typeof MenuBody;
+	Footer: typeof MenuFooter;
+}
+export interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content of the menu */
+	children: ReactNode;
+}
+export declare const Menu: React.FC<MenuProps> & MenuComponents;
+export interface NavTabsItemProperties {
+	/** Icon element to be rendered inside the button */
+	icon: ReactNode;
+	/** Controls whether the button is active or not */
+	active?: boolean;
+	/** Displays a small badge on top of the button */
+	badge?: boolean;
+	/** Function executed on click */
+	onClick: () => void;
+}
+export type NavTabsItemProps = NavTabsItemProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & BoxProps;
+declare const NavTabsItem: React.FC<NavTabsItemProps>;
+export interface NavTabsComponents {
+	Item: typeof NavTabsItem;
+}
+export interface NavTabsProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content to be rendered inside the Nav element  */
+	children: ReactNode;
+}
+export declare const NavTabs: React.FC<NavTabsProps> & NavTabsComponents;
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Main title of the page. Corresponds to an h1 HTML tag */
+	title: string;
+	/** Optional subtitle for the page */
+	subtitle?: string;
+	/** Button stack that appears on the right-hand side of the title */
+	buttonStack?: ReactNode;
+	/** Optional header content that appears underneath the title and button stack */
+	children?: ReactNode;
+}
+declare const PageHeader: React.FC<PageHeaderProps>;
+export interface PageBodyProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content of the page body */
+	children: ReactNode;
+}
+declare const PageBody: React.FC<PageBodyProps>;
+export interface PageComponents {
+	Header: typeof PageHeader;
+	Body: typeof PageBody;
+}
+export interface PageProps extends Omit<HTMLAttributes<HTMLElement>, "color"> {
+	/** Content to be rendered inside the page body. */
+	children: ReactNode;
+	/** Optional parameter to define a maximum width of the page content. */
+	maxWidth?: string;
+}
+export declare const Page: React.FC<PageProps> & PageComponents;
+export interface ProductUpdatesProperties {
+	/** Title of the Popover */
+	title: string;
+	/** Content text of the Popover */
+	text: string;
+	/** Optional content for the body of the Popover */
+	bodyContent?: ReactNode;
+	/** Optional bottom link to dismiss the Popover. If unset, an IconButton with an X will appear on the superior right corner. */
+	dismissLink?: ReactNode;
+}
+export type ProductUpdatesProps = ProductUpdatesProperties & Omit<PopoverProps, "content" | "appearance" | "padding" | "enabledDismiss"> & HTMLAttributes<HTMLElement>;
+export declare const ProductUpdates: React.FC<ProductUpdatesProps>;
+export type SideModalPadding = "none" | "base";
+export interface SideModalProperties {
+	/** Title */
+	title?: string;
+	/** Action Title (ReactNode) */
+	titleAction?: ReactNode;
+	/** Action Header (ReactNode) */
+	headerAction?: ReactNode;
+	/** Icon Header (ReactNode) */
+	headerIcon?: ReactNode;
+	/** Body Content (ReactNode) */
+	children?: ReactNode;
+	/** Header padding */
+	paddingHeader?: SideModalPadding;
+	/** Body padding */
+	paddingBody?: SideModalPadding;
+	/** Footer padding */
+	paddingFooter?: SideModalPadding;
+	/** Footer element actions */
+	footer?: {
+		primaryAction: ButtonProps;
+		secondaryAction: ButtonProps;
+	};
+}
+export type SideModalProps = SideModalProperties & Pick<SidebarProps, "position" | "onRemove" | "open" | "padding" | "maxWidth"> & HTMLAttributes<HTMLElement>;
+export declare const SideModal: React.FC<SideModalProps>;
+export interface ThumbnailWithActionProperties {
+	/** Thumbnail component properties */
+	thumbnail: ThumbnailProps;
+	/** Element to be rendered inside the Thumbnail */
+	children: ReactNode;
+	/** Optional position of the element */
+	contentPosition?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+}
+export type ThumbnailWithActionProps = ThumbnailWithActionProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & BoxProps;
+export declare const ThumbnailWithAction: React.FC<ThumbnailWithActionProps>;
+
+export {};