@kbgarcia8/react-dynamic-form 2.0.2 → 2.0.3

package/dist/components/atoms/Button/Button.d.ts

@@ -1,4 +1,4 @@
 import type { ButtonProps } from "../../../type/propTypes";
-declare const Button: ({ onClick, id, buttonType, startIcon, endIcon, alt, text, className, dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element | undefined;
+declare const Button: ({ onClick, id, buttonType, startIcon, endIcon, text, className, dataAttributes, color, radius, size }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default Button;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/atoms/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,uFAUd,WAAW,wDAmCZ,CAAA;AAED,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,QAAA,MAAM,MAAM,GAAI,uGAYd,WAAW,4CAqCZ,CAAA;AAED,eAAe,MAAM,CAAC"}

package/dist/components/atoms/Button/Button.styles.d.ts

@@ -1,5 +1,33 @@
-export declare const DefaultButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const ButtonTextAndIconSpace: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ButtonIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const ButtonText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const COLORS: {
+    primary: import("styled-components").RuleSet<object>;
+    secondary: import("styled-components").RuleSet<object>;
+    ghost: import("styled-components").RuleSet<object>;
+    bnw: import("styled-components").RuleSet<object>;
+};
+export declare const SIZES: {
+    smallest: import("styled-components").RuleSet<object>;
+    smaller: import("styled-components").RuleSet<object>;
+    small: import("styled-components").RuleSet<object>;
+    medium: import("styled-components").RuleSet<object>;
+    large: import("styled-components").RuleSet<object>;
+    larger: import("styled-components").RuleSet<object>;
+};
+export declare const RADIUS: {
+    square: import("styled-components").RuleSet<object>;
+    roundedsquare: import("styled-components").RuleSet<object>;
+    squircle: import("styled-components").RuleSet<object>;
+    pill: import("styled-components").RuleSet<object>;
+    circle: import("styled-components").RuleSet<object>;
+};
+export declare const DefaultButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $color?: keyof typeof COLORS;
+    $radius?: keyof typeof RADIUS;
+}>> & string;
+export declare const ButtonTextAndIconSpace: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $hasIcon: boolean;
+    $hasText: boolean;
+}>> & string;
+export declare const ButtonText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size?: keyof typeof SIZES;
+}>> & string;
 //# sourceMappingURL=Button.styles.d.ts.map

package/dist/components/atoms/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa,yOA0BzB,CAAC;AAEF,eAAO,MAAM,sBAAsB,6NAMlC,CAAC;AAEF,eAAO,MAAM,UAAU,oOAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,+NAOtB,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;CAkElB,CAAC;AAEF,eAAO,MAAO,KAAK;;;;;;;CAqClB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;CAMlB,CAAC;AAGF,eAAO,MAAM,aAAa;aACT,MAAM,OAAO,MAAM;cAClB,MAAM,OAAO,MAAM;YAwBpC,CAAC;AAEF,eAAO,MAAM,sBAAsB;cAA0B,OAAO;cAAY,OAAO;YAetF,CAAC;AAEF,eAAO,MAAM,UAAU;YAAyB,MAAM,OAAO,KAAK;YAQjE,CAAC"}

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts

@@ -1,4 +1,4 @@
 import type { FormActionButtonsProps } from "../../../type/propTypes";
