@mariliz/ui-kit 0.0.0-stage → 0.6.0

package/README.md

@@ -1,3 +1,141 @@
-# Temporary Holding Version
+# Mariliz UI Kit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+![Componente React](./src/assets/react-component-libraries.webp)
+
+Biblioteca de componentes React construída sobre o [MUI](https://mui.com), com tema, tokens e componentes prontos para dashboards, sistemas B2B e aplicações públicas.
+
+## Instalação
+
+A biblioteca usa as mesmas instâncias de React, MUI e Emotion da sua aplicação, então elas são instaladas como dependências do projeto:
+
+```bash
+pnpm add @mariliz/ui-kit @mui/material @mui/x-data-grid @emotion/react @emotion/styled react-hook-form
+```
+
+A tipografia usa a fonte **Lato**, que precisa ser carregada pela aplicação (Google Fonts, `next/font`, `@fontsource/lato`…).
+
+## Uso
+
+Envolva a aplicação com o `Provider`:
+
+```tsx
+import { Provider, Button } from '@mariliz/ui-kit';
+
+export function App() {
+  return (
+    <Provider>
+      <Button variant="contained" onClick={() => {}}>
+        Salvar
+      </Button>
+    </Provider>
+  );
+}
+```
+
+O `Provider` aplica o tema e o `CssBaseline` do MUI. Se a aplicação já tiver o próprio reset de CSS, use `<Provider cssBaseline={false}>`.
+
+### Next.js (App Router)
+
+Use o entry `@mariliz/ui-kit/next`. Ele coleta os estilos no SSR e configura o `next/link` como componente de navegação de `Link`, `Button`, `Tab`, `ListItemButton` etc.
+
+```tsx
+// app/layout.tsx
+import { GlobalLayoutContainer } from '@mariliz/ui-kit/next';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return <GlobalLayoutContainer>{children}</GlobalLayoutContainer>;
+}
+```
+
+Se o layout já renderiza `<html>` e `<body>`, use `<ThemeRegistry>` no lugar do `GlobalLayoutContainer`. Para abas ligadas à rota atual, importe `TabBar` de `@mariliz/ui-kit/next`.
+
+### Outros roteadores (React Router, TanStack Router…)
+
+Os componentes de navegação aceitam `href` e usam o componente de link configurado no tema, seguindo o [padrão do MUI](https://mui.com/material-ui/integrations/routing/):
+
+```tsx
+import { Link as RouterLink } from 'react-router-dom';
+import { initializeTheme, Provider } from '@mariliz/ui-kit';
+
+const LinkBehavior = React.forwardRef<HTMLAnchorElement, any>(({ href, ...props }, ref) => (
+  <RouterLink ref={ref} to={href} {...props} />
+));
+
+const theme = initializeTheme({
+  overrides: {
+    components: {
+      MuiLink: { defaultProps: { component: LinkBehavior } },
+      MuiButtonBase: { defaultProps: { LinkComponent: LinkBehavior } }
+    }
+  }
+});
+
+<Provider theme={theme}>{/* ... */}</Provider>;
+```
+
+## Tema
+
+`initializeTheme` gera o tema com os tokens, a tipografia e os overrides da Mariliz:
+
+```tsx
+import { initializeTheme } from '@mariliz/ui-kit';
+
+// Modo escuro
+const dark = initializeTheme({ mode: 'dark' });
+
+// White-label: troque a identidade visual sem alterar componentes
+const brand = initializeTheme({
+  overrides: { palette: { primary: { main: '#7C3AED' } } }
+});
+
+// Textos internos do MUI em inglês (o padrão é pt-BR)
+const en = initializeTheme({ locales: [] });
+```
+
+Os temas prontos `light` e `dark` também são exportados.
+
+## Formulários
+
+`FormProvider` integra os campos `TextFormField`, `SelectFormField`, `CheckboxFormField` e `AutocompleteField` ao react-hook-form. A validação vem pela prop `resolver`, com a biblioteca de sua escolha (instale `@hookform/resolvers` e o validador, ex.: `zod`):
+
+```tsx
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormProvider, TextFormField, Button } from '@mariliz/ui-kit';
+
+<FormProvider resolver={zodResolver(schema)} defaultValues={{ nome: '' }} onSubmit={salvar}>
+  <>
+    <TextFormField name="nome" label="Nome" required />
+    <Button type="submit">Salvar</Button>
+  </>
+</FormProvider>;
+```
+
+As mensagens de erro aparecem no `helperText` do campo e são associadas ao input para leitores de tela.
+
+## Desenvolvimento
+
+| Comando | Descrição |
+| --- | --- |
+| `pnpm storybook` | Storybook em http://localhost:6006, com alternância de tema light/dark na toolbar |
+| `pnpm lint` | ESLint |
+| `pnpm typecheck` | Checagem de tipos |
+| `pnpm build` | Build da biblioteca em `dist/` |
+
+### Fluxo de Pull Request
+
+1. Faça as alterações e rode `pnpm changeset` para descrever a mudança (patch, minor ou major).
+2. Commite. O hook de pre-commit exige um changeset e roda lint e typecheck.
+3. Abra o PR. O workflow de CI roda lint, typecheck e os builds da biblioteca e do Storybook.
+
+### Publicação
+
+A publicação é feita pelo workflow `.github/workflows/release.yml` ao fazer merge na `master`:
+
+1. Com changesets pendentes, o workflow abre (ou atualiza) um PR **"chore: version packages"** com a nova versão e o CHANGELOG.
+2. Ao fazer merge desse PR, a nova versão é publicada no npm.
+
+O workflow usa **Trusted Publishing** (OIDC), então não há token do npm armazenado no repositório. Para ativar, configure uma vez no npm: _npmjs.com → pacote `@mariliz/ui-kit` → Settings → Trusted Publisher → GitHub Actions_, com o repositório e o workflow `release.yml`.
+
+## Licença
+
+MIT

package/dist/components/FormField/AutocompleteField.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useFormContext } from '../../contexts/formContext.js';
+import { getObjectPropertyValue } from '../../utils/helpers/methods/get-obj-prop-value.js';
+import 'react';
+import Autocomplete from '../UI/atoms/Autocomplete/Autocomplete.component.js';
+import '@mui/material';
+import '../UI/atoms/Checkbox/Checkbox.styled.js';
+import '../UI/atoms/MenuItem/MenuItem.component.js';
+import '../UI/atoms/SelectField/SelectField.styled.js';
+import '../UI/atoms/TabItem/TabItem.styled.js';
+import '../UI/atoms/TextField/TextField.styled.js';
+import 'clsx';
+import '../UI/molecules/Breadcrumb/Breadcrumb.styled.js';
+import '../UI/molecules/CardData/CardData.styled.js';
+import '../UI/molecules/TabBar/TabBar.styled.js';
+import '../UI/organisms/Modal/Modal.styled.js';
+import '../UI/organisms/DataTable/DataTable.styled.js';
+import '../UI/organisms/Drawer/Drawer.styled.js';
+import '../UI/organisms/Menu/Menu.component.js';
+
+function AutocompleteField(props) {
+    const { name, disabled } = props;
+    const { validationErrors, watch, setValue, readOnly } = useFormContext();
+    const onChange = (_, opt) => {
+        setValue(name, opt?.value, { shouldDirty: true });
+    };
+    const autoCompleteValue = { value: watch(name) };
+    const errorsMessage = validationErrors && getObjectPropertyValue(name, validationErrors)?.message;
+    return (jsx(Autocomplete, { disabled: disabled || readOnly, value: autoCompleteValue, ...props, error: !!errorsMessage || props.error, helperText: errorsMessage ?? props.helperText, onChange: onChange }));
+}
+
+export { AutocompleteField as default };
+//# sourceMappingURL=AutocompleteField.js.map

package/dist/components/FormField/AutocompleteField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutocompleteField.js","sources":["../../../src/components/FormField/AutocompleteField.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AASc;AACZ;AACA;AAEA;AACE;AACF;;AAGA;AAGA;AAUF;;"}

package/dist/components/FormField/CheckboxFormField.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FormHelperText } from '@mui/material';
+import { useId } from 'react';
+import { getObjectPropertyValue } from '../../utils/helpers/methods/get-obj-prop-value.js';
+import { useFormContext } from '../../contexts/formContext.js';
+import '../UI/atoms/TextField/TextField.styled.js';
+import '../UI/atoms/Autocomplete/Autocomplete.styled.js';
+import Checkbox from '../UI/atoms/Checkbox/Checkbox.component.js';
+import '../UI/atoms/MenuItem/MenuItem.component.js';
+import '../UI/atoms/SelectField/SelectField.styled.js';
+import '../UI/atoms/TabItem/TabItem.styled.js';
+import 'clsx';
+import '../UI/molecules/Breadcrumb/Breadcrumb.styled.js';
+import '../UI/molecules/CardData/CardData.styled.js';
+import '../UI/molecules/TabBar/TabBar.styled.js';
+import '../UI/organisms/Modal/Modal.styled.js';
+import '../UI/organisms/DataTable/DataTable.styled.js';
+import '../UI/organisms/Drawer/Drawer.styled.js';
+import '../UI/organisms/Menu/Menu.component.js';
+
+const CheckboxFormField = ({ label, ...props }) => {
+    const name = props.name;
+    const errorId = useId();
+    let value = undefined;
+    let { validationErrors, watch, setValue, readOnly } = useFormContext();
+    if (watch) {
+        value = watch(name);
+    }
+    const onChange = (e) => {
+        const newValue = e.target.checked;
+        setValue(name, newValue, { shouldDirty: true });
+    };
+    const errorsMessage = validationErrors && getObjectPropertyValue(name, validationErrors)?.message;
+    return (jsxs(Fragment, { children: [jsx(Checkbox, { label: label, onChange: onChange, checked: value === true, disabled: readOnly || props.disabled, slotProps: {
+                    input: {
+                        'aria-invalid': !!errorsMessage,
+                        'aria-describedby': errorsMessage ? errorId : undefined
+                    }
+                }, ...props }), !!errorsMessage && (jsx(FormHelperText, { id: errorId, error: true, sx: { mt: 0.5, typography: 'body1' }, children: errorsMessage }))] }));
+};
+
+export { CheckboxFormField as default };
+//# sourceMappingURL=CheckboxFormField.js.map

