@nvs-dynamic-form/react-core 1.2.2 → 1.2.4

package/lib/nvsDynamicForm/_template.tsx

@@ -0,0 +1,143 @@
+import "nvs-flexgrid";
+import "./_style.css";
+
+import * as Yup from "yup";
+
+import {
+  DynamicObject,
+  FieldBase,
+  IScreenSize,
+  ScreenSizeType,
+} from "../types";
+import { Form, Formik, FormikErrors, FormikTouched } from "formik";
+import React, { useEffect, useState } from "react";
+
+import { INvsDynamicForm } from "./_type";
+
+export const NvsDynamicForm = ({
+  onSubmit,
+  formElements = {},
+  fields = [],
+  formClass,
+  submitButton,
+  submitButtonVisible = true,
+  submitButtonLabel = submitButton.defaultOptions.label,
+  submitButtonIsFullWidth = submitButton.defaultOptions.isFullWidth,
+  submitButtonPosition = submitButton.defaultOptions.position,
+}: INvsDynamicForm) => {
+  const getDefaultValues = (): DynamicObject => {
+    return fields.reduce((acc: DynamicObject, field: FieldBase<any>) => {
+      acc[field.id] = field.defaultValue;
+      return acc;
+    }, {});
+  };
+
+  const getValidateSchema = () => {
+    const validationSchema = fields.reduce(
+      (acc: { [key: string]: Yup.AnySchema }, field) => {
+        if (field?.validate) {
+          acc[field.id] = field.validate;
+        }
+        return acc;
+      },
+      {},
+    );
+    return Yup.object(validationSchema);
+  };
+
+  const [defaultValues, setDefaultValues] = useState(getDefaultValues());
+  const [validateSchema, setValidateSchema] = useState(getValidateSchema());
+
+  useEffect(() => {
+    setDefaultValues(getDefaultValues());
+    setValidateSchema(getValidateSchema());
+  }, [fields]);
+
+  const createFieldItemClass = (
+    screenSize: ScreenSizeType | IScreenSize,
+  ): Array<string> => {
+    const className: Array<string> = [];
+    if (typeof screenSize == "number") className.push("nvs-col-" + screenSize);
+    else {
+      className.push("nvs-col-md-" + screenSize?.desktop);
+      if (screenSize?.tablet) className.push("nvs-col-sm-" + screenSize.tablet);
+      if (screenSize?.mobile) className.push("nvs-col-xs-" + screenSize.mobile);
+    }
+    return className;
+  };
+
+  const createFormElement = (field: FieldBase<any>) => {
+    const Field = formElements[field.fieldType!]?.component;
+    return Field ? <Field {...field} /> : <></>;
+  };
+
+  const createFormElements = (
+    errors: FormikErrors<DynamicObject>,
+    touched: FormikTouched<DynamicObject>,
+  ) => {
+    return fields.map((field: FieldBase<any>) => (
+      <div
+        key={field.id}
+        className={createFieldItemClass(field.screenSize ?? 12).join(" ")}
+      >
+        {createFormElement({
+          ...field,
+          error: errors[field.id],
+          touched: touched[field.id],
+        })}
+      </div>
+    ));
+  };
+
+  const getSubmitButtonComponent = () => {
+    const SubmitButton = submitButton.component;
+    return <SubmitButton>{submitButtonLabel}</SubmitButton>;
+  };
+
+  const getButtonPositionClass = (position: "left" | "right" | "center") => {
+    const classes = {
+      left: "nvs-jc-start",
+      right: "nvs-jc-end",
+      center: "nvs-jc-center",
+    };
+    return classes[position];
+  };
+
+  const createSubmitButton = () => {
+    const buttonClasses = ["df-button"];
+
+    submitButtonIsFullWidth && buttonClasses.push("nvs-col-12");
+
+    return (
+      <div
+        className={`nvs-row ${getButtonPositionClass(submitButtonPosition)}`}
+      >
+        <div className={buttonClasses.join(" ")}>
+          {getSubmitButtonComponent()}
+        </div>
+      </div>
+    );
+  };
+
+  const createForm = (
+    errors: FormikErrors<DynamicObject>,
+    touched: FormikTouched<DynamicObject>,
+  ) => (
+    <Form className={`nvs-container-fluid${formClass ? ` ${formClass}` : ""}`}>
+      <div className="nvs-row">{createFormElements(errors, touched)}</div>
+      {submitButtonVisible && createSubmitButton()}
+    </Form>
+  );
+
+  return (
+    <Formik
+      initialValues={defaultValues}
+      validationSchema={validateSchema}
+      onSubmit={async (values) => {
+        onSubmit && (await onSubmit(values));
+      }}
+    >
+      {({ errors, touched }) => createForm(errors, touched)}
+    </Formik>
+  );
+};