-declare const FormActionButtons: ({ id, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormActionButtons: ({ id, formActionButtonSize, formActionButtonColor, formActionButtonRadius, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, }: FormActionButtonsProps) => import("react/jsx-runtime").JSX.Element;
 export default FormActionButtons;
 //# sourceMappingURL=FormActionButtons.d.ts.map

package/dist/components/molecules/FormActionButtons/FormActionButtons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,+HAYzB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormActionButtons.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEtE,QAAA,MAAM,iBAAiB,GAAI,oMAezB,sBAAsB,4CAQvB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/molecules/FormActionButtons/FormActionButtons.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormActionButtons.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,6NAI3B,CAAC"}
+{"version":3,"file":"FormActionButtons.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/FormActionButtons/FormActionButtons.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,6NAQ3B,CAAC"}

package/dist/components/molecules/LabeledInput/LabeledInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabeledInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LabeledInput/LabeledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAgB,MAAM,yBAAyB,CAAC;AAGrG,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,GAAG,eAAe,CAAC,4CA+F5F,CAAA;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"LabeledInput.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/LabeledInput/LabeledInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,EAAE,sBAAsB,EAAE,eAAe,EAAgB,MAAM,yBAAyB,CAAC;AAErG,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,GAAG,eAAe,CAAC,4CA+F5F,CAAA;AAED,eAAe,YAAY,CAAC"}

package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts

@@ -1,4 +1,4 @@
 import type { NestedEditableOptionProps } from "../../../type/propTypes";
-declare const NestedEditableOption: ({ legend, fieldsetIndex, idx, editableInformation, onChangeOfEditableOption, onClickSaveEdit, onClickCancelEdit, onClickDeleteEntry }: NestedEditableOptionProps) => import("react/jsx-runtime").JSX.Element;
+declare const NestedEditableOption: ({ editableButtonSize, editableButtonColor, editableButtonRadius, legend, fieldsetIndex, idx, editableInformation, saveText, saveButtonStartIcon, saveButtonEndIcon, cancelText, cancelButtonStartIcon, cancelButtonEndIcon, deleteText, deleteButtonStartIcon, deleteButtonEndIcon, onChangeOfEditableOption, onClickSaveEdit, onClickCancelEdit, onClickDeleteEntry }: NestedEditableOptionProps) => import("react/jsx-runtime").JSX.Element;
 export default NestedEditableOption;
 //# sourceMappingURL=NestedEditableOption.d.ts.map

package/dist/components/molecules/NestedEditableOption/NestedEditableOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,uIAS5B,yBAAyB,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"NestedEditableOption.d.ts","sourceRoot":"","sources":["../../../../src/components/molecules/NestedEditableOption/NestedEditableOption.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AAGzE,QAAA,MAAM,oBAAoB,GAAI,wWAqB5B,yBAAyB,4CA8B1B,CAAA;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { DynamicFormProps } from "../../../type/propTypes";
-declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
+declare const DynamicForm: ({ fieldsets, legendText, isExpandable, id, formInputs, labelAndInputContainerClass, labelClass, inputClass, onChangeOfEditableOption, handleAddingInputEntry, formActionButtonSize, formActionButtonColor, formActionButtonRadius, submitText, submitIcon, hasReset, resetText, resetIcon, handleReset, hasCancel, cancelText, cancelIcon, handleCancel, handleSubmitForm, className, children }: React.PropsWithChildren<DynamicFormProps>) => import("react/jsx-runtime").JSX.Element;
 export default DynamicForm;
 //# sourceMappingURL=DynamicForm.d.ts.map

package/dist/components/organisms/DynamicForm/DynamicForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,6TAwBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAoJ1C,CAAA;AAGD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DynamicForm.d.ts","sourceRoot":"","sources":["../../../../src/components/organisms/DynamicForm/DynamicForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAgB,gBAAgB,EAA+D,MAAM,yBAAyB,CAAC;AAE3I,QAAA,MAAM,WAAW,GAAI,kYA2BnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CA6J1C,CAAA;AAGD,eAAe,WAAW,CAAC"}

package/dist/react-dynamic-form.cjs.js

@@ -1,65 +1,162 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),E=require("react"),r=require("styled-components"),t={fonts:{secondary:"Raleway",tertiary:"Lato",fallback:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},fontWeight:{light:300,medium:500,bold:700,bolder:900},fontSize:{xsmall:"0.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",xlarge:"2rem"},borderThickness:{thin:"0.0625rem",light:"0.125rem"}},B=r.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),E=require("react"),a=require("styled-components"),o={fonts:{secondary:"Raleway",tertiary:"Lato",fallback:"system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"},fontWeight:{light:300,regular:400,medium:500,bold:700,bolder:900},fontSize:{xxsmall:"0.55rem",xsmall:"0.75rem",small:"1rem",medium:"1.25rem",large:"1.5rem",xlarge:"1.75rem"},spacing:{xxxsmall:"0.25rem",xxsmall:"0.375rem",xsmall:"0.5rem",small:"0.75rem",medium:"1.25rem"},borderRadius:{xsmall:"0.125rem",small:"0.25rem",medium:"0.5rem",large:"1rem",xlarge:"2rem",circle:"50%"},borderThickness:{thin:"0.0625rem",light:"0.125rem"},breakpoints:{mobile:"320px",tablet:"768px",laptop:"1024px",desktop:"1440px",largeDesktop:"1920px"}},te=e=>{const n=/^#([0-9A-Fa-f]{3}){1,2}$/,l=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return n.test(e)||l.test(e)||CSS.supports("color",e)},m=e=>{if(!te(e))throw new Error(`Invalid color: ${e}`);return e},B=Object.keys(o.breakpoints).reduce((e,n)=>{const l=n;return e[l]=(...r)=>a.css`
+    @media (min-width: ${o.breakpoints[l]}) {
+        ${a.css(...r)}
+        }
+    `,e},{}),re={primary:a.css`
+        background-color: ${({theme:e})=>e.colors.backgroundColor1};
+        color: ${({theme:e})=>e.colors.textColor3};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.backgroundColor2};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor3};
+        }
+        
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.infoText};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+            cursor: not-allowed;
+        }
+    `,secondary:a.css`
+        background-color: ${({theme:e})=>e.colors.backgroundColor4};
+        color: ${({theme:e})=>e.colors.textColor1};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor1};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.backgroundColor4};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
+        }
+
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.warningText};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+        }
+    `,ghost:a.css`
+        background-color: transparent;
+        color: ${({theme:e})=>e.colors.textColor3};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor3};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.textColor2};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.backgroundColor3};
+        }
+
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.shadow};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+        }
+    `,bnw:a.css`
+        background-color: ${({theme:e})=>e.colors.borderColor1};
+        color: ${({theme:e})=>e.colors.borderColor2};
+        border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
+
+        &:hover {
+            background-color: ${({theme:e})=>e.colors.textColor2};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor1};
+        }
+
+        &:disabled{
+            background-color: ${({theme:e})=>e.notificationPalette.shadow};
+            color: ${({theme:e})=>e.colors.shadow};
+            border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
+        }
+    `},ae={smallest:a.css`
+        ${B.mobile`
+            font-size: ${o.fontSize.xxsmall};
+            font-weight: ${o.fontWeight.regular};
+        `}
+    `,smaller:a.css`
+        ${B.mobile`
+            font-size: ${o.fontSize.xsmall};
+            font-weight: ${o.fontWeight.regular};
+        `}
+    `,small:a.css`
+        ${B.mobile`
+            font-size: ${o.fontSize.small};
+            font-weight: ${o.fontWeight.medium};
+        `}
+    `,medium:a.css`
+        ${B.mobile`
+            font-size: ${o.fontSize.medium};
+            font-weight: ${o.fontWeight.bold};
+        `}
+    `,large:a.css`
+        ${B.mobile`
+            font-size: ${o.fontSize.large};
+            font-weight: ${o.fontWeight.bolder};
+        `}
+    `,larger:a.css`
+        ${B.mobile`
+            font-size: ${o.fontSize.xlarge};
+            font-weight: ${o.fontWeight.bolder};
+        `}
+    `},se={square:a.css`border-radius: ${o.borderRadius.xsmall};`,roundedsquare:a.css`border-radius: ${o.borderRadius.medium};`,squircle:a.css`border-radius: ${o.borderRadius.large};`,pill:a.css`border-radius: ${o.borderRadius.xlarge};`,circle:a.css`border-radius: ${o.borderRadius.circle};`},U=a.button`
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: ${({theme:a})=>a.colors.blue||"blue"};
-    color: ${({theme:a})=>a.colors.bg||"white"};
-    border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text||"black"};
-    border-radius: ${t.borderRadius.xlarge};
-    padding: ${t.spacing.xxxsmall} ${t.spacing.small};
-    margin: 0.125rem;
-    width: auto;
+    padding: ${o.spacing.xxxsmall} ${o.spacing.xxsmall};
+    flex: 1;
+    margin: 0;
     cursor: pointer;
     transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-        background-color: lightblue;