package/dist/components/FormField/CheckboxFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxFormField.js","sources":["../../../src/components/FormField/CheckboxFormField.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA;AACE;AACA;;AAEA;;AAGE;;AAGF;AACE;;AAEF;AAEA;AAGA;AAQQ;;;AAGC;AACF;AAUT;;"}

package/dist/components/FormField/SelectFormField.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useFormContext } from '../../contexts/formContext.js';
+import { getObjectPropertyValue } from '../../utils/helpers/methods/get-obj-prop-value.js';
+import { useId } from 'react';
+import { Box, InputAdornment, IconButton, FormHelperText } from '@mui/material';
+import { CancelIcon } from '../UI/icons/CancelIcon.js';
+import { SearchIcon } from '../UI/icons/SearchIcon.js';
+import '../UI/atoms/TextField/TextField.styled.js';
+import '../UI/atoms/Autocomplete/Autocomplete.styled.js';
+import '../UI/atoms/Checkbox/Checkbox.styled.js';
+import '../UI/atoms/MenuItem/MenuItem.component.js';
+import SelectField from '../UI/atoms/SelectField/SelectField.component.js';
+import '../UI/atoms/TabItem/TabItem.styled.js';
+import 'clsx';
+import '../UI/molecules/Breadcrumb/Breadcrumb.styled.js';
+import '../UI/molecules/CardData/CardData.styled.js';
+import '../UI/molecules/TabBar/TabBar.styled.js';
+import '../UI/organisms/Modal/Modal.styled.js';
+import '../UI/organisms/DataTable/DataTable.styled.js';
+import '../UI/organisms/Drawer/Drawer.styled.js';
+import '../UI/organisms/Menu/Menu.component.js';
+
+const SelectFormField = ({ options = [], required, label, showEndAdornment, showButtonClearValue, searchLabel = 'Pesquisar', clearLabel = 'Limpar', ...props }) => {
+    const name = props.name;
+    const errorId = useId();
+    const { validationErrors, setValue, watch, readOnly } = useFormContext();
+    const indexedOptions = options.map((option, index) => ({ label: option.label, value: index }));
+    const currentValue = watch ? watch(name) : undefined;
+    const selectedIndexes = props.multiple
+        ? options.flatMap((option, index) => (currentValue?.includes(option.value) ? [index] : []))
+        : options.findIndex((option) => option.value === currentValue);
+    const errorsMessage = validationErrors && getObjectPropertyValue(name, validationErrors)?.message;
+    const onChange = (event) => {
+        const selected = event.target?.value;
+        if (props.multiple) {
+            const indexes = selected ?? [];
+            setValue(name, indexes.map((index) => options[index]?.value), { shouldDirty: true });
+        }
+        else {
+            setValue(name, options[selected]?.value, { shouldDirty: true });
+        }
+    };
+    const hasValue = props.multiple
+        ? selectedIndexes.length > 0
+        : selectedIndexes !== -1;
+    return (jsxs(Box, { children: [jsx(SelectField, { id: name, label: label, required: required, endAdornment: jsxs(Fragment, { children: [showEndAdornment && (jsx(InputAdornment, { position: "end", sx: { marginRight: 1.5 }, children: jsx(IconButton, { type: "submit", "aria-label": searchLabel, children: jsx(SearchIcon, { sx: { width: 25, height: 25, color: 'neutral.medium' } }) }) })), showButtonClearValue && hasValue && !readOnly && (jsx(InputAdornment, { position: "end", sx: { marginRight: 1.5 }, children: jsx(IconButton, { onClick: () => setValue(name, null), "aria-label": clearLabel, children: jsx(CancelIcon, { sx: { width: 15, height: 15, color: 'neutral.medium' } }) }) }))] }), error: !!errorsMessage, onChange: onChange, options: indexedOptions, value: props.multiple ? selectedIndexes : hasValue ? selectedIndexes : '', disabled: !!readOnly, SelectDisplayProps: {
+                    'aria-describedby': errorsMessage ? errorId : undefined
+                }, ...props }), !!errorsMessage && (jsx(FormHelperText, { id: errorId, error: true, sx: { mt: 0.5, typography: 'body1' }, children: errorsMessage }))] }));
+};
+
+export { SelectFormField as default };
+//# sourceMappingURL=SelectFormField.js.map

