@kbgarcia8/react-dynamic-form 2.0.1 → 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, source, svg, alt, text, className, dataAttributes }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+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,gFAUd,WAAW,4CA+BZ,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/atoms/Label/Label.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import type { LabelProps } from "../../../type/propTypes";
-declare const Label: ({ htmlFor, textLabel, additionalInfo, $labelFlexDirection, source, svg, className, children }: React.PropsWithChildren<LabelProps>) => import("react/jsx-runtime").JSX.Element;
+declare const Label: ({ htmlFor, textLabel, additionalInfo, $labelFlexDirection, startIcon, endIcon, className, children }: React.PropsWithChildren<LabelProps>) => import("react/jsx-runtime").JSX.Element;
 export default Label;
 //# sourceMappingURL=Label.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,QAAA,MAAM,KAAK,GAAI,+FASZ,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,4CAarC,CAAA;AAED,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE1D,QAAA,MAAM,KAAK,GAAI,sGASZ,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,4CAgBrC,CAAA;AAED,eAAe,KAAK,CAAC"}

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

@@ -1,4 +1,4 @@
 import type { FormActionButtonsProps } from "../../../type/propTypes";
-declare const FormActionButtons: ({ id, submitText, hasReset, resetText, handleReset, hasCancel, cancelText, 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,4FASzB,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;AAErG,QAAA,MAAM,YAAY,GAAI,OAAM,KAAK,CAAC,iBAAiB,CAAC,sBAAsB,GAAG,eAAe,CAAC,4CA8F5F,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, hasReset, resetText, handleReset, hasCancel, cancelText, 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,0RAqBnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CAiJ1C,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"),v=require("react"),d=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"}},L=d.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%;
     }
-`,R=d.div`
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+`,H=a.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: center;
-`,B=d.img`
-    maxwidth: 100%;
-`,P=d.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;
-`,$=({onClick:a,id:i,buttonType:n,source:o,svg:m,alt:c="alt-button-icon",text:r="",className:x="",dataAttributes:h={}})=>n==="submit"?e.jsx(L,{id:i,type:n,className:x,...h,children:e.jsxs(R,{className:"button-icon-text-space",children:[o?e.jsx(B,{src:o,alt:c}):m||"",r&&e.jsx(P,{id:i,children:r})]})}):e.jsx(L,{onClick:a,id:i,type:n,className:x,...h,children:e.jsxs(R,{className:"button-icon-text-space",children:[o?e.jsx(B,{src:o,alt:c}):m||"",r&&e.jsx(P,{id:i,children:r})]})}),X=d.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};
-`,Y=d.div`
+    margin-bottom: ${o.spacing.small};
+`,ne=a.div`
     display: flex;
-    gap: ${t.spacing.xsmall};
+    gap: ${o.spacing.xsmall};
     width: auto;
     height: auto;
-`,Z=d.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;
     }
