@lion-npm/ui 1.0.2 → 1.0.3

package/src/features/buttons/components/ButtonsCustomSection.tsx

@@ -1,234 +0,0 @@
-import VariantList from "../../VariantList.tsx";
-import { PlatformTypes } from "../../../types/PlatformTypes.tsx";
-import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
-import { AndroidStyleTypes } from "../../../types/Android/AndroidStyleTypes.tsx";
-import { IOSStyleTypes } from "../../../types/IOS/IOSStyleTypes.tsx";
-import { BootstrapStyleTypes } from "../../../types/Web/BootstrapStyleTypes.tsx";
-import { AndroidShapeTypes } from "../../../types/Android/AndroidShapeTypes.tsx";
-import { IOSShapeTypes } from "../../../types/IOS/IOSShapeTypes.tsx";
-import { BootstrapShapeTypes } from "../../../types/Web/BootstrapShapeTypes.tsx";
-
-import { Fragment, useState } from "react";
-import LionButton from "../../../components/buttons/LionButton.tsx";
-
-const shapesByPlatform = {
-    [PlatformTypes.ANDROID]: [
-        { label: "Pill", value: AndroidShapeTypes.PILL },
-        { label: "Rounded", value: AndroidShapeTypes.ROUNDED },
-    ],
-    [PlatformTypes.IOS]: [
-        { label: "Capsule", value: IOSShapeTypes.CAPSULE },
-        { label: "Rounded", value: IOSShapeTypes.ROUNDED },
-    ],
-    [PlatformTypes.WEB]: [
-        { label: "Standard", value: BootstrapShapeTypes.STANDARD },
-        { label: "Pill", value: BootstrapShapeTypes.PILL },
-        { label: "Square", value: BootstrapShapeTypes.SQUARE },
-    ],
-};
-
-const stylesByPlatform = {
-    [PlatformTypes.ANDROID]: [
-        { label: "Tonal", value: AndroidStyleTypes.TONAL },
-        { label: "Filled", value: AndroidStyleTypes.FILLED },
-        { label: "Elevated", value: AndroidStyleTypes.ELEVATED },
-        { label: "Outlined", value: AndroidStyleTypes.OUTLINED },
-        { label: "Text", value: AndroidStyleTypes.TEXT },
-    ],
-    [PlatformTypes.IOS]: [
-        { label: "Tinted", value: IOSStyleTypes.TINTED },
-        { label: "Filled", value: IOSStyleTypes.FILLED },
-        { label: "Gray", value: IOSStyleTypes.GRAY },
-        { label: "Plain", value: IOSStyleTypes.PLAIN },
-    ],
-    [PlatformTypes.WEB]: [
-        { label: "Filled", value: BootstrapStyleTypes.FILLED },
-        { label: "Outlined", value: BootstrapStyleTypes.OUTLINED },
-    ],
-};
-
-export default function ButtonsCustomSection() {
-    const [selectedPlatform, setSelectedPlatform] = useState<PlatformTypes>(PlatformTypes.ANDROID);
-    const [selectedAndroidShape, setSelectedAndroidShape] = useState<AndroidShapeTypes>(AndroidShapeTypes.PILL);
-    const [selectedIOSShape, setSelectedIOSShape] = useState<IOSShapeTypes>(IOSShapeTypes.CAPSULE);
-    const [selectedWebShape, setSelectedWebShape] = useState<BootstrapShapeTypes>(BootstrapShapeTypes.STANDARD);
-
-    const [selectedAndroidStyle, setSelectedAndroidStyle] = useState<AndroidStyleTypes>(AndroidStyleTypes.TONAL);
-    const [selectedIOSStyle, setSelectedIOSStyle] = useState<IOSStyleTypes>(IOSStyleTypes.TINTED);
-    const [selectedWebStyle, setSelectedWebStyle] = useState<BootstrapStyleTypes>(BootstrapStyleTypes.FILLED);
-
-    return (
-        <Fragment>
-            <h2>Buttons (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 AndroidShapeTypes)}
-                            >
-                                {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 IOSShapeTypes)}
-                            >
-                                {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 BootstrapShapeTypes)}
-                            >
-                                {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 AndroidStyleTypes)}
-                            >
-                                {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 IOSStyleTypes)}
-                            >
-                                {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 BootstrapStyleTypes)}
-                            >
-                                {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-3">
-                        <span className="text-muted d-block mb-1 small">Enabled</span>
-                        <div className="d-flex flex-wrap gap-2 py-1">
-                            {VariantList.map((variant) => (
-                                <LionButton
-                                    key={`custom-${variant}-enabled`}
-                                    type={ButtonTypes.BUTTON}
-                                    platform={selectedPlatform}
-                                    variant={variant}
-                                    styleType={{
-                                        android: selectedAndroidStyle,
-                                        ios: selectedIOSStyle,
-                                        web: selectedWebStyle,
-                                    }}
-                                    shape={{
-                                        android: selectedAndroidShape,
-                                        ios: selectedIOSShape,
-                                        web: selectedWebShape,
-                                    }}
-                                >
-                                    {variant}
-                                </LionButton>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Disabled State */}
-                    <div>
-                        <span className="text-muted d-block mb-1 small">Disabled</span>
-                        <div className="d-flex flex-wrap gap-2 py-1">
-                            {VariantList.map((variant) => (
-                                <LionButton
-                                    key={`custom-${variant}-disabled`}
-                                    type={ButtonTypes.BUTTON}
-                                    platform={selectedPlatform}
-                                    variant={variant}
-                                    disabled={true}
-                                    styleType={{
-                                        android: selectedAndroidStyle,
-                                        ios: selectedIOSStyle,
-                                        web: selectedWebStyle,
-                                    }}
-                                    shape={{
-                                        android: selectedAndroidShape,
-                                        ios: selectedIOSShape,
-                                        web: selectedWebShape,
-                                    }}
-                                >
-                                    {variant}
-                                </LionButton>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </Fragment>
-    );
-}

package/src/features/buttons/components/ButtonsIOSSection.tsx

@@ -1,78 +0,0 @@
-import { IOSStyleTypes } from "../../../types/IOS/IOSStyleTypes.tsx";
-import { IOSShapeTypes } from "../../../types/IOS/IOSShapeTypes.tsx";
-import { ButtonTypes } from "../../../types/ButtonTypes.tsx";
-import VariantList from "../../VariantList.tsx";
-
-import { Fragment } from "react";
-import IOSButton from "../../../components/buttons/IOSButton.tsx";
-
-// List of iOS Human Interface Guidelines styles
-const StyleTypeList: Array<{ label: string; styleType: IOSStyleTypes }> = [
-    { label: "Filled", styleType: IOSStyleTypes.FILLED },
-    { label: "Tinted", styleType: IOSStyleTypes.TINTED },
-    { label: "Gray", styleType: IOSStyleTypes.GRAY },
-    { label: "Plain", styleType: IOSStyleTypes.PLAIN },
-];
-
-// List of supported iOS button shapes
-const ShapeList: Array<{ label: string; shape: IOSShapeTypes }> = [
-    { label: "Rounded Shape", shape: IOSShapeTypes.ROUNDED },
-    { label: "Capsule Shape", shape: IOSShapeTypes.CAPSULE },
-];
-
-export default function ButtonsIOSSection() {
-    return (
-        <Fragment>
-            <h2>Buttons (iOS HIG)</h2>
-
-            {StyleTypeList.map(({ label: styleLabel, styleType }) => (
-                <div key={styleType} className="my-4">
-                    <h4 className="text-primary mb-3">{styleLabel} Buttons</h4>
-
-                    {ShapeList.map(({ label: shapeLabel, shape }) => (
-                        <div key={`${styleType}-${shape}`} className="ms-3 mb-4">
-                            <h6 className="text-secondary mb-2">{shapeLabel}</h6>
-
-                            {/* Enabled State */}
-                            <div className="mb-3">
-                                <span className="text-muted d-block mb-1 small">Enabled</span>
-                                <div className="d-flex flex-wrap gap-2 py-1">
-                                    {VariantList.map((variant) => (
-                                        <IOSButton
-                                            key={`${styleType}-${shape}-${variant}-enabled`}
-                                            type={ButtonTypes.BUTTON}
-                                            styleType={styleType}
-                                            shape={shape}
-                                            variant={variant}
-                                        >
-                                            {variant}
-                                        </IOSButton>
-                                    ))}
-                                </div>
-                            </div>
-
-                            {/* Disabled State */}
-                            <div>
-                                <span className="text-muted d-block mb-1 small">Disabled</span>
-                                <div className="d-flex flex-wrap gap-2 py-1">
-                                    {VariantList.map((variant) => (
-                                        <IOSButton
-                                            key={`${styleType}-${shape}-${variant}-disabled`}
-                                            type={ButtonTypes.BUTTON}
-                                            styleType={styleType}
-                                            shape={shape}
-                                            variant={variant}
-                                            disabled={true}
-                                        >
-                                            {variant}
-                                        </IOSButton>
-                                    ))}
-                                </div>
-                            </div>
-                        </div>
-                    ))}
-                </div>
-            ))}
-        </Fragment>
-    );
-}

package/src/features/inputs/InputsSection.tsx

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

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

@@ -1,155 +0,0 @@
-import { AndroidInputStyleTypes } from "../../../types/Android/AndroidInputStyleTypes.tsx";
-import { AndroidInputShapeTypes } from "../../../types/Android/AndroidInputShapeTypes.tsx";
-import { InputTypes } from "../../../types/InputTypes.tsx";
-import VariantList from "../../VariantList.tsx";
-
-import { Fragment, useState } from "react";
-import AndroidInput from "../../../components/inputs/AndroidInput.tsx";
-
-const StyleTypeList: Array<{ label: string; styleType: AndroidInputStyleTypes }> = [
-    { label: "Outlined", styleType: AndroidInputStyleTypes.OUTLINED },
-    { label: "Filled", styleType: AndroidInputStyleTypes.FILLED },
-];
-
-const ShapeList: Array<{ label: string; shape: AndroidInputShapeTypes }> = [
-    { label: "Normal Shape", shape: AndroidInputShapeTypes.NORMAL },
-    { label: "Small Shape", shape: AndroidInputShapeTypes.SMALL },
-];
-
-export default function InputsAndroidSection() {
-    const [inputValue, setInputValue] = useState<string>("");
-
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setInputValue(e.target.value);
-    };
-
-    return (
-        <Fragment>
-            <h2>Inputs (Android MD3)</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">
-                                            <AndroidInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label={`Label (${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">
-                                            <AndroidInput
-                                                type={InputTypes.TEXT}
-                                                styleType={styleType}
-                                                shape={shape}
-                                                variant={variant}
-                                                label="Username"
-                                                defaultValue="lion.developer"
-                                                helperText="Completed field"
-                                                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">
-                                            <AndroidInput
-                                                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">
-                                            <AndroidInput
-                                                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">
-                                            <AndroidInput
-                                                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/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>
-    );
-}