package/dist/components/FormField/SelectFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectFormField.js","sources":["../../../src/components/FormField/SelectFormField.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAqDA;AAUE;AACA;AACA;;AAIA;AACA;AACE;AACA;AAEF;AAGA;AACE;AACA;AACE;;;;AAOA;;AAEJ;AAEA;AACE;AACA;AAEF;;AA+BO;AAUT;;"}

package/dist/components/FormField/TextFormField.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useFormContext } from '../../contexts/formContext.js';
+import { getObjectPropertyValue } from '../../utils/helpers/methods/get-obj-prop-value.js';
+import 'react';
+import { Controller } from 'react-hook-form';
+import '@mui/material';
+import TextField from '../UI/atoms/TextField/TextField.component.js';
+import '../UI/atoms/Autocomplete/Autocomplete.styled.js';
+import '../UI/atoms/Checkbox/Checkbox.styled.js';
+import '../UI/atoms/MenuItem/MenuItem.component.js';
+import '../UI/atoms/SelectField/SelectField.styled.js';
+import '../UI/atoms/TabItem/TabItem.styled.js';
+import 'clsx';
+import '../UI/molecules/Breadcrumb/Breadcrumb.styled.js';
+import '../UI/molecules/CardData/CardData.styled.js';
+import '../UI/molecules/TabBar/TabBar.styled.js';
+import '../UI/organisms/Modal/Modal.styled.js';
+import '../UI/organisms/DataTable/DataTable.styled.js';
+import '../UI/organisms/Drawer/Drawer.styled.js';
+import '../UI/organisms/Menu/Menu.component.js';
+
+const TextFormField = (props) => {
+    const { name, helperText, ...rest } = props;
+    const { control, validationErrors, readOnly } = useFormContext();
+    const errorsMessage = validationErrors && getObjectPropertyValue(name, validationErrors)?.message;
+    return (jsx(Controller, { name: name, control: control, render: ({ field: { ref, ...field } }) => (jsx(TextField, { ...field, value: field.value ?? '', inputRef: ref, disabled: readOnly || rest.disabled, ...rest, error: !!errorsMessage || rest.error, helperText: errorsMessage ?? helperText })) }));
+};
+
+export { TextFormField as default };
+//# sourceMappingURL=TextFormField.js.map

