stp-ui-kit 0.0.105 → 0.0.108

package/README.md

@@ -1,153 +1,224 @@
-# 🎨 stp-ui-kit
-
-A custom UI Kit developed for the Smartestprep platform.  
-It provides a set of reusable, styled, and tested UI components to ensure consistent design and faster development across projects.
-
----
-
-## 📦 Installation
-
-```bash
-npm install stp-ui-kit
-# or
-yarn add stp-ui-kit
-# or
-bun add stp-ui-kit
-```
-
----
-
-## 🚀 Usage
-
-Import styles and components directly into your React project:
-
-```tsx
-import { Button } from "stp-ui-kit";
-import "stp-ui-kit/dist/styles/index.css";
-
-export default function App() {
-  return <Button variant='primary'>Click Me</Button>;
-}
-```
-
----
-
-## 📂 Project Structure
-
-```plaintext
-src/
- ├─ assets/            # custom icons and static assets
- ├─ components/        # UI components
- │   ├─ data/
- │   ├─ display/
- │   ├─ feedback/
- │   ├─ form/
- │   ├─ layout/
- │   ├─ navigation/
- │   └─ ui/
- ├─ lib/               # helpers, utils
- ├─ styles/            # global styles, tokens, variables
- │   ├─ _variables.scss
- │   ├─ main.scss
- │   └─ tokens.ts
- ├─ App.tsx            # playground / dev entry
- └─ index.ts           # main export file
-```
-
----
-
-## 🛠 Tech Stack
-
-- React 18+ / 19+ – core UI framework
-- TypeScript – strongly typed components
-- TailwindCSS 4 + SCSS – styling and design tokens
-- Lucide-react – icon library
-- React Hook Form – form handling integration
-- Storybook 8 – interactive component documentation
-- Vite – development & build tooling
-
----
-
-## 📖 Documentation
-
-Run Storybook to explore and test components interactively:
-
-```bash
-npm run storybook
-```
-
-Build the static Storybook docs:
-
-```bash
-npm run build-storybook
-```
-
----
-
-## 🧑‍💻 Development
-
-- Start in dev mode
-
-  ```bash
-  npm run dev
-  ```
-
-- Build library
-
-  ```bash
-  npm run build
-  ```
-
-- Lint & format
-
-  ```bash
-  npm run lint
-  npm run format
-  ```
-
-- Generate tokens
-  ```bash
-  npm run generate-tokens
-  ```
-
----
-
-# 🔑 Principles
-
-- Fully typed components (.ts / .tsx only)
-- Consistent design system powered by tokens according to Figma designs
-- Use named exports only (`export const`)
-- Remove unused/deprecated components over time
-- Do not add new dependencies unless absolutely necessary (to avoid making the project heavy)
-
-### 📦 Project Releases
-
-- Always upgrade the version in `package.json` before publishing
-- Do **not** run `npm publish` for every minor change
-- Always run `npm run build` before publishing
-- All changes must be commited into repository
-
-### 🛠 Local Development
-
-- When developing locally with other projects, use `npm link`
-  ```bash
-  # inside stp-ui-kit
-  npm link
-  # inside your project
-  npm link stp-ui-kit
-  ```
-- After testing locally, publish the updated package if required
-
-## 🤝 Contributing
-
-1. Clone the repo
-2. Install dependencies with `npm install`
-3. Run Storybook (`npm run storybook`)
-4. Add or update a component inside `src/components`
-5. Submit a pull request 🎉
-
----
-
-## 📜 License
-
-MIT © Smartestprep
+# 🎨 stp-ui-kit
+
+A comprehensive React UI Kit with 50+ production-ready components for the Smartestprep platform.
+Built with TypeScript, Tailwind CSS, and SCSS for consistent design and rapid development.
+
+[![npm version](https://img.shields.io/npm/v/stp-ui-kit.svg)](https://www.npmjs.com/package/stp-ui-kit)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](./LICENSE)
+
+---
+
+## ✨ Features
+
+- 🎨 **50+ Components** - Display, Form, Feedback, Layout, Navigation, Data
+- 🎯 **Design System** - Comprehensive design tokens (spacing, colors, typography)
+- 📱 **Responsive** - Mobile-first with built-in breakpoints
+- 🔧 **TypeScript** - Full type safety with strict mode
+- 🎭 **Theming** - CSS custom properties for easy theming
+- 🚀 **Tree-shakeable** - ES modules for optimal bundle size
+- 📚 **Storybook** - Interactive component documentation
+- 🔥 **Hot Reload** - Watch mode for seamless development with npm link
+
+---
+
+## 📦 Installation
+
+```bash
+npm install stp-ui-kit
+# or
+yarn add stp-ui-kit
+# or
+pnpm add stp-ui-kit
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+// Import styles once in your app entry (main.tsx or App.tsx)
+// Import and use components
+import { Button, Input, Modal, Typography } from "stp-ui-kit";
+import "stp-ui-kit/styles";
+
+export default function App() {
+  return (
+    <div>
+      <Typography variant='h1'>Welcome</Typography>
+      <Input
+        label='Email'
+        placeholder='Enter your email'
+      />
+      <Button variant='primary'>Get Started</Button>
+    </div>
+  );
+}
+```
+
+### Using Design Tokens
+
+**In SCSS files:**
+
+```scss
+@use "stp-ui-kit/styles/variables" as stp;
+
+.my-component {
+  padding: stp.$space-400; // 16px
+  border-radius: stp.$border-radius-100; // 4px
+  color: var(--color-neutral-800);
+}
+```
+
+**In JavaScript/TypeScript:**
+
+```typescript
+import { breakpoints, spacing, typography } from "stp-ui-kit/tokens";
+
+const styles = {
+  padding: spacing["space-400"], // '16px'
+};
+```
+
+---
+
+## 📚 Documentation
+
+- **[COMPONENTS.md](./COMPONENTS.md)** - Complete component reference with all 50+ components
+- **[USAGE_GUIDE.md](./USAGE_GUIDE.md)** - Comprehensive usage guide with examples
+- **[CLAUDE.md](./CLAUDE.md)** - Instructions for AI assistants (Claude Code)
+- **Storybook** - Interactive demos (run `npm run storybook`)
+
+---
+
+## 📂 Project Structure
+
+```plaintext
+src/
+ ├─ assets/            # custom icons and static assets
+ ├─ components/        # UI components
+ │   ├─ data/
+ │   ├─ display/
+ │   ├─ feedback/
+ │   ├─ form/
+ │   ├─ layout/
+ │   ├─ navigation/
+ │   └─ ui/
+ ├─ lib/               # helpers, utils
+ ├─ styles/            # global styles, tokens, variables
+ │   ├─ _variables.scss
+ │   ├─ main.scss
+ │   └─ tokens.ts
+ ├─ App.tsx            # playground / dev entry
+ └─ index.ts           # main export file
+```
+
+---
+
+## 🛠 Tech Stack
+
+- React 18+ / 19+ – core UI framework
+- TypeScript – strongly typed components
+- TailwindCSS 4 + SCSS – styling and design tokens
+- React Hook Form – form handling integration
+- Storybook 8 – interactive component documentation
+- Vite – development & build tooling
+
+---
+
+## 📖 Documentation
+
+Run Storybook to explore and test components interactively:
+
+```bash
+npm run storybook
+```
+
+Build the static Storybook docs:
+
+```bash
+npm run build-storybook
+```
+
+---
+
+## 🧑‍💻 Development
+
+- Start in dev mode
+
+  ```bash
+  npm run dev
+  ```
+
+- Build library
+
+  ```bash
+  npm run build
+  ```
+
+- Lint & format
+
+  ```bash
+  npm run lint
+  npm run format
+  ```
+
+- Generate tokens
+  ```bash
+  npm run generate-tokens
+  ```
+
+---
+
+# 🔑 Principles
+
+- Fully typed components (.ts / .tsx only)
+- Consistent design system powered by tokens according to Figma designs
+- Use named exports only (`export const`)
+- Remove unused/deprecated components over time
+- Do not add new dependencies unless absolutely necessary (to avoid making the project heavy)
+
+### 📦 Project Releases
+
+- Always upgrade the version in `package.json` before publishing
+- Do **not** run `npm publish` for every minor change
+- Always run `npm run build` before publishing
+- All changes must be commited into repository
+
+### 🛠 Local Development with Hot Reload
+
+When developing stp-ui-kit and testing in another project:
+
+```bash
+# 1. In stp-ui-kit directory
+npm link
+npm run build:watch  # Keep this running - auto-rebuilds on changes!
+
+# 2. In your project directory
+npm link stp-ui-kit
+npm start
+
+# Changes in stp-ui-kit will now auto-reflect in your project! 🔥
+```
+
+**No need to unlink/relink** - `build:watch` provides hot reload for linked packages.
+
+### 📤 Publishing
+
+- Always run `npm run build` before publishing
+- Update version in `package.json` before `npm publish`
+- Commit all changes to repository
+- Run `npm run format` and `npm run lint` before committing
+
+## 🤝 Contributing
+
+1. Clone the repo
+2. Install dependencies with `npm install`
+3. Run Storybook (`npm run storybook`)
+4. Add or update a component inside `src/components`
+5. Submit a pull request 🎉
+
+---
+
+## 📜 License
+
+MIT © Smartestprep

package/dist/banners/Sat.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5EEAD4"/>
-</svg>
+<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5EEAD4"/>
+</svg>

package/dist/banners/SatFinished.svg

@@ -1,3 +1,3 @@
-<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5B21B6"/>
-</svg>
+<svg width="24" height="40" viewBox="0 0 24 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.7133 0L0 22.4506H8.63211L5.28671 40L24 17.5494H15.3679L18.7133 0Z" fill="#5B21B6"/>
+</svg>

package/dist/components/data/Table/Table.d.ts

@@ -1,17 +1,18 @@
 import { ComponentProps } from 'react';
-import { Table as ShadcnTable, TableBody as ShadcnTableBody, TableCaption as ShadcnTableCaption, TableCell as ShadcnTableCell, TableHead as ShadcnTableHead, TableHeader as ShadcnTableHeader, TableRow as ShadcnTableRow } from '../../ui/table';
-export declare const Table: React.FC<React.ComponentProps<typeof ShadcnTable>>;
-export declare const TableBody: React.FC<React.ComponentProps<typeof ShadcnTableBody>>;
-export declare const TableCaption: React.FC<React.ComponentProps<typeof ShadcnTableCaption>>;
+import * as React from "react";
+export declare function Table({ className, ...props }: React.ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+export declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
 type VerticalAlign = "top" | "middle" | "bottom";
-interface CustomTableCellProps extends ComponentProps<typeof ShadcnTableCell> {
-    vAlign?: VerticalAlign;
-}
-export declare const TableCell: React.FC<CustomTableCellProps>;
-export declare const TableHeader: React.FC<React.ComponentProps<typeof ShadcnTableHeader>>;
-interface CustomTableHeadProps extends React.ComponentProps<typeof ShadcnTableHead> {
+interface CustomTableHeadProps extends React.ComponentProps<"th"> {
     variant?: "primary" | "secondary";
 }
 export declare const TableHead: React.FC<CustomTableHeadProps>;
-export declare const TableRow: React.FC<React.ComponentProps<typeof ShadcnTableRow>>;
+interface CustomTableCellProps extends ComponentProps<"td"> {
+    vAlign?: VerticalAlign;
+}
+export declare const TableCell: React.FC<CustomTableCellProps>;
+export declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/display/Chip/Chip.d.ts

@@ -1,7 +1,7 @@
 import { default as React, ReactNode } from 'react';
-export type ChipColor = "blue" | "violet" | "fuchsia" | "lime" | "teal" | "indigo" | "red" | "amber" | "green";
+export type ChipColor = "blue" | "violet" | "fuchsia" | "lime" | "teal" | "indigo" | "red" | "amber" | "green" | "neutral";
 export interface ChipProps {
-    label: string;
+    label: ReactNode;
     icon?: ReactNode;
     color?: ChipColor;
     className?: string;

package/dist/components/display/InputChip/InputChip.d.ts

@@ -0,0 +1,6 @@
+import { default as React, ReactNode } from 'react';
+export interface InputChipProps extends React.HTMLAttributes<HTMLDivElement> {
+    label: ReactNode;
+    icon?: ReactNode;
+}
+export declare const InputChip: React.FC<InputChipProps>;

package/dist/components/display/OptionList/OptionList.d.ts

@@ -1,6 +1,15 @@
+import { default as React } from 'react';
 export type ShadowLevel = "lower" | "higher";
+export interface OptionProps {
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Option: ({ label, icon, onClick, disabled, className, }: OptionProps) => import("react/jsx-runtime").JSX.Element;
 export interface OptionListItem {
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactNode;
     onClick?: () => void;
     disabled?: boolean;

package/dist/components/display/OptionList/index.d.ts

@@ -0,0 +1,2 @@
+export { OptionList, Option } from './OptionList';
+export type { OptionListProps, OptionListItem, OptionProps, ShadowLevel, } from './OptionList';

package/dist/components/display/index.d.ts

@@ -9,3 +9,4 @@ export * from './Icon/Icon';
 export * from './OptionList/OptionList';
 export * from './Illustration/Illustration';
 export * from './Chip/Chip';
+export * from './InputChip/InputChip';

package/dist/components/feedback/Info/Info.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, ReactNode } from 'react';
 export interface InfoProps extends HTMLAttributes<HTMLDivElement> {
     text: ReactNode;
-    tone?: "warning" | "information";
+    tone?: "warning" | "information" | "success";
 }
-export declare const InfoIcons: Record<"warning" | "information", ReactNode>;
+export declare const InfoIcons: Record<"warning" | "information" | "success", ReactNode>;
 export declare const Info: ({ text, tone, className, ...rest }: InfoProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -4,7 +4,7 @@ export interface ModalProps {
     activator?: ReactNode;
     open: boolean;
     onClose?: () => void;
-    title: string;
+    title: ReactNode;
     primaryButtonProps?: ButtonProps;
     secondaryButtonProps?: ButtonProps[];
     tone?: "default" | "critical" | "warning";

package/dist/components/feedback/Window/Window.d.ts

@@ -7,7 +7,6 @@ export interface WindowProps {
     title: string;
     primaryButtonProps?: ButtonProps;
     secondaryButtonProps?: ButtonProps[];
-    tone?: "default" | "critical" | "warning";
     children: ReactNode;
     fullHeight?: boolean;
     size?: "sm" | "lg" | "md";

package/dist/components/form/Select/Select.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 interface SelectOption {
-    label: string;
+    label: React.ReactNode;
     value: string | number;
     disabled?: boolean;
 }
 interface SelectProps {
-    label?: string;
+    label?: React.ReactNode;
     error?: string;
     helperText?: string;
     disabled?: boolean;

package/dist/components/icons/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Plus } from '../../../public/icons/Plus.svg?react';
+export { default as X } from '../../../public/icons/X.svg?react';

package/dist/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './navigation';
 export * from './feedback';
 export * from './display';
 export * from './data';
+export * from './icons';

package/dist/icons/ArrowLine.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 0H10.5V12.95C10.5 13.8025 10.5006 14.3967 10.5384 14.8593C10.5755 15.3132 10.6446 15.574 10.7452 15.7715C10.961 16.1948 11.3052 16.539 11.7285 16.7548C11.926 16.8554 12.1868 16.9245 12.6407 16.9616C13.1033 16.9994 13.6975 17 14.55 17H16.9393L15.2197 15.2803C14.9268 14.9874 14.9268 14.5126 15.2197 14.2197C15.5126 13.9268 15.9874 13.9268 16.2803 14.2197L19.2803 17.2197C19.5732 17.5126 19.5732 17.9874 19.2803 18.2803L16.2803 21.2803C15.9874 21.5732 15.5126 21.5732 15.2197 21.2803C14.9268 20.9874 14.9268 20.5126 15.2197 20.2197L16.9393 18.5H14.5179C13.705 18.5 13.0494 18.5 12.5185 18.4566C11.9719 18.412 11.4918 18.3176 11.0475 18.0913C10.3419 17.7317 9.76825 17.1581 9.40873 16.4525C9.18239 16.0082 9.08803 15.5281 9.04336 14.9815C8.99999 14.4506 8.99999 13.795 9 12.9821V0Z" fill="#868892"/>
-</svg>
+<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 0H10.5V12.95C10.5 13.8025 10.5006 14.3967 10.5384 14.8593C10.5755 15.3132 10.6446 15.574 10.7452 15.7715C10.961 16.1948 11.3052 16.539 11.7285 16.7548C11.926 16.8554 12.1868 16.9245 12.6407 16.9616C13.1033 16.9994 13.6975 17 14.55 17H16.9393L15.2197 15.2803C14.9268 14.9874 14.9268 14.5126 15.2197 14.2197C15.5126 13.9268 15.9874 13.9268 16.2803 14.2197L19.2803 17.2197C19.5732 17.5126 19.5732 17.9874 19.2803 18.2803L16.2803 21.2803C15.9874 21.5732 15.5126 21.5732 15.2197 21.2803C14.9268 20.9874 14.9268 20.5126 15.2197 20.2197L16.9393 18.5H14.5179C13.705 18.5 13.0494 18.5 12.5185 18.4566C11.9719 18.412 11.4918 18.3176 11.0475 18.0913C10.3419 17.7317 9.76825 17.1581 9.40873 16.4525C9.18239 16.0082 9.08803 15.5281 9.04336 14.9815C8.99999 14.4506 8.99999 13.795 9 12.9821V0Z" fill="#868892"/>
+</svg>

package/dist/icons/ParentLine.svg

@@ -1,3 +1,3 @@
-<svg width="2" height="6" viewBox="0 0 2 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0.75C0 0.335786 0.335786 0 0.75 0C1.16421 0 1.5 0.335786 1.5 0.75V6H0V0.75Z" fill="#868892"/>
-</svg>
+<svg width="2" height="6" viewBox="0 0 2 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0.75C0 0.335786 0.335786 0 0.75 0C1.16421 0 1.5 0.335786 1.5 0.75V6H0V0.75Z" fill="#868892"/>
+</svg>

package/dist/icons/Plus.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path d="M9.99968 3.41663C10.4139 3.41663 10.7497 3.75241 10.7497 4.16663V9.24963H15.8337C16.2476 9.24981 16.5835 9.5857 16.5837 9.99963C16.5837 10.4137 16.2477 10.7495 15.8337 10.7496H10.7497V15.8336C10.7495 16.2477 10.4138 16.5836 9.99968 16.5836C9.58572 16.5834 9.24986 16.2476 9.24968 15.8336V10.7496H4.16667C3.75246 10.7496 3.41667 10.4138 3.41667 9.99963C3.41687 9.58559 3.75258 9.24963 4.16667 9.24963H9.24968V4.16663C9.24968 3.75252 9.58562 3.4168 9.99968 3.41663Z" fill="currentColor"/>
+</svg>

package/dist/icons/SideLine.svg

@@ -1,3 +1,3 @@
-<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="9" width="1.5" height="36" fill="#868892"/>
-</svg>
+<svg width="20" height="36" viewBox="0 0 20 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9" width="1.5" height="36" fill="#868892"/>
+</svg>

package/dist/icons/X.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
+  <path d="M10.2197 0.21967C10.5126 -0.0732232 10.9873 -0.0732232 11.2802 0.21967C11.5731 0.512568 11.5731 0.987342 11.2802 1.28022L6.81049 5.74994L11.2802 10.2197C11.5731 10.5126 11.5731 10.9873 11.2802 11.2802C10.9873 11.5731 10.5126 11.5731 10.2197 11.2802L5.74994 6.81049L1.28022 11.2802C0.987342 11.5731 0.512568 11.5731 0.21967 11.2802C-0.0732232 10.9873 -0.0732232 10.5126 0.21967 10.2197L4.6894 5.74994L0.21967 1.28022C-0.0732233 0.987324 -0.0732233 0.512563 0.21967 0.21967C0.512563 -0.0732233 0.987324 -0.0732233 1.28022 0.21967L5.74994 4.6894L10.2197 0.21967Z" fill="currentColor"/>
+</svg>

package/dist/icons/decorativeIcons/Alert.svg

@@ -1,11 +1,11 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_832)"/>
-<path d="M40 26.6667V40" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M40 53.3334H40.0333" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_970_832" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEF3C7"/>
-<stop offset="1" stop-color="#F59E0B"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_832)"/>
+<path d="M40 26.6667V40" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M40 53.3334H40.0333" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_970_832" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEF3C7"/>
+<stop offset="1" stop-color="#F59E0B"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/icons/decorativeIcons/Error.svg

@@ -1,11 +1,11 @@
-<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_956)"/>
-<path d="M50 30L30 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M30 30L50 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_970_956" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FEE2E2"/>
-<stop offset="1" stop-color="#EF4444"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M40 73.3334C58.4095 73.3334 73.3333 58.4095 73.3333 40C73.3333 21.5905 58.4095 6.66669 40 6.66669C21.5905 6.66669 6.66663 21.5905 6.66663 40C6.66663 58.4095 21.5905 73.3334 40 73.3334Z" fill="url(#paint0_linear_970_956)"/>
+<path d="M50 30L30 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30 30L50 50" stroke="white" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_970_956" x1="40" y1="6.66669" x2="40" y2="73.3334" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FEE2E2"/>
+<stop offset="1" stop-color="#EF4444"/>
+</linearGradient>
+</defs>
+</svg>