package/lib/nvsDynamicForm/_type.tsx

@@ -0,0 +1,21 @@
+import { FieldBase, SubmitButtonOptions } from "../types";
+
+export interface INvsDynamicForm {
+  onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
+  submitButton: {
+    component: React.FC<any>;
+    defaultOptions: SubmitButtonOptions;
+  };
+  formElements: {
+    [key: string]: {
+      component: React.FC<any>;
+      class: typeof FieldBase<any>;
+    };
+  };
+  fields: Array<FieldBase<unknown>>;
+  formClass?: string;
+  submitButtonVisible?: boolean;
+  submitButtonLabel?: string;
+  submitButtonPosition?: "left" | "center" | "right";
+  submitButtonIsFullWidth?: boolean;
+}

package/lib/nvsDynamicForm/index.tsx

@@ -0,0 +1,2 @@
+export * from "./_template";
+export * from "./_type";

package/lib/types/dynamic-object.type.tsx

@@ -0,0 +1,3 @@
+export class DynamicObject {
+  [key: string]: number | string | boolean | null;
+}

package/lib/types/form-field.type.tsx

@@ -0,0 +1,23 @@
+import * as Yup from "yup";
+
+import { IScreenSize, ScreenSizeType } from "./screen-size.type";
+
+export abstract class FieldBase<ValueType> {
+  id!: string;
+  label!: string;
+  fieldType?: string;
+  defaultValue?: ValueType;
+  screenSize?: ScreenSizeType | IScreenSize;
+  validate?: Yup.AnySchema;
+  error?: string;
+  touched?: boolean;
+
+  constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType) {
+    this.defaultValue = options.defaultValue ?? fieldDefaultValue;
+    this.id = options.id;
+    this.label = options.label;
+    this.fieldType = options.fieldType;
+    this.screenSize = options.screenSize ?? 12;
+    this.validate = options.validate;
+  }
+}

package/lib/types/index.tsx

@@ -0,0 +1,4 @@
+export * from "./form-field.type";
+export * from "./screen-size.type";
+export * from "./dynamic-object.type";
+export * from "./submit-button-options.type";

package/lib/types/screen-size.type.tsx

@@ -0,0 +1,7 @@
+export type ScreenSizeType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface IScreenSize {
+  desktop: ScreenSizeType;
+  mobile?: ScreenSizeType;
+  tablet?: ScreenSizeType;
+}

package/lib/types/submit-button-options.type.tsx

@@ -0,0 +1,5 @@
+export class SubmitButtonOptions {
+  label!: string;
+  isFullWidth!: boolean;
+  position!: "left" | "right" | "center";
+}

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@nvs-dynamic-form/react-core",
-  "version": "1.2.2",
+  "version": "1.2.4",
+  "types": "dist/cjs/index.d.ts",
   "main": "dist/cjs/index.js",