package/dist/components/FormField/TextFormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextFormField.js","sources":["../../../src/components/FormField/TextFormField.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAUA;;;AAIE;AAGA;AAiBF;;"}

package/dist/components/UI/atoms/Autocomplete/Autocomplete.component.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { CircularProgress, Typography, InputAdornment, IconButton } from '@mui/material';
+import { SearchIcon } from '../../icons/SearchIcon.js';
+import TextField from '../TextField/TextField.component.js';
+import { AutocompleteSkeleton } from './Autocomplete.skeleton.js';
+import { StyledAutocomplete } from './Autocomplete.styled.js';
+
+const Autocomplete = (props) => {
+    const { options = [], label, multiple = false, value, error, helperText, loading, link, endIconType, endIconLabel = 'Pesquisar', onChangeTextField, name, required, variant = 'outlined', sxTextField, skeleton = false, ...rest } = props;
+    const arrayValue = Array.isArray(value) && !!multiple ? value : !multiple ? value : [];
+    return (jsx(AutocompleteSkeleton, { skeleton: skeleton, children: jsx(StyledAutocomplete, { renderOption: renderOption, clearText: "Remover", loadingText: "Carregando", noOptionsText: "Nenhum registro encontrado", filterSelectedOptions: true, clearOnEscape: true, ...rest, loading: loading, options: options, multiple: multiple, disableCloseOnSelect: multiple, value: arrayValue, renderInput: (params) => (jsx(TextField, { variant: variant, error: error, helperText: helperText, ...params, sx: sxTextField, required: required, name: name, label: label, slotProps: {
+                    ...params.slotProps,
+                    input: {
+                        ...params.slotProps.input,
+                        endAdornment: (jsxs(Fragment, { children: [loading ? jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.slotProps.input.endAdornment, jsx(EndAdornment, { link: link, endIconType: endIconType, label: endIconLabel })] })),
+                        onChange: onChangeTextField
+                    }
+                } })) }) }));
+};
+const renderOption = (props, option) => {
+    const { label } = option;
+    return (jsx(Typography, { ...props, variant: "subtitle1", children: label }));
+};
+const searchIconSx = { display: 'inline-block', width: 21, height: 21 };
+const EndAdornment = ({ link = '', endIconType, label }) => {
+    if (!endIconType)
+        return null;
+    return (jsx(InputAdornment, { position: "end", sx: { pr: 0.5, justifyContent: 'center', mt: 0.2 }, children: endIconType === 'link' ? (jsx(IconButton, { href: link, "aria-label": label, size: "small", children: jsx(SearchIcon, { color: "primary", sx: searchIconSx }) })) : (jsx(IconButton, { type: "submit", "aria-label": label, size: "small", children: jsx(SearchIcon, { color: "primary", sx: searchIconSx }) })) }));
+};
+
+export { Autocomplete as default };
+//# sourceMappingURL=Autocomplete.component.js.map

