@aristobyte-ui/message-box 2.5.1 → 2.6.1

package/README.md

@@ -0,0 +1,87 @@
+# @aristobyte-ui/message-box
+
+<p align="center">
+  <img src="https://img.shields.io/badge/TypeScript-5.8-blue?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript" />
+  <img src="https://img.shields.io/badge/Build-Turbo-green?style=for-the-badge&logo=turbo&logoColor=white" alt="TurboRepo" />
+  <img src="https://img.shields.io/badge/Lint-Strict-red?style=for-the-badge&logo=eslint&logoColor=white" alt="ESLint" />
+  <img src="https://img.shields.io/badge/License-MIT-black?style=for-the-badge&logo=open-source-initiative&logoColor=white" alt="License" />
+  <img src="https://img.shields.io/badge/AristoByte-UI-purple?style=for-the-badge&logo=react&logoColor=white" alt="AristoByte UI" />
+  <img src="https://img.shields.io/badge/Node-20.17.0+-339933?style=for-the-badge&logo=node.js&logoColor=white" alt="Node.js >=20.17.0" />
+  <img src="https://img.shields.io/badge/Yarn-1.22+-2C8EBB?style=for-the-badge&logo=yarn&logoColor=white" alt="Yarn >=1.22" />
+  <img src="https://img.shields.io/badge/NPM-10.8+-CB3837?style=for-the-badge&logo=npm&logoColor=white" alt="NPM >=10.8" />
+</p>
+
+A fully typed, customizable MessageBox component for React, supporting multiple variants, types, border-radius options, and optional icons. Built with AristoByteUI design tokens and SCSS modules, leveraging the `@aristobyte-ui/utils` package for icons.
+
+## 📦 Installation
+
+```bash
+# Install via Yarn
+yarn add -D @aristobyte-ui/message-box
+
+# Or via npm
+npm install -D @aristobyte-ui/message-box
+
+# Or via pnpm
+pnpm add -D @aristobyte-ui/message-box
+```
+
+## 🛠 Usage
+
+```tsx
+import { MessageBox } from '@aristobyte-ui/message-box';
+
+export default function App() {
+  return (
+    <div>
+      <MessageBox variant="success" type="solid" radius="md" withIcon>
+        This is a success message!
+      </MessageBox>
+    </div>
+  );
+}
+```
+
+## 📂 Presets Available
+
+- **Variants**: `default`, `info`, `warning`, `success`, `error`
+- **Types**: `solid`, `outline`, `outline-dashed`, `no-outline`, `glowing`
+- **Radius options**: `none`, `sm`, `md`, `lg`, `full`
+- **Icons**: optional via `withIcon` or custom via `customIcon` prop
+
+## 🔧 Example in a Package
+
+```tsx
+<MessageBox variant="warning" type="outline-dashed" radius="lg" withIcon>
+  Warning! Check your input.
+</MessageBox>
+```
+
+## 📊 Why This Matters
+
+- **Performance-first:** Lightweight CSS ensures fast rendering and smooth transitions.
+- **Fully typed:** TypeScript-first API ensures predictable usage and IDE autocomplete.
+- **AristoByteUI ready:** Seamlessly integrates with design tokens and SCSS modules.
+- **Flexible:** Supports multiple variants, types, border-radius options, and optional icons.
+
+## 🏆 Philosophy
+
+- **Modular architecture:** MessageBox component is fully composable.
+- **Declarative styling:** SCSS modules keep styles maintainable and scoped.
+- **Strict typing & runtime flexibility:** Props fully typed while allowing runtime overrides.
+- **Developer experience optimized:** Easy to use with predictable behavior and minimal boilerplate.
+
+## 📜 License
+
+[MIT](./LICENSE) © AristoByte
+
+## 🛡 Shields Showcase
+
+<p align="center">
+  <img src="https://img.shields.io/badge/Consistency-100%25-green?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Maintained-Active-brightgreen?style=for-the-badge&logo=github" />
+  <img src="https://img.shields.io/badge/Strictness-High-critical?style=for-the-badge&logo=eslint" />
+  <img src="https://img.shields.io/badge/Declarations-Enabled-blue?style=for-the-badge&logo=typescript" />
+  <img src="https://img.shields.io/badge/Monorepo-Turbo-green?style=for-the-badge&logo=monorepo" />
+  <img src="https://img.shields.io/badge/Interop-ESM%2FCJS-orange?style=for-the-badge&logo=javascript" />
+</p>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aristobyte-ui/message-box",
   "description": "A fully-typed, modular, and flexible MessageBox component for AristoByteUI, supporting multiple variants, types, border-radius options, and optional icons.",
