@lion-npm/ui 1.0.2 → 1.0.4

package/src/features/inputs/components/InputsBootstrapSection.tsx

@@ -1,154 +0,0 @@
-import { Fragment, useState } from "react";
-import VariantList from "../../VariantList";
-import { InputTypes } from "../../../types/InputTypes";
-import {BootstrapInputShapeTypes} from "../../../types/Web/BootstrapInputShapeTypes.tsx";
-import {BootstrapInputStyleTypes} from "../../../types/Web/BootstrapInputStyleTypes.tsx";
-import BootstrapInput from "../../../components/inputs/BootstrapInput";
-
-const StyleTypeList: Array<{ label: string; styleType: BootstrapInputStyleTypes }> = [
-    { label: "Floating Labels", styleType: BootstrapInputStyleTypes.FLOATING },
-    { label: "Standard Label", styleType: BootstrapInputStyleTypes.STANDARD },
-];
-
-const ShapeList: Array<{ label: string; shape: BootstrapInputShapeTypes }> = [
-    { label: "Rounded Shape", shape: BootstrapInputShapeTypes.ROUNDED },
-    { label: "Pill Shape", shape: BootstrapInputShapeTypes.PILL },
-    { label: "Square Shape", shape: BootstrapInputShapeTypes.SQUARE },
-];
-
-export default function InputsBootstrapSection() {
-    const [inputValue, setInputValue] = useState<string>("");
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-    };
-
-    return (
-        <Fragment>
-            <h2>Inputs (Bootstrap 5 Desktop)</h2>
-
-            {StyleTypeList.map(({ label: styleLabel, styleType }) => (
-                <div key={styleType} className="my-4">
-                    <h4 className="text-primary mb-3">{styleLabel}</h4>
-
-                    {ShapeList.map(({ label: shapeLabel, shape }) => (
-                        <div key={`${styleType}-${shape}`} className="mb-5">
-                            <div className={"ms-3"}>
-                                <h6 className="text-secondary mb-3">{shapeLabel}</h6>
-                            </div>
-
-                            {/* Enabled State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">Enabled</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-enabled`} className="col-12 col-md-6 col-lg-4">
-                                            <BootstrapInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label={`Field (${variant})`}
-                                                helperText="Optional helper text"
-                                                required={true}
-                                                placeholder="Custom Placeholder..."
-                                                value={inputValue}
-                                                onChange={handleChange}
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* With Value / Floating State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">With Value / Floating</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-value`} className="col-12 col-md-6 col-lg-4">
-                                            <BootstrapInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Username"
-                                                defaultValue="lion.developer"
-                                                helperText="Completed field"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Error State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">Error State</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-error`} className="col-12 col-md-6 col-lg-4">
-                                            <BootstrapInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Email Address"
-                                                defaultValue="invalid-email"
-                                                error="The email format is invalid"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Disabled State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">Disabled</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-disabled`} className="col-12 col-md-6 col-lg-4">
-                                            <BootstrapInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Disabled"
-                                                defaultValue="Locked value"
-                                                disabled={true}
-                                                helperText="Non-editable"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Readonly State */}
-                            <div>
-                                <span className="text-muted d-block mb-2 small font-monospace">ReadOnly</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-readonly`} className="col-12 col-md-6 col-lg-4">
-                                            <BootstrapInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="ReadOnly"
-                                                defaultValue="Locked value"
-                                                readOnly={true}
-                                                helperText="Non-editable"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </Fragment>
-    );
-}

package/src/features/inputs/components/InputsCustomSection.tsx

@@ -1,234 +0,0 @@
-import VariantList from "../../VariantList.tsx";
-import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
-import { InputTypes } from "../../../types/InputTypes.tsx";
-import { AndroidInputStyleTypes } from "../../../types/Android/AndroidInputStyleTypes.tsx";
-import { IOSInputStyleTypes } from "../../../types/IOS/IOSInputStyleTypes.tsx";
-import { BootstrapInputStyleTypes } from "../../../types/Web/BootstrapInputStyleTypes.tsx";
-import { AndroidInputShapeTypes } from "../../../types/Android/AndroidInputShapeTypes.tsx";
-import { BootstrapInputShapeTypes } from "../../../types/Web/BootstrapInputShapeTypes.tsx";
-import { IOSInputShapeTypes } from "../../../types/IOS/IOSInputShapeTypes.tsx";
-import { Fragment, useState } from "react";
-import LionInput from "../../../components/inputs/LionInput.tsx";
-
-const shapesByPlatform = {
-    [PlatformTypes.ANDROID]: [
-        { label: "Small", value: AndroidInputShapeTypes.SMALL },
-        { label: "Normal", value: AndroidInputShapeTypes.NORMAL },
-    ],
-    [PlatformTypes.IOS]: [
-        { label: "Rounded", value: IOSInputShapeTypes.ROUNDED },
-        { label: "Pill", value: IOSInputShapeTypes.PILL },
-        { label: "Square", value: IOSInputShapeTypes.SQUARE },
-    ],
-    [PlatformTypes.WEB]: [
-        { label: "Rounded", value: BootstrapInputShapeTypes.ROUNDED },
-        { label: "Pill", value: BootstrapInputShapeTypes.PILL },
-        { label: "Square", value: BootstrapInputShapeTypes.SQUARE },
-    ],
-};
-
-const stylesByPlatform = {
-    [PlatformTypes.ANDROID]: [
-        { label: "Outlined", value: AndroidInputStyleTypes.OUTLINED },
-        { label: "Filled", value: AndroidInputStyleTypes.FILLED },
-    ],
-    [PlatformTypes.IOS]: [
-        { label: "Form", value: IOSInputStyleTypes.FORM },
-        { label: "Rounded Border", value: IOSInputStyleTypes.ROUNDED_BORDER },
-        { label: "Filled", value: IOSInputStyleTypes.FILLED },
-        { label: "Outlined", value: IOSInputStyleTypes.OUTLINED },
-        { label: "Plain", value: IOSInputStyleTypes.PLAIN },
-    ],
-    [PlatformTypes.WEB]: [
-        { label: "Floating", value: BootstrapInputStyleTypes.FLOATING },
-        { label: "Standard", value: BootstrapInputStyleTypes.STANDARD },
-    ],
-};
-
-export default function InputsCustomSection() {
-    const [selectedPlatform, setSelectedPlatform] = useState<PlatformTypes>(PlatformTypes.ANDROID);
-    const [selectedAndroidShape, setSelectedAndroidShape] = useState<AndroidInputShapeTypes>(AndroidInputShapeTypes.NORMAL);
-    const [selectedIOSShape, setSelectedIOSShape] = useState<IOSInputShapeTypes>(IOSInputShapeTypes.ROUNDED);
-    const [selectedWebShape, setSelectedWebShape] = useState<BootstrapInputShapeTypes>(BootstrapInputShapeTypes.ROUNDED);
-
-    const [selectedAndroidStyle, setSelectedAndroidStyle] = useState<AndroidInputStyleTypes>(AndroidInputStyleTypes.OUTLINED);
-    const [selectedIOSStyle, setSelectedIOSStyle] = useState<IOSInputStyleTypes>(IOSInputStyleTypes.ROUNDED_BORDER);
-    const [selectedWebStyle, setSelectedWebStyle] = useState<BootstrapInputStyleTypes>(BootstrapInputStyleTypes.FLOATING);
-
-    return (
-        <Fragment>
-            <h2>Inputs (Custom Cross-Platform Test)</h2>
-
-            <div className="card p-3 mb-4 bg-light">
-                <div className="row g-3">
-                    <div className="col-md-4">
-                        <label className="form-label fw-bold">Platform:</label>
-                        <div className="btn-group w-100" role="group">
-                            <button
-                                type="button"
-                                className={`btn ${selectedPlatform === PlatformTypes.ANDROID ? "btn-primary" : "btn-outline-primary"}`}
-                                onClick={() => setSelectedPlatform(PlatformTypes.ANDROID)}
-                            >
-                                Android
-                            </button>
-                            <button
-                                type="button"
-                                className={`btn ${selectedPlatform === PlatformTypes.IOS ? "btn-primary" : "btn-outline-primary"}`}
-                                onClick={() => setSelectedPlatform(PlatformTypes.IOS)}
-                            >
-                                iOS
-                            </button>
-                            <button
-                                type="button"
-                                className={`btn ${selectedPlatform === PlatformTypes.WEB ? "btn-primary" : "btn-outline-primary"}`}
-                                onClick={() => setSelectedPlatform(PlatformTypes.WEB)}
-                            >
-                                Web
-                            </button>
-                        </div>
-                    </div>
-
-                    <div className="col-md-4">
-                        <label className="form-label fw-bold">Shape:</label>
-
-                        {selectedPlatform === PlatformTypes.ANDROID && (
-                            <select
-                                className="form-select"
-                                value={selectedAndroidShape}
-                                onChange={(e) => setSelectedAndroidShape(e.target.value as AndroidInputShapeTypes)}
-                            >
-                                {shapesByPlatform[PlatformTypes.ANDROID].map((s) => (
-                                    <option key={s.value} value={s.value}>{s.label}</option>
-                                ))}
-                            </select>
-                        )}
-
-                        {selectedPlatform === PlatformTypes.IOS && (
-                            <select
-                                className="form-select"
-                                value={selectedIOSShape}
-                                onChange={(e) => setSelectedIOSShape(e.target.value as IOSInputShapeTypes)}
-                            >
-                                {shapesByPlatform[PlatformTypes.IOS].map((s) => (
-                                    <option key={s.value} value={s.value}>{s.label}</option>
-                                ))}
-                            </select>
-                        )}
-
-                        {selectedPlatform === PlatformTypes.WEB && (
-                            <select
-                                className="form-select"
-                                value={selectedWebShape}
-                                onChange={(e) => setSelectedWebShape(e.target.value as BootstrapInputShapeTypes)}
-                            >
-                                {shapesByPlatform[PlatformTypes.WEB].map((s) => (
-                                    <option key={s.value} value={s.value}>{s.label}</option>
-                                ))}
-                            </select>
-                        )}
-                    </div>
-
-                    <div className="col-md-4">
-                        <label className="form-label fw-bold">StyleType:</label>
-                        {selectedPlatform === PlatformTypes.ANDROID && (
-                            <select
-                                className="form-select"
-                                value={selectedAndroidStyle}
-                                onChange={(e) => setSelectedAndroidStyle(e.target.value as AndroidInputStyleTypes)}
-                            >
-                                {stylesByPlatform[PlatformTypes.ANDROID].map((s) => (
-                                    <option key={s.value} value={s.value}>{s.label}</option>
-                                ))}
-                            </select>
-                        )}
-
-                        {selectedPlatform === PlatformTypes.IOS && (
-                            <select
-                                className="form-select"
-                                value={selectedIOSStyle}
-                                onChange={(e) => setSelectedIOSStyle(e.target.value as IOSInputStyleTypes)}
-                            >
-                                {stylesByPlatform[PlatformTypes.IOS].map((s) => (
-                                    <option key={s.value} value={s.value}>{s.label}</option>
-                                ))}
-                            </select>
-                        )}
-
-                        {selectedPlatform === PlatformTypes.WEB && (
-                            <select
-                                className="form-select"
-                                value={selectedWebStyle}
-                                onChange={(e) => setSelectedWebStyle(e.target.value as BootstrapInputStyleTypes)}
-                            >
-                                {stylesByPlatform[PlatformTypes.WEB].map((s) => (
-                                    <option key={s.value} value={s.value}>{s.label}</option>
-                                ))}
-                            </select>
-                        )}
-                    </div>
-                </div>
-            </div>
-
-            <div className="my-4">
-                <div className="ms-3 mb-4">
-                    {/* Enabled State */}
-                    <div className="mb-4">
-                        <span className="text-muted d-block mb-2 small fw-bold">Enabled</span>
-                        <div className="row g-3">
-                            {VariantList.map((variant) => (
-                                <div key={`custom-input-${variant}-enabled`} className="col-md-4">
-                                    <LionInput
-                                        type={InputTypes.TEXT}
-                                        platform={selectedPlatform}
-                                        variant={variant}
-                                        label={`${variant} input`}
-                                        placeholder="Enter text..."
-                                        styleType={{
-                                            android: selectedAndroidStyle,
-                                            ios: selectedIOSStyle,
-                                            web: selectedWebStyle,
-                                        }}
-                                        shape={{
-                                            android: selectedAndroidShape,
-                                            ios: selectedIOSShape,
-                                            web: selectedWebShape,
-                                        }}
-                                    />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Disabled State */}
-                    <div>
-                        <span className="text-muted d-block mb-2 small fw-bold">Disabled</span>
-                        <div className="row g-3">
-                            {VariantList.map((variant) => (
-                                <div key={`custom-input-${variant}-disabled`} className="col-md-4">
-                                    <LionInput
-                                        type={InputTypes.TEXT}
-                                        platform={selectedPlatform}
-                                        variant={variant}
-                                        label={`${variant} input`}
-                                        placeholder="Disabled..."
-                                        disabled={true}
-                                        styleType={{
-                                            android: selectedAndroidStyle,
-                                            ios: selectedIOSStyle,
-                                            web: selectedWebStyle,
-                                        }}
-                                        shape={{
-                                            android: selectedAndroidShape,
-                                            ios: selectedIOSShape,
-                                            web: selectedWebShape,
-                                        }}
-                                    />
-                                </div>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Fragment>
-    );
-}

package/src/features/inputs/components/InputsIOSSection.tsx

@@ -1,156 +0,0 @@
-import VariantList from "../../VariantList.tsx";
-import { IOSInputStyleTypes } from "../../../types/IOS/IOSInputStyleTypes.tsx";
-import { IOSInputShapeTypes } from "../../../types/IOS/IOSInputShapeTypes.tsx";
-import { InputTypes } from "../../../types/InputTypes.tsx";
-
-import { Fragment, useState } from "react";
-import IOSInput from "../../../components/inputs/IOSInput.tsx";
-
-const StyleTypeList: Array<{ label: string; styleType: IOSInputStyleTypes }> = [
-    { label: "Form", styleType: IOSInputStyleTypes.FORM },
-    { label: "Rounded Border", styleType: IOSInputStyleTypes.ROUNDED_BORDER },
-];
-
-const ShapeList: Array<{ label: string; shape: IOSInputShapeTypes }> = [
-    { label: "Rounded Shape", shape: IOSInputShapeTypes.ROUNDED },
-    { label: "Pill Shape", shape: IOSInputShapeTypes.PILL },
-    { label: "Square Shape", shape: IOSInputShapeTypes.SQUARE },
-];
-
-export default function InputsIOSSection() {
-    const [inputValue, setInputValue] = useState<string>("");
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-    };
-
-    return (
-        <Fragment>
-            <h2>Inputs (iOS SwiftUI)</h2>
-
-            {StyleTypeList.map(({ label: styleLabel, styleType }) => (
-                <div key={styleType} className="my-4">
-                    <h4 className="text-primary mb-3">{styleLabel} Inputs</h4>
-
-                    {ShapeList.map(({ label: shapeLabel, shape }) => (
-                        <div key={`${styleType}-${shape}`} className="mb-5">
-                            <div className={"ms-3"}>
-                                <h6 className="text-secondary mb-3">{shapeLabel}</h6>
-                            </div>
-
-                            {/* Enabled State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">Enabled</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-enabled`} className="col-12 col-md-6 col-lg-4">
-                                            <IOSInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label={`Label (${variant})`}
-                                                helperText="Texto de ayuda opcional"
-                                                required={true}
-                                                placeholder="Custom Placeholder..."
-                                                value={inputValue}
-                                                onChange={handleChange}
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* With Value / Floating State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">With Value / Floating</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-value`} className="col-12 col-md-6 col-lg-4">
-                                            <IOSInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Usuario"
-                                                defaultValue="lion.developer"
-                                                helperText="Campo completado"
-                                                placeholder="Custom Placeholder..."
-                                                autoComplete="off"
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Error State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">Error State</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-error`} className="col-12 col-md-6 col-lg-4">
-                                            <IOSInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Correo electrónico"
-                                                defaultValue="correo-invalido"
-                                                error="El formato del correo no es válido"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Disabled State */}
-                            <div className="mb-4">
-                                <span className="text-muted d-block mb-2 small font-monospace">Disabled</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-disabled`} className="col-12 col-md-6 col-lg-4">
-                                            <IOSInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Deshabilitado"
-                                                defaultValue="Valor bloqueado"
-                                                disabled={true}
-                                                helperText="No editable"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Readonly State */}
-                            <div>
-                                <span className="text-muted d-block mb-2 small font-monospace">ReadOnly</span>
-                                <div className="row g-3">
-                                    {VariantList.map((variant) => (
-                                        <div key={`${styleType}-${shape}-${variant}-readonly`} className="col-12 col-md-6 col-lg-4">
-                                            <IOSInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="ReadOnly"
-                                                defaultValue="Valor bloqueado"
-                                                readOnly={true}
-                                                helperText="No editable"
-                                                placeholder="Custom Placeholder..."
-                                            />
-                                        </div>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </Fragment>
-    );
-}

package/src/features/loadings/LoadingSection.tsx

@@ -1,5 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-export default function LoadingSection() {
-    return <Outlet />
-}

package/src/features/loadings/components/LoadingBarSection.tsx

@@ -1,74 +0,0 @@
-import { Fragment, useState } from "react";
-import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
-import { VariantTypes } from "../../../types/VariantTypes.tsx";
-import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
-import { useLionUI } from "../../../context/LionUIComponentsContext.tsx";
-import LionButton from "../../../components/buttons/LionButton.tsx";
-import LoadingBar from "../../../components/loadings/LoadingBar.tsx";
-
-const variantsList = [
-    { type: VariantTypes.SUCCESS, name: "Success" },
-    { type: VariantTypes.INFO, name: "Info" },
-    { type: VariantTypes.PRIMARY, name: "Primary" },
-    { type: VariantTypes.DANGER, name: "Danger" },
-    { type: VariantTypes.WARNING, name: "Warning" },
-    { type: VariantTypes.LIGHT, name: "Light" },
-    { type: VariantTypes.LINK, name: "Link" },
-    { type: VariantTypes.DARK, name: "Dark" },
-    { type: VariantTypes.LION_PACKAGES, name: "Lion Packages" },
-    { type: VariantTypes.LION_PARKING, name: "Lion Parking" },
-    { type: VariantTypes.LION_TECH, name: "Lion Tech" },
-    { type: VariantTypes.LION_GLAM, name: "Lion Glam" },
-];
-
-export default function LoadingBarSection() {
-    const { updateState } = useLionUI();
-
-    // Local state exclusively for this section's testing demo
-    const [isLoading, setIsLoading] = useState<boolean>(false);
-    const [activeVariant, setActiveVariant] = useState<VariantTypes | string>(VariantTypes.PRIMARY);
-
-    // Trigger local loading state for 5 seconds simulation
-    const handleTriggerLoading = (variant: VariantTypes | string) => {
-        setActiveVariant(variant);
-        setIsLoading(true);
-
-        // Also update global loading if needed by the LoadingBar component, or handle it locally
-        updateState({ loading: true });
-
-        // Automatically disable loading after 5 seconds
-        setTimeout(() => {
-            setIsLoading(false);
-            updateState({ loading: false });
-        }, 5000);
-    };
-
-    return (
-        <Fragment>
-            <h2>Loading Bar Demonstrations</h2>
-            <p className="text-muted">Click any button below to trigger the loading bar for 5 seconds using its respective variant.</p>
-
-            {/* Top demonstration loading bar container using local state variant */}
-            <div className="mb-4" style={{ minHeight: "10px" }}>
-                <LoadingBar variant={activeVariant} />
-            </div>
-
-            <div className="d-flex gap-3 flex-wrap">
-                {variantsList.map((variantObj) => (
-                    <LionButton
-                        key={variantObj.type}
-                        platform={PlatformTypes.WEB}
-                        variant={variantObj.type}
-                        type={ButtonTypes.BUTTON}
-                        disabled={isLoading}
-                        onClick={() => handleTriggerLoading(variantObj.type)}
-                    >
-                        {isLoading && activeVariant === variantObj.type
-                            ? "Loading..."
-                            : `Test ${variantObj.name}`}
-                    </LionButton>
-                ))}
-            </div>
-        </Fragment>
-    );
-}

package/src/features/modals/ModalsSection.tsx

@@ -1,5 +0,0 @@
-import { Outlet } from "react-router-dom";
-
-export default function ModalsSection() {
-    return <Outlet />
-}