-        border: ${t.borderThickness.light} solid gray;
-    }
-
-    & .button-icon-text-space {
-        max-width: 100%;
-    }
+    ${({$color:e})=>re[e||"primary"]}
+    ${({$radius:e})=>se[e||"square"]}
     
     & .button-icon-text-space svg {
+        height: auto;
+        max-height: 100%;
         max-width: 100%;
     }
-`,P=r.div`
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+`,H=a.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
-`;r.img`
-    maxwidth: 100%;
-`;const W=r.span`
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.medium};
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
+    justify-content: space-around;
+
+    ${({$hasIcon:e,$hasText:n})=>e&&n?a.css``:a.css`
+                & > * {
+                    flex: 1;
+                }
+            `}
+`,Z=a.span`
+    flex: 2;
+    ${({$size:e})=>ae[e||"small"]}
+    font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
     display: flex;
     align-items: center;
     justify-content: center;
-`,f=({onClick:a,id:i,buttonType:n,startIcon:o,endIcon:d,alt:m="alt-button-icon",text:c="",className:x="",dataAttributes:h={}})=>{if(n==="button")return e.jsx(B,{onClick:a,id:i,type:n,className:x,...h,children:e.jsxs(P,{className:"button-icon-text-space",children:[o||"",c&&e.jsx(W,{id:i,children:c}),d||""]})});if(n==="submit")return e.jsx(B,{id:i,type:n,className:x,...h,children:e.jsxs(P,{className:"button-icon-text-space",children:[o||"",c&&e.jsx(W,{id:i,children:c}),d||""]})})},Z=r.div`
+    max-width: 80%;
+`,w=({onClick:e,id:n,buttonType:l="button",startIcon:r,endIcon:d,text:c="",className:u="",dataAttributes:h={},color:x,radius:$,size:g})=>l==="submit"?t.jsx(U,{id:n,type:"submit",className:u,...h,$color:x||"primary",$radius:$||"squircle",children:t.jsxs(H,{className:"button-icon-text-space",$hasIcon:!!(r||d),$hasText:!!c,children:[r||"",c&&t.jsx(Z,{$size:g||"small",id:n,children:c}),d||""]})}):t.jsx(U,{onClick:e,id:n,type:l,className:u,...h,$color:x||"primary",$radius:$||"squircle",children:t.jsxs(H,{className:"button-icon-text-space",$hasIcon:!!(r||d),$hasText:!!c,children:[r||"",c&&t.jsx(Z,{$size:g||"small",id:n,children:c}),d||""]})}),le=a.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
-`,_=r.div`
+    margin-bottom: ${o.spacing.small};
+`,ne=a.div`
     display: flex;
-    gap: ${t.spacing.xsmall};
+    gap: ${o.spacing.xsmall};
     width: auto;
     height: auto;
-`,I=r.label`
+`,ie=a.label`
     display: flex;
     align-items: center;
-    justify-content:center;
+    justify-content: center;
     height: auto;
-    flex-direction:  ${a=>a.$labelFlexDirection||"column"};
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.bold};
-    gap: ${t.spacing.xxsmall};
+    flex-direction:  ${e=>e.$labelFlexDirection||"column"};
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
+    font-weight: ${o.fontWeight.bold};
+    gap: ${o.spacing.xxsmall};
     
     & .label-icon-container img,
     & .label-icon-container svg {
@@ -67,111 +164,115 @@
         height: auto;
         object-fit: contain;
     }
-`,ee=r.div`
+`,ce=a.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${t.spacing.xxxsmall};
-`,te=r.span`
-    font-weight: ${t.fontWeight.bolder};
-`,M=r.div`
+    gap: ${o.spacing.xxxsmall};
+`,de=a.span`
+    font-weight: ${o.fontWeight.bolder};
+`,G=a.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`,ae=r.span`
-    font-weight: ${t.fontWeight.light};
-`,U=({htmlFor:a,textLabel:i,additionalInfo:n,$labelFlexDirection:o,startIcon:d,endIcon:m,className:c,children:x})=>e.jsxs(I,{htmlFor:a,className:c,$labelFlexDirection:o,children:[d&&e.jsx(M,{className:"label-icon-container",children:d}),e.jsxs(ee,{className:"label-text-container",children:[e.jsx(te,{className:"main-label",children:i}),n&&e.jsx(ae,{className:"additional-info",children:n})]}),m&&e.jsx(M,{className:"label-icon-container",children:m}),x]}),O=r.input`
+`,me=a.span`
+    font-weight: ${o.fontWeight.light};
+`,I=({htmlFor:e,textLabel:n,additionalInfo:l,$labelFlexDirection:r,startIcon:d,endIcon:c,className:u,children:h})=>t.jsxs(ie,{htmlFor:e,className:u,$labelFlexDirection:r,children:[d&&t.jsx(G,{className:"label-icon-container",children:d}),t.jsxs(ce,{className:"label-text-container",children:[t.jsx(de,{className:"main-label",children:n}),l&&t.jsx(me,{className:"additional-info",children:l})]}),c&&t.jsx(G,{className:"label-icon-container",children:c}),h]}),J=a.input`
     display: flex;
     place-content: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
     line-height: 1.75;