package/dist/components/UI/atoms/Autocomplete/Autocomplete.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.component.js","sources":["../../../../../src/components/UI/atoms/Autocomplete/Autocomplete.component.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA4BA;;AAoBE;;;AA6BY;AACE;;AAQA;AACD;AACF;AAMb;AAIA;AACE;AACA;AAKF;AAEA;AAEA;AACE;AAAkB;AAElB;AAaF;;"}

package/dist/components/UI/atoms/Autocomplete/Autocomplete.skeleton.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Box, Skeleton } from '@mui/material';
+
+const AutocompleteSkeleton = ({ skeleton, children }) => {
+    if (!skeleton)
+        return jsx(Fragment, { children: children });
+    return (jsx(Box, { sx: { width: '100%' }, children: jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: {
+                borderRadius: '4px',
+                height: '56px'
+            } }) }));
+};
+
+export { AutocompleteSkeleton };
+//# sourceMappingURL=Autocomplete.skeleton.js.map

package/dist/components/UI/atoms/Autocomplete/Autocomplete.skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.skeleton.js","sources":["../../../../../src/components/UI/atoms/Autocomplete/Autocomplete.skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AASO;AAIL;;;AAQQ;AACA;;AAKV;;"}

package/dist/components/UI/atoms/Autocomplete/Autocomplete.styled.js