-  "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
   "files": [
     "dist",
+    "lib",
     "packages.json"
   ],
   "scripts": {
-    "build": "rm -rf dist && rollup -c --bundleConfigAsCjs",
+    "copy-css": "cp ./lib/nvsDynamicForm/_style.css ./dist/cjs/nvsDynamicForm && cp ./lib/nvsDynamicForm/_style.css ./dist/esm/nvsDynamicForm",
+    "build": "rm -rf dist/ && prettier --write lib/** && npm run build:esm && npm run build:cjs && npm run copy-css",
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "standard-version"
@@ -39,10 +44,6 @@
   "license": "MIT",
   "devDependencies": {
     "@chromatic-com/storybook": "^1.4.0",
-    "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-essentials": "^8.1.3",
     "@storybook/addon-interactions": "^8.1.3",
     "@storybook/addon-links": "^8.1.3",
@@ -54,10 +55,6 @@
     "@storybook/test": "^8.1.3",
     "@types/react": "^18.3.3",
     "react": "^18.3.1",
-    "rollup": "^4.18.0",
-    "rollup-plugin-css-only": "^4.5.2",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
     "standard-version": "^9.5.0",
     "storybook": "^8.1.3",
     "tslib": "^2.6.2",

package/dist/cjs/assets/asset-BUMD2roC

@@ -1,8 +0,0 @@
-.nvs-container{width:100%;margin:0 auto;max-width:1320px}@media(min-width: 576px){.nvs-container{max-width:540px}}@media(min-width: 768px){.nvs-container{max-width:720px}}@media(min-width: 992px){.nvs-container{max-width:960px}}@media(min-width: 1200px){.nvs-container{max-width:1140px}}@media(min-width: 1400px){.nvs-container{max-width:1320px}}.nvs-container-sm{width:100%;margin:0 auto;max-width:1320px}@media(min-width: 576px){.nvs-container-sm{max-width:540px}}@media(min-width: 768px){.nvs-container-sm{max-width:720px}}@media(min-width: 992px){.nvs-container-sm{max-width:960px}}@media(min-width: 1200px){.nvs-container-sm{max-width:1140px}}@media(min-width: 1400px){.nvs-container-sm{max-width:1320px}}.nvs-container-md{width:100%;margin:0 auto;max-width:1320px}@media(min-width: 768px){.nvs-container-md{max-width:720px}}@media(min-width: 992px){.nvs-container-md{max-width:960px}}@media(min-width: 1200px){.nvs-container-md{max-width:1140px}}@media(min-width: 1400px){.nvs-container-md{max-width:1320px}}.nvs-container-lg{width:100%;margin:0 auto;max-width:1320px}@media(min-width: 992px){.nvs-container-lg{max-width:960px}}@media(min-width: 1200px){.nvs-container-lg{max-width:1140px}}@media(min-width: 1400px){.nvs-container-lg{max-width:1320px}}.nvs-container-xl{width:100%;margin:0 auto;max-width:1320px}@media(min-width: 1200px){.nvs-container-xl{max-width:1140px}}@media(min-width: 1400px){.nvs-container-xl{max-width:1320px}}.nvs-container-xxl{width:100%;margin:0 auto;max-width:1320px}@media(min-width: 1400px){.nvs-container-xxl{max-width:1320px}}.nvs-container-fluid{width:100%;margin:0 auto;max-width:unset}.nvs-row{display:flex;flex-wrap:wrap;gap:8px 0}.nvs-col-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}@media(min-width: 0){.nvs-col-xs-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xs-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}}@media(min-width: 576px){.nvs-col-sm-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-sm-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}}@media(min-width: 768px){.nvs-col-md-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-md-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-md-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-md-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-md-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-md-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-md-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-md-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-md-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-md-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-md-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-md-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}}@media(min-width: 992px){.nvs-col-lg-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-lg-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}}@media(min-width: 1200px){.nvs-col-xl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xl-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}}@media(min-width: 1400px){.nvs-col-xxl-1{flex:0 0 8.3333333333%;max-width:8.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-2{flex:0 0 16.6666666667%;max-width:16.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-3{flex:0 0 25%;max-width:25%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-4{flex:0 0 33.3333333333%;max-width:33.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-5{flex:0 0 41.6666666667%;max-width:41.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-6{flex:0 0 50%;max-width:50%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-7{flex:0 0 58.3333333333%;max-width:58.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-8{flex:0 0 66.6666666667%;max-width:66.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-9{flex:0 0 75%;max-width:75%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-10{flex:0 0 83.3333333333%;max-width:83.3333333333%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-11{flex:0 0 91.6666666667%;max-width:91.6666666667%;padding:0 4px;box-sizing:border-box}.nvs-col-xxl-12{flex:0 0 100%;max-width:100%;padding:0 4px;box-sizing:border-box}}.nvs-jc-start{justify-content:start}.nvs-jc-end{justify-content:end}.nvs-jc-center{justify-content:center}.nvs-jc-between{justify-content:between}.nvs-jc-around{justify-content:around}.nvs-jc-evenly{justify-content:evenly}@media(min-width: 0){.nvs-jc-xs-start{justify-content:start}.nvs-jc-xs-end{justify-content:end}.nvs-jc-xs-center{justify-content:center}.nvs-jc-xs-between{justify-content:between}.nvs-jc-xs-around{justify-content:around}.nvs-jc-xs-evenly{justify-content:evenly}}@media(min-width: 576px){.nvs-jc-sm-start{justify-content:start}.nvs-jc-sm-end{justify-content:end}.nvs-jc-sm-center{justify-content:center}.nvs-jc-sm-between{justify-content:between}.nvs-jc-sm-around{justify-content:around}.nvs-jc-sm-evenly{justify-content:evenly}}@media(min-width: 768px){.nvs-jc-md-start{justify-content:start}.nvs-jc-md-end{justify-content:end}.nvs-jc-md-center{justify-content:center}.nvs-jc-md-between{justify-content:between}.nvs-jc-md-around{justify-content:around}.nvs-jc-md-evenly{justify-content:evenly}}@media(min-width: 992px){.nvs-jc-lg-start{justify-content:start}.nvs-jc-lg-end{justify-content:end}.nvs-jc-lg-center{justify-content:center}.nvs-jc-lg-between{justify-content:between}.nvs-jc-lg-around{justify-content:around}.nvs-jc-lg-evenly{justify-content:evenly}}@media(min-width: 1200px){.nvs-jc-xl-start{justify-content:start}.nvs-jc-xl-end{justify-content:end}.nvs-jc-xl-center{justify-content:center}.nvs-jc-xl-between{justify-content:between}.nvs-jc-xl-around{justify-content:around}.nvs-jc-xl-evenly{justify-content:evenly}}@media(min-width: 1400px){.nvs-jc-xxl-start{justify-content:start}.nvs-jc-xxl-end{justify-content:end}.nvs-jc-xxl-center{justify-content:center}.nvs-jc-xxl-between{justify-content:between}.nvs-jc-xxl-around{justify-content:around}.nvs-jc-xxl-evenly{justify-content:evenly}}.nvs-ai-start{align-items:start}.nvs-ai-end{align-items:end}.nvs-ai-center{align-items:center}.nvs-ai-baseline{align-items:baseline}.nvs-ai-stretch{align-items:stretch}@media(min-width: 576px){.nvs-ai-sm-start{align-items:start}.nvs-ai-sm-end{align-items:end}.nvs-ai-sm-center{align-items:center}.nvs-ai-sm-baseline{align-items:baseline}.nvs-ai-sm-stretch{align-items:stretch}}@media(min-width: 768px){.nvs-ai-md-start{align-items:start}.nvs-ai-md-end{align-items:end}.nvs-ai-md-center{align-items:center}.nvs-ai-md-baseline{align-items:baseline}.nvs-ai-md-stretch{align-items:stretch}}@media(min-width: 992px){.nvs-ai-lg-start{align-items:start}.nvs-ai-lg-end{align-items:end}.nvs-ai-lg-center{align-items:center}.nvs-ai-lg-baseline{align-items:baseline}.nvs-ai-lg-stretch{align-items:stretch}}@media(min-width: 1200px){.nvs-ai-xl-start{align-items:start}.nvs-ai-xl-end{align-items:end}.nvs-ai-xl-center{align-items:center}.nvs-ai-xl-baseline{align-items:baseline}.nvs-ai-xl-stretch{align-items:stretch}}@media(min-width: 1400px){.nvs-ai-xxl-start{align-items:start}.nvs-ai-xxl-end{align-items:end}.nvs-ai-xxl-center{align-items:center}.nvs-ai-xxl-baseline{align-items:baseline}.nvs-ai-xxl-stretch{align-items:stretch}}.nvs-w-full{width:100%}.nvs-h-full{height:100%}/*# sourceMappingURL=main.css.map */
-
-.df-button {
-     display: inline-flex;
-     margin-top: 8px;
-     padding: 0 4px;
-}
-

package/dist/index.d.ts

@@ -1,56 +0,0 @@
-/// <reference types="react" />
-import React$1 from 'react';
-import * as Yup from 'yup';
-
-type ScreenSizeType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-interface IScreenSize {
-    desktop: ScreenSizeType;
-    mobile?: ScreenSizeType;
-    tablet?: ScreenSizeType;
-}
-
-declare abstract class FieldBase<ValueType> {
-    id: string;
-    label: string;
-    fieldType?: string;
-    defaultValue?: ValueType;
-    screenSize?: ScreenSizeType | IScreenSize;
-    validate?: Yup.AnySchema;
-    error?: string;
-    touched?: boolean;
-    constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
-}
-
-declare class DynamicObject {
-    [key: string]: number | string | boolean | null;
-}
-
-declare class SubmitButtonOptions {
-    label: string;
-    isFullWidth: boolean;
-    position: "left" | "right" | "center";
-}
-
-interface INvsDynamicForm {
-    onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
-    submitButton: {
-        component: React.FC<any>;
-        defaultOptions: SubmitButtonOptions;
-    };
-    formElements: {
-        [key: string]: {
-            component: React.FC<any>;
-            class: typeof FieldBase<any>;
-        };
-    };
-    fields: Array<FieldBase<unknown>>;
-    formClass?: string;
-    submitButtonVisible?: boolean;
-    submitButtonLabel?: string;
-    submitButtonPosition?: "left" | "center" | "right";
-    submitButtonIsFullWidth?: boolean;
-}
-
-declare const NvsDynamicForm: ({ onSubmit, formElements, fields, formClass, submitButton, submitButtonVisible, submitButtonLabel, submitButtonIsFullWidth, submitButtonPosition, }: INvsDynamicForm) => React$1.JSX.Element;
-
-export { DynamicObject, FieldBase, type INvsDynamicForm, type IScreenSize, NvsDynamicForm, type ScreenSizeType, SubmitButtonOptions };