@kbgarcia8/react-dynamic-form 2.0.3 → 2.0.4

package/README.md

@@ -174,6 +174,20 @@ const addressInputsArray = [
       editIcon: <.../>, //=>editIcon in EditableInputProps
       deleteIcon: <.../>,
       editing: ...,
+      //Styling options for editable option buttons
+      editableButtonSize: 'small', //small by default. Value can be only be one of the following: "small" | "smallest" | "smaller" | "medium" | "large" | "larger"
+      editableButtonColor: 'primary', //primary by default. Value can only be one of the following: "primary" | "secondary" | "ghost" | "bnw"
+      editableButtonRadius: 'squircle', //squircle by default. Value can only be one of the following: "circle" | "square" | "roundedsquare" | "squircle" | "pill"
+      //Optional props - text, start icon and end icon of editable option buttons
+      saveText: ...,
+      saveButtonStartIcon: <.../>,
+      saveButtonEndIcon: <.../>,
+      cancelText: ...,
+      cancelButtonStartIcon: <.../>,
+      cancelButtonEndIcon: <.../>,
+      deleteText: ...,
+      deleteButtonStartIcon: <.../>,
+      deleteButtonEndIcon: <.../>,
       //These are informations editable within radio input acting as selection
       editableInformation: [
           {
@@ -229,7 +243,9 @@ function App() {
 | `inputClass`   | `string`     | — | className for `<Input/>` component inside `<LabeledInput/>` component inside `<DynamicForm/>` |
 | `handleEditableInputEntryChange`   | `(e:React.ChangeEvent<HTMLInputElement\|HTMLTextAreaElement>) => void` | — | Function to handle onChange of editable inputs |
 | `handleAddingInputEntry`   | `(e:React.MouseEvent<HTMLButtonElement>) => void` | — | Function to add input entry. If isExpandable is false this is not enabled |
-| `hasSubmit`   | `boolean`     | `false` | This is to enable submit button for `<DynamicForm/>` |
+| `formActionButtonSize`   | `string` | `small` | Text size of form action buttons. Values can only be one of the following values: "small", "smallest", "smaller", "medium", "large", "larger" |
+| `formActionButtonColor`   | `string` | `primary` | Color of form action buttons. Values can only be one of the following: "primary", "secondary", "ghost", "bnw"  |
+| `formActionButtonRadius`   | `string` | `squircle` | Border radius of form action buttons. Values can only be one of the following: "circle", "square", "roundedsquare", "squircle", "pill" |
 | `submitText`   | `string`     | `Submit` | Text inside submit button for `<DynamicForm/>` |
 | `handleSubmit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle submit logic for `<DynamicForm/>` |
 | `hasReset`   | `boolean`     | `false` | This is to enable reset button for `<DynamicForm/>` |
@@ -252,6 +268,18 @@ function App() {
 | `isEditable`   | `boolean`     | — | To determine if an input is editable or not. This is only applicable for radio or checkbox input to mimick an editable option/selection<br>If false, all props below are automatically not needed |
 | `editing`   | `boolean`     | — | To identify if an editable input is being modified<br>Can be used in open/close dialogs |
 | `onClickEdit`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle edit logic of editable input |
+| `editableButtonSize`   | `string` | `small` | Text size of editable option buttons. Values can only be one of the following values: "small", "smallest", "smaller", "medium", "large", "larger" |
+| `editableButtonColor`   | `string` | `primary` | Color of editable option buttons. Values can only be one of the following: "primary", "secondary", "ghost", "bnw"  |
+| `editableButtonRadius`   | `string` | `squircle` | Border radius of editable option buttons. Values can only be one of the following: "circle", "square", "roundedsquare", "squircle", "pill" |
+| `saveText`   | `string`     | `Save` | Text inside save button for `<NestedEditableOption/>` |
+| `saveButtonStartIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon before the text (if any) for save button of `<NestedEditableOption/>` |
+| `saveButtonEndIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon after the text (if any) for save button of `<NestedEditableOption/>` |
+| `cancelText`   | `string`     | `Cancel` | Text inside cancel button for `<NestedEditableOption/>` |
+| `cancelButtonStartIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon before the text (if any) for cancel button of `<NestedEditableOption/>` |
+| `cancelButtonEndIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon after the text (if any) for cancel button of `<NestedEditableOption/>` |
+| `deleteText`   | `string`     | `Delete` | Text inside delete button for `<NestedEditableOption/>` |
+| `deleteButtonStartIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon before the text (if any) for delete button of `<NestedEditableOption/>` |
+| `deleteButtonEndIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as the icon after the text (if any) for delete button of `<NestedEditableOption/>` |
 | `editIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for edit button of editable input |
 | `onClickDelete`   | `(e:React.MouseEvent<HTMLButtonElement>) => void`     | — | Function to handle delete logic of editable input |
 | `deleteIcon`   | `React.ReactNode`     | — | TSX/JSX svg component that will serve as an icon for delete button of editable input |
@@ -312,28 +340,66 @@ You allow overriding currentTheme:
 <!-- TOC --><a name="reminder-for-custom-theme-override"></a>
 ##### Reminder for custom theme override:
 
-Below is the supported format for creating a theme object. Usually consisting of light and dark theme
+Below is the supported format for creating a theme object. Usually consisting of light and dark theme. Note that you can specify as many color key-color group you like. In the example below is 'colors', 'anchorTheme', 'footerTheme' and 'notificationPalette'
 
 asColor function is used to ensure that color to be supplied in color properties are colors (e.g. hexcode and rgb code). Note that keys of colors are changeable since it has type ``
 
 ```tsx
 import { asColor } from '@kbgarcia8/react-dynamic-form'
 
+export const palette = {
+    primary1: asColor('#202234'),
+    primary2: asColor('#3C5E83'),
+    primary3: asColor('#0F60B6'),
+    ...
+}
+
 export const lightTheme:Theme = {
     name: 'light',
     colors: {
-        text: asColor('#333446'),
-        bg: asColor('#EEEEEE'),
-        ...
+      screenColor: palette.neutral2,
+      backgroundColor1: palette.primary1,
+      ...
+    },
+    anchorTheme: {
+      visited: palette.neutral5,
+      hover: palette.primary2,
+      active: palette.secondary2
+    },
+    footerTheme: {
+      backgroundColor: palette.neutral5,
+      textColor: palette.secondary1,
+      shadowColor: palette.shadow1
+    },
+    notificationPalette: {
+      infoText: asColor('#C9E6F0'),
+      infoBackground: asColor('#202234'),
+    ...
     }
 }
 
 export const darkTheme:Theme = {
     name: 'dark',
     colors: {
-        bg: asColor('#333446'),
-        text: asColor('#EEEEEE'),
-        ...
+      screenColor: palette.neutral5,
+      backgroundColor1: palette.primary2,
+      ...
+    },
+    anchorTheme: {
+      link: palette.neutral1,
+      visited: palette.neutral1,
+      hover: palette.primary3,
+      active: palette.secondary1
+    },
+    footerTheme: {
+      backgroundColor: palette.accent,
+      textColor: palette.primary1,
+      shadowColor: palette.shadow2
+    },
+    notificationPalette: {
+      infoText: asColor('#202234'),
+      infoBackground: asColor('#C9E6F0'),
+      ...
     }
 }
 ```
@@ -389,6 +455,9 @@ Every renderable part of the form receives predictable classes or id:
 | **No Entry Message**         | *default styled component*                            | Target using parent wrapper |
 | **Children Container**       | `children-container`                                  |                             |
 
+#### Note/s
+- These classnames can also be used override styling using native CSS
+
 ```ts
 import styled from "styled-components";
 import { DynamicForm } from "@kbgarcia8/react-dynamic-form";

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,kYA2BnB,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,4CA6J1C,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,4CA+K1C,CAAA;AAGD,eAAe,WAAW,CAAC"}

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

@@ -1,8 +1,8 @@
-"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)}
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),D=require("react"),s=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 l=/^#([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 l.test(e)||n.test(e)||CSS.supports("color",e)},b=e=>{if(!te(e))throw new Error(`Invalid color: ${e}`);return e},z=Object.keys(o.breakpoints).reduce((e,l)=>{const n=l;return e[n]=(...a)=>s.css`
+    @media (min-width: ${o.breakpoints[n]}) {
+        ${s.css(...a)}
         }
-    `,e},{}),re={primary:a.css`
+    `,e},{}),re={primary:s.css`
         background-color: ${({theme:e})=>e.colors.backgroundColor1};
         color: ${({theme:e})=>e.colors.textColor3};
         border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
@@ -18,7 +18,7 @@
             border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
             cursor: not-allowed;
         }
-    `,secondary:a.css`
+    `,secondary:s.css`
         background-color: ${({theme:e})=>e.colors.backgroundColor4};
         color: ${({theme:e})=>e.colors.textColor1};
         border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor1};
@@ -33,7 +33,7 @@
             color: ${({theme:e})=>e.colors.shadow};
             border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
         }
-    `,ghost:a.css`
+    `,ghost:s.css`
         background-color: transparent;
         color: ${({theme:e})=>e.colors.textColor3};
         border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.textColor3};