@@ -0,0 +1,30 @@
+"use client";
+import { styled, alpha } from '@mui/material/styles';
+import { Autocomplete } from '@mui/material';
+
+const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
+    '& .MuiFormLabel-root': {
+        color: theme.palette.neutral.medium
+    },
+    '& .MuiChip-label': {
+        fontSize: theme.typography.caption.fontSize ?? '1rem',
+        color: theme.palette.primary.main
+    },
+    '& .MuiChip-root': {
+        backgroundColor: alpha(theme.palette.primary.main, 0.12),
+        color: theme.palette.primary.main,
+        '& .MuiChip-deleteIcon': {
+            color: theme.palette.primary.main,
+            '&:hover': {
+                color: theme.palette.primary.main
+            }
+        }
+    },
+    '& .MuiOutlinedInput-root': {
+        paddingTop: '0px',
+        paddingBottom: '0px'
+    }
+}));
+
+export { StyledAutocomplete };
+//# sourceMappingURL=Autocomplete.styled.js.map

package/dist/components/UI/atoms/Autocomplete/Autocomplete.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.styled.js","sources":["../../../../../src/components/UI/atoms/Autocomplete/Autocomplete.styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIO;AACL;AACE;AACD;AACD;;AAEE;AACD;AACD;AACE;AACA;AACA;AACE;AAEA;AACE;AACD;AACF;AACF;AACD;AACE;AACA;AACD;AACF;;"}

package/dist/components/UI/atoms/Avatar/Avatar.component.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, Avatar as Avatar$1 } from '@mui/material';
+import Typography from '../Typography/Typography.component.js';
+import AvatarSkeleton from './Avatar.skeleton.js';
+
+function stringToColor(string) {
+    let hash = 0;
+    let i;
+    for (i = 0; i < string.length; i += 1) {
+        hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    let color = '#';
+    for (i = 0; i < 3; i += 1) {
+        const value = (hash >> (i * 8)) & 0xff;
+        color += `00${value.toString(16)}`.slice(-2);
+    }
+    return color;
+}
+function getInitials(name) {
+    return name
+        .split(' ')
+        .map((word) => word[0])
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
+}
+const Avatar = ({ imageSrc, title, subtitle, altText, showText, sx = {}, skeleton = false }) => {
+    const hasImage = !!imageSrc;
+    const initialsA11y = showText
+        ? { 'aria-hidden': true }
+        : { role: 'img', 'aria-label': altText || title };
+    return (jsx(AvatarSkeleton, { skeleton: skeleton, showText: showText, children: jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [jsx(Avatar$1, { src: imageSrc, alt: altText || title, ...(hasImage ? {} : initialsA11y), sx: [
+                        hasImage ? {} : (theme) => ({
+                            bgcolor: stringToColor(title),
+                            color: theme.palette.getContrastText(stringToColor(title))
+                        }),
+                        ...(Array.isArray(sx) ? sx : [sx])
+                    ], children: !hasImage && title ? getInitials(title) : undefined }), showText && (jsxs(Box, { sx: { ml: 2 }, children: [jsx(Typography, { variant: "subtitle2", children: title }), subtitle && (jsx(Typography, { variant: "body2", color: "textSecondary", children: subtitle }))] }))] }) }));
+};
+
+export { Avatar as default };
+//# sourceMappingURL=Avatar.component.js.map

