@stack-spot/portal-components 0.0.17 → 1.0.0-dev.1768482754546

package/dist/components/error/ErrorFeedback.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, LinkBox, Text } from '@citric/core';
+import { listToClass, theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useState } from 'react';
+import { styled } from 'styled-components';
+import { Forbidden } from '../../svg/Forbidden.js';
+import { Logo } from '../../svg/Logo.js';
+import { NotFound } from '../../svg/NotFound.js';
+import { ServerError } from '../../svg/ServerError.js';
+import { Unauthenticated } from '../../svg/Unauthenticated.js';
+const imageStyle = {
+    width: '200px',
+    height: '200px',
+};
+const imageMap = {
+    401: _jsx(Unauthenticated, { style: imageStyle }),
+    403: _jsx(Forbidden, { style: imageStyle }),
+    404: _jsx(NotFound, { style: imageStyle }),
+};
+const FeedbackBox = styled.div `
+  background-color: ${theme.color.light[400]};
+  padding: 24px;
+  .content {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    &.row {
+      flex-direction: row;
+      gap: 40px;
+    }
+    &.column {
+      flex-direction: column;
+      .text-content {
+        align-items: center;
+      }
+    }
+    .text-content {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .buttons {
+      display: flex;
+      flex-direction: row;
+      gap: '10px';
+    }
+    .details {
+      background-color: ${theme.color.danger[500]};
+      color: ${theme.color.danger.contrastText};
+      padding: 12px;
+      border-radius: 5px;
+    }
+  }
+`;
+/**
+ * A box with an icon and an error message. This is used for giving error feedbacks to the user.
+ *
+ * If the application is in debug mode, a button is rendered to show the error message.
+ *
+ * @param options the error code, the error message and whether or not the application is in debug mode.
+ */
+export const ErrorFeedback = ({ code = 0, message, debug, title, body, image, action, description, help, direction = 'row', style, className }) => {
+    const t = useTranslate(dictionary);
+    const [showDetails, setShowDetails] = useState(false);
+    const shouldShowButtons = !!(action || (debug && message));
+    function renderBody() {
+        return typeof body === 'string' ? _jsx(Text, { appearance: "body1", colorScheme: "inverse", className: "description", children: body }) : body;
+    }
+    return (_jsx(FeedbackBox, { style: style, className: className, children: _jsxs("div", { className: listToClass(['content', direction]), children: [_jsx("div", { className: "image", children: image ?? imageMap[code] ?? _jsx(ServerError, { style: imageStyle }) }), _jsxs("div", { className: "text-content", children: [_jsx(LinkBox, { href: "/", className: "logo", children: _jsx(Logo, { style: { width: '130px', height: '30px' } }) }), _jsxs(Text, { appearance: "h4", mt: 5, colorScheme: "inverse", className: "title", children: [(code && !title) ? `${t.errorLabel} ${code}. ` : '', _jsx(Text, { appearance: "h4", as: "span", colorScheme: "light.700", children: title ?? t[`${code}.title`] })] }), body ? renderBody() : (_jsxs(_Fragment, { children: [_jsx(Text, { appearance: "body1", mt: 5, colorScheme: "inverse", className: "description", sx: {
+                                        maxWidth: '70ch',
+                                        whiteSpace: 'normal',
+                                        wordBreak: 'break-word',
+                                    }, children: description ?? t[`${code}.description`] }), _jsx(Text, { appearance: "body1", colorScheme: "light.700", className: "help", children: help ?? t[`${code}.help`] })] })), shouldShowButtons && (_jsxs("div", { className: "buttons", children: [action && (_jsx(Button, { colorScheme: "inverse", onClick: action.onClick, children: action.label })), debug && message && (_jsx(Button, { appearance: "outlined", colorScheme: "inverse", onClick: () => setShowDetails(v => !v), children: showDetails ? t.hideDetails : t.showDetails }))] })), showDetails && (_jsx("div", { className: "details", children: _jsx(Text, { appearance: "microtext1", children: message }) }))] })] }) }));
+};
+const dictionary = {
+    en: {
+        altLogo: 'Logo Stackspot',
+        '0.title': 'Something didn’t go as expected',
+        '0.description': 'This can happen from time to time. Try refreshing the page. If it still doesn’t work, reach out. We’re here to help.',
+        '401.title': 'You need a valid credential',
+        '401.description': 'We couldn’t verify your credentials. Check the link or log in with a different account to continue.',
+        '403.title': 'Access restricted to your organization',
+        '403.help': 'Log in with an account from your organization or request access from your Account Holder.',
+        '404.title': 'This resource is no longer available',
+        '404.description': 'It may have been moved or removed. You can try again or ask your organization’s Account Holder for a new link.',
+        '500.title': 'We\'re making some adjustments',
+        '500.description': 'Something unexpected happened on our side. It might just be a momentary glitch. Try refreshing later to pick up where you left off.',
+        showDetails: 'Show Details',
+        hideDetails: 'Hide Details',
+        errorLabel: 'Error',
+    },
+    pt: {
+        altLogo: 'Logo Stackspot',
+        '0.title': 'Algo saiu diferente do esperado',
+        '0.description': 'Isso pode acontecer de vez em quando. Tente recarregar a página. Se ainda não funcionar, chama a gente. Estamos por aqui para ajudar.',
+        '401.title': 'Você precisa de uma credencial válida',
+        '401.description': 'Não conseguimos confirmar suas credenciais. Verifique o link ou faça login com outra conta para continuar.',
+        '403.title': 'Acesso exclusivo da sua organização',
+        '403.help': 'Faça login com uma conta da sua organização ou peça acesso ao Account Holder.',
+        '404.title': 'Este recurso não está mais disponível',
+        '404.description': 'Ele pode ter sido movido ou removido. Você pode tentar de novo ou pedir um novo link ao Account Holder da sua organização.',
+        '500.title': 'Estamos ajustando o sistema',
+        '500.description': 'Algo inesperado aconteceu do nosso lado. Pode ser só por alguns instantes. Tente recarregar mais tarde para continuar de onde parou.',
+        showDetails: 'Ver Detalhes',
+        hideDetails: 'Esconder Detalhes',
+        errorLabel: 'Erro',
+    },
+};
+//# sourceMappingURL=ErrorFeedback.js.map