@@ -48,7 +48,7 @@
             color: ${({theme:e})=>e.colors.shadow};
             border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
         }
-    `,bnw:a.css`
+    `,bnw:s.css`
         background-color: ${({theme:e})=>e.colors.borderColor1};
         color: ${({theme:e})=>e.colors.borderColor2};
         border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.borderColor2};
@@ -63,37 +63,37 @@
             color: ${({theme:e})=>e.colors.shadow};
             border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.shadow};
         }
-    `},ae={smallest:a.css`
-        ${B.mobile`
+    `},ae={smallest:s.css`
+        ${z.mobile`
             font-size: ${o.fontSize.xxsmall};
             font-weight: ${o.fontWeight.regular};
         `}
-    `,smaller:a.css`
-        ${B.mobile`
+    `,smaller:s.css`
+        ${z.mobile`
             font-size: ${o.fontSize.xsmall};
             font-weight: ${o.fontWeight.regular};
         `}
-    `,small:a.css`
-        ${B.mobile`
+    `,small:s.css`
+        ${z.mobile`
             font-size: ${o.fontSize.small};
             font-weight: ${o.fontWeight.medium};
         `}
-    `,medium:a.css`
-        ${B.mobile`
+    `,medium:s.css`
+        ${z.mobile`
             font-size: ${o.fontSize.medium};
             font-weight: ${o.fontWeight.bold};
         `}
-    `,large:a.css`
-        ${B.mobile`
+    `,large:s.css`
+        ${z.mobile`
             font-size: ${o.fontSize.large};
             font-weight: ${o.fontWeight.bolder};
         `}
-    `,larger:a.css`
-        ${B.mobile`
+    `,larger:s.css`
+        ${z.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`
+    `},se={square:s.css`border-radius: ${o.borderRadius.xsmall};`,roundedsquare:s.css`border-radius: ${o.borderRadius.medium};`,squircle:s.css`border-radius: ${o.borderRadius.large};`,pill:s.css`border-radius: ${o.borderRadius.xlarge};`,circle:s.css`border-radius: ${o.borderRadius.circle};`},M=s.button`
     width: 100%;
     display: flex;
     align-items: center;
@@ -116,19 +116,19 @@
         cursor: not-allowed;
         opacity: 0.6;
     }
-`,H=a.div`
+`,U=s.div`
     width: 100%;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-around;
 
-    ${({$hasIcon:e,$hasText:n})=>e&&n?a.css``:a.css`
+    ${({$hasIcon:e,$hasText:l})=>e&&l?s.css``:s.css`
                 & > * {
                     flex: 1;
                 }
             `}
-`,Z=a.span`
+`,H=s.span`
     flex: 2;
     ${({$size:e})=>ae[e||"small"]}
     font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
@@ -136,18 +136,18 @@
     align-items: center;
     justify-content: center;
     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`
+`,w=({onClick:e,id:l,buttonType:n="button",startIcon:a,endIcon:m,text:d="",className:x="",dataAttributes:u={},color:h,radius:$,size:g})=>n==="submit"?t.jsx(M,{id:l,type:"submit",className:x,...u,$color:h||"primary",$radius:$||"squircle",children:t.jsxs(U,{className:"button-icon-text-space",$hasIcon:!!(a||m),$hasText:!!d,children:[a||"",d&&t.jsx(H,{$size:g||"small",id:l,children:d}),m||""]})}):t.jsx(M,{onClick:e,id:l,type:n,className:x,...u,$color:h||"primary",$radius:$||"squircle",children:t.jsxs(U,{className:"button-icon-text-space",$hasIcon:!!(a||m),$hasText:!!d,children:[a||"",d&&t.jsx(H,{$size:g||"small",id:l,children:d}),m||""]})}),ne=s.div`
     display: flex;
     flex-direction: column;
     align-items: left;
     width: 100%;
     margin-bottom: ${o.spacing.small};
-`,ne=a.div`
+`,le=s.div`
     display: flex;
     gap: ${o.spacing.xsmall};
     width: auto;
     height: auto;
-`,ie=a.label`
+`,ce=s.label`
     display: flex;
     align-items: center;
     justify-content: center;
@@ -164,21 +164,21 @@
         height: auto;
         object-fit: contain;
     }
-`,ce=a.div`
+`,ie=s.div`
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: ${o.spacing.xxxsmall};
-`,de=a.span`
+`,de=s.span`
     font-weight: ${o.fontWeight.bolder};
-`,G=a.div`
+`,Z=s.div`
     max-width: 100%;
     display: flex;
     align-items: center;
-`,me=a.span`
+`,me=s.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`
+`,G=({htmlFor:e,textLabel:l,additionalInfo:n,$labelFlexDirection:a,startIcon:m,endIcon:d,className:x,children:u})=>t.jsxs(ce,{htmlFor:e,className:x,$labelFlexDirection:a,children:[m&&t.jsx(Z,{className:"label-icon-container",children:m}),t.jsxs(ie,{className:"label-text-container",children:[t.jsx(de,{className:"main-label",children:l}),n&&t.jsx(me,{className:"additional-info",children:n})]}),d&&t.jsx(Z,{className:"label-icon-container",children:d}),u]}),J=s.input`
     display: flex;
     place-content: center;
     font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
@@ -195,7 +195,7 @@
     &:focus{
         border: ${o.borderThickness.thin} solid ${({theme:e})=>e.colors.teal};
     }
-`,be=a.textarea`
+`,be=s.textarea`
     display: flex;
     place-content: center;
     border: ${o.borderThickness.light} solid ${({theme:e})=>e.colors.text};
@@ -208,27 +208,27 @@
     max-width: 100%;
     resize: none;
     overflow-y: auto;
-`,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`
+`,P=D.forwardRef((e,l)=>{const{type:n,id:a,onChange:m,isRequired:d,dataAttributes:x={},disabled:u,className:h,name:$}=e;if(n==="textarea"){const{rows:p=5,cols:F=30,value:B,...S}=e;return t.jsx(be,{ref:l,value:B,rows:p,cols:F,id:a,onChange:m,required:d,disabled:u,...x,className:h,name:$})}if(n==="radio"||n==="checkbox"){const{checked:p,...F}=e;return t.jsx(J,{ref:l,type:n,checked:p,id:a,onChange:m,required:d,...x,disabled:u,className:h,name:$})}const g=e,{value:y,pattern:f,placeholderText:k,...T}=g;return t.jsx(J,{ref:l,type:n,value:y,pattern:f,placeholder:k,id:a,onChange:m,required:d,...x,disabled:u,className:h,name:$})}),q=e=>{const{className:l,type:n,id:a,textLabel:m,additionalInfo:d,$labelFlexDirection:x,startIcon:u,endIcon:h,labelClass:$="",onChange:g,isRequired:y,dataAttributes:f,inputClass:k="",ref:T,disabled:p,isEditable:F,editIcon:B,onClickEdit:S,deleteIcon:I,onClickDelete:j,idx:v,children:W}=e;return t.jsxs(ne,{className:`${l} ${a.replace("#","")}-label-input-container`,children:[n!=="radio"&&n!=="checkbox"&&t.jsx(G,{startIcon:u,endIcon:h,htmlFor:a,textLabel:m,additionalInfo:d,$labelFlexDirection:x,className:$}),n!=="radio"&&n!=="checkbox"&&n==="textarea"&&(()=>{const{rows:N=5,cols:E=30,value:R,...r}=e;return t.jsx(P,{id:a,name:a,type:"textarea",isRequired:y,onChange:g,value:R,rows:N,cols:E,dataAttributes:f,className:k,ref:T,disabled:p})})(),n!=="radio"&&n!=="checkbox"&&n!=="textarea"&&(()=>{const N=e,{value:E,pattern:R,placeholderText:r,...C}=N;return t.jsx(P,{id:a,name:a,placeholderText:r,onChange:g,value:E,type:n,isRequired:y,dataAttributes:f,className:k,ref:T,disabled:p,pattern:R})})(),(n==="radio"||n==="checkbox")&&(()=>{const{checked:N,...E}=e;return t.jsxs(t.Fragment,{children:[t.jsx(P,{ref:T,type:n,name:a,id:a,isRequired:y,checked:N,onChange:g,disabled:p,className:k,dataAttributes:f}),t.jsx(G,{startIcon:u,endIcon:h,htmlFor:a,textLabel:m,additionalInfo:d,$labelFlexDirection:x,className:$})]})})(),F&&t.jsxs(le,{className:"input-edit-buttons",children:[t.jsx(w,{id:`editable-${a}-edit-btn`,startIcon:B,buttonType:"button",onClick:S,className:`edit-radio-${v}`,dataAttributes:f}),t.jsx(w,{id:`editable-${a}-delete-btn`,startIcon:I,buttonType:"button",onClick:j,className:`delete-radio-${v}`,dataAttributes:f})]}),W]})},xe=s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,he=a.legend`
+`,ue=s.legend`
     font-size: ${o.spacing.medium};
     font-weight: 500;
     margin: 0 auto ${o.spacing.small} auto;
     text-align: center;
     font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
-`,xe=a.div`
+`,he=s.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     width: 100%;
     margin-bottom: ${o.spacing.small};
-`,$e=a.div`
+`,$e=s.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,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`
+`,K=({editableButtonSize:e,editableButtonColor:l,editableButtonRadius:n,legend:a,fieldsetIndex:m,idx:d,editableInformation:x,saveText:u,saveButtonStartIcon:h,saveButtonEndIcon:$,cancelText:g,cancelButtonStartIcon:y,cancelButtonEndIcon:f,deleteText:k,deleteButtonStartIcon:T,deleteButtonEndIcon:p,onChangeOfEditableOption:F,onClickSaveEdit:B,onClickCancelEdit:S,onClickDeleteEntry:I})=>t.jsxs(xe,{className:"editable-option-fieldset",children:[t.jsx(ue,{children:`${a} ${d+1}`}),x?.map((j,v)=>t.jsx(he,{className:"editable-option-container",children:t.jsx(P,{id:`editable-option-${v}`,name:`editable-option-${v}`,placeholderText:j.name.charAt(0).toUpperCase()+j.name.slice(1),onChange:F,value:j.info,type:j.type,isRequired:!0,className:"editable-option",dataAttributes:{"data-index":v,"data-fieldsetindex":m,"data-key":j.info}})},`${j.name}-${v}`)),t.jsxs($e,{className:"editable-option-button-space",children:[t.jsx(w,{startIcon:h,endIcon:$,size:e||"small",color:l||"primary",radius:n||"squircle",id:`editable-option-${d}-submit`,buttonType:"button",text:u||"Save",onClick:B,className:"editable-option-btn",dataAttributes:{"data-index":d,"data-fieldsetindex":m}}),t.jsx(w,{startIcon:y,endIcon:f,size:e||"small",color:l||"primary",radius:n||"squircle",id:`editable-option-${d}-cancel`,buttonType:"button",text:g||"Cancel",onClick:S,className:"editable-option-btn",dataAttributes:{"data-index":d,"data-fieldsetindex":m}}),t.jsx(w,{startIcon:T,endIcon:p,size:e||"small",color:l||"primary",radius:n||"squircle",id:`editable-option-${d}-delete`,buttonType:"button",text:k||"Delete",onClick:I,className:"editable-option-btn",dataAttributes:{"data-index":d,"data-fieldsetindex":m}})]})]}),ge=s.div`
     display: flex;
     justify-content: space-around;
     align-content: center;
@@ -236,22 +236,22 @@
     & 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`
+`,fe=({id:e,formActionButtonSize:l,formActionButtonColor:n,formActionButtonRadius:a,submitText:m,submitIcon:d,hasReset:x,resetText:u,resetIcon:h,handleReset:$,hasCancel:g,cancelText:y,cancelIcon:f,handleCancel:k})=>t.jsxs(ge,{className:"form-main-button-container",children:[t.jsx(w,{id:`form-${e}-submit`,size:l||"small",color:n||"primary",radius:a||"squircle",startIcon:d,buttonType:"submit",text:m??"Submit",className:"submit-form-btn"}),x&&t.jsx(w,{id:`form-${e}-edit`,size:l||"small",color:n||"primary",radius:a||"squircle",startIcon:h,buttonType:"button",text:u??"Reset",onClick:$,className:"reset-form-btn"}),g&&t.jsx(w,{id:`form-${e}-cancel`,size:l||"small",color:n||"primary",radius:a||"squircle",startIcon:f,buttonType:"button",text:y??"Cancel",onClick:k,className:"cancel-form-btn"})]}),Q=s.legend`
     font-size: ${o.spacing.medium};
     font-weight: 500;
     margin-bottom: ${o.spacing.small};
     width: auto;
     text-align: center;
     font-family: ${o.fonts.secondary}, ${o.fonts.fallback};
-`,V=a.fieldset`
+`,V=s.fieldset`
     padding: 0;
     height: auto;
     width: 100%;
-`,X=a.div`
+`,X=s.div`
     padding: ${o.spacing.small};
     height: auto;
     width: 100%;
-`,Y=a.div`
+`,Y=s.div`
     display: flex;
     justify-content: center;
     align-items: center;
@@ -260,19 +260,19 @@
     font-family: ${o.fonts.tertiary}, ${o.fonts.fallback};
     font-size: ${o.fontSize.xsmall};
     font-weight: ${o.fontWeight.bold};
-`,ye=a.form`
+`,ye=s.form`
     display: flex;
     flex-direction: column;
     align-items: center;
     width: 100%;
-`,_=a.div`
+`,_=s.div`
     display: flex;
     justify-content: space-between;
     width: 100%;
-`,pe=a.div`
+`,ke=s.div`
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-`,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;
+`,pe=({fieldsets:e=null,legendText:l,isExpandable:n,id:a,formInputs:m,labelAndInputContainerClass:d,labelClass:x,inputClass:u,onChangeOfEditableOption:h,handleAddingInputEntry:$,formActionButtonSize:g,formActionButtonColor:y,formActionButtonRadius:f,submitText:k,submitIcon:T,hasReset:p=!1,resetText:F,resetIcon:B,handleReset:S,hasCancel:I=!1,cancelText:j,cancelIcon:v,handleCancel:W,handleSubmitForm:N,className:E,children:R})=>t.jsxs(ye,{id:`${a}-form`,className:E,onSubmit:N,children:[e?e.map((r,C)=>t.jsxs(X,{className:`${a}-fieldset-wrapper`,children:[t.jsxs(V,{id:`${a}-form-fieldset-${C}`,className:`${r.legend}-fieldset`,children:[r.legend&&t.jsx(Q,{className:`${r.legend}-legend`,children:r.legend}),r.inputs.length!==0?r.inputs.map((c,L)=>t.jsxs(D.Fragment,{children:[c.type==="textarea"&&t.jsx(q,{...c,id:c.id??`${r.legend}-input`,labelClass:x,inputClass:u,idx:L,className:`${d} ${c?.uniqueClass}`}),c.type!=="textarea"&&c.type!=="radio"&&c.type!=="checkbox"&&t.jsx(q,{...c,id:c.id??`${r.legend}-input`,labelClass:x,inputClass:u,idx:L,className:`${d} ${c?.uniqueClass}`}),(c.type==="radio"||c.type==="checkbox")&&t.jsxs(t.Fragment,{children:[t.jsx(q,{...c,id:c.id??`${r.legend}-input`,labelClass:x,inputClass:u,idx:L,className:`${d} ${c?.uniqueClass}`}),c.editing&&c.isEditable&&t.jsx(K,{editableButtonSize:c.editableButtonSize,editableButtonColor:c.editableButtonColor,editableButtonRadius:c.editableButtonRadius,legend:`${r.legend}`,fieldsetIndex:C,idx:L,saveText:c.saveText??void 0,saveButtonStartIcon:c.saveButtonStartIcon??void 0,saveButtonEndIcon:c.saveButtonEndIcon??void 0,cancelText:c.cancelText??void 0,cancelButtonStartIcon:c.cancelButtonStartIcon??void 0,cancelButtonEndIcon:c.cancelButtonEndIcon??void 0,deleteText:c.deleteText??void 0,deleteButtonStartIcon:c.deleteButtonStartIcon??void 0,deleteButtonEndIcon:c.deleteButtonEndIcon??void 0,editableInformation:c?.editableInformation||[],onChangeOfEditableOption:h,onClickSaveEdit:c?.onClickSave||(O=>{}),onClickCancelEdit:c?.onClickCancel||(O=>{}),onClickDeleteEntry:c?.onClickDelete||(O=>{})})]})]},`form-${a}-${L}`)):r.isExpandable?t.jsx(Y,{children:`No entry yet on ${r.legend}. Click "+" button to add entry.`}):""]}),r.isExpandable&&t.jsx(_,{className:"add-input-button-space",children:t.jsx(w,{id:`expand-${r.legend}-inputs`,buttonType:"button",text:"+",onClick:$,className:"add-input-entry",dataAttributes:{"data-fieldsetindex":C}})})]},`${r.legend}-${C}`)):t.jsxs(X,{className:`${a}-fieldset-wrapper`,children:[t.jsxs(V,{id:`${a}-form-fieldset`,className:`${l}-fieldset`,children:[l&&t.jsx(Q,{className:`${l}-legend`,children:l}),!e&&m&&m.length!==0?m.map((r,C)=>t.jsxs(D.Fragment,{children:[r.type==="textarea"&&t.jsx(q,{...r,id:r.id??`${l}-input`,labelClass:x,inputClass:u,idx:C,className:`${d} ${r?.uniqueClass}`}),r.type!=="textarea"&&r.type!=="radio"&&r.type!=="checkbox"&&t.jsx(q,{...r,id:r.id??`${l}-input`,labelClass:x,inputClass:u,idx:C,className:`${d} ${r?.uniqueClass}`}),(r.type==="radio"||r.type==="checkbox")&&t.jsxs(t.Fragment,{children:[t.jsx(q,{...r,id:r.id??`${l}-input`,labelClass:x,inputClass:u,idx:C,className:`${d} ${r?.uniqueClass}`}),r.editing&&r.isEditable&&t.jsx(K,{editableButtonSize:r.editableButtonSize,editableButtonColor:r.editableButtonColor,editableButtonRadius:r.editableButtonRadius,legend:`${l}`,idx:C,saveText:r.saveText??void 0,saveButtonStartIcon:r.saveButtonStartIcon??void 0,saveButtonEndIcon:r.saveButtonEndIcon??void 0,cancelText:r.cancelText??void 0,cancelButtonStartIcon:r.cancelButtonStartIcon??void 0,cancelButtonEndIcon:r.cancelButtonEndIcon??void 0,deleteText:r.deleteText??void 0,deleteButtonStartIcon:r.deleteButtonStartIcon??void 0,deleteButtonEndIcon:r.deleteButtonEndIcon??void 0,editableInformation:r?.editableInformation,onChangeOfEditableOption:h,onClickSaveEdit:r?.onClickSave||(c=>{}),onClickCancelEdit:r?.onClickCancel||(c=>{}),onClickDeleteEntry:r?.onClickDelete||(c=>{})})]})]},`form-${a}-${C}`)):n?t.jsx(Y,{children:`No entry yet on ${l}. Please click "+" button to add`}):""]}),n&&t.jsx(_,{className:"add-input-button-space",children:t.jsx(w,{id:`expand-${l}-inputs`,buttonType:"button",text:"+",onClick:$,className:"add-input-entry"})})]}),t.jsx(fe,{id:a,formActionButtonSize:g,formActionButtonColor:y,formActionButtonRadius:f,submitText:k,submitIcon:T,hasReset:p,resetText:F,resetIcon:B,handleReset:S,hasCancel:I,cancelText:j,cancelIcon:v,handleCancel:W}),t.jsx(ke,{className:"children-container",children:R})]}),Ce={mobile:"320px",tablet:"768px",desktop:"992px",largeDesktop:"1200px",largerDesktop:"1400px"},i={primary1:b("#202234"),primary2:b("#3C5E83"),primary3:b("#0F60B6"),secondary1:b("#C67E10"),secondary2:b("#F6C46D"),neutral1:b("#FFFFFF"),neutral2:b("#F2F2F2"),neutral3:b("#ABABAB"),neutral4:b("#373A40"),neutral5:b("#000000"),accent:b("#E1D3B7"),shadow1:b("rgb(88, 88, 88)"),shadow2:b("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:b("#C9E6F0"),infoBackground:b("#202234"),warningText:b("#FCFFC1"),warningBackground:b("#F2C265"),successText:b("#9EDF9C"),successBackground:b("#123524"),errorText:b("#FAD4D4"),errorBackground:b("#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:b("#202234"),infoBackground:b("#C9E6F0"),warningText:b("#F2C265"),warningBackground:b("#FCFFC1"),successText:b("#123524"),successBackground:b("#9EDF9C"),errorBackground:b("#FAD4D4"),errorText:b("#990000")}},A=D.createContext({}),je=({children:e,initialTheme:l=ee,secondTheme:n=oe})=>{const[a,m]=D.useState(l),d=()=>{m(x=>x===l?n:l)};return t.jsx(A.Provider,{value:{currentTheme:a,toggleTheme:d},children:t.jsx(s.ThemeProvider,{theme:a,children:e})})},we=()=>D.useContext(A);exports.DynamicForm=pe;exports.ThemeContext=A;exports.ThemeContextProvider=je;exports.breakpoints=Ce;exports.darkTheme=oe;exports.lightTheme=ee;exports.palette=i;exports.useTheme=we;