package/dist/components/UI/atoms/Avatar/Avatar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.component.js","sources":["../../../../../src/components/UI/atoms/Avatar/Avatar.component.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;;AAEE;AAEA;AACE;;;AAIF;AACE;AACA;;AAGF;AACF;AAEA;AACE;;;AAGG;;AAEA;AACL;AAEA;AASE;;AAGE;AACA;;AAUQ;AACE;;;AAGF;AACD;AAiBX;;"}

package/dist/components/UI/atoms/Avatar/Avatar.skeleton.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Box, Skeleton } from '@mui/material';
+
+const AvatarSkeleton = ({ skeleton, showText = true, children }) => {
+    if (!skeleton)
+        return jsx(Fragment, { children: children });
+    return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [jsx(Skeleton, { variant: "circular", width: 40, height: 40 }), showText && (jsxs(Box, { sx: { ml: 2 }, children: [jsx(Skeleton, { variant: "text", width: 120, height: 20 }), jsx(Skeleton, { variant: "text", width: 80, height: 16 })] }))] }));
+};
+
+export { AvatarSkeleton as default };
+//# sourceMappingURL=Avatar.skeleton.js.map

package/dist/components/UI/atoms/Avatar/Avatar.skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.skeleton.js","sources":["../../../../../src/components/UI/atoms/Avatar/Avatar.skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;AAKE;;AAEA;AAYF;;"}

package/dist/components/UI/atoms/Button/Button.component.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Button as Button$1 } from '@mui/material';
+import ButtonSkeleton from './Button.skeleton.js';
+
+const Button = ({ skeleton = false, ...props }) => {
+    return (jsx(ButtonSkeleton, { skeleton: skeleton, fullWidth: props.fullWidth, children: jsx(Button$1, { "data-testid": props.name, ...props }) }));
+};
+
+export { Button as default };
+//# sourceMappingURL=Button.component.js.map

package/dist/components/UI/atoms/Button/Button.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.component.js","sources":["../../../../../src/components/UI/atoms/Button/Button.component.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAMA;;AAMA;;"}

package/dist/components/UI/atoms/Button/Button.skeleton.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Box, Skeleton } from '@mui/material';
+
+const ButtonSkeleton = ({ skeleton, children, fullWidth }) => {
+    if (!skeleton)
+        return jsx(Fragment, { children: children });
+    return (jsx(Box, { sx: {
+            display: 'inline-block',
+            borderRadius: '4px',
+            overflow: 'hidden'
+        }, children: jsx(Skeleton, { variant: "rectangular", animation: "wave", sx: {
+                height: 40,
+                width: fullWidth ? '100%' : 100
+            } }) }));
+};
+
+export { ButtonSkeleton as default };
+//# sourceMappingURL=Button.skeleton.js.map

package/dist/components/UI/atoms/Button/Button.skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.skeleton.js","sources":["../../../../../src/components/UI/atoms/Button/Button.skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAUA;AACE;;AAEA;AAGM;AACA;AACA;AACD;AAMG;;;AAMV;;"}

package/dist/components/UI/atoms/Checkbox/Checkbox.component.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { FormGroup } from '@mui/material';
+import { StyledFormControlLabel, StyledCheckbox } from './Checkbox.styled.js';
+import CheckboxSkeleton from './Checkbox.skeleton.js';
+
+const Checkbox = (props) => {
+    const { label, name, formControlSX, skeleton = false, ...rest } = props;
+    return (jsx(CheckboxSkeleton, { skeleton: skeleton, children: jsx(FormGroup, { children: jsx(StyledFormControlLabel, { sx: { ...formControlSX }, control: jsx(StyledCheckbox, { ...rest }), label: label, "data-testid": name, name: name }) }) }));
+};
+
+export { Checkbox as default };
+//# sourceMappingURL=Checkbox.component.js.map