package/dist/components/error/ErrorFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorFeedback.js","sourceRoot":"","sources":["../../../src/components/error/ErrorFeedback.tsx"],"names":[],"mappings":"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"}

package/dist/components/error/NotFound.d.ts

@@ -0,0 +1,4 @@
+export declare const PageNotFound: ({ goHome }: {
+    goHome?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NotFound.d.ts.map

package/dist/components/error/NotFound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.d.ts","sourceRoot":"","sources":["../../../src/components/error/NotFound.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,GAAI,YAAY;IAAE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,4CAW/D,CAAA"}

package/dist/components/error/NotFound.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
+import { ErrorFeedback } from './ErrorFeedback.js';
+export const PageNotFound = ({ goHome }) => {
+    const t = useTranslate(dictionary);
+    return (_jsx(ErrorFeedback, { code: 404, action: goHome ? {
+            label: t.homePage,
+            onClick: goHome,
+        } : undefined }));
+};
+const dictionary = {
+    en: {
+        homePage: 'Home Page',
+    },
+    pt: {
+        homePage: 'Página Inicial',
+    },
+};
+//# sourceMappingURL=NotFound.js.map

package/dist/components/error/NotFound.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFound.js","sourceRoot":"","sources":["../../../src/components/error/NotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,MAAM,EAA2B,EAAE,EAAE;IAClE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,OAAO,CACL,KAAC,aAAa,IACZ,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;YACf,KAAK,EAAE,CAAC,CAAC,QAAQ;YACjB,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC,CAAC,SAAS,GACb,CACH,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,QAAQ,EAAE,WAAW;KACtB;IACD,EAAE,EAAE;QACF,QAAQ,EAAE,gBAAgB;KAC3B;CACmB,CAAA"}

package/dist/components/error/UnderMaintenance.d.ts

@@ -0,0 +1,4 @@
+export declare const UnderMaintenance: ({ refresh }: {
+    refresh?: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UnderMaintenance.d.ts.map

package/dist/components/error/UnderMaintenance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderMaintenance.d.ts","sourceRoot":"","sources":["../../../src/components/error/UnderMaintenance.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,gBAAgB,GAAI,aAAa;IAAE,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,4CAWrE,CAAA"}

package/dist/components/error/UnderMaintenance.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
+import { ErrorFeedback } from './ErrorFeedback.js';
+export const UnderMaintenance = ({ refresh }) => {
+    const t = useTranslate(dictionary);
+    return _jsx(ErrorFeedback, { title: t.underMaintenance, description: t.underMaintenanceDescription, help: t.underMaintenanceHelp, action: refresh ? {
+            label: t.refresh,
+            onClick: refresh,
+        } : undefined });
+};
+const dictionary = {
+    en: {
+        underMaintenance: 'Under maintenance',
+        underMaintenanceDescription: 'The site is currently undergoing maintenance.',
+        underMaintenanceHelp: 'Please, try again in a few minutes.',
+        refresh: 'Refresh page',
+    },
+    pt: {
+        underMaintenance: 'Em manutenção',
+        underMaintenanceDescription: 'O site está em manutenção.',
+        underMaintenanceHelp: 'Por favor, tente novamente em alguns minutos.',
+        refresh: 'Atualizar página',
+    },
+};
+//# sourceMappingURL=UnderMaintenance.js.map

package/dist/components/error/UnderMaintenance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnderMaintenance.js","sourceRoot":"","sources":["../../../src/components/error/UnderMaintenance.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAAE,OAAO,EAA4B,EAAE,EAAE;IACxE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAClC,OAAO,KAAC,aAAa,IACnB,KAAK,EAAE,CAAC,CAAC,gBAAgB,EACzB,WAAW,EAAE,CAAC,CAAC,2BAA2B,EAC1C,IAAI,EAAE,CAAC,CAAC,oBAAoB,EAC5B,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;YAChB,KAAK,EAAE,CAAC,CAAC,OAAO;YAChB,OAAO,EAAE,OAAO;SACjB,CAAC,CAAC,CAAC,SAAS,GACb,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,gBAAgB,EAAE,mBAAmB;QACrC,2BAA2B,EAAE,+CAA+C;QAC5E,oBAAoB,EAAE,qCAAqC;QAC3D,OAAO,EAAE,cAAc;KACxB;IACD,EAAE,EAAE;QACF,gBAAgB,EAAE,eAAe;QACjC,2BAA2B,EAAE,4BAA4B;QACzD,oBAAoB,EAAE,+CAA+C;QACrE,OAAO,EAAE,kBAAkB;KAC5B;CACmB,CAAA"}

package/dist/components/error/index.d.ts

@@ -0,0 +1,4 @@
+export { ErrorDescription, ErrorFeedback } from './ErrorFeedback.js';
+export { PageNotFound } from './NotFound.js';
+export { UnderMaintenance } from './UnderMaintenance.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/error/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/error/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/error/index.js

@@ -0,0 +1,4 @@
+export { ErrorFeedback } from './ErrorFeedback.js';
+export { PageNotFound } from './NotFound.js';
+export { UnderMaintenance } from './UnderMaintenance.js';
+//# sourceMappingURL=index.js.map

package/dist/components/error/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/error/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/form/Form/Form.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface FormProps {
+    id?: string;
+    name: string;
+    defaultValues?: FieldValues;
+    autoComplete?: HTMLInputElement['autocomplete'];
+    children?: ReactNode;
+    onSubmit?: (params: FieldValues) => unknown;
+    form?: UseFormReturn<any, any>;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Form/Form.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,EAAE,WAAW,EAAgB,aAAa,EAA2B,MAAM,iBAAiB,CAAA;AAEnG,MAAM,WAAW,SAAS;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,YAAY,CAAC,EAAE,gBAAgB,CAAC,cAAc,CAAC,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,OAAO,CAAC;IAC5C,IAAI,CAAC,EAAE,aAAa,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA4ED,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,4CASpC,CAAA"}

package/dist/components/form/Form/Form.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { get } from 'lodash';
+import { FormProvider, useForm, useFormContext } from 'react-hook-form';
+function handleGraphqlErrors(error, methods) {
+    const errors = get(error, 'cause.extensions.fields');
+    if (errors) {
+        Object.keys(errors).forEach((key) => {
+            if (Object.keys(methods.control._fields).includes(key)) {
+                methods.setError(key, { type: 'server', message: errors[`${key}`] });
+            }
+        });
+    }
+}
+const handleFormSubmit = async (data, methods, onSubmit) => {
+    if (!onSubmit) {
+        return;
+    }
+    const result = methods.handleSubmit(onSubmit)(data);
+    const isPromise = result instanceof Promise;
+    if (!isPromise) {
+        return result;
+    }
+    try {
+        return await result;
+    }
+    catch (error) {
+        const isGraphqlError = error.message === 'GraphqlError';
+        if (!isGraphqlError) {
+            throw error;
+        }
+        handleGraphqlErrors(error, methods);
+    }
+};
+const BasicForm = ({ onSubmit, id, name, children, methods, autoComplete, ...props }) => (_jsx("form", { id: id, autoComplete: autoComplete, name: name, onSubmit: (data) => handleFormSubmit(data, methods, onSubmit), noValidate: true, style: props.style, className: props.className, children: children }));
+const FormWithProvider = (props) => {
+    const methods = useForm({ defaultValues: props.defaultValues });
+    const form = props.form || methods;
+    return (_jsx(FormProvider, { ...form, children: _jsx(BasicForm, { ...props, methods: form }) }));
+};
+export const Form = (props) => {
+    const useFormMethods = useFormContext();
+    const hasFormProvider = !!useFormMethods;
+    if (hasFormProvider) {
+        return _jsx(BasicForm, { ...props, methods: useFormMethods });
+    }
+    return _jsx(FormWithProvider, { ...props });
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/form/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../../src/components/form/Form/Form.tsx"],"names":[],"mappings":"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"}

package/dist/components/form/Form/FormGroup.d.ts

@@ -0,0 +1,37 @@
+import { SxProperties } from '@citric/core/dist/sx.js';
+import { Tooltip } from '@citric/ui';
+import { ChangeEvent, ComponentProps, ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from 'react';
+import { RegisterOptions } from 'react-hook-form';
+interface FormGroupProps<T extends ElementType> {
+    fieldAddonAfter?: ReactNode;
+    fieldAddonBefore?: ReactNode;
+    formHelper?: ReactNode;
+    name: string;
+    id?: string;
+    component?: T;
+    label?: string | ReactElement;
+    registerOptions?: RegisterOptions;
+    formItemSx?: SxProperties;
+    formGroupSx?: SxProperties;
+    componentSx?: SxProperties;
+    fieldAddonBeforeSx?: SxProperties;
+    fieldAddonAfterSx?: SxProperties;
+    $formName?: string;
+    required?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>) => void;
+    tooltipProps?: Omit<ComponentProps<typeof Tooltip>, 'children'>;
+    readOnly?: boolean;
+    disabled?: boolean;
+    standalone?: boolean;
+    delay?: number;
+    hideRequiredSymbol?: boolean;
+    shouldUnregister?: boolean;
+}
+type Props<T extends ElementType> = FormGroupProps<T> & Omit<ComponentPropsWithoutRef<T>, keyof FormGroupProps<T>>;
+export declare const FormGroup: <T extends ElementType>({ fieldAddonAfter, fieldAddonBefore, formHelper, id, name, component, label, registerOptions, formGroupSx, formItemSx, componentSx, disabled, readOnly, onChange, tooltipProps, required, colorScheme: propColorScheme, fieldAddonBeforeSx, fieldAddonAfterSx, standalone, delay, hideRequiredSymbol, shouldUnregister, ...props }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormItemError: ({ name, id }: {
+    name: string;
+    id: string;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=FormGroup.d.ts.map

package/dist/components/form/Form/FormGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Form/FormGroup.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,OAAO,EAAgD,OAAO,EAAE,MAAM,YAAY,CAAA;AAGlF,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,wBAAwB,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAC9H,OAAO,EAA0B,eAAe,EAA0E,MAAM,iBAAiB,CAAA;AA2BjJ,UAAU,cAAc,CAAC,CAAC,SAAS,WAAW;IAC5C,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B,kBAAkB,CAAC,EAAE,YAAY,CAAC;IAClC,iBAAiB,CAAC,EAAE,YAAY,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3F,YAAY,CAAC,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EAAE,UAAU,CAAC,CAAC;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,KAAK,KAAK,CAAC,CAAC,SAAS,WAAW,IAAI,cAAc,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,cAAc,CAAC,CAAC,CAAC,CAAC,CAAA;AAElH,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,oUAyB9C,KAAK,CAAC,CAAC,CAAC,4CA8FV,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,cAAc;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,mDAoBvE,CAAA"}

package/dist/components/form/Form/FormGroup.js

@@ -0,0 +1,72 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex, IconBox, Input, Label } from '@citric/core';
+import { InfoCircle, TimesCircle } from '@citric/icons';
+import { FieldAddon, FieldGroup, FormHelper, FormItem, Tooltip } from '@citric/ui';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { debounce, get } from 'lodash';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+const registerFieldWithDebounceChangeValidation = (name, delay, trigger, register, options) => {
+    const useFormRegisterReturn = register(name, options);
+    const { onChange } = useFormRegisterReturn;
+    const debouncedValidate = debounce(() => {
+        trigger(name);
+    }, delay);
+    const debouncedChange = debounce((event) => {
+        onChange?.(event);
+    }, delay);
+    return {
+        ...useFormRegisterReturn,
+        onChange: (e) => {
+            debouncedChange(e);
+            debouncedValidate();
+        },
+    };
+};
+export const FormGroup = ({ fieldAddonAfter, fieldAddonBefore, formHelper, id, name, component, label, registerOptions = {}, formGroupSx = {}, formItemSx = {}, componentSx = {}, disabled, readOnly, onChange, tooltipProps, required, colorScheme: propColorScheme, fieldAddonBeforeSx, fieldAddonAfterSx, standalone, delay, hideRequiredSymbol, shouldUnregister = false, ...props }) => {
+    const t = useTranslate(dictionary);
+    const { register, getFieldState, trigger, unregister } = useFormContext();
+    const Component = component || Input;
+    const colorScheme = propColorScheme;
+    let formRegistry = {};
+    if (!standalone) {
+        const options = {
+            onChange,
+            required: { message: hideRequiredSymbol ? t.requiredTest : t.required, value: !!required }, validate: (value) => {
+                if (required && typeof value === 'string') {
+                    return !!value?.trim();
+                }
+            },
+            ...registerOptions,
+        };
+        formRegistry = delay ? registerFieldWithDebounceChangeValidation(name, delay, trigger, register, options) : register(name, options);
+    }
+    useEffect(() => () => {
+        shouldUnregister && unregister(name);
+    }, [name, unregister]);
+    return (_jsxs(FormItem, { sx: formItemSx, children: [label && (_jsxs(Flex, { children: [_jsxs(Label, { appearance: "body2", htmlFor: id || name, sx: { pointerEvents: disabled || readOnly ? 'none' : undefined }, children: [label, "\u00A0", required && !hideRequiredSymbol && '*'] }), tooltipProps?.text && (_jsx(Tooltip, { ...tooltipProps, children: _jsx(IconBox, { children: _jsx(InfoCircle, {}) }) }))] })), !fieldAddonBefore && !fieldAddonAfter ? (_jsx(Component, { id: id || name, disabled: disabled, readOnly: readOnly, ...props, colorScheme, ...formRegistry, required: required, sx: componentSx, "aria-errormessage": `err${(id || name)}`, "aria-invalid": getFieldState(name).invalid })) : (_jsxs(FieldGroup, { sx: formGroupSx, children: [fieldAddonBefore && (_jsx(FieldAddon, { sx: { borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonBeforeSx }, children: fieldAddonBefore })), _jsx(Component, { disabled: disabled, readOnly: readOnly, id: id || name, ...props, colorScheme, ...formRegistry, required: required, sx: componentSx, "aria-errormessage": `err${(id || name)}`, "aria-invalid": getFieldState(name).invalid }), fieldAddonAfter && (_jsx(FieldAddon, { sx: { borderColor: colorScheme ? colorScheme : 'light.600', ...fieldAddonAfterSx }, children: fieldAddonAfter }))] })), _jsx(FormItemError, { name: name, id: id || name }), formHelper && (_jsx(Box, { mt: "2", children: _jsx(FormHelper, { children: formHelper }) }))] }));
+};
+export const FormItemError = ({ name, id }) => {
+    const t = useTranslate(dictionary);
+    const { formState } = useFormContext();
+    const formItemError = get(formState.errors, name);
+    if (formItemError) {
+        return (_jsxs(Flex, { alignItems: "center", flexWrap: "nowrap", children: [_jsx(IconBox, { size: "xs", appearance: "circle", colorIcon: "danger", colorBg: "danger.500", children: _jsx(TimesCircle, {}) }), _jsx(Box, { ml: "3", children: _jsx(FormHelper, { colorScheme: "danger", "aria-live": "assertive", id: `err${id}`, children: formItemError.message?.toString() || formItemError?.root?.message?.toString() || t.invalidGenericError }) })] }));
+    }
+    return null;
+};
+const dictionary = {
+    en: {
+        invalidGenericError: 'Invalid field',
+        required: 'Required field',
+        // text for tests of usability
+        requiredTest: 'Fill in the required field to continue.',
+    },
+    pt: {
+        invalidGenericError: 'Campo inválido',
+        required: 'Campo obrigatório',
+        // text for tests of usability
+        requiredTest: 'Preencha este campo obrigatório para continuar.',
+    },
+};
+//# sourceMappingURL=FormGroup.js.map

package/dist/components/form/Form/FormGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.js","sourceRoot":"","sources":["../../../../src/components/form/Form/FormGroup.tsx"],"names":[],"mappings":"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"}

package/dist/components/form/Form/index.d.ts

@@ -0,0 +1,3 @@
+export { FormGroup } from './FormGroup.js';
+export { Form } from './Form.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form/Form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/form/Form/index.js

@@ -0,0 +1,3 @@
+export { FormGroup } from './FormGroup.js';
+export { Form } from './Form.js';
+//# sourceMappingURL=index.js.map

package/dist/components/form/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/form/Form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA"}

package/dist/components/form/SearchInput.d.ts

@@ -0,0 +1,9 @@
+export declare const SearchInput: ({ searchText, defaultValue, disabled, onChange, style, className, }: {
+    searchText: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    onChange: (value?: string) => void;
+    style?: React.CSSProperties;
+    className?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/components/form/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../../src/components/form/SearchInput.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,GAAI,qEAOzB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,4CAsCA,CAAA"}

package/dist/components/form/SearchInput.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconBox, Input } from '@citric/core';
+import { Filter, Times } from '@citric/icons';
+import { FieldAddon, FieldGroup, IconButton } from '@citric/ui';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { debounce } from 'lodash';
+import { useCallback, useState } from 'react';
+export const SearchInput = ({ searchText, defaultValue, disabled = false, onChange, style, className, }) => {
+    const [value, setValue] = useState(defaultValue);
+    const runOnChange = useCallback(debounce(onChange, 800), [onChange]);
+    const t = useTranslate(dictionary);
+    return (_jsxs(Box, { sx: { position: 'relative' }, style: style, className: className, children: [_jsxs(FieldGroup, { children: [_jsx(FieldAddon, { children: _jsx(IconBox, { size: "xs", colorIcon: "light.700", children: _jsx(Filter, {}) }) }), _jsx(Input, { value: value, placeholder: searchText, onChange: (e) => {
+                            setValue(e.target.value);
+                            runOnChange(e.target.value);
+                        }, disabled: disabled, maxLength: 255 })] }), !!value && (_jsx(IconButton, { sx: { position: 'absolute', right: '20px', top: '50%', transform: 'translate(50%, -50%)' }, onClick: () => {
+                    setValue('');
+                    runOnChange('');
+                }, "aria-label": t.ariaClearField, children: _jsx(Times, {}) }))] }));
+};
+const dictionary = {
+    en: {
+        ariaClearField: 'Clear field',
+    },
+    pt: {
+        ariaClearField: 'Limpar campo',
+    },
+};
+//# sourceMappingURL=SearchInput.js.map

package/dist/components/form/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/components/form/SearchInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC/D,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AACjC,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE7C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,UAAU,EACV,YAAY,EACZ,QAAQ,GAAG,KAAK,EAChB,QAAQ,EACR,KAAK,EACL,SAAS,GAQV,EAAE,EAAE;IACH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,YAAY,CAAC,CAAA;IAChD,MAAM,WAAW,GAAG,WAAW,CAAC,QAAQ,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IACpE,MAAM,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAA;IAElC,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,aACnE,MAAC,UAAU,eACT,KAAC,UAAU,cACT,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,YACtC,KAAC,MAAM,KAAG,GACF,GACC,EACb,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,UAAU,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;4BACd,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;4BACxB,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;wBAC7B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,GACd,IACS,EACZ,CAAC,CAAC,KAAK,IAAI,CACV,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,sBAAsB,EAAE,EAC1F,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC,EAAE,CAAC,CAAA;oBACZ,WAAW,CAAC,EAAE,CAAC,CAAA;gBACjB,CAAC,gBACW,CAAC,CAAC,cAAc,YAE5B,KAAC,KAAK,KAAG,GACE,CACd,IACG,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,EAAE,EAAE;QACF,cAAc,EAAE,aAAa;KAC9B;IACD,EAAE,EAAE;QACF,cAAc,EAAE,cAAc;KAC/B;CACmB,CAAA"}

package/dist/components/form/Select/CustomSelect.d.ts

@@ -0,0 +1,81 @@
+import { CustomSelectProps } from './types.js';
+/**
+ * Renders a Select component using the Citric Design System.
+ *
+ * The styled version of the select component is rendered on top of the default select from the browser. Visual users will use the Citric
+ * version of a Select, but blind users, who interacts with the keyboard, will use the default browser select instead, which is already
+ * highly optimized for accessibility.
+ *
+ * The CustomSelect lets you customize how each option and the selected value are rendered. To do so, use the prop `renderLabel` and
+ * `emptyOption`.
+ *
+ * If you don't need fully customized labels, check the more simple components: `DetailedSelect` and `Select`.
+ *
+ * The CustomSelect expects a {@link GenericAccessibleLabel} to create labels.
+ *
+ * Tips:
+ * - This is a controlled field. You can't use it any other way. If you're using it with react-hook-form, you need to wrap it under the
+ * component `<Controller>` from the same library.
+ * - `value` is required and must be of the same type of an item of the array of options. `value` is only optional if `emptyOption` is
+ * provided, in this case, an empty option is rendered and the value is undefined when it's selected.
+ * - A consequence of the previous rule is that you can't have an empty selection if you don't set a value for `emptyOption`. This
+ * component must work exactly like the browser's `select`, so this behavior is intended.
+ * - If `renderLabel` or `renderValue` are not provided, this will use the `toString` method of the object.
+ *
+ * @example
+ * options as an object array
+ * ```
+ * const options = ['option 1', 'option 2', 'option 3']
+ *
+ * function renderCustomLabel(option: string) {
+ *   return {
+ *     // this is how the option will be rendered in the list
+ *     option: (
+ *       <div style={{ display: flex, flexDirection: 'row', gap: '5px' }}>
+ *         <img src="/my-image.png" width="40px" height="40px" />
+ *         <p>An option called {option}</p>
+ *       </div>
+ *     ),
+ *     // this is how the option will be rendered inside the input, when it's the value currently selected.
+ *     selected: <p>{option}</p>,
+ *     // this a string representation of the option: used for accessibility. This should contain the same information as `option`.
+ *     text: `An option called ${option}`,
+ *   )
+ * }
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   return <CustomSelect options={options} value={value} onChange={setValue} renderLabel={renderCustomLabel} />
+ * }
+ * ```
+ * @example
+ * options as an object array
+ * ```
+ * const options = [{ id: 1, name: 'John', age: 34 }, { id: 2, name: 'Marcia', age: 28 }, { id: 3, name: 'Angeline', age: 58 }]
+ *
+ * function renderCustomLabel(option: (typeof options)[number]) {
+ *   return {
+ *     // this is how the option will be rendered in the list
+ *     option: (
+ *       <div style={{ display: flex, flexDirection: 'row', gap: '5px' }}>
+ *         <img src="/my-image.png" width="40px" height="40px" />
+ *         <p>{option.name}, aged {option.age}</p>
+ *       </div>
+ *     ),
+ *     // this is how the option will be rendered inside the input, when it's the value currently selected.
+ *     selected: <p>{option}</p>,
+ *     // this a string representation of the option: used for accessibility. This should contain the same information as `option`.
+ *     text: `${option.name}, aged ${option.age}`,
+ *   )
+ * }
+ *
+ * const MyComponent = {
+ *   const [value, setValue] = useState(options[0])
+ *   // below, renderValue could be `o => o.id`
+ *   return <CustomSelect options={options} value={value} onChange={setValue} renderValue="id" renderLabel={renderCustomLabel} />
+ * }
+ * ```
+ * @param props the component props: {@link CustomSelectProps}.
+ */
+export declare function CustomSelect<T>({ onChange, options, value, emptyOption, renderLabel, renderValue, maxItems, onFocus, onBlur, style, className, isLoading, disabled, height, ...props }: CustomSelectProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CustomSelect.d.ts.map

package/dist/components/form/Select/CustomSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomSelect.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Select/CustomSelect.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,iBAAiB,EAAqC,MAAM,SAAS,CAAA;AAkC9E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6EG;AACH,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAC9B,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,QAAY,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EACrI,MAAe,EAAE,GAAG,KAAK,EAC1B,EAAE,iBAAiB,CAAC,CAAC,CAAC,2CA6GtB"}