greenole-design-system 1.1.33 → 1.1.35

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/Toast/Toast.stories.d.ts

@@ -1,12 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react';
-import { default as React } from 'react';
 import { default as Toast } from './Toast';
 declare const meta: Meta<typeof Toast>;
 export default meta;
 type Story = StoryObj<typeof Toast>;
 export declare const Playground: Story;
 export declare const Gallery: Story;
-export declare const InteractiveSandbox: {
-    name: string;
-    render: () => React.JSX.Element;
-};
+export declare const InteractiveSandbox: Story;

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

@@ -1,10 +1,6 @@
 export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     variant: string;
 }>> & string;
-export declare const ProgressBar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    variant: string;
-    autoDismissTime: number;
-}>> & string;
 export declare const IconWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     variant: string;
 }>> & string;

package/package.json

@@ -1,88 +1,89 @@
-{
-  "name": "greenole-design-system",
-  "version": "1.1.33",
-  "type": "module",
-  "main": "dist/greenole-design-system.cjs.js",
-  "module": "dist/greenole-design-system.es.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "description": "Componentes reutilizáveis grnl",
-  "keywords": [
-    "design-system",
-    "greenole",
-    "react",
-    "ui",
-    "components"
-  ],
-  "author": "Greenole",
-  "license": "MIT",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build && npx tailwindcss -i ./src/index.css -o ./dist/greenole.css",
-    "lint": "eslint .",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "deploy-storybook": "storybook-to-ghpages",
-    "create-component": "node scripts/create-component.js",
-    "commit": "node scripts/commit.js"
-  },
-  "peerDependencies": {
-    "i18next": "^25.4.1",
-    "react": ">=18.2.0 <20.0.0",
-    "react-dom": ">=18.2.0 <20.0.0",
-    "react-i18next": "^15.4.0"
-  },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.5",
-    "@eslint/js": "^9.21.0",
-    "@storybook/addon-docs": "^8.6.4",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/addon-themes": "^8.6.10",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/builder-vite": "^8.6.4",
-    "@storybook/experimental-addon-test": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/test": "^8.6.4",
-    "@tanstack/react-form": "^1.20.0",
-    "@tanstack/react-query": "^5.87.4",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "@types/styled-components": "^5.1.34",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.8",
-    "@vitest/coverage-v8": "^3.0.8",
-    "autoprefixer": "^10.4.21",
-    "chalk": "^5.6.0",
-    "cross-env": "^10.0.0",
-    "eslint": "^9.21.0",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-react-refresh": "^0.4.19",
-    "eslint-plugin-storybook": "^0.11.4",
-    "globals": "^15.15.0",
-    "playwright": "^1.51.0",
-    "postcss": "^8.5.3",
-    "prop-types": "^15.8.1",
-    "storybook": "^8.6.4",
-    "tailwindcss": "^3.4.17",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.3",
-    "vitest": "^3.0.8"
-  },
-  "dependencies": {
-    "@phosphor-icons/react": "^2.1.10",
-    "clsx": "^2.1.1",
-    "dayjs": "^1.11.13",
-    "lucide-react": "^0.523.0",
-    "styled-components": "^6.1.19",
-    "use-debounce": "^10.0.6"
-  }
-}
+{
+  "name": "greenole-design-system",
+  "version": "1.1.35",
+  "type": "module",
+  "main": "dist/greenole-design-system.cjs.js",
+  "module": "dist/greenole-design-system.es.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Componentes reutilizáveis grnl",
+  "keywords": [
+    "design-system",
+    "greenole",
+    "react",
+    "ui",
+    "components"
+  ],
+  "author": "Greenole",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && npx tailwindcss -i ./src/index.css -o ./dist/greenole.css",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "storybook-to-ghpages",
+    "create-component": "node scripts/create-component.js",
+    "commit": "node scripts/commit.js"
+  },
+  "peerDependencies": {
+    "i18next": "^25.4.1",
+    "react": ">=18.2.0 <20.0.0",
+    "react-dom": ">=18.2.0 <20.0.0",
+    "react-i18next": "^15.4.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@eslint/js": "^9.21.0",
+    "@storybook/addon-docs": "^8.6.4",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-onboarding": "^8.6.4",
+    "@storybook/addon-themes": "^8.6.10",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/builder-vite": "^8.6.4",
+    "@storybook/experimental-addon-test": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-vite": "^8.6.4",
+    "@storybook/storybook-deployer": "^2.8.16",
+    "@storybook/test": "^8.6.4",
+    "@tanstack/react-form": "^1.20.0",
+    "@tanstack/react-query": "^5.87.4",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.8",
+    "@vitest/coverage-v8": "^3.0.8",
+    "autoprefixer": "^10.4.21",
+    "chalk": "^5.6.0",
+    "cross-env": "^10.0.0",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "eslint-plugin-storybook": "^0.11.4",
+    "globals": "^15.15.0",
+    "playwright": "^1.51.0",
+    "postcss": "^8.5.3",
+    "prop-types": "^15.8.1",
+    "storybook": "^8.6.4",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.8"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.13",
+    "i18next-http-backend": "^3.0.2",
+    "lucide-react": "^0.523.0",
+    "styled-components": "^6.1.19",
+    "use-debounce": "^10.0.6"
+  }
+}

package/dist/App.d.ts

