@superrb/react-addons 1.2.2 → 1.2.4

package/.eslintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": [
+    "prettier",
+    "next/core-web-vitals",
+    "plugin:jsx-a11y/recommended"
+  ],
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 2021,
+    "sourceType": "module"
+  },
+  "rules": {
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "quotes": ["error", "single"],
+    "jsx-quotes": ["error", "prefer-double"]
+  }
+}

package/README.md

@@ -0,0 +1,29 @@
+# React Addons
+
+## Installation
+
+First, install the package
+
+```sh
+yarn add @superrb/react-addons
+```
+
+## Context Providers
+
+Add the context wrapper to your layout to ensure you can use all [contexts](./src/context/README.md) you wish to use.
+
+```tsx
+import { ContextWrapper } from '@superrb/react-addons/components'
+
+export const Layout = ({ children }) => (
+  <ContextWrapper>
+    {children}
+  </ContextWrapper>
+)
+```
+
+## Further Documentation
+* [Components](./src/components/README.md)
+* [Contexts](./src/context/README.md)
+* [Hooks](./src/hooks/README.md)
+* [Utilities](./src/utils/README.md)

package/components/button.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, PropsWithChildren } from "react";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, MouseEventHandler, PropsWithChildren } from 'react';
 type Props = (PropsWithChildren<HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>> | ButtonHTMLAttributes<HTMLButtonElement> | AnchorHTMLAttributes<HTMLAnchorElement>) & {
     label?: string;
     label_a11y?: string;

package/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,cAAc,EACd,iBAAiB,EAEjB,iBAAiB,EAGlB,MAAM,OAAO,CAAA;AAGd,KAAK,KAAK,GAAG,CACT,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC,GACxE,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,oBAAoB,CAAC,iBAAiB,CAAC,CAC1C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;;AAkED,wBAA2B;AAC3B,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,CAAA"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../src/components/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,oBAAoB,EACpB,oBAAoB,EAEpB,cAAc,EACd,iBAAiB,EAEjB,iBAAiB,EAGlB,MAAM,OAAO,CAAA;AAGd,KAAK,KAAK,GAAG,CACT,iBAAiB,CAAC,cAAc,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC,GACxE,oBAAoB,CAAC,iBAAiB,CAAC,GACvC,oBAAoB,CAAC,iBAAiB,CAAC,CAC1C,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;;AAgED,wBAA2B;AAC3B,YAAY,EAAE,KAAK,IAAI,WAAW,EAAE,CAAA"}