-  "version": "2.5.1",
+  "version": "2.6.1",
   "license": "MIT",
   "private": false,
   "author": "AristoByte <info@aristobyte.com>",
@@ -41,15 +41,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "lib/src/main/index.js",
-  "module": "es/src/main/index.js",
-  "types": "es/src/main/index.d.ts",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "types": "es/index.d.ts",
   "peerDependencies": {
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.97.3"
   },
   "dependencies": {
-    "@aristobyte-ui/utils": "^2.5.1"
+    "@aristobyte-ui/utils": "^2.6.1"
   }
 }

package/es/src/main/components/MessageBox/MessageBox.scss

@@ -1,320 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.message-box {
-  align-items: flex-start;
-  color: $white;
-
-  display: flex;
-  padding: 0.75rem 1rem;
-  padding: 1rem;
-
-  &-radius {
-    &--none {
-      border-radius: 0rem; // 0px
-    }
-
-    &--sm {
-      border-radius: 0.25rem; // 4px
-    }
-
-    &--md {
-      border-radius: 0.5rem; // 8px
-    }
-
-    &--lg {
-      border-radius: 0.625rem; // 10px
-    }
-
-    &--full {
-      border-radius: 1.5rem; // 24px
-    }
-  }
-
-  &__content {
-    color: $white;
-    font-family: $font-family-sans;
-    font-size: $font-size-body-sm;
-    font-weight: $font-weight-regular;
-    line-height: $line-height-normal;
-  }
-
-  &--default.message-box-type {
-    &--solid {
-      background-color: rgba($grey-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($grey-600, 0.2);
-      border: 1px solid $grey-600;
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($grey-600, 0.2);
-      border: 1px dashed $grey-600;
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($grey-600, 0.2);
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($grey-600, 0.2);
-      border: 1px solid $grey-600;
-      box-shadow:
-        0 0 8px rgba($grey-600, 0.5),
-        0 0 16px rgba($grey-600, 0.4),
-        0 0 24px rgba($grey-600, 0.3);
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-  }
-
-  &--info.message-box-type {
-    &--solid {
-      background-color: rgba($blue-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($blue-600, 0.2);
-      border: 1px solid $blue-600;
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($blue-600, 0.2);
-      border: 1px dashed $blue-600;
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($blue-600, 0.2);
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($blue-600, 0.2);
-      border: 1px solid $blue-600;
-      box-shadow:
-        0 0 8px rgba($blue-600, 0.5),
-        0 0 16px rgba($blue-600, 0.4),
-        0 0 24px rgba($blue-600, 0.3);
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-  }
-
-  &--success.message-box-type {
-    &--solid {
-      background-color: rgba($green-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($green-600, 0.2);
-      border: 1px solid $green-600;
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($green-600, 0.2);
-      border: 1px dashed $green-600;
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($green-600, 0.2);
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($green-600, 0.2);
-      border: 1px solid $green-600;
-      box-shadow:
-        0 0 8px rgba($green-600, 0.5),
-        0 0 16px rgba($green-600, 0.4),
-        0 0 24px rgba($green-600, 0.3);
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-  }
-
-  &--warning.message-box-type {
-    &--solid {
-      background-color: rgba($amber-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($amber-600, 0.2);
-      border: 1px solid $amber-600;
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($amber-600, 0.2);
-      border: 1px dashed $amber-600;
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($amber-600, 0.2);
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($amber-600, 0.2);
-      border: 1px solid $amber-600;
-      box-shadow:
-        0 0 8px rgba($amber-600, 0.5),
-        0 0 16px rgba($amber-600, 0.4),
-        0 0 24px rgba($amber-600, 0.3);
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-  }
-
-  &--error.message-box-type {
-    &--solid {
-      background-color: rgba($red-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($red-600, 0.2);
-      border: 1px solid $red-600;
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($red-600, 0.2);
-      border: 1px dashed $red-600;
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($red-600, 0.2);
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($red-600, 0.2);
-      border: 1px solid $red-600;
-      box-shadow:
-        0 0 8px rgba($red-600, 0.5),
-        0 0 16px rgba($red-600, 0.4),
-        0 0 24px rgba($red-600, 0.3);
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin: 0 10px 0 0;
-    max-height: 16px;
-    max-width: 16px;
-    min-height: 16px;
-    min-width: 16px;
-
-    &--default {
-      color: $grey-600;
-    }
-
-    &--info {
-      color: $blue-600;
-    }
-
-    &--success {
-      color: $green-600;
-    }
-
-    &--warning {
-      color: $amber-600;
-    }
-
-    &--error {
-      color: $red-600;
-    }
-
-    svg {
-      width: 100%;
-    }
-  }
-}

package/es/src/main/components/MessageBox/index.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { type IconPropsType } from '@aristobyte-ui/utils';
-import './MessageBox.scss';
-type MessageBoxVariant = 'default' | 'info' | 'warning' | 'success' | 'error';
-export interface IMessageBox {
-    variant?: MessageBoxVariant;
-    children?: React.ReactElement | React.ReactNode | string;
-    withIcon?: boolean;
-    customIcon?: {
-        component: (props: IconPropsType) => React.JSX.Element;
-        size?: number;
-        color?: string;
-    };
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    type?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
-    className?: string;
-    style?: React.CSSProperties;
-}
-export declare const MessageBox: React.FC<IMessageBox>;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/MessageBox/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/message-box/src/main/components/MessageBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAS,MAAM,sBAAsB,CAAC;AAEjE,OAAO,mBAAmB,CAAC;AAE3B,KAAK,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0B5C,CAAC"}

package/es/src/main/components/MessageBox/index.js

@@ -1,25 +0,0 @@
-import * as React from 'react';
-import { Icons } from '@aristobyte-ui/utils';
-import './MessageBox.scss';
-var renderIcon = function (variant) {
-    switch (variant) {
-        case 'warning':
-            return Icons.Warning;
-        case 'success':
-            return Icons.Success;
-        case 'error':
-            return Icons.Error;
-        case 'info':
-        default:
-            return Icons.Info;
-    }
-};
-export var MessageBox = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.withIcon, withIcon = _c === void 0 ? false : _c, _d = _a.customIcon, customIcon = _d === void 0 ? null : _d, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, _f = _a.type, type = _f === void 0 ? 'outline' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.style, style = _h === void 0 ? {} : _h;
-    return (React.createElement("div", { className: "message-box ".concat("message-box-type--".concat(type), " ").concat("message-box-radius--".concat(radius), " ").concat("message-box--".concat(variant), " ").concat(className), style: style },
-        withIcon && (React.createElement("span", { className: "message-box__icon ".concat("message-box__icon--".concat(variant)) }, (customIcon === null || customIcon === void 0 ? void 0 : customIcon.component({
-            size: customIcon.size,
-            color: customIcon.color,
-        })) || renderIcon(variant)({}))),
-        React.createElement("p", { className: "message-box__content", dangerouslySetInnerHTML: { __html: children || '' } })));
-};

package/es/src/main/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MessageBox';
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/message-box/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/es/src/main/components/index.js

@@ -1 +0,0 @@
-export * from './MessageBox';

package/es/src/main/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-//# sourceMappingURL=index.d.ts.map

package/es/src/main/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/message-box/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/es/src/main/index.js

@@ -1 +0,0 @@
-export * from './components';

package/lib/src/main/components/MessageBox/MessageBox.scss

@@ -1,320 +0,0 @@
-@use '@aristobyte-ui/utils/styles' as *;
-
-.message-box {
-  align-items: flex-start;
-  color: $white;
-
-  display: flex;
-  padding: 0.75rem 1rem;
-  padding: 1rem;
-
-  &-radius {
-    &--none {
-      border-radius: 0rem; // 0px
-    }
-
-    &--sm {
-      border-radius: 0.25rem; // 4px
-    }
-
-    &--md {
-      border-radius: 0.5rem; // 8px
-    }
-
-    &--lg {
-      border-radius: 0.625rem; // 10px
-    }
-
-    &--full {
-      border-radius: 1.5rem; // 24px
-    }
-  }
-
-  &__content {
-    color: $white;
-    font-family: $font-family-sans;
-    font-size: $font-size-body-sm;
-    font-weight: $font-weight-regular;
-    line-height: $line-height-normal;
-  }
-
-  &--default.message-box-type {
-    &--solid {
-      background-color: rgba($grey-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($grey-600, 0.2);
-      border: 1px solid $grey-600;
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($grey-600, 0.2);
-      border: 1px dashed $grey-600;
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($grey-600, 0.2);
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($grey-600, 0.2);
-      border: 1px solid $grey-600;
-      box-shadow:
-        0 0 8px rgba($grey-600, 0.5),
-        0 0 16px rgba($grey-600, 0.4),
-        0 0 24px rgba($grey-600, 0.3);
-
-      .message-box__icon {
-        color: $grey-600;
-      }
-    }
-  }
-
-  &--info.message-box-type {
-    &--solid {
-      background-color: rgba($blue-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($blue-600, 0.2);
-      border: 1px solid $blue-600;
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($blue-600, 0.2);
-      border: 1px dashed $blue-600;
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($blue-600, 0.2);
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($blue-600, 0.2);
-      border: 1px solid $blue-600;
-      box-shadow:
-        0 0 8px rgba($blue-600, 0.5),
-        0 0 16px rgba($blue-600, 0.4),
-        0 0 24px rgba($blue-600, 0.3);
-
-      .message-box__icon {
-        color: $blue-600;
-      }
-    }
-  }
-
-  &--success.message-box-type {
-    &--solid {
-      background-color: rgba($green-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($green-600, 0.2);
-      border: 1px solid $green-600;
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($green-600, 0.2);
-      border: 1px dashed $green-600;
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($green-600, 0.2);
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($green-600, 0.2);
-      border: 1px solid $green-600;
-      box-shadow:
-        0 0 8px rgba($green-600, 0.5),
-        0 0 16px rgba($green-600, 0.4),
-        0 0 24px rgba($green-600, 0.3);
-
-      .message-box__icon {
-        color: $green-600;
-      }
-    }
-  }
-
-  &--warning.message-box-type {
-    &--solid {
-      background-color: rgba($amber-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($amber-600, 0.2);
-      border: 1px solid $amber-600;
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($amber-600, 0.2);
-      border: 1px dashed $amber-600;
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($amber-600, 0.2);
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($amber-600, 0.2);
-      border: 1px solid $amber-600;
-      box-shadow:
-        0 0 8px rgba($amber-600, 0.5),
-        0 0 16px rgba($amber-600, 0.4),
-        0 0 24px rgba($amber-600, 0.3);
-
-      .message-box__icon {
-        color: $amber-600;
-      }
-    }
-  }
-
-  &--error.message-box-type {
-    &--solid {
-      background-color: rgba($red-600, 1);
-
-      .message-box__icon {
-        color: $white;
-      }
-    }
-
-    &--outline {
-      background-color: rgba($red-600, 0.2);
-      border: 1px solid $red-600;
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-
-    &--outline-dashed {
-      background-color: rgba($red-600, 0.2);
-      border: 1px dashed $red-600;
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-
-    &--no-outline {
-      background-color: rgba($red-600, 0.2);
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-
-    &--glowing {
-      background-color: rgba($red-600, 0.2);
-      border: 1px solid $red-600;
-      box-shadow:
-        0 0 8px rgba($red-600, 0.5),
-        0 0 16px rgba($red-600, 0.4),
-        0 0 24px rgba($red-600, 0.3);
-
-      .message-box__icon {
-        color: $red-600;
-      }
-    }
-  }
-
-  &__icon {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    margin: 0 10px 0 0;
-    max-height: 16px;
-    max-width: 16px;
-    min-height: 16px;
-    min-width: 16px;
-
-    &--default {
-      color: $grey-600;
-    }
-
-    &--info {
-      color: $blue-600;
-    }
-
-    &--success {
-      color: $green-600;
-    }
-
-    &--warning {
-      color: $amber-600;
-    }
-
-    &--error {
-      color: $red-600;
-    }
-
-    svg {
-      width: 100%;
-    }
-  }
-}

package/lib/src/main/components/MessageBox/index.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { type IconPropsType } from '@aristobyte-ui/utils';
-import './MessageBox.scss';
-type MessageBoxVariant = 'default' | 'info' | 'warning' | 'success' | 'error';
-export interface IMessageBox {
-    variant?: MessageBoxVariant;
-    children?: React.ReactElement | React.ReactNode | string;
-    withIcon?: boolean;
-    customIcon?: {
-        component: (props: IconPropsType) => React.JSX.Element;
-        size?: number;
-        color?: string;
-    };
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    type?: 'solid' | 'outline' | 'outline-dashed' | 'no-outline' | 'glowing';
-    className?: string;
-    style?: React.CSSProperties;
-}
-export declare const MessageBox: React.FC<IMessageBox>;
-export {};
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/MessageBox/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/message-box/src/main/components/MessageBox/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAS,MAAM,sBAAsB,CAAC;AAEjE,OAAO,mBAAmB,CAAC;AAE3B,KAAK,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9E,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE;QACX,SAAS,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;QACvD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;IAC9C,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,gBAAgB,GAAG,YAAY,GAAG,SAAS,CAAC;IACzE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgBD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0B5C,CAAC"}

package/lib/src/main/components/MessageBox/index.js

@@ -1,62 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageBox = void 0;
-var React = __importStar(require("react"));
-var utils_1 = require("@aristobyte-ui/utils");
-require("./MessageBox.scss");
-var renderIcon = function (variant) {
-    switch (variant) {
-        case 'warning':
-            return utils_1.Icons.Warning;
-        case 'success':
-            return utils_1.Icons.Success;
-        case 'error':
-            return utils_1.Icons.Error;
-        case 'info':
-        default:
-            return utils_1.Icons.Info;
-    }
-};
-var MessageBox = function (_a) {
-    var children = _a.children, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, _c = _a.withIcon, withIcon = _c === void 0 ? false : _c, _d = _a.customIcon, customIcon = _d === void 0 ? null : _d, _e = _a.radius, radius = _e === void 0 ? 'md' : _e, _f = _a.type, type = _f === void 0 ? 'outline' : _f, _g = _a.className, className = _g === void 0 ? '' : _g, _h = _a.style, style = _h === void 0 ? {} : _h;
-    return (React.createElement("div", { className: "message-box ".concat("message-box-type--".concat(type), " ").concat("message-box-radius--".concat(radius), " ").concat("message-box--".concat(variant), " ").concat(className), style: style },
-        withIcon && (React.createElement("span", { className: "message-box__icon ".concat("message-box__icon--".concat(variant)) }, (customIcon === null || customIcon === void 0 ? void 0 : customIcon.component({
-            size: customIcon.size,
-            color: customIcon.color,
-        })) || renderIcon(variant)({}))),
-        React.createElement("p", { className: "message-box__content", dangerouslySetInnerHTML: { __html: children || '' } })));
-};
-exports.MessageBox = MessageBox;

package/lib/src/main/components/index.d.ts

@@ -1,2 +0,0 @@
-export * from './MessageBox';
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/components/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/message-box/src/main/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/src/main/components/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./MessageBox"), exports);

package/lib/src/main/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components';
-//# sourceMappingURL=index.d.ts.map

package/lib/src/main/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/message-box/src/main/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/lib/src/main/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./components"), exports);