-    padding: ${t.spacing.xxxsmall} ${t.spacing.xsmall};
+    padding: ${o.spacing.xxxsmall} ${o.spacing.xsmall};
     max-width: 100%;
     height: auto;
     background-color: #FFFFFF;
     outline: none;
-    border: ${t.borderThickness.thin} solid #000000;
-    border-radius: ${t.borderRadius.xsmall};
+    border: ${o.borderThickness.thin} solid #000000;
+    border-radius: ${o.borderRadius.xsmall};
 
     &:focus{
-        border: ${t.borderThickness.thin} solid ${({theme:a})=>a.colors.teal};
+        border: ${o.borderThickness.thin} solid ${({theme:e})=>e.colors.teal};
     }
-`,ne=r.textarea`
+`,be=a.textarea`
     display: flex;
     place-content: center;
-    border: ${t.borderThickness.light} solid ${({theme:a})=>a.colors.text};
-    border-radius: ${t.borderRadius.small};
+    border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.text};
+    border-radius: ${o.borderRadius.small};
     outline: none;
-    line-height: ${t.spacing.small};
-    padding: ${t.spacing.xxxsmall};
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
+    line-height: ${o.spacing.small};
+    padding: ${o.spacing.xxxsmall};
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,D=E.forwardRef((a,i)=>{const{type:n,id:o,onChange:d,isRequired:m,dataAttributes:c={},disabled:x,className:h,name:u}=a;if(n==="textarea"){const{rows:p=5,cols:w=30,value:v,...T}=a;return e.jsx(ne,{ref:i,value:v,rows:p,cols:w,id:o,onChange:d,required:m,disabled:x,...c,className:h,name:u})}if(n==="radio"||n==="checkbox"){const{checked:p,...w}=a;return e.jsx(O,{ref:i,type:n,checked:p,id:o,onChange:d,required:m,...c,disabled:x,className:h,name:u})}const $=a,{value:k,pattern:y,placeholderText:N,...C}=$;return e.jsx(O,{ref:i,type:n,value:k,pattern:y,placeholder:N,id:o,onChange:d,required:m,...c,disabled:x,className:h,name:u})}),F=a=>{const{className:i,type:n,id:o,textLabel:d,additionalInfo:m,$labelFlexDirection:c,startIcon:x,endIcon:h,labelClass:u,onChange:$,isRequired:k,dataAttributes:y,inputClass:N,ref:C,disabled:p,isEditable:w,editIcon:v,onClickEdit:T,deleteIcon:S,onClickDelete:q,idx:A,children:z}=a;return e.jsxs(Z,{className:`${i} ${o.replace("#","")}-label-input-container`,children:[n!=="radio"&&n!=="checkbox"&&e.jsx(U,{startIcon:x,endIcon:h,htmlFor:o,textLabel:d,additionalInfo:m,$labelFlexDirection:c,className:u}),n!=="radio"&&n!=="checkbox"&&n==="textarea"&&(()=>{const{rows:s=5,cols:g=30,value:l,...j}=a;return e.jsx(D,{id:o,name:o,type:"textarea",isRequired:k,onChange:$,value:l,rows:s,cols:g,dataAttributes:y,className:N,ref:C,disabled:p})})(),n!=="radio"&&n!=="checkbox"&&n!=="textarea"&&(()=>{const s=a,{value:g,pattern:l,placeholderText:j,...L}=s;return e.jsx(D,{id:o,name:o,placeholderText:j,onChange:$,value:g,type:n,isRequired:k,dataAttributes:y,className:N,ref:C,disabled:p,pattern:l})})(),(n==="radio"||n==="checkbox")&&(()=>{const{checked:s,...g}=a;return e.jsxs(e.Fragment,{children:[e.jsx(D,{ref:C,type:n,name:o,id:o,isRequired:k,checked:s,onChange:$,disabled:p,className:N,dataAttributes:y}),e.jsx(U,{startIcon:x,endIcon:h,htmlFor:o,textLabel:d,additionalInfo:m,$labelFlexDirection:c,className:u})]})})(),w&&e.jsxs(_,{className:"input-edit-buttons",children:[e.jsx(f,{id:`editable-${o}-edit-btn`,startIcon:v,buttonType:"button",onClick:T,className:`edit-radio-${A}`,dataAttributes:y}),e.jsx(f,{id:`editable-${o}-delete-btn`,startIcon:S,buttonType:"button",onClick:q,className:`delete-radio-${A}`,dataAttributes:y})]}),z]})},se=r.fieldset`
+`,W=E.forwardRef((e,n)=>{const{type:l,id:r,onChange:d,isRequired:c,dataAttributes:u={},disabled:h,className:x,name:$}=e;if(l==="textarea"){const{rows:k=5,cols:N=30,value:v,...S}=e;return t.jsx(be,{ref:n,value:v,rows:k,cols:N,id:r,onChange:d,required:c,disabled:h,...u,className:x,name:$})}if(l==="radio"||l==="checkbox"){const{checked:k,...N}=e;return t.jsx(J,{ref:n,type:l,checked:k,id:r,onChange:d,required:c,...u,disabled:h,className:x,name:$})}const g=e,{value:y,pattern:f,placeholderText:p,...T}=g;return t.jsx(J,{ref:n,type:l,value:y,pattern:f,placeholder:p,id:r,onChange:d,required:c,...u,disabled:h,className:x,name:$})}),D=e=>{const{className:n,type:l,id:r,textLabel:d,additionalInfo:c,$labelFlexDirection:u,startIcon:h,endIcon:x,labelClass:$="",onChange:g,isRequired:y,dataAttributes:f,inputClass:p="",ref:T,disabled:k,isEditable:N,editIcon:v,onClickEdit:S,deleteIcon:R,onClickDelete:j,idx:F,children:A}=e;return t.jsxs(le,{className:`${n} ${r.replace("#","")}-label-input-container`,children:[l!=="radio"&&l!=="checkbox"&&t.jsx(I,{startIcon:h,endIcon:x,htmlFor:r,textLabel:d,additionalInfo:c,$labelFlexDirection:u,className:$}),l!=="radio"&&l!=="checkbox"&&l==="textarea"&&(()=>{const{rows:z=5,cols:q=30,value:L,...s}=e;return t.jsx(W,{id:r,name:r,type:"textarea",isRequired:y,onChange:g,value:L,rows:z,cols:q,dataAttributes:f,className:p,ref:T,disabled:k})})(),l!=="radio"&&l!=="checkbox"&&l!=="textarea"&&(()=>{const z=e,{value:q,pattern:L,placeholderText:s,...C}=z;return t.jsx(W,{id:r,name:r,placeholderText:s,onChange:g,value:q,type:l,isRequired:y,dataAttributes:f,className:p,ref:T,disabled:k,pattern:L})})(),(l==="radio"||l==="checkbox")&&(()=>{const{checked:z,...q}=e;return t.jsxs(t.Fragment,{children:[t.jsx(W,{ref:T,type:l,name:r,id:r,isRequired:y,checked:z,onChange:g,disabled:k,className:p,dataAttributes:f}),t.jsx(I,{startIcon:h,endIcon:x,htmlFor:r,textLabel:d,additionalInfo:c,$labelFlexDirection:u,className:$})]})})(),N&&t.jsxs(ne,{className:"input-edit-buttons",children:[t.jsx(w,{id:`editable-${r}-edit-btn`,startIcon:v,buttonType:"button",onClick:S,className:`edit-radio-${F}`,dataAttributes:f}),t.jsx(w,{id:`editable-${r}-delete-btn`,startIcon:R,buttonType:"button",onClick:j,className:`delete-radio-${F}`,dataAttributes:f})]}),A]})},ue=a.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,oe=r.legend`
-    font-size: ${t.spacing.medium};
+`,he=a.legend`
+    font-size: ${o.spacing.medium};
     font-weight: 500;
-    margin: 0 auto ${t.spacing.small} auto;
+    margin: 0 auto ${o.spacing.small} auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`,ie=r.div`
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+`,xe=a.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
-    margin-bottom: ${t.spacing.small};
-`,le=r.div`
+    margin-bottom: ${o.spacing.small};
+`,$e=a.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,H=({legend:a,fieldsetIndex:i,idx:n,editableInformation:o,onChangeOfEditableOption:d,onClickSaveEdit:m,onClickCancelEdit:c,onClickDeleteEntry:x})=>e.jsxs(se,{className:"editable-option-fieldset",children:[e.jsx(oe,{children:`${a} ${n+1}`}),o?.map((h,u)=>e.jsx(ie,{className:"editable-option-container",children:e.jsx(D,{id:`editable-option-${u}`,name:`editable-option-${u}`,placeholderText:h.name.charAt(0).toUpperCase()+h.name.slice(1),onChange:d,value:h.info,type:h.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":u,"data-fieldsetindex":i,"data-key":h.info}})},`${h.name}-${u}`)),e.jsxs(le,{className:"editable-option-button-space",children:[e.jsx(f,{id:`editable-option-${n}-submit`,buttonType:"button",text:"Save",onClick:m,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}}),e.jsx(f,{id:`editable-option-${n}-cancel`,buttonType:"button",text:"Cancel",onClick:c,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}}),e.jsx(f,{id:`editable-option-${n}-delete`,buttonType:"button",text:"Delete",onClick:x,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}})]})]}),ce=r.div`
+`,K=({editableButtonSize:e,editableButtonColor:n,editableButtonRadius:l,legend:r,fieldsetIndex:d,idx:c,editableInformation:u,saveText:h,saveButtonStartIcon:x,saveButtonEndIcon:$,cancelText:g,cancelButtonStartIcon:y,cancelButtonEndIcon:f,deleteText:p,deleteButtonStartIcon:T,deleteButtonEndIcon:k,onChangeOfEditableOption:N,onClickSaveEdit:v,onClickCancelEdit:S,onClickDeleteEntry:R})=>t.jsxs(ue,{className:"editable-option-fieldset",children:[t.jsx(he,{children:`${r} ${c+1}`}),u?.map((j,F)=>t.jsx(xe,{className:"editable-option-container",children:t.jsx(W,{id:`editable-option-${F}`,name:`editable-option-${F}`,placeholderText:j.name.charAt(0).toUpperCase()+j.name.slice(1),onChange:N,value:j.info,type:j.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":F,"data-fieldsetindex":d,"data-key":j.info}})},`${j.name}-${F}`)),t.jsxs($e,{className:"editable-option-button-space",children:[t.jsx(w,{startIcon:x,endIcon:$,size:e||"small",color:n||"primary",radius:l||"squircle",id:`editable-option-${c}-submit`,buttonType:"button",text:h||"Save",onClick:v,className:"editable-option-btn",dataAttributes:{"data-index":c,"data-fieldsetindex":d}}),t.jsx(w,{startIcon:y,endIcon:f,size:e||"small",color:n||"primary",radius:l||"squircle",id:`editable-option-${c}-cancel`,buttonType:"button",text:g||"Cancel",onClick:S,className:"editable-option-btn",dataAttributes:{"data-index":c,"data-fieldsetindex":d}}),t.jsx(w,{startIcon:T,endIcon:k,size:e||"small",color:n||"primary",radius:l||"squircle",id:`editable-option-${c}-delete`,buttonType:"button",text:p||"Delete",onClick:R,className:"editable-option-btn",dataAttributes:{"data-index":c,"data-fieldsetindex":d}})]})]}),ge=a.div`
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
+    align-content: center;
     max-width: 100%;