package/components/button.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, } from "react";
-import { extendClass } from "../utils";
-const Button = forwardRef(({ children, label, label_a11y, onClick, className = "", href, ...props }, ref) => {
+import { forwardRef, memo, } from 'react';
+import { extendClass } from '../utils';
+const Button = forwardRef(({ children, label, label_a11y, onClick, className = '', href, ...props }, ref) => {
     className = `button ${className}`;
-    const renderedChildren = (_jsxs(_Fragment, { children: [label_a11y && _jsx("span", { className: "screenreader-text", children: label_a11y }), label && (_jsx("span", { className: `${extendClass(className, "label")}`, "aria-hidden": label_a11y !== undefined, "data-text": label, children: label })), children] }));
+    const renderedChildren = (_jsxs(_Fragment, { children: [label_a11y && _jsx("span", { className: "screenreader-text", children: label_a11y }), label && (_jsx("span", { className: `${extendClass(className, 'label')}`, "aria-hidden": label_a11y !== undefined, "data-text": label, children: label })), children] }));
     const linkProps = {
         ...props,
         onClick,
         className,
-        "aria-label": label_a11y || label,
+        'aria-label': label_a11y || label,
         ref,
     };
     if (href) {
@@ -18,7 +18,7 @@ const Button = forwardRef(({ children, label, label_a11y, onClick, className = "
         ...props,
         onClick,
         className,
-        "aria-label": label_a11y || label,
+        'aria-label': label_a11y || label,
         ref,
     };
     return _jsx("button", { ...buttonProps, children: renderedChildren });

package/components/context-wrapper.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 declare const ContextWrapper: ({ children }: PropsWithChildren<{}>) => import("react/jsx-runtime").JSX.Element;
 export default ContextWrapper;
 //# sourceMappingURL=context-wrapper.d.ts.map

package/components/context-wrapper.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CookiesContextProvider, ModalContextProvider, NavContextProvider, } from "../context";
+import { CookiesContextProvider, ModalContextProvider, NavContextProvider, } from '../context';
 const ContextWrapper = ({ children }) => (_jsx(CookiesContextProvider, { children: _jsx(ModalContextProvider, { children: _jsx(NavContextProvider, { children: children }) }) }));
 export default ContextWrapper;

package/components/cookie-banner.js

@@ -1,41 +1,41 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState } from "react";
-import { CookiesContext } from "../context";
-import { Button, Form } from "../components";
-import * as Yup from "yup";
-import SubmitButton from "./form/submit-button";
-import { session } from "../storage";
+import { useContext, useState } from 'react';
+import { CookiesContext } from '../context';
+import { Button, Form } from '../components';
+import * as Yup from 'yup';
+import SubmitButton from './form/submit-button';
+import { session } from '../storage';
 const content = {
-    title: "Cookie Notice",
-    text: "We use cookies to ensure you get the best experience on our website.",
-    form_text: "Select the type of cookies you wish to allow.",
-    policyLink: "/legal/cookies-policy",
-    policyLabel: "Cookie Policy",
-    customiseLabel: "Customise",
-    rejectLabel: "Reject",
-    acceptLabel: "Accept",
-    acceptAllLabel: "Accept All",
+    title: 'Cookie Notice',
+    text: 'We use cookies to ensure you get the best experience on our website.',
+    form_text: 'Select the type of cookies you wish to allow.',
+    policyLink: '/legal/cookies-policy',
+    policyLabel: 'Cookie Policy',
+    customiseLabel: 'Customise',
+    rejectLabel: 'Reject',
+    acceptLabel: 'Accept',
+    acceptAllLabel: 'Accept All',
     tracking: {
-        title: "Optional Cookies",
-        description: "These cookies are set by third-parties to track browsing habits in order to personalise your experience.",
+        title: 'Optional Cookies',
+        description: 'These cookies are set by third-parties to track browsing habits in order to personalise your experience.',
     },
     necessary: {
-        title: "Necessary Cookies",
-        description: "These cookies are necessary for the website to function and cannot be switched off.",
+        title: 'Necessary Cookies',
+        description: 'These cookies are necessary for the website to function and cannot be switched off.',
     },
 };
 const CookieBanner = ({ allowCustomisation = true, allowReject = false, title = content.title, text = content.text, formText = content.form_text, policyLink = content.policyLink, policyLabel = content.policyLabel, }) => {
     const { cookiesAccepted, setCookiesAccepted, setTrackingCookiesAccepted } = useContext(CookiesContext);
     const [animate, setAnimate] = useState(false);
     const [formOpen, setFormOpen] = useState(false);
-    const [rejected, setRejected] = useState(!!session.getItem("cookies-rejected"));
+    const [rejected, setRejected] = useState(!!session.getItem('cookies-rejected'));
     const openForm = () => {
         setFormOpen(true);
     };
     const reject = () => {
         setRejected(true);
-        session.setItem("cookies-rejected", "true");
+        session.setItem('cookies-rejected', 'true');
     };
     const accept = (necessary, tracking) => {
         setAnimate(true);
@@ -67,6 +67,6 @@ const CookieBanner = ({ allowCustomisation = true, allowReject = false, title =
       `)
             .meta({ disabled: true }),
     });
-    return (_jsx(_Fragment, { children: !rejected && !cookiesAccepted ? (_jsx("div", { className: `cookie-banner ${animate ? " cookie-banner--hide" : ""} `, children: _jsx("div", { className: "cookie-banner__container container", children: _jsxs("div", { className: "cookie-banner__inner", children: [allowCustomisation && (_jsxs("div", { className: "cookie-banner__form", "aria-hidden": !formOpen, children: [formText && (_jsx("p", { className: "cookie-banner__form-text", children: formText })), _jsx(Form, { className: "cookie-banner__form", schema: schema, onSubmit: submit, renderSubmit: () => _jsx(SubmitButton, { label: acceptLabel }), renderSuccessMessage: false })] })), _jsxs("div", { className: "cookie-banner__main", children: [_jsxs("div", { className: "cookie-banner__message", "aria-hidden": formOpen, children: [title && _jsx("h2", { className: "cookie-banner__title", children: title }), text && (_jsxs("p", { className: "cookie-banner__text", children: [text, " ", _jsx("a", { href: policyLink, children: policyLabel })] }))] }), _jsxs("div", { className: "cookie-banner__buttons", children: [allowReject && !allowCustomisation && !formOpen && (_jsx(Button, { onClick: reject, className: "cookie-banner__reject button button__rounded button__rounded--black-fill", label: content.rejectLabel })), allowCustomisation && !formOpen && (_jsx(Button, { onClick: openForm, className: "cookie-banner__reject button button__rounded button__rounded--black-fill", label: content.customiseLabel })), !formOpen && (_jsx(Button, { onClick: acceptAll, className: "cookie-banner__agree button button__rounded button__rounded--black", label: acceptLabel }))] })] })] }) }) })) : ("") }));
+    return (_jsx(_Fragment, { children: !rejected && !cookiesAccepted ? (_jsx("div", { className: `cookie-banner ${animate ? ' cookie-banner--hide' : ''} `, children: _jsx("div", { className: "cookie-banner__container container", children: _jsxs("div", { className: "cookie-banner__inner", children: [allowCustomisation && (_jsxs("div", { className: "cookie-banner__form", "aria-hidden": !formOpen, children: [formText && (_jsx("p", { className: "cookie-banner__form-text", children: formText })), _jsx(Form, { className: "cookie-banner__form", schema: schema, onSubmit: submit, renderSubmit: () => _jsx(SubmitButton, { label: acceptLabel }), renderSuccessMessage: false })] })), _jsxs("div", { className: "cookie-banner__main", children: [_jsxs("div", { className: "cookie-banner__message", "aria-hidden": formOpen, children: [title && _jsx("h2", { className: "cookie-banner__title", children: title }), text && (_jsxs("p", { className: "cookie-banner__text", children: [text, " ", _jsx("a", { href: policyLink, children: policyLabel })] }))] }), _jsxs("div", { className: "cookie-banner__buttons", children: [allowReject && !allowCustomisation && !formOpen && (_jsx(Button, { onClick: reject, className: "cookie-banner__reject button button__rounded button__rounded--black-fill", label: content.rejectLabel })), allowCustomisation && !formOpen && (_jsx(Button, { onClick: openForm, className: "cookie-banner__reject button button__rounded button__rounded--black-fill", label: content.customiseLabel })), !formOpen && (_jsx(Button, { onClick: acceptAll, className: "cookie-banner__agree button button__rounded button__rounded--black", label: acceptLabel }))] })] })] }) }) })) : ('') }));
 };
 export default CookieBanner;

package/components/form/error-message.d.ts

@@ -1,5 +1,5 @@
-import { FieldError, FieldErrorsImpl, Merge } from "react-hook-form";
-import { AnySchema } from "yup";
+import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
+import { AnySchema } from 'yup';
 export interface ErrorMessageProps {
     error?: FieldError | Merge<FieldError, FieldErrorsImpl<any>>;
     fieldSchema?: AnySchema;

package/components/form/error-message.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const ErrorMessage = ({ error }) => {
-    const GENERIC_ERROR = "Sorry, an error occurred";
+    const GENERIC_ERROR = 'Sorry, an error occurred';
     return (_jsx("span", { className: "form__error", children: error?.message || GENERIC_ERROR }));
 };
 export default ErrorMessage;

package/components/form/field.d.ts

@@ -1,6 +1,6 @@
-import { FormEventHandler } from "react";
-import { AnySchema } from "yup";
-import { UseFormRegisterReturn } from "react-hook-form";
+import { FormEventHandler } from 'react';
+import { AnySchema } from 'yup';
+import { UseFormRegisterReturn } from 'react-hook-form';
 interface Props {
     register: UseFormRegisterReturn<string>;
     schema: AnySchema<any>;

package/components/form/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/form/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,gBAAgB,EAAuB,MAAM,OAAO,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,UAAU,KAAK;IACb,QAAQ,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC;IACxC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;IACvB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;CACzC;AAED,QAAA,MAAM,SAAS,sCAAuC,KAAK,4CAuE1D,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/components/form/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,gBAAgB,EAAuB,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAA;AAEvD,UAAU,KAAK;IACb,QAAQ,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IACvC,MAAM,EAAE,SAAS,CAAC,GAAG,CAAC,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CACxC;AAED,QAAA,MAAM,SAAS,sCAAuC,KAAK,4CAuE1D,CAAA;AAED,eAAe,SAAS,CAAA"}

package/components/form/field.js

@@ -1,6 +1,6 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from 'react';
 const FormField = ({ register, schema, id, onInput }) => {
     const [touched, setTouched] = useState(false);
     const [rendered, setRendered] = useState(false);
@@ -25,8 +25,8 @@ const FormField = ({ register, schema, id, onInput }) => {
         setRendered(true);
     }, []);
     if (schema?.spec?.meta?.options?.length > 0) {
-        return (_jsxs("select", { className: "form__control form__control--select", ...fieldProps, children: [schema?.spec?.meta?.placeholder ? (_jsx("option", { value: "", children: schema?.spec?.meta?.placeholder }, "placeholder")) : null, schema?.spec?.meta?.options?.map((value, index) => (_jsx("option", { value: value, children: value }, value)))] }));
+        return (_jsxs("select", { className: "form__control form__control--select", ...fieldProps, children: [schema?.spec?.meta?.placeholder ? (_jsx("option", { value: "", children: schema?.spec?.meta?.placeholder }, 'placeholder')) : null, schema?.spec?.meta?.options?.map((value, index) => (_jsx("option", { value: value, children: value }, value)))] }));
     }
-    return (_jsx(_Fragment, { children: schema?.spec?.meta?.textarea === true ? (_jsx("textarea", { className: "form__control", ...fieldProps })) : schema?.type === "boolean" ? (_jsx("input", { type: "checkbox", className: "form__control form__control--checkbox", checked: !rendered ? schema?.spec?.default : null, ...fieldProps })) : schema?.spec?.meta?.hidden === true ? (_jsx("input", { type: "hidden", className: "form__control form__control--hidden", ...fieldProps })) : schema?.type === "mixed" ? (_jsx("input", { className: "form__control form__control--mixed", type: "file", ...fieldProps })) : (_jsx("input", { className: "form__control", ...fieldProps })) }));
+    return (_jsx(_Fragment, { children: schema?.spec?.meta?.textarea === true ? (_jsx("textarea", { className: "form__control", ...fieldProps })) : schema?.type === 'boolean' ? (_jsx("input", { type: "checkbox", className: "form__control form__control--checkbox", checked: !rendered ? schema?.spec?.default : null, ...fieldProps })) : schema?.spec?.meta?.hidden === true ? (_jsx("input", { type: "hidden", className: "form__control form__control--hidden", ...fieldProps })) : schema?.type === 'mixed' ? (_jsx("input", { className: "form__control form__control--mixed", type: "file", ...fieldProps })) : (_jsx("input", { className: "form__control", ...fieldProps })) }));
 };
 export default FormField;

package/components/form/submit-button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "../../components";
+import { Button } from '../../components';
 const SubmitButton = ({ label }) => {
-    return (_jsx(Button, { label: label || "Submit", className: "form__submit", type: "submit" }));
+    return (_jsx(Button, { label: label || 'Submit', className: "form__submit", type: "submit" }));
 };
 export default SubmitButton;

package/components/form/types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode } from "react";
-import { FieldError } from "react-hook-form";
-import { AnySchema } from "yup";
+import { ReactNode } from 'react';
+import { FieldError } from 'react-hook-form';
+import { AnySchema } from 'yup';
 export type FieldRenderer = (props: object, error?: FieldError, schema?: AnySchema) => ReactNode;
 //# sourceMappingURL=types.d.ts.map

package/components/form.d.ts

@@ -1,21 +1,20 @@
-import { ReactNode } from "react";
-import { ObjectSchema, AnySchema } from "yup";
-import { FieldError } from "react-hook-form";
-import { Status } from "../hooks/use-async";
-import { FieldRenderer } from "./form/types";
+import { ReactNode } from 'react';
+import { ObjectSchema, InferType, AnySchema } from 'yup';
+import { FieldError } from 'react-hook-form';
+import { Status } from '../hooks/use-async';
+import { FieldRenderer } from './form/types';
 export interface FormProps<T extends ObjectSchema<any>> {
     schema: T;
     name?: string;
     action?: string;
     className?: string;
     method?: string;
-    onSubmit?: (data: {
+    initialData?: {
         [P in T as string]: any;
-    }) => void;
+    };
+    onSubmit?: (data: InferType<T>) => void;
     onStatusChange?: (status: Status) => void;
-    renderSuccessMessage?: ((data: {
-        [P in T as string]: any;
-    }) => ReactNode) | false;
+    renderSuccessMessage?: ((data: InferType<T>) => ReactNode) | false;
     renderErrorMessage?: (error?: FieldError, fieldSchema?: AnySchema) => ReactNode;
     renderSubmit?: () => ReactNode;
     renderers?: {
@@ -23,6 +22,6 @@ export interface FormProps<T extends ObjectSchema<any>> {
     };
     executeRecaptcha?: () => Promise<string>;
 }
-declare const Form: import("react").ForwardRefExoticComponent<FormProps<ObjectSchema<any, import("yup").AnyObject, any, "">> & import("react").RefAttributes<unknown>>;
-export default Form;
+declare const _default: import("react").ForwardRefExoticComponent<FormProps<ObjectSchema<any, import("yup").AnyObject, any, "">> & import("react").RefAttributes<HTMLFormElement>>;
+export default _default;
 //# sourceMappingURL=form.d.ts.map

package/components/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAMV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAa,SAAS,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,UAAU,EAAW,MAAM,iBAAiB,CAAC;AAEtD,OAAiB,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAO7C,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC;IACpD,MAAM,EAAE,CAAC,CAAC;IACV,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,GAAG;KAAE,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,oBAAoB,CAAC,EACjB,CAAC,CAAC,IAAI,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,GAAG;KAAE,KAAK,SAAS,CAAC,GAClD,KAAK,CAAC;IACV,kBAAkB,CAAC,EAAE,CACnB,KAAK,CAAC,EAAE,UAAU,EAClB,WAAW,CAAC,EAAE,SAAS,KACpB,SAAS,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,aAAa;KAAE,CAAC;IAClD,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;CAC1C;AAiBD,QAAA,MAAM,IAAI,oJAsMT,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../src/components/form.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAOV,MAAM,OAAO,CAAA;AACd,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,KAAK,CAAA;AAExD,OAAO,EAAE,UAAU,EAAW,MAAM,iBAAiB,CAAA;AAErD,OAAiB,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAO5C,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,YAAY,CAAC,GAAG,CAAC;IACpD,MAAM,EAAE,CAAC,CAAA;IACT,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,GAAG;KAAE,CAAA;IACzC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IACvC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,oBAAoB,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,GAAG,KAAK,CAAA;IAClE,kBAAkB,CAAC,EAAE,CACnB,KAAK,CAAC,EAAE,UAAU,EAClB,WAAW,CAAC,EAAE,SAAS,KACpB,SAAS,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,SAAS,CAAA;IAC9B,SAAS,CAAC,EAAE;SAAG,CAAC,IAAI,CAAC,IAAI,MAAM,GAAG,aAAa;KAAE,CAAA;IACjD,gBAAgB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAA;CACzC;;AAyND,wBAA+B"}

package/components/form.js

@@ -1,29 +1,29 @@
-"use client";
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState, useEffect, Fragment, forwardRef, useRef, } from "react";
-import { paramCase, sentenceCase } from "change-case";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import useAsync from "../hooks/use-async";
-import SuccessMessage from "./form/success-message";
-import ErrorMessage from "./form/error-message";
-import FormField from "./form/field";
-import SubmitButton from "./form/submit-button";
-import messages from "./form/messages.json";
+import { useCallback, useState, useEffect, Fragment, forwardRef, useRef, } from 'react';
+import { paramCase, sentenceCase } from 'change-case';
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import useAsync from '../hooks/use-async';
+import SuccessMessage from './form/success-message';
+import ErrorMessage from './form/error-message';
+import FormField from './form/field';
+import SubmitButton from './form/submit-button';
+import messages from './form/messages.json';
 const toBase64 = (file) => new Promise((resolve, reject) => {
     const reader = new FileReader();
     reader.onloadend = () => {
         // Use a regex to remove data url part
         const base64String = reader.result
             ?.toString()
-            .replace("data:", "")
-            .replace(/^.+,/, "");
+            .replace('data:', '')
+            .replace(/^.+,/, '');
         resolve(base64String);
     };
     reader.readAsDataURL(file);
     reader.onerror = reject;
 });
-const Form = forwardRef(({ schema, name, action, className, method = "post", onSubmit = () => { }, onStatusChange = () => { }, renderSuccessMessage = (data) => _jsx(SuccessMessage, {}), renderErrorMessage = (error, fieldSchema) => (_jsx(ErrorMessage, { error: error, fieldSchema: fieldSchema })), renderSubmit = () => _jsx(SubmitButton, {}), renderers = {}, executeRecaptcha = undefined, ...props }, ref) => {
+function Form({ schema, name, action, className, initialData, method = 'post', onSubmit = () => { }, onStatusChange = () => { }, renderSuccessMessage = (data) => _jsx(SuccessMessage, {}), renderErrorMessage = (error, fieldSchema) => (_jsx(ErrorMessage, { error: error, fieldSchema: fieldSchema })), renderSubmit = () => _jsx(SubmitButton, {}), renderers = {}, executeRecaptcha = undefined, ...props }, ref) {
     const [data, setData] = useState({});
     const fieldRefs = useRef({});
     for (const name of Object.keys(schema.fields)) {
@@ -34,6 +34,7 @@ const Form = forwardRef(({ schema, name, action, className, method = "post", onS
     }
     const { register, handleSubmit, formState: { errors }, } = useForm({
         resolver: yupResolver(schema),
+        defaultValues: initialData,
     });
     const onSubmitHandler = useCallback(async (data) => {
         if (onSubmit) {
@@ -58,12 +59,12 @@ const Form = forwardRef(({ schema, name, action, className, method = "post", onS
         // if recaptcha is enabled generate a token and add to the data
         if (executeRecaptcha) {
             const token = await executeRecaptcha();
-            data["recaptchaToken"] = token;
+            data['recaptchaToken'] = token;
         }
         const response = await fetch(action, {
-            method: "post",
+            method: 'post',
             headers: {
-                contentType: "application/json",
+                contentType: 'application/json',
             },
             body: JSON.stringify(data),
         });
@@ -91,16 +92,16 @@ const Form = forwardRef(({ schema, name, action, className, method = "post", onS
             field.spec.label = sentenceCase(fieldName);
         }
     });
-    return (_jsx(_Fragment, { children: status === "success" && renderSuccessMessage !== false ? (_jsx(_Fragment, { children: renderSuccessMessage(data) })) : (_jsxs("form", { className: "form", action: action, method: method, onSubmit: handleSubmit(execute), noValidate: true, ref: ref, ...props, children: [error && renderErrorMessage({ message: error }), Object.keys(schema.fields).map((fieldName, key) => {
+    return (_jsx(_Fragment, { children: status === 'success' && renderSuccessMessage !== false ? (_jsx(_Fragment, { children: renderSuccessMessage(data) })) : (_jsxs("form", { className: `form ${className}`, action: action, method: method, onSubmit: handleSubmit(execute), noValidate: true, ref: ref, ...props, children: [error && renderErrorMessage({ message: error }), Object.keys(schema.fields).map((fieldName, key) => {
                     const field = schema.fields[fieldName];
-                    return (_jsx(Fragment, { children: field?.spec?.meta?.hidden === true ? (_jsx(FormField, { register: register(fieldName), schema: field })) : (_jsx("div", { className: `form__group form__group--${paramCase(fieldName)} ${fieldName in errors ? "form__group--error" : ""} ${field?.type === "boolean" ? "form__group--checkbox" : ""}`, ref: (ref) => {
+                    return (_jsx(Fragment, { children: field?.spec?.meta?.hidden === true ? (_jsx(FormField, { register: register(fieldName), schema: field })) : (_jsx("div", { className: `form__group form__group--${paramCase(fieldName)} ${fieldName in errors ? 'form__group--error' : ''} ${field?.type === 'boolean' ? 'form__group--checkbox' : ''}`, ref: (ref) => {
                                 fieldRefs.current[fieldName] = ref;
                             }, children: _jsxs("label", { className: "form__label", htmlFor: `${name}__${paramCase(fieldName)}`, children: [_jsx("span", { className: "form__label-text", dangerouslySetInnerHTML: {
-                                            __html: `${field?.spec?.label} ${!field?.spec?.optional ? "*" : ""}`,
+                                            __html: `${field?.spec?.label} ${!field?.spec?.optional ? '*' : ''}`,
                                         } }), fieldName in renderers ? (renderers[fieldName](register(fieldName), errors[fieldName], field)) : (_jsxs(_Fragment, { children: [_jsx(FormField, { register: register(fieldName), id: `${name}__${paramCase(fieldName)}`, schema: field, onInput: (event) => {
-                                                    fieldRefs.current[fieldName]?.classList.add("form__group--filled");
+                                                    fieldRefs.current[fieldName]?.classList.add('form__group--filled');
                                                 } }), fieldName in errors &&
                                                 renderErrorMessage(errors[fieldName], field)] }))] }) })) }, key));
                 }), renderSubmit()] })) }));
-});
-export default Form;
+}
+export default forwardRef(Form);

package/components/menu-toggle.d.ts

@@ -1,6 +1,6 @@
-import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from "react";
+import { ButtonHTMLAttributes, PropsWithChildren, ReactElement } from 'react';
 interface Props extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
-    "aria-controls": string;
+    'aria-controls': string;
     className?: string;
     label?: string;
     closeLabel?: string;

package/components/menu-toggle.js

@@ -1,28 +1,28 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useState, } from "react";
-import { NavContext } from "../context";
-import { Button } from "../components";
-import { extendClass } from "../utils";
-const MenuToggle = ({ "aria-controls": ariaControls, className = "", label = "Open Nav", closeLabel = "Close Nav", renderIcon = undefined, ...props }) => {
+import { useCallback, useContext, useEffect, useState, } from 'react';
+import { NavContext } from '../context';
+import { Button } from '../components';
+import { extendClass } from '../utils';
+const MenuToggle = ({ 'aria-controls': ariaControls, className = '', label = 'Open Nav', closeLabel = 'Close Nav', renderIcon = undefined, ...props }) => {
     const { navOpen, toggleNav } = useContext(NavContext);
-    const [icon, setIcon] = useState(navOpen ? "×" : "꠵");
+    const [icon, setIcon] = useState(navOpen ? '×' : '꠵');
     useEffect(() => {
         if (renderIcon) {
             setIcon(renderIcon(navOpen));
             return;
         }
-        setIcon(navOpen ? "×" : "꠵");
-    }, [navOpen]);
+        setIcon(navOpen ? '×' : '꠵');
+    }, [navOpen, renderIcon]);
     const handleClick = useCallback(() => {
         if (document &&
             document?.activeElement instanceof Element &&
-            "blur" in document?.activeElement) {
+            'blur' in document?.activeElement) {
             ;
             document.activeElement?.blur();
         }
         toggleNav();
     }, [toggleNav]);
-    return (_jsx(Button, { className: `menu-toggle ${className}`, onClick: handleClick, "aria-expanded": navOpen, "aria-controls": ariaControls, label_a11y: navOpen ? closeLabel : label, ...props, children: _jsx("span", { className: `menu-toggle__icon ${extendClass(className, "icon")}`, children: icon }) }));
+    return (_jsx(Button, { className: `menu-toggle ${className}`, onClick: handleClick, "aria-expanded": navOpen, "aria-controls": ariaControls, label_a11y: navOpen ? closeLabel : label, ...props, children: _jsx("span", { className: `menu-toggle__icon ${extendClass(className, 'icon')}`, children: icon }) }));
 };
 export default MenuToggle;

package/components/modal.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 interface Props {
     name: string;
     className?: string;

package/components/modal.js

@@ -1,8 +1,8 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef, useCallback, } from "react";
-import { local } from "../storage";
-import { useLockBodyScroll, useModal } from "../hooks";
+import { useState, useEffect, useRef, useCallback, } from 'react';
+import { local } from '../storage';
+import { useLockBodyScroll, useModal } from '../hooks';
 const Modal = ({ name, className, openAfter, dismissable = false, children, }) => {
     const [dismissed, setDismissed] = useState(false);
     const openTimer = useRef();
@@ -10,7 +10,7 @@ const Modal = ({ name, className, openAfter, dismissable = false, children, }) =
     useLockBodyScroll(isOpen);
     useEffect(() => {
         if (dismissable) {
-            setDismissed(local.getItem(`${name}-popup-dismissed`) === "true");
+            setDismissed(local.getItem(`${name}-popup-dismissed`) === 'true');
         }
     }, []);
     useEffect(() => {
@@ -24,7 +24,7 @@ const Modal = ({ name, className, openAfter, dismissable = false, children, }) =
     const close = useCallback(() => {
         closeModal();
         if (dismissable) {
-            local.setItem(`${name}-popup-dismissed`, "true");
+            local.setItem(`${name}-popup-dismissed`, 'true');
             setDismissed(true);
         }
     }, [name, closeModal]);

package/components.d.ts

@@ -1,13 +1,13 @@
 /**
  * Components
  */
-import BackToTop from "./components/back-to-top";
-import Button from "./components/button";
-import ContextWrapper from "./components/context-wrapper";
-import CookieBanner from "./components/cookie-banner";
-import Form from "./components/form";
-import MenuToggle from "./components/menu-toggle";
-import Modal from "./components/modal";
-import SkipTo from "./components/skip-to";
+import BackToTop from './components/back-to-top';
+import Button from './components/button';
+import ContextWrapper from './components/context-wrapper';
+import CookieBanner from './components/cookie-banner';
+import Form from './components/form';
+import MenuToggle from './components/menu-toggle';
+import Modal from './components/modal';
+import SkipTo from './components/skip-to';
 export { BackToTop, Button, ContextWrapper, CookieBanner, Form, MenuToggle, Modal, SkipTo, };
 //# sourceMappingURL=components.d.ts.map

package/components.js

@@ -1,12 +1,12 @@
 /**
  * Components
  */
-import BackToTop from "./components/back-to-top";
-import Button from "./components/button";
-import ContextWrapper from "./components/context-wrapper";
-import CookieBanner from "./components/cookie-banner";
-import Form from "./components/form";
-import MenuToggle from "./components/menu-toggle";
-import Modal from "./components/modal";
-import SkipTo from "./components/skip-to";
+import BackToTop from './components/back-to-top';
+import Button from './components/button';
+import ContextWrapper from './components/context-wrapper';
+import CookieBanner from './components/cookie-banner';
+import Form from './components/form';
+import MenuToggle from './components/menu-toggle';
+import Modal from './components/modal';
+import SkipTo from './components/skip-to';
 export { BackToTop, Button, ContextWrapper, CookieBanner, Form, MenuToggle, Modal, SkipTo, };

package/context/cookies-context-provider.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 export declare const CookiesContext: import("react").Context<{
     cookiesAccepted: boolean;
     setCookiesAccepted: (accepted: boolean) => void;

package/context/cookies-context-provider.js

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useEffect, useState, } from "react";
-import Cookies from "js-cookie";
+import { createContext, useCallback, useEffect, useState, } from 'react';
+import Cookies from 'js-cookie';
 export const CookiesContext = createContext({
     cookiesAccepted: false,
     setCookiesAccepted: (accepted) => { },
@@ -12,21 +12,21 @@ export const CookiesContextProvider = ({ children }) => {
     const [cookiesAccepted, setCookiesAcceptedStorage] = useState(false);
     const [trackingCookiesAccepted, setTrackingCookiesAcceptedStorage] = useState(false);
     useEffect(() => {
-        const accepted = Cookies.get("accepted-cookies") || false;
+        const accepted = Cookies.get('accepted-cookies') || false;
         setCookiesAcceptedStorage(!!accepted);
     }, [setCookiesAcceptedStorage]);
     useEffect(() => {
-        const accepted = Cookies.get("accepted-tracking-cookies") || false;
+        const accepted = Cookies.get('accepted-tracking-cookies') || false;
         setTrackingCookiesAcceptedStorage(!!accepted);
     }, [setTrackingCookiesAcceptedStorage]);
     const setCookiesAccepted = useCallback((accepted) => {
-        Cookies.set("accepted-cookies", accepted.toString(), {
+        Cookies.set('accepted-cookies', accepted.toString(), {
             expires: 30,
         });
         setCookiesAcceptedStorage(accepted);
     }, [setCookiesAcceptedStorage]);
     const setTrackingCookiesAccepted = useCallback((accepted) => {
-        Cookies.set("accepted-tracking-cookies", accepted.toString(), {
+        Cookies.set('accepted-tracking-cookies', accepted.toString(), {
             expires: 30,
         });
         setTrackingCookiesAcceptedStorage(accepted);

package/context/modal-context-provider.d.ts

@@ -1,4 +1,4 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
 export declare const ModalContext: import("react").Context<{
     openState: OpenState;
     isOpen: (name: string) => boolean;