-`,_=d.div`
+`,ce=a.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: ${t.spacing.xxxsmall};
-`,I=d.span`
-    font-weight: ${t.fontWeight.bolder};
-`,ee=d.div`
+    gap: ${o.spacing.xxxsmall};
+`,de=a.span`
+    font-weight: ${o.fontWeight.bolder};
+`,G=a.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`,te=d.span`
-    font-weight: ${t.fontWeight.light};
-`,W=({htmlFor:a,textLabel:i,additionalInfo:n,$labelFlexDirection:o,source:m,svg:c,className:r,children:x})=>e.jsxs(Z,{htmlFor:a,className:r,$labelFlexDirection:o,children:[(m||c)&&e.jsx(ee,{className:"label-icon-container",children:m?e.jsx("img",{src:m,alt:`${a}-label-icon`}):c||""}),e.jsxs(_,{className:"label-text-container",children:[e.jsx(I,{className:"main-label",children:i}),n&&e.jsx(te,{className:"additional-info",children:n})]}),x]}),M=d.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};
     }
-`,ae=d.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=v.forwardRef((a,i)=>{const{type:n,id:o,onChange:m,isRequired:c,dataAttributes:r={},disabled:x,className:h,name:u}=a;if(n==="textarea"){const{rows:C=5,cols:w=30,value:T,...A}=a;return e.jsx(ae,{ref:i,value:T,rows:C,cols:w,id:o,onChange:m,required:c,disabled:x,...r,className:h,name:u})}if(n==="radio"||n==="checkbox"){const{checked:C,...w}=a;return e.jsx(M,{ref:i,type:n,checked:C,id:o,onChange:m,required:c,...r,disabled:x,className:h,name:u})}const p=a,{value:y,pattern:j,placeholderText:k,...N}=p;return e.jsx(M,{ref:i,type:n,value:y,pattern:j,placeholder:k,id:o,onChange:m,required:c,...r,disabled:x,className:h,name:u})}),E=a=>{const{className:i,type:n,id:o,textLabel:m,additionalInfo:c,$labelFlexDirection:r,svg:x,labelClass:h,onChange:u,isRequired:p,dataAttributes:y,inputClass:j,ref:k,disabled:N,isEditable:C,editIcon:w,onClickEdit:T,deleteIcon:A,onClickDelete:S,idx:s,children:g}=a;return e.jsxs(X,{className:`${i} ${o.replace("#","")}-label-input-container`,children:[n!=="radio"&&n!=="checkbox"&&e.jsx(W,{htmlFor:o,textLabel:m,additionalInfo:c,$labelFlexDirection:r,svg:x,className:h}),n!=="radio"&&n!=="checkbox"&&n==="textarea"&&(()=>{const{rows:l=5,cols:f=30,value:F,...z}=a;return e.jsx(D,{id:o,name:o,type:"textarea",isRequired:p,onChange:u,value:F,rows:l,cols:f,dataAttributes:y,className:j,ref:k,disabled:N})})(),n!=="radio"&&n!=="checkbox"&&n!=="textarea"&&(()=>{const l=a,{value:f,pattern:F,placeholderText:z,...ge}=l;return e.jsx(D,{id:o,name:o,placeholderText:z,onChange:u,value:f,type:n,isRequired:p,dataAttributes:y,className:j,ref:k,disabled:N,pattern:F})})(),(n==="radio"||n==="checkbox")&&(()=>{const{checked:l,...f}=a;return e.jsxs(e.Fragment,{children:[e.jsx(D,{ref:k,type:n,name:o,id:o,isRequired:p,checked:l,onChange:u,disabled:N,className:j,dataAttributes:y}),e.jsx(W,{htmlFor:o,textLabel:m,additionalInfo:c,$labelFlexDirection:r,svg:x,className:h})]})})(),C&&e.jsxs(Y,{className:"input-edit-buttons",children:[e.jsx($,{id:`editable-${o}-edit-btn`,svg:w,buttonType:"button",onClick:T,className:`edit-radio-${s}`,dataAttributes:y}),e.jsx($,{id:`editable-${o}-delete-btn`,svg:A,buttonType:"button",onClick:S,className:`delete-radio-${s}`,dataAttributes:y})]}),g]})},ne=d.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%;
-`,se=d.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};
-`,oe=d.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};
-`,ie=d.div`
+    margin-bottom: ${o.spacing.small};
+`,$e=a.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,U=({legend:a,fieldsetIndex:i,idx:n,editableInformation:o,onChangeOfEditableOption:m,onClickSaveEdit:c,onClickCancelEdit:r,onClickDeleteEntry:x})=>e.jsxs(ne,{className:"editable-option-fieldset",children:[e.jsx(se,{children:`${a} ${n+1}`}),o?.map((h,u)=>e.jsx(oe,{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:m,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(ie,{className:"editable-option-button-space",children:[e.jsx($,{id:`editable-option-${n}-submit`,buttonType:"button",text:"Save",onClick:c,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}}),e.jsx($,{id:`editable-option-${n}-cancel`,buttonType:"button",text:"Cancel",onClick:r,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}}),e.jsx($,{id:`editable-option-${n}-delete`,buttonType:"button",text:"Delete",onClick:x,className:"editable-option-btn",dataAttributes:{"data-index":n,"data-fieldsetindex":i}})]})]}),le=d.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%;
-`,ce=({id:a,submitText:i,hasReset:n,resetText:o,handleReset:m,hasCancel:c,cancelText:r,handleCancel:x})=>e.jsxs(le,{className:"form-main-button-container",children:[e.jsx($,{id:`form-${a}-submit`,buttonType:"submit",text:i??"Submit",className:"submit-form-btn"}),n&&e.jsx($,{id:`form-${a}-edit`,buttonType:"button",text:o??"Reset",onClick:m,className:"reset-form-btn"}),c&&e.jsx($,{id:`form-${a}-cancel`,buttonType:"button",text:r??"Cancel",onClick:x,className:"cancel-form-btn"})]}),O=d.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};
-`,H=d.fieldset`
+    font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
+`,V=a.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,G=d.div`
-    padding: ${t.spacing.small};
+`,X=a.div`
+    padding: ${o.spacing.small};
     height: auto;
     width: 100%;