package/dist/components/UI/atoms/Checkbox/Checkbox.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.component.js","sources":["../../../../../src/components/UI/atoms/Checkbox/Checkbox.component.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOA;AACE;AAEA;AAaF;;"}

package/dist/components/UI/atoms/Checkbox/Checkbox.skeleton.js

@@ -0,0 +1,15 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Box, Skeleton } from '@mui/material';
+
+const CheckboxSkeleton = ({ skeleton, children }) => {
+    if (!skeleton)
+        return jsx(Fragment, { children: children });
+    return (jsxs(Box, { sx: { display: 'flex', alignItems: 'center' }, children: [jsx(Skeleton, { variant: "rectangular", animation: "wave", width: 20, height: 20, sx: {
+                    marginRight: '8px',
+                    borderRadius: '6px'
+                } }), jsx(Skeleton, { variant: "text", animation: "wave", width: 100, height: 20 })] }));
+};
+
+export { CheckboxSkeleton as default };
+//# sourceMappingURL=Checkbox.skeleton.js.map

package/dist/components/UI/atoms/Checkbox/Checkbox.skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.skeleton.js","sources":["../../../../../src/components/UI/atoms/Checkbox/Checkbox.skeleton.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AASA;AACE;;AAEA;AAQQ;AACA;;AAMV;;"}

package/dist/components/UI/atoms/Checkbox/Checkbox.styled.js

@@ -0,0 +1,48 @@
+"use client";
+import { styled, alpha } from '@mui/material/styles';
+import { FormControlLabel, Checkbox } from '@mui/material';
+
+const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+    '& .MuiFormControlLabel-label': {
+        ...theme.typography.body2,
+        lineHeight: 1.2,
+        color: theme.palette?.neutral?.darkest,
+        '&.Mui-disabled': {
+            color: theme.palette?.neutral?.light
+        }
+    }
+}));
+const StyledCheckbox = styled(Checkbox)(({ theme, size }) => ({
+    padding: size === 'small' ? '6.675px' : '8px',
+    margin: size === 'small' ? '3px' : undefined,
+    color: theme.palette?.neutral?.dark,
+    '& .MuiSvgIcon-root': {
+        borderRadius: '6px',
+        fontSize: '24px',
+        '&.MuiSvgIcon-fontSizeSmall': {
+            fontSize: '18.67px'
+        }
+    },
+    '&.Mui-disabled': {
+        color: theme.palette?.neutral?.light
+    },
+    '&:not(.Mui-disabled)': {
+        '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+            '&.MuiCheckbox-colorPrimary': {
+                color: theme.palette?.primary?.main,
+                '&:hover': {
+                    backgroundColor: alpha(theme.palette?.secondary?.dark, 0.08)
+                }
+            },
+            '&.MuiCheckbox-colorSecondary': {
+                color: theme.palette?.error?.light,
+                '&:hover': {
+                    backgroundColor: alpha(theme.palette?.error?.light, 0.08)
+                }
+            }
+        }
+    }
+}));
+
+export { StyledCheckbox, StyledFormControlLabel };
+//# sourceMappingURL=Checkbox.styled.js.map

package/dist/components/UI/atoms/Checkbox/Checkbox.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.styled.js","sources":["../../../../../src/components/UI/atoms/Checkbox/Checkbox.styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAIO;AACL;AACE;AACA;AACA;AACA;AACE;AACD;AACF;AACF;AAEM;;;AAGL;AACA;AACE;AACA;AACA;AACE;AACD;AACF;AACD;AACE;AACD;AACD;AACE;AACE;AACE;AACA;AACE;AACD;AACF;AACD;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AACF;;"}

package/dist/components/UI/atoms/Divider/Divider.component.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Divider as Divider$1 } from '@mui/material';
+
+const Divider = ({ ...props }) => {
+    return jsx(Divider$1, { ...props });
+};
+
+export { Divider as default };
+//# sourceMappingURL=Divider.component.js.map

package/dist/components/UI/atoms/Divider/Divider.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.component.js","sources":["../../../../../src/components/UI/atoms/Divider/Divider.component.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAMA;AACE;AACF;;"}