-`,re=({id:a,submitText:i,submitIcon:n,hasReset:o,resetText:d,resetIcon:m,handleReset:c,hasCancel:x,cancelText:h,cancelIcon:u,handleCancel:$})=>e.jsxs(ce,{className:"form-main-button-container",children:[e.jsx(f,{id:`form-${a}-submit`,startIcon:n,buttonType:"submit",text:i??"Submit",className:"submit-form-btn"}),o&&e.jsx(f,{id:`form-${a}-edit`,startIcon:m,buttonType:"button",text:d??"Reset",onClick:c,className:"reset-form-btn"}),x&&e.jsx(f,{id:`form-${a}-cancel`,startIcon:u,buttonType:"button",text:h??"Cancel",onClick:$,className:"cancel-form-btn"})]}),G=r.legend`
-    font-size: ${t.spacing.medium};
+    & button {
+        margin-inline: 0.25rem;
+    }
+`,fe=({id:e,formActionButtonSize:n,formActionButtonColor:l,formActionButtonRadius:r,submitText:d,submitIcon:c,hasReset:u,resetText:h,resetIcon:x,handleReset:$,hasCancel:g,cancelText:y,cancelIcon:f,handleCancel:p})=>t.jsxs(ge,{className:"form-main-button-container",children:[t.jsx(w,{id:`form-${e}-submit`,size:n||"small",color:l||"primary",radius:r||"squircle",startIcon:c,buttonType:"submit",text:d??"Submit",className:"submit-form-btn"}),u&&t.jsx(w,{id:`form-${e}-edit`,size:n||"small",color:l||"primary",radius:r||"squircle",startIcon:x,buttonType:"button",text:h??"Reset",onClick:$,className:"reset-form-btn"}),g&&t.jsx(w,{id:`form-${e}-cancel`,size:n||"small",color:l||"primary",radius:r||"squircle",startIcon:f,buttonType:"button",text:y??"Cancel",onClick:p,className:"cancel-form-btn"})]}),Q=a.legend`
+    font-size: ${o.spacing.medium};
     font-weight: 500;
