open-index/open-npm huggingface dataset:
npm package: @moola.digital/ui-kit
Description: ## NODE VERSION 18.18.0 using npm
Latest version: 1.0.66

# Raiden UIKIT

## NODE VERSION
18.18.0
using npm

## CONTRIBUTING

Please read carefully for for the [contributing guidelines](./CONTRIBUTING.md)

## Design Principles

Understanding these concepts will help you better contribute

- Style Props

All component styles can be overridden or extended via style props to reduce the use of css prop or styled()

- Naming Props

We all know naming is the hardest thing in this industry. Generally, ensure a prop name is indicative of what it does. Boolean props should be named using auxiliary verbs such as does, has, is and should. For example, Button uses isDisabled, isLoading, etc.

- Simplicity

Strive to keep the component API fairly simple and show real world scenarios of using the component.

- Composition

Break down components into smaller parts with minimal props to keep complexity low, and compose them together. This will ensure that the styles and functionality are flexible and extensible.

## Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

- Configure the top-level `parserOptions` property like this:

```js
export default {
  // other rules...
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
    project: ["./tsconfig.json", "./tsconfig.node.json"],
    tsconfigRootDir: __dirname,
  },
};
```

- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

## Setting Up Custom Themes

### 1. Wrap your application with `RaidenProvider`

Ensure `RaidenProvider` wraps your main application component to provide the theme configuration context.

```jsx
import React from "react";
import { RaidenProvider } from "raiden"; // Replace 'raiden' with your actual context provider

const App = () => {
  return (
    <RaidenProvider theme={customTheme}>
      {/* Your application components */}
    </RaidenProvider>
  );
};
```

### 2. Use the createTheme function

To simplify creating or customizing a theme configuration, use the `createTheme` function provided:

```jsx
import { createTheme } from "src/utils";

const defaultTheme = createTheme();

// Example of creating a custom theme configuration
const customTheme = createTheme({
  colors: {
    light: {
      primary: "#FF5722", // Example primary color override
      background: {
        default: "#F5F5F5", // Example background color override
      },
    },
  },
});
```