greenole-design-system 1.1.38 → 1.1.40

package/README.md

@@ -1,124 +1,124 @@
-# Greenole Design System
-
-[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
-
-The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
-The library is constantly evolving, with new components and improvements being added over time.
-
-## Table of Contents
-
-- [Introduction](#introduction)
-- [Installation](#installation)
-- [Usage](#usage)
-- [Development](#development)
-- [Build & Publication](#build--publication)
-- [Contributing](#contributing)
-- [License](#license)
-
-## Introduction
-
-**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
-It helps teams maintain design and usability standards across their React projects.
-
-> **Note:**  
-> This library is in constant evolution. Existing components may be updated and new ones added over time.
-
-## Installation
-
-To install the library in your React project, run:
-
-```bash
-npm install greenole-design-system
-```
-
-> **Note:**  
-> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
-
-## Usage
-
-After installation, you need to import both the CSS styles and the components:
-
-### 1. Import the CSS styles
-
-First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
-
-```jsx
-import 'greenole-design-system/dist/greenole.css';
-```
-
-### 2. Import and use components
-
-Then you can import and use the library's components:
-
-```jsx
-import React from 'react';
-import { Typography } from 'greenole-design-system';
-
-function App() {
-  return (
-    <div>
-      <Typography variant="h1">
-        The quick brown fox jumps over the lazy dog.
-      </Typography>
-      {/* Additional components will be added in the future */}
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Development
-
-To contribute to or test the library locally:
-
-1. Clone the repository:
-   ```bash
-   git clone https://github.com/your-username/greenole-design-system.git
-   cd greenole-design-system
-   ```
-2. Install dependencies:
-   ```bash
-   npm install
-   ```
-3. Start the development environment using Vite:
-   ```bash
-   npm run dev
-   ```
-4. To view the documentation and components, we use **Storybook**:
-   ```bash
-   npm run storybook
-   ```
-   Storybook serves as the documentation and demo environment for the library's components.
-
-## Build & Publication
-
-To generate the library bundle:
-
-1. Run the build command:
-   ```bash
-   npm run build
-   ```
-   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
-
-2. To test locally in another project, use `npm link`:
-   ```bash
-   cd greenole-design-system
-   npm link
-   cd ../your-consumer-project
-   npm link greenole-design-system
-   ```
-3. When ready to publish:
-   ```bash
-   npm login
-   npm publish --access public
-   ```
-
-## Contributing
-
-Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
-
-1. Fork the repository.
-2. Create a branch for your feature (`git checkout -b my-feature`).
-3. Commit your changes.
+# Greenole Design System
+
+[![Figma Design](https://img.shields.io/badge/Figma-Design_System-blue)](https://www.figma.com/design/Zwkbh8XGfVt2At4ln7p1WE/DS-Greenole?node-id=1017-15&p=f&t=Mjdfp67Q8ADWcm9v-0)
+
+The **Greenole Design System** is a React component library designed to create consistent and scalable user interfaces.  
+The library is constantly evolving, with new components and improvements being added over time.
+
+## Table of Contents
+
+- [Introduction](#introduction)
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [Build & Publication](#build--publication)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Introduction
+
+**Greenole Design System** gathers reusable components that follow a consistent visual identity.  
+It helps teams maintain design and usability standards across their React projects.
+
+> **Note:**  
+> This library is in constant evolution. Existing components may be updated and new ones added over time.
+
+## Installation
+
+To install the library in your React project, run:
+
+```bash
+npm install greenole-design-system
+```
+
+> **Note:**  
+> The library declares `react` and `react-dom` as peer dependencies, so ensure your project already has these installed.
+
+## Usage
+
+After installation, you need to import both the CSS styles and the components:
+
+### 1. Import the CSS styles
+
+First, import the CSS file in your main application file (usually `main.jsx`, `App.jsx`, or `index.js`):
+
+```jsx
+import 'greenole-design-system/dist/greenole.css';
+```
+
+### 2. Import and use components
+
+Then you can import and use the library's components:
+
+```jsx
+import React from 'react';
+import { Typography } from 'greenole-design-system';
+
+function App() {
+  return (
+    <div>
+      <Typography variant="h1">
+        The quick brown fox jumps over the lazy dog.
+      </Typography>
+      {/* Additional components will be added in the future */}
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Development
+
+To contribute to or test the library locally:
+
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/your-username/greenole-design-system.git
+   cd greenole-design-system
+   ```
+2. Install dependencies:
+   ```bash
+   npm install
+   ```
+3. Start the development environment using Vite:
+   ```bash
+   npm run dev
+   ```
+4. To view the documentation and components, we use **Storybook**:
+   ```bash
+   npm run storybook
+   ```
+   Storybook serves as the documentation and demo environment for the library's components.
+
+## Build & Publication
+
+To generate the library bundle:
+
+1. Run the build command:
+   ```bash
+   npm run build
+   ```
+   This will create the `dist` folder with both CommonJS and ESModule files, as well as type declarations (if configured).
+
+2. To test locally in another project, use `npm link`:
+   ```bash
+   cd greenole-design-system
+   npm link
+   cd ../your-consumer-project
+   npm link greenole-design-system
+   ```
+3. When ready to publish:
+   ```bash
+   npm login
+   npm publish --access public
+   ```
+
+## Contributing
+
+Contributions are welcome! If you would like to help evolve the **Greenole Design System**, follow these steps:
+
+1. Fork the repository.
+2. Create a branch for your feature (`git checkout -b my-feature`).
+3. Commit your changes.
 4. Open a pull request for review.

package/dist/base-components/Button/Button.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const StyledButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $variant: "primary" | "secondary" | "tertiary" | "link";
+    $size: "sm" | "md" | "lg";
+    $color: "default" | "danger";
+    $disabled: boolean;
+    $fullWidth: boolean;
+}>> & string;
+export declare const IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TypographyWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/base-components/Dropdown/Dropdown.types.d.ts

@@ -23,6 +23,7 @@ export interface DropdownTypes {
     message?: string | ReactNode;
     className?: string;
     displayValue?: string;
+    isRequired?: boolean;
     onChange: (value: string | string[]) => void;
     onSearch?: (searchTerm: string) => void;
     onLoadMore?: () => void;

package/dist/base-components/Loading/loading.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const Spinner: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
+    $size: number;
+}>> & string;

package/dist/base-components/Pills/Pills.stories.d.ts

@@ -12,4 +12,3 @@ export declare const Infor: Story;
 export declare const Neutral: Story;
 export declare const WithIcons: Story;
 export declare const CustomTypography: Story;
-export declare const CustomPadding: Story;

package/dist/base-components/Pills/Pills.styles.d.ts

@@ -0,0 +1,6 @@
+import { PillsVariant } from './Pills.types';
+export declare const PillsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: PillsVariant;
+    $padding?: string;
+}>> & string;
+export declare const IconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/base-components/ProgressBar/ProgressBar.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const ProgressWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressInfo: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressPercent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProgressTrack: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height: string;
+}>> & string;
+export declare const ProgressFill: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height: string;
+    $percent: number;
+    $color?: string;
+}>> & string;

package/dist/base-components/Space/Space.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const SpaceWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $height: number;
+    $color: string;
+    $width: string | number;
+}>> & string;
+export declare const SpaceLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

package/dist/base-components/Space/Space.types.d.ts

@@ -1,9 +1,9 @@
 export type SpaceHeight = "spacing-1" | "spacing-2" | "spacing-4" | "spacing-8" | "spacing-12" | "spacing-16" | "spacing-24" | "spacing-32" | "spacing-40" | "spacing-48" | "spacing-56" | "spacing-64" | "spacing-72" | "spacing-80" | "spacing-104";
-export declare const spaceHeights: Record<SpaceHeight, string>;
+export declare const spaceHeights: Record<SpaceHeight, number>;
 export interface SpaceProps {
     height?: SpaceHeight;
     color?: string;
-    width?: string;
+    width?: string | number;
     className?: string;
     showLabel?: boolean;
 }

package/dist/components/Accordion/Accordion.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const AccordionContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AccordionItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const AccordionHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const TitleWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ChevronContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isOpen: boolean;
+}>> & string;
+export declare const AccordionContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SubtitleContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SubtitleIconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Card/Card.stories.d.ts

@@ -2,5 +2,8 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Card } from './';
 declare const meta: Meta<typeof Card>;
 export default meta;
-type Story = StoryObj<any>;
-export declare const DropdownControlled: Story;
+type Story = StoryObj<typeof Card>;
+export declare const Playground: Story;
+export declare const CardWithIconAndActions: Story;
+export declare const CardWithDropdownHeader: Story;
+export declare const CardWithSaveCancel: Story;

package/dist/components/Card/Card.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const CardWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $width?: string;
+    $height?: string;
+}>> & string;
+export declare const CardHeaderWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $background?: string;
+}>> & string;
+export declare const CardHeaderLeft: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardBodyWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $withImage?: boolean;
+}>> & string;
+export declare const CardBodyContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CardFooterWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $align: "left" | "center" | "right";
+}>> & string;

package/dist/components/Card/Card.types.d.ts

@@ -2,21 +2,25 @@ import { HTMLAttributes, ReactNode } from 'react';
 export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
-    theme?: 'light' | 'dark';
-    width?: 'tw-w-48' | 'tw-w-64' | 'tw-w-80' | 'tw-w-full' | string;
+    width?: string | number;
+    height?: string | number;
 }
-export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-    title: string;
-    titleSize?: 'sm' | 'md' | 'lg';
+export interface CardHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+    title?: string | ReactNode;
+    titleSize?: "sm" | "md" | "lg";
     className?: string;
-    theme?: 'light' | 'dark';
+    icon?: ReactNode;
+    actions?: ReactNode;
+    background?: string;
 }
-export interface CardSectionProps extends HTMLAttributes<HTMLDivElement> {
+export interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
+    withImage?: boolean;
+    image?: ReactNode;
 }
 export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     className?: string;
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
 }

package/dist/components/Card/CardBody.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
-import { CardSectionProps } from './Card.types';
-declare const CardBody: React.FC<CardSectionProps>;
+import { CardBodyProps } from './Card.types';
+declare const CardBody: React.FC<CardBodyProps>;
 export default CardBody;

package/dist/components/Empty/Empty.d.ts

@@ -1,3 +1,4 @@
 import { default as React } from 'react';
-declare const Empty: () => React.JSX.Element;
+import { EmptyProps } from './Empty.types';
+declare const Empty: React.FC<EmptyProps>;
 export default Empty;

package/dist/components/Empty/Empty.stories.d.ts

@@ -1,20 +1,8 @@
-import { StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { default as Empty } from './Empty';
-import { default as React } from 'react';
-declare const meta: {
-    title: string;
-    component: () => React.JSX.Element;
-    parameters: {
-        layout: string;
-        docs: {
-            description: {
-                component: string;
-            };
-        };
-    };
-    tags: string[];
-};
+declare const meta: Meta<typeof Empty>;
 export default meta;
 type Story = StoryObj<typeof Empty>;
 export declare const Default: Story;
+export declare const WithDescription: Story;
 export declare const InCard: Story;

package/dist/components/Empty/Empty.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const EmptyWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyIconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $bg: string;
+}>> & string;
+export declare const EmptyContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Empty/Empty.types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface EmptyProps {
+    icon?: ReactNode;
+    iconBg?: string;
+    title?: string;
+    description?: string;
+    className?: string;
+}

package/dist/components/Modal/Modal.styles.d.ts

@@ -0,0 +1,20 @@
+export declare const ModalOverlay: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $showOverlay: boolean;
+}>> & string;
+export declare const ModalContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CloseButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const ModalHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const IconContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TitleContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isString: boolean;
+}>> & string;
+export declare const ContentContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hasTitle: boolean;
+}>> & string;
+export declare const ActionsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ButtonWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const iconStyles: {
+    error: import('styled-components').RuleSet<object>;
+    warning: import('styled-components').RuleSet<object>;
+    success: import('styled-components').RuleSet<object>;
+};

package/dist/components/Table/DataTable.styles.d.ts

@@ -0,0 +1,26 @@
+export declare const TableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Table: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const TableHeaderCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
+    $align?: "left" | "center" | "right";
+}>> & string;
+export declare const SelectableHeaderCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, never>> & string;
+export declare const HeaderContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const TableRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+export declare const TableBodyCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
+    $align?: "left" | "center" | "right";
+}>> & string;
+export declare const SelectableBodyCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, never>> & string;
+export declare const PaginationContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PaginationLeft: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PaginationRight: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PageSizeSelect: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, never>> & string;
+export declare const SelectWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ChevronContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const PageControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const NavButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const PageButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $active?: boolean;
+}>> & string;

package/dist/components/Tabs/Tabs.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const TabsWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const TabsHeader: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isMobile?: boolean;
+}>> & string;
+export declare const TabButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $active?: boolean;
+}>> & string;
+export declare const TabsContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/components/Typography/Typography.styles.d.ts

@@ -0,0 +1,50 @@
+declare const typographyVariants: {
+    h1: import('styled-components').RuleSet<object>;
+    h2: import('styled-components').RuleSet<object>;
+    h3: import('styled-components').RuleSet<object>;
+    h4: import('styled-components').RuleSet<object>;
+    h5: import('styled-components').RuleSet<object>;
+    h6: import('styled-components').RuleSet<object>;
+    'body-xl-bold': import('styled-components').RuleSet<object>;
+    'body-xl-semibold': import('styled-components').RuleSet<object>;
+    'body-xl-medium': import('styled-components').RuleSet<object>;
+    'body-xl-regular': import('styled-components').RuleSet<object>;
+    'body-lg-bold': import('styled-components').RuleSet<object>;
+    'body-lg-semibold': import('styled-components').RuleSet<object>;
+    'body-lg-medium': import('styled-components').RuleSet<object>;
+    'body-lg-regular': import('styled-components').RuleSet<object>;
+    'body-md-bold': import('styled-components').RuleSet<object>;
+    'body-md-semibold': import('styled-components').RuleSet<object>;
+    'body-md-medium': import('styled-components').RuleSet<object>;
+    'body-md-regular': import('styled-components').RuleSet<object>;
+    'body-sm-bold': import('styled-components').RuleSet<object>;
+    'body-sm-semibold': import('styled-components').RuleSet<object>;
+    'body-sm-medium': import('styled-components').RuleSet<object>;
+    'body-sm-regular': import('styled-components').RuleSet<object>;
+    'caption-bold': import('styled-components').RuleSet<object>;
+    'caption-semibold': import('styled-components').RuleSet<object>;
+    'caption-medium': import('styled-components').RuleSet<object>;
+    'caption-regular': import('styled-components').RuleSet<object>;
+};
+export declare const StyledH1: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    $variant: string;
+}>> & string;
+export declare const StyledH2: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    $variant: string;
+}>> & string;
+export declare const StyledH3: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    $variant: string;
+}>> & string;
+export declare const StyledH4: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    $variant: string;
+}>> & string;
+export declare const StyledH5: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    $variant: string;
+}>> & string;
+export declare const StyledH6: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, {
+    $variant: string;
+}>> & string;
+export declare const StyledP: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {
+    $variant: string;
+}>> & string;
+export { typographyVariants };