-    margin-bottom: ${t.spacing.small};
+    margin-bottom: ${o.spacing.small};
     width: auto;
     text-align: center;
-    font-family: ${t.fonts.secondary}, ${t.fonts.fallback};
-`,J=r.fieldset`
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+`,V=a.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,K=r.div`
-    padding: ${t.spacing.small};
+`,X=a.div`
+    padding: ${o.spacing.small};
     height: auto;
     width: 100%;
-`,Q=r.div`
+`,Y=a.div`
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     height: auto;
-    font-family: ${t.fonts.tertiary}, ${t.fonts.fallback};
-    font-size: ${t.fontSize.xsmall};
-    font-weight: ${t.fontWeight.bold};
-`,de=r.form`
+    font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
+    font-size: ${o.fontSize.xsmall};
+    font-weight: ${o.fontWeight.bold};
+`,ye=a.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`,V=r.div`
+`,_=a.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,me=r.div`
+`,pe=a.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,xe=({fieldsets:a=null,legendText:i,isExpandable:n,id:o,formInputs:d,labelAndInputContainerClass:m,labelClass:c,inputClass:x,onChangeOfEditableOption:h,handleAddingInputEntry:u,submitText:$,submitIcon:k,hasReset:y=!1,resetText:N,resetIcon:C,handleReset:p,hasCancel:w=!1,cancelText:v,cancelIcon:T,handleCancel:S,handleSubmitForm:q,className:A,children:z})=>e.jsxs(de,{id:`${o}-form`,className:A,onSubmit:q,children:[a?a.map((s,g)=>e.jsxs(K,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(J,{id:`${o}-form-fieldset-${g}`,className:`${s.legend}-fieldset`,children:[s.legend&&e.jsx(G,{className:`${s.legend}-legend`,children:s.legend}),s.inputs.length!==0?s.inputs.map((l,j)=>e.jsxs(E.Fragment,{children:[l.type==="textarea"&&e.jsx(F,{...l,id:l.id??`${s.legend}-input`,labelClass:c,inputClass:x,idx:j,className:`${m} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(F,{...l,id:l.id??`${s.legend}-input`,labelClass:c,inputClass:x,idx:j,className:`${m} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(F,{...l,id:l.id??`${s.legend}-input`,labelClass:c,inputClass:x,idx:j,className:`${m} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(H,{legend:`${s.legend}`,fieldsetIndex:g,idx:j,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(L=>{}),onClickCancelEdit:l?.onClickCancel||(L=>{}),onClickDeleteEntry:l?.onClickDelete||(L=>{})})]})]},`form-${o}-${j}`)):s.isExpandable?e.jsx(Q,{children:`No entry yet on ${s.legend}. Click "+" button to add entry.`}):""]}),s.isExpandable&&e.jsx(V,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${s.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":g}})})]},`${s.legend}-${g}`)):e.jsxs(K,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(J,{id:`${o}-form-fieldset`,className:`${i}-fieldset`,children:[i&&e.jsx(G,{className:`${i}-legend`,children:i}),!a&&d&&d.length!==0?d.map((s,g)=>e.jsxs(E.Fragment,{children:[s.type==="textarea"&&e.jsx(F,{...s,id:s.id??`${i}-input`,labelClass:c,inputClass:x,idx:g,className:`${m} ${s?.uniqueClass}`}),s.type!=="textarea"&&s.type!=="radio"&&s.type!=="checkbox"&&e.jsx(F,{...s,id:s.id??`${i}-input`,labelClass:c,inputClass:x,idx:g,className:`${m} ${s?.uniqueClass}`}),(s.type==="radio"||s.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(F,{...s,id:s.id??`${i}-input`,labelClass:c,inputClass:x,idx:g,className:`${m} ${s?.uniqueClass}`}),s.editing&&s.isEditable&&e.jsx(H,{legend:`${i}`,idx:g,editableInformation:s?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:s?.onClickSave||(l=>{}),onClickCancelEdit:s?.onClickCancel||(l=>{}),onClickDeleteEntry:s?.onClickDelete||(l=>{})})]})]},`form-${o}-${g}`)):n?e.jsx(Q,{children:`No entry yet on ${i}. Please click "+" button to add`}):""]}),n&&e.jsx(V,{className:"add-input-button-space",children:e.jsx(f,{id:`expand-${i}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(re,{id:o,submitText:$,submitIcon:k,hasReset:y,resetText:N,resetIcon:C,handleReset:p,hasCancel:w,cancelText:v,cancelIcon:T,handleCancel:S}),e.jsx(me,{className:"children-container",children:z})]}),be=a=>{const i=/^#([0-9A-Fa-f]{3}){1,2}$/,n=/^rgb(a)?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}(?:\s*,\s*(0|1|0?\.\d+))?\s*\)$/;return i.test(a)||n.test(a)||CSS.supports("color",a)},b=a=>{if(!be(a))throw new Error(`Invalid color: ${a}`);return a},he={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},X={name:"light",colors:{text:b("#333446"),bg:b("#EEEEEE"),blue:b("#7F8CAA"),blue2:b("#80A6FF"),teal:b("#5b8280ff"),teal2:b("#AEEAE7"),gray:b("#AEAEAE"),information:b("#202234"),success:b("#123524"),warning:b("#F2C265"),error:b("#990000")}},Y={name:"dark",colors:{bg:b("#333446"),text:b("#EEEEEE"),blue:b("#80A6FF"),blue2:b("#7F8CAA"),teal:b("#AEEAE7"),teal2:b("#5b8280ff"),gray:b("#D0D0DD"),information:b("#C9E6F0"),success:b("#9EDF9C"),warning:b("#FCFFC1"),error:b("#FAD4D4")}},R=E.createContext({}),ue=({children:a,initialTheme:i=X,secondTheme:n=Y})=>{const[o,d]=E.useState(i),m=()=>{d(c=>c===i?n:i)};return e.jsx(R.Provider,{value:{currentTheme:o,toggleTheme:m},children:e.jsx(r.ThemeProvider,{theme:o,children:a})})},ge=()=>E.useContext(R);exports.DynamicForm=xe;exports.ThemeContext=R;exports.ThemeContextProvider=ue;exports.breakpoints=he;exports.darkTheme=Y;exports.lightTheme=X;exports.useTheme=ge;
+`,ke=({fieldsets:e=null,legendText:n,isExpandable:l,id:r,formInputs:d,labelAndInputContainerClass:c,labelClass:u,inputClass:h,onChangeOfEditableOption:x,handleAddingInputEntry:$,formActionButtonSize:g,formActionButtonColor:y,formActionButtonRadius:f,submitText:p,submitIcon:T,hasReset:k=!1,resetText:N,resetIcon:v,handleReset:S,hasCancel:R=!1,cancelText:j,cancelIcon:F,handleCancel:A,handleSubmitForm:z,className:q,children:L})=>t.jsxs(ye,{id:`${r}-form`,className:q,onSubmit:z,children:[e?e.map((s,C)=>t.jsxs(X,{className:`${r}-fieldset-wrapper`,children:[t.jsxs(V,{id:`${r}-form-fieldset-${C}`,className:`${s.legend}-fieldset`,children:[s.legend&&t.jsx(Q,{className:`${s.legend}-legend`,children:s.legend}),s.inputs.length!==0?s.inputs.map((b,P)=>t.jsxs(E.Fragment,{children:[b.type==="textarea"&&t.jsx(D,{...b,id:b.id??`${s.legend}-input`,labelClass:u,inputClass:h,idx:P,className:`${c} ${b?.uniqueClass}`}),b.type!=="textarea"&&b.type!=="radio"&&b.type!=="checkbox"&&t.jsx(D,{...b,id:b.id??`${s.legend}-input`,labelClass:u,inputClass:h,idx:P,className:`${c} ${b?.uniqueClass}`}),(b.type==="radio"||b.type==="checkbox")&&t.jsxs(t.Fragment,{children:[t.jsx(D,{...b,id:b.id??`${s.legend}-input`,labelClass:u,inputClass:h,idx:P,className:`${c} ${b?.uniqueClass}`}),b.editing&&b.isEditable&&t.jsx(K,{editableButtonSize:b.editableButtonSize,editableButtonColor:b.editableButtonColor,editableButtonRadius:b.editableButtonRadius,legend:`${s.legend}`,fieldsetIndex:C,idx:P,editableInformation:b?.editableInformation||[],onChangeOfEditableOption:x,onClickSaveEdit:b?.onClickSave||(M=>{}),onClickCancelEdit:b?.onClickCancel||(M=>{}),onClickDeleteEntry:b?.onClickDelete||(M=>{})})]})]},`form-${r}-${P}`)):s.isExpandable?t.jsx(Y,{children:`No entry yet on ${s.legend}. Click "+" button to add entry.`}):""]}),s.isExpandable&&t.jsx(_,{className:"add-input-button-space",children:t.jsx(w,{id:`expand-${s.legend}-inputs`,buttonType:"button",text:"+",onClick:$,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":C}})})]},`${s.legend}-${C}`)):t.jsxs(X,{className:`${r}-fieldset-wrapper`,children:[t.jsxs(V,{id:`${r}-form-fieldset`,className:`${n}-fieldset`,children:[n&&t.jsx(Q,{className:`${n}-legend`,children:n}),!e&&d&&d.length!==0?d.map((s,C)=>t.jsxs(E.Fragment,{children:[s.type==="textarea"&&t.jsx(D,{...s,id:s.id??`${n}-input`,labelClass:u,inputClass:h,idx:C,className:`${c} ${s?.uniqueClass}`}),s.type!=="textarea"&&s.type!=="radio"&&s.type!=="checkbox"&&t.jsx(D,{...s,id:s.id??`${n}-input`,labelClass:u,inputClass:h,idx:C,className:`${c} ${s?.uniqueClass}`}),(s.type==="radio"||s.type==="checkbox")&&t.jsxs(t.Fragment,{children:[t.jsx(D,{...s,id:s.id??`${n}-input`,labelClass:u,inputClass:h,idx:C,className:`${c} ${s?.uniqueClass}`}),s.editing&&s.isEditable&&t.jsx(K,{editableButtonSize:s.editableButtonSize,editableButtonColor:s.editableButtonColor,editableButtonRadius:s.editableButtonRadius,legend:`${n}`,idx:C,editableInformation:s?.editableInformation,onChangeOfEditableOption:x,onClickSaveEdit:s?.onClickSave||(b=>{}),onClickCancelEdit:s?.onClickCancel||(b=>{}),onClickDeleteEntry:s?.onClickDelete||(b=>{})})]})]},`form-${r}-${C}`)):l?t.jsx(Y,{children:`No entry yet on ${n}. Please click "+" button to add`}):""]}),l&&t.jsx(_,{className:"add-input-button-space",children:t.jsx(w,{id:`expand-${n}-inputs`,buttonType:"button",text:"+",onClick:$,className:"add-input-entry"})})]}),t.jsx(fe,{id:r,formActionButtonSize:g,formActionButtonColor:y,formActionButtonRadius:f,submitText:p,submitIcon:T,hasReset:k,resetText:N,resetIcon:v,handleReset:S,hasCancel:R,cancelText:j,cancelIcon:F,handleCancel:A}),t.jsx(pe,{className:"children-container",children:L})]}),Ce={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},i={primary1:m("#202234"),primary2:m("#3C5E83"),primary3:m("#0F60B6"),secondary1:m("#C67E10"),secondary2:m("#F6C46D"),neutral1:m("#FFFFFF"),neutral2:m("#F2F2F2"),neutral3:m("#ABABAB"),neutral4:m("#373A40"),neutral5:m("#000000"),accent:m("#E1D3B7"),shadow1:m("rgb(88, 88, 88)"),shadow2:m("rgba(255, 255, 255, 0.50)")},ee={name:"light",colors:{screenColor:i.neutral2,backgroundColor1:i.primary1,backgroundColor2:i.primary2,backgroundColor3:i.secondary2,backgroundColor4:i.secondary1,borderColor1:i.neutral5,borderColor2:i.neutral3,textColor1:i.neutral5,textColor2:i.neutral4,textColor3:i.accent,shadow:i.shadow1},anchorTheme:{visited:i.neutral5,hover:i.primary2,active:i.secondary2},footerTheme:{backgroundColor:i.neutral5,textColor:i.secondary1,shadowColor:i.shadow1},notificationPalette:{infoText:m("#C9E6F0"),infoBackground:m("#202234"),warningText:m("#FCFFC1"),warningBackground:m("#F2C265"),successText:m("#9EDF9C"),successBackground:m("#123524"),errorText:m("#FAD4D4"),errorBackground:m("#990000")}},oe={name:"dark",colors:{screenColor:i.neutral5,backgroundColor1:i.primary2,backgroundColor2:i.primary3,backgroundColor3:i.secondary1,backgroundColor4:i.secondary2,borderColor1:i.neutral2,borderColor2:i.neutral3,textColor1:i.neutral1,textColor2:i.accent,textColor3:i.neutral2,shadow:i.shadow2},anchorTheme:{link:i.neutral1,visited:i.neutral1,hover:i.primary3,active:i.secondary1},footerTheme:{backgroundColor:i.accent,textColor:i.primary1,shadowColor:i.shadow2},notificationPalette:{infoText:m("#202234"),infoBackground:m("#C9E6F0"),warningText:m("#F2C265"),warningBackground:m("#FCFFC1"),successText:m("#123524"),successBackground:m("#9EDF9C"),errorBackground:m("#FAD4D4"),errorText:m("#990000")}},O=E.createContext({}),je=({children:e,initialTheme:n=ee,secondTheme:l=oe})=>{const[r,d]=E.useState(n),c=()=>{d(u=>u===n?l:n)};return t.jsx(O.Provider,{value:{currentTheme:r,toggleTheme:c},children:t.jsx(a.ThemeProvider,{theme:r,children:e})})},we=()=>E.useContext(O);exports.DynamicForm=ke;exports.ThemeContext=O;exports.ThemeContextProvider=je;exports.breakpoints=Ce;exports.darkTheme=oe;exports.lightTheme=ee;exports.palette=i;exports.useTheme=we;