@@ -1,3 +0,0 @@
-import { default as React } from 'react';
-declare function App(): React.JSX.Element;
-export default App;

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

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { ButtonProps } from './Button.types';
-declare const Button: React.FC<ButtonProps>;
-export default Button;

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

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Button } from './Button';
-declare const meta: Meta<typeof Button>;
-export default meta;
-type Story = StoryObj<typeof Button>;
-export declare const Primary: Story;
-export declare const Secondary: Story;
-export declare const Tertiary: Story;
-export declare const Link: Story;
-export declare const DangerPrimary: Story;
-export declare const WithIcons: Story;
-export declare const LoadingState: Story;
-export declare const Disabled: Story;

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

@@ -1,16 +0,0 @@
-import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { TypographyVariant } from '../../components/Typography/Typography';
-export type ButtonVariant = "primary" | "secondary" | "tertiary" | "link";
-export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonColor = "default" | "danger";
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    children: ReactNode;
-    variant?: ButtonVariant;
-    size?: ButtonSize;
-    color?: ButtonColor;
-    fullWidth?: boolean;
-    typography?: TypographyVariant;
-    loading?: boolean;
-    iconLeft?: ReactNode;
-    iconRight?: ReactNode;
-}

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

@@ -1,2 +0,0 @@
-export { default as Button } from './Button';
-export type { ButtonColor, ButtonProps, ButtonSize, ButtonVariant } from './Button.types';

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

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { DropdownTypes } from './Dropdown.types';
-declare const Dropdown: React.FC<DropdownTypes>;
-export default Dropdown;

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

@@ -1,13 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Dropdown } from './Dropdown';
-declare const meta: Meta<typeof Dropdown>;
-export default meta;
-type Story = StoryObj<typeof Dropdown>;
-export declare const Default: Story;
-export declare const Multiple: Story;
-export declare const Searchable: Story;
-export declare const WithMaxSelected: Story;
-export declare const WithLoadMore: Story;
-export declare const Invalid: Story;
-export declare const WithMessage: Story;
-export declare const OptionsWithIcons: Story;

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

@@ -1,35 +0,0 @@
-import { DropdownTypes } from './Dropdown.types';
-type StyledButtonProps = Pick<DropdownTypes, 'invalid' | 'disabled' | 'className'> & {
-    $open: boolean;
-    $invalid: boolean;
-};
-type StyledMenuProps = {
-    $open: boolean;
-};
-type StyledOptionProps = {
-    $isSelected: boolean;
-    $isDisabled: boolean;
-};
-type StyledOptionCheckboxProps = {
-    $isSelected: boolean;
-};
-type StyledDropdownMessageProps = {
-    $invalid: boolean;
-};
-export declare const DropdownContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const DropdownMessage: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledDropdownMessageProps>> & string;
-export declare const DropdownButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledButtonProps>> & string;
-export declare const CaretIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').SVGProps<SVGSVGElement>, {
-    $open: boolean;
-}>> & string;
-export declare const DropdownMenu: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledMenuProps>> & string;
-export declare const SearchContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SearchInput: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const OptionsList: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const OptionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, StyledOptionProps>> & string;
-export declare const OptionCheckbox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledOptionCheckboxProps>> & string;
-export declare const OptionLabel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const NoResults: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Sentinel: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};

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

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react';
-export interface DropdownOptionsType {
-    icon?: ReactNode;
-    label: string;
-    value: string;
-}
-export interface DropdownAsyncOptionsType {
-    data: DropdownOptionsType[];
-    hasMore: boolean;
-}
-export interface DropdownTypes {
-    label?: string;
-    multiple?: boolean;
-    searchable?: boolean;
-    placeholder?: string;
-    values?: string | string[];
-    maxSelected?: number;
-    options?: DropdownOptionsType[];
-    hasMore?: boolean;
-    isLoading?: boolean;
-    disabled?: boolean;
-    invalid?: boolean;
-    message?: string | ReactNode;
-    className?: string;
-    displayValue?: string;
-    onChange: (value: string | string[]) => void;
-    onSearch?: (searchTerm: string) => void;
-    onLoadMore?: () => void;
-}

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

@@ -1,2 +0,0 @@
-export { default as Dropdown } from './Dropdown';
-export type { DropdownAsyncOptionsType, DropdownOptionsType, } from './Dropdown.types';

package/dist/base-components/Input/Input.d.ts

@@ -1,4 +0,0 @@
-import { default as React } from 'react';
-import { InputProps } from './Input.types';
-export declare const Input: React.FC<InputProps>;
-export default Input;

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

@@ -1,8 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { default as Input } from './Input';
-declare const meta: Meta<typeof Input>;
-export default meta;
-type Story = StoryObj<typeof Input>;
-export declare const Playground: Story;
-export declare const States: Story;
-export declare const WithTanStackForm: Story;

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

@@ -1,20 +0,0 @@
-export declare const Wrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    fullWidth?: boolean;
-}>> & string;
-export declare const Label: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
-export declare const FieldWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    disabled?: boolean;
-    hasError?: boolean;
-    isValid?: boolean;
-    readOnly?: boolean;
-    textArea?: boolean;
-}>> & 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;
-export declare const BaseFieldStyles: import('styled-components').RuleSet<object>;
-export declare const InputField: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
-export declare const TextAreaField: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, never>> & string;
-export declare const ErrorText: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const Subtitle: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CharCounter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    hasError?: boolean;
-}>> & string;