-`,J=d.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};
-`,re=d.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%;
-`,K=d.div`
+`,_=a.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,de=d.div`
+`,pe=a.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,me=({fieldsets:a=null,legendText:i,isExpandable:n,id:o,formInputs:m,labelAndInputContainerClass:c,labelClass:r,inputClass:x,onChangeOfEditableOption:h,handleAddingInputEntry:u,submitText:p,hasReset:y=!1,resetText:j,handleReset:k,hasCancel:N=!1,cancelText:C,handleCancel:w,handleSubmitForm:T,className:A,children:S})=>e.jsxs(re,{id:`${o}-form`,className:A,onSubmit:T,children:[a?a.map((s,g)=>e.jsxs(G,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(H,{id:`${o}-form-fieldset-${g}`,className:`${s.legend}-fieldset`,children:[s.legend&&e.jsx(O,{className:`${s.legend}-legend`,children:s.legend}),s.inputs.length!==0?s.inputs.map((l,f)=>e.jsxs(v.Fragment,{children:[l.type==="textarea"&&e.jsx(E,{...l,id:l.id??`${s.legend}-input`,labelClass:r,inputClass:x,idx:f,className:`${c} ${l?.uniqueClass}`}),l.type!=="textarea"&&l.type!=="radio"&&l.type!=="checkbox"&&e.jsx(E,{...l,id:l.id??`${s.legend}-input`,labelClass:r,inputClass:x,idx:f,className:`${c} ${l?.uniqueClass}`}),(l.type==="radio"||l.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(E,{...l,id:l.id??`${s.legend}-input`,labelClass:r,inputClass:x,idx:f,className:`${c} ${l?.uniqueClass}`}),l.editing&&l.isEditable&&e.jsx(U,{legend:`${s.legend}`,fieldsetIndex:g,idx:f,editableInformation:l?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:l?.onClickSave||(F=>{}),onClickCancelEdit:l?.onClickCancel||(F=>{}),onClickDeleteEntry:l?.onClickDelete||(F=>{})})]})]},`form-${o}-${f}`)):s.isExpandable?e.jsx(J,{children:`No entry yet on ${s.legend}. Click "+" button to add entry.`}):""]}),s.isExpandable&&e.jsx(K,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${s.legend}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":g}})})]},`${s.legend}-${g}`)):e.jsxs(G,{className:`${o}-fieldset-wrapper`,children:[e.jsxs(H,{id:`${o}-form-fieldset`,className:`${i}-fieldset`,children:[i&&e.jsx(O,{className:`${i}-legend`,children:i}),!a&&m&&m.length!==0?m.map((s,g)=>e.jsxs(v.Fragment,{children:[s.type==="textarea"&&e.jsx(E,{...s,id:s.id??`${i}-input`,labelClass:r,inputClass:x,idx:g,className:`${c} ${s?.uniqueClass}`}),s.type!=="textarea"&&s.type!=="radio"&&s.type!=="checkbox"&&e.jsx(E,{...s,id:s.id??`${i}-input`,labelClass:r,inputClass:x,idx:g,className:`${c} ${s?.uniqueClass}`}),(s.type==="radio"||s.type==="checkbox")&&e.jsxs(e.Fragment,{children:[e.jsx(E,{...s,id:s.id??`${i}-input`,labelClass:r,inputClass:x,idx:g,className:`${c} ${s?.uniqueClass}`}),s.editing&&s.isEditable&&e.jsx(U,{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(J,{children:`No entry yet on ${i}. Please click "+" button to add`}):""]}),n&&e.jsx(K,{className:"add-input-button-space",children:e.jsx($,{id:`expand-${i}-inputs`,buttonType:"button",text:"+",onClick:u,className:"add-input-entry"})})]}),e.jsx(ce,{id:o,submitText:p,hasReset:y,resetText:j,handleReset:k,hasCancel:N,cancelText:C,handleCancel:w}),e.jsx(de,{className:"children-container",children:S})]}),xe=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(!xe(a))throw new Error(`Invalid color: ${a}`);return a},be={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},Q={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")}},V={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")}},q=v.createContext({}),he=({children:a,initialTheme:i=Q,secondTheme:n=V})=>{const[o,m]=v.useState(i),c=()=>{m(r=>r===i?n:i)};return e.jsx(q.Provider,{value:{currentTheme:o,toggleTheme:c},children:e.jsx(d.ThemeProvider,{theme:o,children:a})})},ue=()=>v.useContext(q);exports.DynamicForm=me;exports.ThemeContext=q;exports.ThemeContextProvider=he;exports.breakpoints=be;exports.darkTheme=V;exports.lightTheme=Q;exports.useTheme=ue;
+`,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;