@zidsa/zidmui 2.0.2 → 2.1.0

package/README.md

@@ -24,7 +24,7 @@ pnpm add @zidsa/zidmui
 ### Peer dependencies
 
 ```sh
-pnpm add @mui/material @mui/lab react react-dom react-hook-form use-debounce
+pnpm add @zidsa/zidmui react react-dom use-debounce @mui/material @mui/lab @emotion/styled
 ```
 
 ## Documentation

package/dist/react/cjs/components/app-checkbox.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const AppCheckbox = ({
+  label = "",
+  labelProps,
+  name = "",
+  checked,
+  disabled = false,
+  onChange = () => {
+  },
+  checkboxProps
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.FormControlLabel,
+    {
+      label,
+      disabled,
+      control: /* @__PURE__ */ jsxRuntime.jsx(
+        AppCheckboxStyled,
+        {
+          name,
+          checked,
+          disabled,
+          onChange,
+          ...checkboxProps
+        }
+      ),
+      ...labelProps
+    }
+  );
+};
+const AppCheckboxStyled = material.styled(material.Checkbox)(({ theme }) => ({
+  paddingInlineStart: 0,
+  paddingInlineEnd: theme.spacing(0.5),
+  "> svg": {
+    width: theme.spacing(2.5),
+    height: theme.spacing(2.5)
+  }
+}));
+exports.AppCheckbox = AppCheckbox;
+//# sourceMappingURL=app-checkbox.js.map

package/dist/react/cjs/components/app-checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-checkbox.js","sources":["../../../../src/components/app-checkbox.tsx"],"sourcesContent":["import {\n  Checkbox,\n  type CheckboxProps,\n  FormControlLabel,\n  type FormControlLabelProps,\n  styled,\n} from '@mui/material';\n\n//\n//\n\nexport interface AppCheckboxProps {\n  label?: string | React.ReactNode;\n  labelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;\n  name?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  onChange?: CheckboxProps['onChange'];\n  checkboxProps?: Omit<CheckboxProps, 'checked' | 'onChange' | 'name' | 'disabled'>;\n}\n\nexport const AppCheckbox: React.FC<AppCheckboxProps> = ({\n  label = '',\n  labelProps,\n  name = '',\n  checked,\n  disabled = false,\n  onChange = () => {},\n  checkboxProps,\n}) => {\n  return (\n    <FormControlLabel\n      label={label}\n      disabled={disabled}\n      control={\n        <AppCheckboxStyled\n          name={name}\n          checked={checked}\n          disabled={disabled}\n          onChange={onChange}\n          {...checkboxProps}\n        />\n      }\n      {...labelProps}\n    />\n  );\n};\n\n//\n\nconst AppCheckboxStyled = styled(Checkbox)(({ theme }) => ({\n  paddingInlineStart: 0,\n  paddingInlineEnd: theme.spacing(0.5),\n  '> svg': {\n    width: theme.spacing(2.5),\n    height: theme.spacing(2.5),\n  },\n}));\n"],"names":["jsx","FormControlLabel","styled","Checkbox"],"mappings":";;;;AAqBO,MAAM,cAA0C,CAAC;AAAA,EACtD,QAAQ;AAAA,EACR;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,WAAW;AAAA,EACX,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB;AACF,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,SACED,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG;AAAA,QAAA;AAAA,MAAA;AAAA,MAGP,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAIA,MAAM,oBAAoBE,SAAAA,OAAOC,SAAAA,QAAQ,EAAE,CAAC,EAAE,aAAa;AAAA,EACzD,oBAAoB;AAAA,EACpB,kBAAkB,MAAM,QAAQ,GAAG;AAAA,EACnC,SAAS;AAAA,IACP,OAAO,MAAM,QAAQ,GAAG;AAAA,IACxB,QAAQ,MAAM,QAAQ,GAAG;AAAA,EAAA;AAE7B,EAAE;;"}

package/dist/react/cjs/components/app-dialog-with-features.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appDialog = require("./app-dialog.js");
+const appInputBaseSearch = require("./app-input-base-search.js");
+const appPagination = require("./app-pagination.js");
+const stackColumn = require("./stack-column.js");
+const stackRow = require("./stack-row.js");
+const AppDialogWithFeatures = ({
+  open,
+  onClose,
+  search,
+  onSearchChange,
+  title,
+  searchProps,
+  pagination,
+  children,
+  isLoading,
+  contentProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    appDialog.AppDialog,
+    {
+      open,
+      onClose,
+      title,
+      fullWidth: true,
+      dialogContentProps: { sx: { overflow: "hidden" } },
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Content, { children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { width: "100%", height: 160, alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, {}) }),
+        !isLoading && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          (search || onSearchChange) && /* @__PURE__ */ jsxRuntime.jsx(
+            SearchInput,
+            {
+              fullWidth: true,
+              value: search,
+              onChange: (e) => onSearchChange?.(e.target.value),
+              name: "search",
+              size: "small",
+              ...searchProps
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(stackColumn.StackColumn, { gap: 2, maxHeight: "500px", overflow: "auto", ...contentProps, children }),
+          pagination && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { alignItems: "center", justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            appPagination.AppPagination,
+            {
+              size: "medium",
+              count: pagination.count,
+              page: pagination.page,
+              onChange: pagination.onChange
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+};
+const SearchInput = material.styled(appInputBaseSearch.AppInputBaseSearch)(({ theme }) => ({
+  marginTop: 0,
+  ".MuiInputBase-root": {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    fieldset: {
+      borderRadius: theme.spacing(40),
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2)
+    },
+    input: { paddingLeft: theme.spacing(1) }
+  },
+  ".MuiInputAdornment-root": {
+    marginLeft: theme.spacing(0),
+    marginRight: theme.spacing(0),
+    pointerEvents: "none"
+  }
+}));
+const Content = material.styled(material.Box)(({ theme }) => ({
+  display: "grid",
+  gridTemplateRows: "auto 1fr auto",
+  gap: theme.spacing(2)
+}));
+exports.AppDialogWithFeatures = AppDialogWithFeatures;
+//# sourceMappingURL=app-dialog-with-features.js.map

package/dist/react/cjs/components/app-dialog-with-features.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-dialog-with-features.js","sources":["../../../../src/components/app-dialog-with-features.tsx"],"sourcesContent":["import { Box, StackProps, CircularProgress, styled } from '@mui/material';\n\nimport { AppDialog, AppDialogProps } from './app-dialog';\nimport { AppInputSearchProps, AppInputBaseSearch } from './app-input-base-search';\nimport { AppPagination, AppPaginationProps } from './app-pagination';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppDialogWithFeaturesProps = AppDialogProps & {\n  open: boolean;\n  onClose: () => void;\n  search: string;\n  onSearchChange?: (search: string) => void;\n  searchProps?: AppInputSearchProps;\n  pagination?: AppPaginationProps;\n  isLoading?: boolean;\n  contentProps?: StackProps;\n  children?: React.ReactNode;\n};\n\nexport const AppDialogWithFeatures: React.FC<AppDialogWithFeaturesProps> = ({\n  open,\n  onClose,\n  search,\n  onSearchChange,\n  title,\n  searchProps,\n  pagination,\n  children,\n  isLoading,\n  contentProps,\n  ...props\n}) => {\n  return (\n    <AppDialog\n      open={open}\n      onClose={onClose}\n      title={title}\n      fullWidth\n      dialogContentProps={{ sx: { overflow: 'hidden' } }}\n      {...props}\n    >\n      <Content>\n        {isLoading && (\n          <StackRow width=\"100%\" height={160} alignItems=\"center\" justifyContent=\"center\">\n            <CircularProgress />\n          </StackRow>\n        )}\n\n        {!isLoading && (\n          <>\n            {/* Search */}\n            {(search || onSearchChange) && (\n              <SearchInput\n                fullWidth\n                value={search}\n                onChange={e => onSearchChange?.(e.target.value)}\n                name=\"search\"\n                size=\"small\"\n                {...searchProps}\n              />\n            )}\n\n            {/* Main content */}\n            <StackColumn gap={2} maxHeight=\"500px\" overflow=\"auto\" {...contentProps}>\n              {children}\n            </StackColumn>\n\n            {/* Pagination */}\n            {pagination && (\n              <StackRow alignItems=\"center\" justifyContent=\"center\">\n                <AppPagination\n                  size=\"medium\"\n                  count={pagination.count}\n                  page={pagination.page}\n                  onChange={pagination.onChange}\n                />\n              </StackRow>\n            )}\n          </>\n        )}\n      </Content>\n    </AppDialog>\n  );\n};\n\n//\n\nconst SearchInput = styled(AppInputBaseSearch)(({ theme }) => ({\n  marginTop: 0,\n  '.MuiInputBase-root': {\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n    fieldset: {\n      borderRadius: theme.spacing(40),\n      paddingLeft: theme.spacing(2),\n      paddingRight: theme.spacing(2),\n    },\n\n    input: { paddingLeft: theme.spacing(1) },\n  },\n  '.MuiInputAdornment-root': {\n    marginLeft: theme.spacing(0),\n    marginRight: theme.spacing(0),\n    pointerEvents: 'none',\n  },\n}));\n\nconst Content = styled(Box)(({ theme }) => ({\n  display: 'grid',\n  gridTemplateRows: 'auto 1fr auto',\n  gap: theme.spacing(2),\n}));\n"],"names":["jsx","AppDialog","StackRow","CircularProgress","jsxs","Fragment","StackColumn","AppPagination","styled","AppInputBaseSearch","Box"],"mappings":";;;;;;;;;AAuBO,MAAM,wBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT,oBAAoB,EAAE,IAAI,EAAE,UAAU,WAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,0CAAC,SAAA,EACE,UAAA;AAAA,QAAA,aACCD,2BAAAA,IAACE,mBAAA,EAAS,OAAM,QAAO,QAAQ,KAAK,YAAW,UAAS,gBAAe,UACrE,UAAAF,2BAAAA,IAACG,SAAAA,kBAAA,CAAA,CAAiB,GACpB;AAAA,QAGD,CAAC,aACAC,2BAAAA,KAAAC,WAAAA,UAAA,EAEI,UAAA;AAAA,WAAA,UAAU,mBACVL,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAO;AAAA,cACP,UAAU,CAAA,MAAK,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAC9C,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAKRA,2BAAAA,IAACM,YAAAA,aAAA,EAAY,KAAK,GAAG,WAAU,SAAQ,UAAS,QAAQ,GAAG,cACxD,SAAA,CACH;AAAA,UAGC,cACCN,2BAAAA,IAACE,SAAAA,UAAA,EAAS,YAAW,UAAS,gBAAe,UAC3C,UAAAF,2BAAAA;AAAAA,YAACO,cAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,WAAW;AAAA,cAClB,MAAM,WAAW;AAAA,cACjB,UAAU,WAAW;AAAA,YAAA;AAAA,UAAA,EACvB,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAIA,MAAM,cAAcC,SAAAA,OAAOC,mBAAAA,kBAAkB,EAAE,CAAC,EAAE,aAAa;AAAA,EAC7D,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,UAAU;AAAA,MACR,cAAc,MAAM,QAAQ,EAAE;AAAA,MAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,MAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,IAG/B,OAAO,EAAE,aAAa,MAAM,QAAQ,CAAC,EAAA;AAAA,EAAE;AAAA,EAEzC,2BAA2B;AAAA,IACzB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,eAAe;AAAA,EAAA;AAEnB,EAAE;AAEF,MAAM,UAAUD,SAAAA,OAAOE,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC1C,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;;"}

package/dist/react/cjs/components/app-dialog.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appTypography = require("./app-typography.js");
+const stackColumn = require("./stack-column.js");
+const AppDialog = ({
+  title,
+  description,
+  descriptionProps,
+  children,
+  titleStackProps,
+  actions,
+  titleProps,
+  actionsProps,
+  darkerBackdrop,
+  dialogContentProps,
+  slotProps,
+  ...props
+}) => {
+  const theme = material.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Dialog,
+    {
+      fullWidth: true,
+      maxWidth: "sm",
+      slotProps: {
+        paper: {
+          elevation: 4,
+          ...slotProps?.paper
+        },
+        backdrop: {
+          sx: {
+            backgroundColor: darkerBackdrop ? theme.palette.background.darkBackdrop : ""
+          },
+          ...slotProps?.backdrop
+        }
+      },
+      ...props,
+      children: [
+        (title || description) && /* @__PURE__ */ jsxRuntime.jsx(material.DialogTitle, { ...titleProps, children: /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { ...titleStackProps, gap: 3, children: [
+          title,
+          description && /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", ...descriptionProps, children: description })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(material.DialogContent, { ...dialogContentProps, children }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { ...actionsProps, children: actions })
+      ]
+    }
+  );
+};
+exports.AppDialog = AppDialog;
+//# sourceMappingURL=app-dialog.js.map

package/dist/react/cjs/components/app-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-dialog.js","sources":["../../../../src/components/app-dialog.tsx"],"sourcesContent":["import {\n  Dialog,\n  DialogProps,\n  DialogActions,\n  DialogActionsProps,\n  DialogContent,\n  DialogContentProps,\n  DialogTitle,\n  DialogTitleProps,\n  StackProps,\n  useTheme,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppDialogProps = DialogProps & {\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n  titleStackProps?: StackProps;\n  titleProps?: DialogTitleProps;\n  actions?: React.ReactNode;\n  actionsProps?: DialogActionsProps;\n  children: React.ReactNode;\n  dialogContentProps?: DialogContentProps;\n  darkerBackdrop?: boolean;\n};\n\nexport const AppDialog = ({\n  title,\n  description,\n  descriptionProps,\n  children,\n  titleStackProps,\n  actions,\n  titleProps,\n  actionsProps,\n  darkerBackdrop,\n  dialogContentProps,\n  slotProps,\n  ...props\n}: AppDialogProps) => {\n  const theme = useTheme();\n\n  return (\n    <Dialog\n      fullWidth\n      maxWidth=\"sm\"\n      slotProps={{\n        paper: {\n          elevation: 4,\n          ...slotProps?.paper,\n        },\n        backdrop: {\n          sx: {\n            backgroundColor: darkerBackdrop ? theme.palette.background.darkBackdrop : '',\n          },\n          ...slotProps?.backdrop,\n        },\n      }}\n      {...props}\n    >\n      {(title || description) && (\n        <DialogTitle {...titleProps}>\n          <StackColumn {...titleStackProps} gap={3}>\n            {title}\n            {description && (\n              <AppTypography variant=\"body2\" {...descriptionProps}>\n                {description}\n              </AppTypography>\n            )}\n          </StackColumn>\n        </DialogTitle>\n      )}\n      <DialogContent {...dialogContentProps}>{children}</DialogContent>\n\n      {actions && <DialogActions {...actionsProps}>{actions}</DialogActions>}\n    </Dialog>\n  );\n};\n"],"names":["useTheme","jsxs","Dialog","jsx","DialogTitle","StackColumn","AppTypography","DialogContent","DialogActions"],"mappings":";;;;;;AA+BO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,QAAQA,SAAAA,SAAA;AAEd,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,UACL,WAAW;AAAA,UACX,GAAG,WAAW;AAAA,QAAA;AAAA,QAEhB,UAAU;AAAA,UACR,IAAI;AAAA,YACF,iBAAiB,iBAAiB,MAAM,QAAQ,WAAW,eAAe;AAAA,UAAA;AAAA,UAE5E,GAAG,WAAW;AAAA,QAAA;AAAA,MAChB;AAAA,MAED,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACTC,2BAAAA,IAACC,SAAAA,aAAA,EAAa,GAAG,YACf,0CAACC,YAAAA,aAAA,EAAa,GAAG,iBAAiB,KAAK,GACpC,UAAA;AAAA,UAAA;AAAA,UACA,eACCF,2BAAAA,IAACG,cAAAA,eAAA,EAAc,SAAQ,SAAS,GAAG,kBAChC,UAAA,YAAA,CACH;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QAEFH,2BAAAA,IAACI,SAAAA,eAAA,EAAe,GAAG,oBAAqB,SAAA,CAAS;AAAA,QAEhD,WAAWJ,2BAAAA,IAACK,SAAAA,eAAA,EAAe,GAAG,cAAe,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D;;"}

package/dist/react/cjs/components/app-empty-state.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const appTypography = require("./app-typography.js");
+const stackColumn = require("./stack-column.js");
+const stackRow = require("./stack-row.js");
+const AppEmptyState = ({
+  size = "small",
+  variant = "default",
+  title,
+  titleProps,
+  description,
+  descriptionProps,
+  subDescription,
+  subDescriptionProps,
+  icon,
+  iconProps,
+  iconBoxProps,
+  customIconComponent,
+  imageUrl,
+  imageProps,
+  children,
+  containerProps
+}) => {
+  const isBoxImage = icon?.props?.component === "img";
+  const theme = material.useTheme();
+  let iconSize = "large";
+  let titleSize = "h4";
+  let iconBoxSize = 120;
+  let iconColor = "action";
+  const iconBoxVariantProps = {
+    bgcolor: "_components.iconButton.primary.hover",
+    border: `none`
+  };
+  if (size === "small") {
+    iconSize = "medium";
+    titleSize = "h6";
+    iconBoxSize = 100;
+  }
+  if (variant === "error") {
+    iconBoxVariantProps.bgcolor = theme.palette._components.alert.error.background;
+    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.error.border}`;
+    iconColor = "error";
+  }
+  if (variant === "warning") {
+    iconBoxVariantProps.bgcolor = theme.palette._components.alert.warning.background;
+    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.warning.border}`;
+  }
+  if (variant === "success") {
+    iconBoxVariantProps.bgcolor = theme.palette._components.alert.success.background;
+    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.success.border}`;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      width: "100%",
+      height: "100%",
+      rowGap: size === "small" ? 2 : 3,
+      px: 2,
+      py: 6,
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      ...containerProps,
+      children: [
+        imageUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            component: "img",
+            src: imageUrl,
+            width: 240,
+            height: 160,
+            bgcolor: "_components.emptyState.imageBackground",
+            ...imageProps
+          }
+        ) : icon && !isBoxImage ? /* @__PURE__ */ jsxRuntime.jsx(
+          material.Box,
+          {
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            borderRadius: 99,
+            width: iconBoxSize,
+            height: iconBoxSize,
+            maxWidth: iconBoxSize,
+            maxHeight: iconBoxSize,
+            ...iconBoxVariantProps,
+            ...iconBoxProps,
+            children: React.cloneElement(icon, { fontSize: iconSize, color: iconColor, ...iconProps })
+          }
+        ) : icon && isBoxImage ? icon : customIconComponent,
+        (title || description || subDescription) && /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: size === "small" ? 0 : 0.5, maxWidth: 600, textAlign: "center", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: titleSize, ...titleProps, children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", color: "textTertiary", ...descriptionProps, children: description }),
+          subDescription && /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { mt: 3, variant: "body2", color: "textTertiary", ...subDescriptionProps, children: subDescription })
+        ] }),
+        children && /* @__PURE__ */ jsxRuntime.jsx(stackRow.StackRow, { children })
+      ]
+    }
+  );
+};
+exports.AppEmptyState = AppEmptyState;
+//# sourceMappingURL=app-empty-state.js.map

package/dist/react/cjs/components/app-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-empty-state.js","sources":["../../../../src/components/app-empty-state.tsx"],"sourcesContent":["import React, { FC } from 'react';\n\nimport { Box, type BoxProps, type SvgIconProps, useTheme } from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport interface AppEmptyStateProps {\n  size?: 'standard' | 'small';\n  variant?: 'default' | 'error' | 'warning' | 'success';\n\n  title?: React.ReactNode;\n  titleProps?: AppTypographyProps;\n\n  icon?: React.ReactElement<SvgIconProps>;\n  iconProps?: SvgIconProps;\n  iconBoxProps?: BoxProps;\n  customIconComponent?: React.ReactElement<SvgIconProps>;\n\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n\n  subDescription?: React.ReactNode;\n  subDescriptionProps?: AppTypographyProps;\n\n  imageUrl?: string;\n  imageProps?: BoxProps;\n\n  children?: React.ReactNode;\n  containerProps?: BoxProps;\n}\n\nexport const AppEmptyState: FC<AppEmptyStateProps> = ({\n  size = 'small',\n  variant = 'default',\n\n  title,\n  titleProps,\n  description,\n  descriptionProps,\n\n  subDescription,\n  subDescriptionProps,\n\n  icon,\n  iconProps,\n  iconBoxProps,\n  customIconComponent,\n\n  imageUrl,\n  imageProps,\n\n  children,\n  containerProps,\n}) => {\n  const isBoxImage = icon?.props?.component === 'img';\n\n  const theme = useTheme();\n\n  let iconSize: SvgIconProps['fontSize'] = 'large';\n  let titleSize: AppTypographyProps['variant'] = 'h4';\n  let iconBoxSize = 120;\n  let iconColor: SvgIconProps['color'] = 'action';\n\n  const iconBoxVariantProps = {\n    bgcolor: '_components.iconButton.primary.hover',\n    border: `none`,\n  };\n\n  if (size === 'small') {\n    iconSize = 'medium';\n    titleSize = 'h6';\n    iconBoxSize = 100;\n  }\n\n  if (variant === 'error') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.error.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.error.border}`;\n    iconColor = 'error';\n  }\n\n  if (variant === 'warning') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.warning.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.warning.border}`;\n  }\n\n  if (variant === 'success') {\n    iconBoxVariantProps.bgcolor = theme.palette._components.alert.success.background;\n    iconBoxVariantProps.border = `1px solid ${theme.palette._components.alert.success.border}`;\n  }\n\n  return (\n    <Box\n      width=\"100%\"\n      height=\"100%\"\n      rowGap={size === 'small' ? 2 : 3}\n      px={2}\n      py={6}\n      display=\"flex\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n      justifyContent=\"center\"\n      {...containerProps}\n    >\n      {imageUrl ? (\n        <Box\n          component=\"img\"\n          src={imageUrl}\n          width={240}\n          height={160}\n          bgcolor=\"_components.emptyState.imageBackground\"\n          {...imageProps}\n        />\n      ) : icon && !isBoxImage ? (\n        <Box\n          display=\"flex\"\n          justifyContent=\"center\"\n          alignItems=\"center\"\n          borderRadius={99}\n          width={iconBoxSize}\n          height={iconBoxSize}\n          maxWidth={iconBoxSize}\n          maxHeight={iconBoxSize}\n          {...iconBoxVariantProps}\n          {...iconBoxProps}\n        >\n          {React.cloneElement(icon, { fontSize: iconSize, color: iconColor, ...iconProps })}\n        </Box>\n      ) : icon && isBoxImage ? (\n        icon\n      ) : (\n        customIconComponent\n      )}\n      {(title || description || subDescription) && (\n        <StackColumn gap={size === 'small' ? 0 : 0.5} maxWidth={600} textAlign=\"center\">\n          {title && (\n            <AppTypography variant={titleSize} {...titleProps}>\n              {title}\n            </AppTypography>\n          )}\n          {description && (\n            <AppTypography variant=\"body2\" color=\"textTertiary\" {...descriptionProps}>\n              {description}\n            </AppTypography>\n          )}\n          {subDescription && (\n            <AppTypography mt={3} variant=\"body2\" color=\"textTertiary\" {...subDescriptionProps}>\n              {subDescription}\n            </AppTypography>\n          )}\n        </StackColumn>\n      )}\n      {children && <StackRow>{children}</StackRow>}\n    </Box>\n  );\n};\n"],"names":["useTheme","jsxs","Box","jsx","StackColumn","AppTypography","StackRow"],"mappings":";;;;;;;;AAmCO,MAAM,gBAAwC,CAAC;AAAA,EACpD,OAAO;AAAA,EACP,UAAU;AAAA,EAEV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,MAAM,OAAO,cAAc;AAE9C,QAAM,QAAQA,SAAAA,SAAA;AAEd,MAAI,WAAqC;AACzC,MAAI,YAA2C;AAC/C,MAAI,cAAc;AAClB,MAAI,YAAmC;AAEvC,QAAM,sBAAsB;AAAA,IAC1B,SAAS;AAAA,IACT,QAAQ;AAAA,EAAA;AAGV,MAAI,SAAS,SAAS;AACpB,eAAW;AACX,gBAAY;AACZ,kBAAc;AAAA,EAChB;AAEA,MAAI,YAAY,SAAS;AACvB,wBAAoB,UAAU,MAAM,QAAQ,YAAY,MAAM,MAAM;AACpE,wBAAoB,SAAS,aAAa,MAAM,QAAQ,YAAY,MAAM,MAAM,MAAM;AACtF,gBAAY;AAAA,EACd;AAEA,MAAI,YAAY,WAAW;AACzB,wBAAoB,UAAU,MAAM,QAAQ,YAAY,MAAM,QAAQ;AACtE,wBAAoB,SAAS,aAAa,MAAM,QAAQ,YAAY,MAAM,QAAQ,MAAM;AAAA,EAC1F;AAEA,MAAI,YAAY,WAAW;AACzB,wBAAoB,UAAU,MAAM,QAAQ,YAAY,MAAM,QAAQ;AACtE,wBAAoB,SAAS,aAAa,MAAM,QAAQ,YAAY,MAAM,QAAQ,MAAM;AAAA,EAC1F;AAEA,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN,QAAO;AAAA,MACP,QAAQ,SAAS,UAAU,IAAI;AAAA,MAC/B,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAQ;AAAA,MACR,eAAc;AAAA,MACd,YAAW;AAAA,MACX,gBAAe;AAAA,MACd,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,WACCC,2BAAAA;AAAAA,UAACD,SAAAA;AAAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,KAAK;AAAA,YACL,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,SAAQ;AAAA,YACP,GAAG;AAAA,UAAA;AAAA,QAAA,IAEJ,QAAQ,CAAC,aACXC,2BAAAA;AAAAA,UAACD,SAAAA;AAAAA,UAAA;AAAA,YACC,SAAQ;AAAA,YACR,gBAAe;AAAA,YACf,YAAW;AAAA,YACX,cAAc;AAAA,YACd,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,YACV,WAAW;AAAA,YACV,GAAG;AAAA,YACH,GAAG;AAAA,YAEH,UAAA,MAAM,aAAa,MAAM,EAAE,UAAU,UAAU,OAAO,WAAW,GAAG,UAAA,CAAW;AAAA,UAAA;AAAA,QAAA,IAEhF,QAAQ,aACV,OAEA;AAAA,SAEA,SAAS,eAAe,mBACxBD,2BAAAA,KAACG,YAAAA,aAAA,EAAY,KAAK,SAAS,UAAU,IAAI,KAAK,UAAU,KAAK,WAAU,UACpE,UAAA;AAAA,UAAA,wCACEC,cAAAA,eAAA,EAAc,SAAS,WAAY,GAAG,YACpC,UAAA,OACH;AAAA,UAED,8CACEA,6BAAA,EAAc,SAAQ,SAAQ,OAAM,gBAAgB,GAAG,kBACrD,UAAA,YAAA,CACH;AAAA,UAED,kBACCF,2BAAAA,IAACE,cAAAA,eAAA,EAAc,IAAI,GAAG,SAAQ,SAAQ,OAAM,gBAAgB,GAAG,qBAC5D,UAAA,eAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAED,YAAYF,2BAAAA,IAACG,mBAAA,EAAU,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGvC;;"}

package/dist/react/cjs/components/app-icon-button.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appTooltip = require("./app-tooltip.js");
+const AppIconButton = ({
+  ref,
+  color = "secondary",
+  size = "small",
+  children,
+  content,
+  tooltip,
+  tooltipProps,
+  sx,
+  ...props
+}) => {
+  if (!tooltip) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(material.IconButton, { component: "button", color, size, ref, sx, ...props, children: [
+      children,
+      content
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(appTooltip.AppTooltip, { description: tooltip, disableInteractive: true, ...tooltipProps, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsxs(material.IconButton, { component: "button", color, size, ref, sx, ...props, children: [
+    children,
+    content
+  ] }) }) });
+};
+AppIconButton.displayName = "AppIconButton";
+exports.AppIconButton = AppIconButton;
+//# sourceMappingURL=app-icon-button.js.map

package/dist/react/cjs/components/app-icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-icon-button.js","sources":["../../../../src/components/app-icon-button.tsx"],"sourcesContent":["import React from 'react';\n\nimport { Box, IconButton, type IconButtonProps } from '@mui/material';\nimport { AppTooltip, AppTooltipProps } from './app-tooltip';\n\n//\n//\n\nexport type AppIconButtonProps = Omit<IconButtonProps, 'component'> & {\n  content?: React.ReactNode;\n  href?: string;\n  tooltip?: string | null;\n  tooltipProps?: Omit<AppTooltipProps, 'children' | 'title'>;\n  hideBorder?: boolean;\n};\n\nexport const AppIconButton = ({\n  ref,\n  color = 'secondary',\n  size = 'small',\n  children,\n  content,\n  tooltip,\n  tooltipProps,\n  sx,\n  ...props\n}: AppIconButtonProps) => {\n  if (!tooltip) {\n    return (\n      <IconButton component=\"button\" color={color} size={size} ref={ref} sx={sx} {...props}>\n        {children}\n        {content}\n      </IconButton>\n    );\n  }\n\n  return (\n    <AppTooltip description={tooltip} disableInteractive {...tooltipProps}>\n      <Box>\n        <IconButton component=\"button\" color={color} size={size} ref={ref} sx={sx} {...props}>\n          {children}\n          {content}\n        </IconButton>\n      </Box>\n    </AppTooltip>\n  );\n};\n\nAppIconButton.displayName = 'AppIconButton';\n"],"names":["jsxs","IconButton","AppTooltip","jsx","Box"],"mappings":";;;;;AAgBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,MAAI,CAAC,SAAS;AACZ,WACEA,gCAACC,SAAAA,cAAW,WAAU,UAAS,OAAc,MAAY,KAAU,IAAS,GAAG,OAC5E,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,IAAA,GACH;AAAA,EAEJ;AAEA,wCACGC,WAAAA,YAAA,EAAW,aAAa,SAAS,oBAAkB,MAAE,GAAG,cACvD,UAAAC,2BAAAA,IAACC,SAAAA,OACC,UAAAJ,gCAACC,SAAAA,YAAA,EAAW,WAAU,UAAS,OAAc,MAAY,KAAU,IAAS,GAAG,OAC5E,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,EAAA,EAAA,CACH,GACF,GACF;AAEJ;AAEA,cAAc,cAAc;;"}

package/dist/react/cjs/components/app-input-radio-card.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appTypography = require("./app-typography.js");
+const stackColumn = require("./stack-column.js");
+const stackRow = require("./stack-row.js");
+const AppInputRadioCard = ({
+  label,
+  labelProps,
+  labelContainerProps,
+  description,
+  descriptionProps,
+  radioProps,
+  isLoading,
+  labelSuffix,
+  icon,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    FormControlLabelStyled,
+    {
+      ...props,
+      control: /* @__PURE__ */ jsxRuntime.jsx(RadioStyled, { ...radioProps }),
+      label: /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(stackColumn.StackColumn, { gap: 0, overflow: "hidden", ...labelContainerProps, children: [
+          isLoading && /* @__PURE__ */ jsxRuntime.jsx(CircularProgressStyled, {}),
+          typeof label === "string" ? /* @__PURE__ */ jsxRuntime.jsxs(stackRow.StackRow, { width: "100%", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body2", ...labelProps, children: label }),
+            labelSuffix ? labelSuffix : null
+          ] }) : label,
+          description && /* @__PURE__ */ jsxRuntime.jsx(RadioDescriptionStyled, { variant: "caption", color: "text.tertiary", ...descriptionProps, children: description })
+        ] }),
+        icon
+      ] })
+    }
+  );
+};
+const FormControlLabelStyled = material.styled(material.FormControlLabel)(({ theme }) => {
+  return {
+    position: "relative",
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(0.5),
+    margin: 0,
+    padding: theme.spacing(1.5),
+    border: `solid 1px ${theme.palette.colors.neutral[100]}`,
+    borderRadius: theme.shape.standardBorderRadius,
+    ":has(:checked)": {
+      backgroundColor: theme.palette.colors.primary[50],
+      borderColor: "#AE72FF80"
+    },
+    overflow: "hidden",
+    "> .MuiFormControlLabel-label": {
+      overflow: "hidden"
+    },
+    "& .MuiFormControlLabel-label": {
+      width: "100%"
+    }
+  };
+});
+const RadioStyled = material.styled(material.Radio)(({ theme }) => {
+  return {
+    width: theme.spacing(2.5),
+    minWidth: theme.spacing(2.5),
+    height: theme.spacing(2.5),
+    padding: 0
+  };
+});
+const RadioDescriptionStyled = material.styled(appTypography.AppTypography)(() => {
+  return {
+    display: "-webkit-box",
+    WebkitLineClamp: 3,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden"
+  };
+});
+const CircularProgressStyled = material.styled(material.CircularProgress)(() => {
+  return {
+    position: "absolute",
+    left: "calc(50% - 20px)",
+    top: "calc(50% - 20px)"
+  };
+});
+exports.AppInputRadioCard = AppInputRadioCard;
+//# sourceMappingURL=app-input-radio-card.js.map

package/dist/react/cjs/components/app-input-radio-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-input-radio-card.js","sources":["../../../../src/components/app-input-radio-card.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  FormControlLabelProps,\n  StackProps,\n  RadioProps,\n  FormControlLabel,\n  Radio,\n  CircularProgress,\n  styled,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppInputRadioCardProps = Omit<FormControlLabelProps, 'control' | 'label'> & {\n  label: string | React.ReactNode;\n  labelProps?: AppTypographyProps;\n  labelContainerProps?: StackProps;\n  description?: React.ReactNode;\n  descriptionProps?: AppTypographyProps;\n  radioProps?: RadioProps;\n  isLoading?: boolean;\n  labelSuffix?: React.ReactNode;\n  icon?: React.ReactNode;\n};\n\nexport const AppInputRadioCard: React.FC<AppInputRadioCardProps> = ({\n  label,\n  labelProps,\n  labelContainerProps,\n  description,\n  descriptionProps,\n  radioProps,\n  isLoading,\n  labelSuffix,\n  icon,\n  ...props\n}) => {\n  return (\n    <FormControlLabelStyled\n      {...props}\n      control={<RadioStyled {...radioProps} />}\n      label={\n        <StackRow justifyContent=\"space-between\" alignItems=\"center\">\n          <StackColumn gap={0} overflow=\"hidden\" {...labelContainerProps}>\n            {isLoading && <CircularProgressStyled />}\n\n            {typeof label === 'string' ? (\n              <StackRow width=\"100%\" justifyContent=\"space-between\">\n                <AppTypography variant=\"body2\" {...labelProps}>\n                  {label}\n                </AppTypography>\n                {labelSuffix ? labelSuffix : null}\n              </StackRow>\n            ) : (\n              label\n            )}\n            {description && (\n              <RadioDescriptionStyled variant=\"caption\" color=\"text.tertiary\" {...descriptionProps}>\n                {description}\n              </RadioDescriptionStyled>\n            )}\n          </StackColumn>\n\n          {icon}\n        </StackRow>\n      }\n    />\n  );\n};\n\n//\n\nconst FormControlLabelStyled = styled(FormControlLabel)(({ theme }) => {\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'flex-start',\n    gap: theme.spacing(0.5),\n    margin: 0,\n    padding: theme.spacing(1.5),\n    border: `solid 1px ${theme.palette.colors.neutral[100]}`,\n    borderRadius: theme.shape.standardBorderRadius,\n    ':has(:checked)': {\n      backgroundColor: theme.palette.colors.primary[50],\n      borderColor: '#AE72FF80',\n    },\n    overflow: 'hidden',\n    '> .MuiFormControlLabel-label': {\n      overflow: 'hidden',\n    },\n    '& .MuiFormControlLabel-label': {\n      width: '100%',\n    },\n  };\n});\n\nconst RadioStyled = styled(Radio)(({ theme }) => {\n  return {\n    width: theme.spacing(2.5),\n    minWidth: theme.spacing(2.5),\n    height: theme.spacing(2.5),\n    padding: 0,\n  };\n});\n\nconst RadioDescriptionStyled = styled(AppTypography)(() => {\n  return {\n    display: '-webkit-box',\n    WebkitLineClamp: 3,\n    WebkitBoxOrient: 'vertical',\n    overflow: 'hidden',\n  };\n});\n\nconst CircularProgressStyled = styled(CircularProgress)(() => {\n  return {\n    position: 'absolute',\n    left: 'calc(50% - 20px)',\n    top: 'calc(50% - 20px)',\n  };\n});\n"],"names":["jsx","jsxs","StackRow","StackColumn","AppTypography","styled","FormControlLabel","Radio","CircularProgress"],"mappings":";;;;;;;AA6BO,MAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAG;AAAA,MACJ,SAASA,2BAAAA,IAAC,aAAA,EAAa,GAAG,WAAA,CAAY;AAAA,MACtC,OACEC,2BAAAA,KAACC,SAAAA,UAAA,EAAS,gBAAe,iBAAgB,YAAW,UAClD,UAAA;AAAA,QAAAD,gCAACE,YAAAA,eAAY,KAAK,GAAG,UAAS,UAAU,GAAG,qBACxC,UAAA;AAAA,UAAA,4CAAc,wBAAA,EAAuB;AAAA,UAErC,OAAO,UAAU,WAChBF,2BAAAA,KAACC,SAAAA,YAAS,OAAM,QAAO,gBAAe,iBACpC,UAAA;AAAA,YAAAF,+BAACI,cAAAA,eAAA,EAAc,SAAQ,SAAS,GAAG,YAChC,UAAA,OACH;AAAA,YACC,cAAc,cAAc;AAAA,UAAA,EAAA,CAC/B,IAEA;AAAA,UAED,8CACE,wBAAA,EAAuB,SAAQ,WAAU,OAAM,iBAAiB,GAAG,kBACjE,UAAA,YAAA,CACH;AAAA,QAAA,GAEJ;AAAA,QAEC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAIR;AAIA,MAAM,yBAAyBC,SAAAA,OAAOC,SAAAA,gBAAgB,EAAE,CAAC,EAAE,YAAY;AACrE,SAAO;AAAA,IACL,UAAU;AAAA,IACV,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK,MAAM,QAAQ,GAAG;AAAA,IACtB,QAAQ;AAAA,IACR,SAAS,MAAM,QAAQ,GAAG;AAAA,IAC1B,QAAQ,aAAa,MAAM,QAAQ,OAAO,QAAQ,GAAG,CAAC;AAAA,IACtD,cAAc,MAAM,MAAM;AAAA,IAC1B,kBAAkB;AAAA,MAChB,iBAAiB,MAAM,QAAQ,OAAO,QAAQ,EAAE;AAAA,MAChD,aAAa;AAAA,IAAA;AAAA,IAEf,UAAU;AAAA,IACV,gCAAgC;AAAA,MAC9B,UAAU;AAAA,IAAA;AAAA,IAEZ,gCAAgC;AAAA,MAC9B,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,CAAC;AAED,MAAM,cAAcD,SAAAA,OAAOE,SAAAA,KAAK,EAAE,CAAC,EAAE,YAAY;AAC/C,SAAO;AAAA,IACL,OAAO,MAAM,QAAQ,GAAG;AAAA,IACxB,UAAU,MAAM,QAAQ,GAAG;AAAA,IAC3B,QAAQ,MAAM,QAAQ,GAAG;AAAA,IACzB,SAAS;AAAA,EAAA;AAEb,CAAC;AAED,MAAM,yBAAyBF,SAAAA,OAAOD,cAAAA,aAAa,EAAE,MAAM;AACzD,SAAO;AAAA,IACL,SAAS;AAAA,IACT,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,UAAU;AAAA,EAAA;AAEd,CAAC;AAED,MAAM,yBAAyBC,SAAAA,OAAOG,SAAAA,gBAAgB,EAAE,MAAM;AAC5D,SAAO;AAAA,IACL,UAAU;AAAA,IACV,MAAM;AAAA,IACN,KAAK;AAAA,EAAA;AAET,CAAC;;"}

package/dist/react/cjs/components/app-input-radio.js

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const appTypography = require("./app-typography.js");
+const AppInputRadio = ({
+  row,
+  name,
+  label,
+  helperText,
+  options = [],
+  size = "medium",
+  color = "primary",
+  labelPlacement = "end",
+  boxProps,
+  error,
+  disabled,
+  radioProps,
+  formControlProps,
+  labelProps,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { display: "flex", flexDirection: "column", alignItems: "flex-start", ...boxProps, children: /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { error, variant: "standard", disabled, ...formControlProps, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(appTypography.AppTypography, { variant: "body1", ...labelProps, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      material.RadioGroup,
+      {
+        row,
+        ...props,
+        name,
+        sx: props.sx ? props.sx : row ? { gap: 1.5 } : { gap: 0 },
+        children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+          AppRadioLabel,
+          {
+            value: option.value,
+            name,
+            control: /* @__PURE__ */ jsxRuntime.jsx(
+              material.Radio,
+              {
+                size,
+                color,
+                ...radioProps,
+                name,
+                disabled: option.disabled
+              }
+            ),
+            label: option.label,
+            labelPlacement
+          },
+          option.value
+        ))
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(StyledFormHelperText, { error, disabled, children: error || helperText })
+  ] }) });
+};
+const StyledFormHelperText = material.styled(material.FormHelperText)({
+  marginTop: 0
+});
+const AppRadioLabel = material.styled(material.FormControlLabel)(({ theme }) => {
+  return {
+    marginInline: 0,
+    gap: theme.spacing(0.5),
+    marginLeft: 0,
+    minHeight: 38
+  };
+});
+exports.AppInputRadio = AppInputRadio;
+//# sourceMappingURL=app-input-radio.js.map

package/dist/react/cjs/components/app-input-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-input-radio.js","sources":["../../../../src/components/app-input-radio.tsx"],"sourcesContent":["//TODO: Warning: Failed prop type: Invalid prop `fontSize` of value `large` supplied to `RadioButtonIcon`, expected one of [\"small\",\"medium\"].\n// https://github.com/mui/material-ui/issues/40143 - someone already created issue in MUI repo\n\nimport {\n  RadioGroupProps,\n  BoxProps,\n  RadioProps,\n  FormControlProps,\n  Box,\n  FormControl,\n  RadioGroup,\n  Radio,\n  FormHelperText,\n  FormControlLabel,\n  styled,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\n\ntype Option = {\n  value: string;\n  label: React.ReactNode;\n  disabled?: boolean;\n};\n\nexport type AppInputRadioProps = RadioGroupProps & {\n  name: string;\n  options: Option[];\n  label?: string;\n  helperText?: string;\n  size?: 'small' | 'medium' | 'large';\n  color?: 'primary' | 'error';\n  labelPlacement?: 'end' | 'start';\n  disabled?: boolean;\n  error?: boolean;\n  boxProps?: BoxProps;\n  radioProps?: RadioProps;\n  formControlProps?: FormControlProps;\n  labelProps?: AppTypographyProps;\n};\n\nexport const AppInputRadio = ({\n  row,\n  name,\n  label,\n  helperText,\n  options = [],\n  size = 'medium',\n  color = 'primary',\n  labelPlacement = 'end',\n  boxProps,\n  error,\n  disabled,\n  radioProps,\n  formControlProps,\n  labelProps,\n  ...props\n}: AppInputRadioProps) => {\n  return (\n    <Box display=\"flex\" flexDirection=\"column\" alignItems=\"flex-start\" {...boxProps}>\n      <FormControl error={error} variant=\"standard\" disabled={disabled} {...formControlProps}>\n        {label && (\n          <AppTypography variant=\"body1\" {...labelProps}>\n            {label}\n          </AppTypography>\n        )}\n        <RadioGroup\n          row={row}\n          {...props}\n          name={name}\n          sx={props.sx ? props.sx : row ? { gap: 1.5 } : { gap: 0 }}\n        >\n          {options.map(option => (\n            <AppRadioLabel\n              key={option.value}\n              value={option.value}\n              name={name}\n              control={\n                <Radio\n                  size={size}\n                  color={color}\n                  {...radioProps}\n                  name={name}\n                  disabled={option.disabled}\n                />\n              }\n              label={option.label}\n              labelPlacement={labelPlacement}\n            />\n          ))}\n        </RadioGroup>\n        <StyledFormHelperText error={error} disabled={disabled}>\n          {error || helperText}\n        </StyledFormHelperText>\n      </FormControl>\n    </Box>\n  );\n};\n\nconst StyledFormHelperText = styled(FormHelperText)({\n  marginTop: 0,\n});\n\nconst AppRadioLabel = styled(FormControlLabel)(({ theme }) => {\n  return {\n    marginInline: 0,\n    gap: theme.spacing(0.5),\n    marginLeft: 0,\n    minHeight: 38,\n  };\n});\n"],"names":["Box","FormControl","AppTypography","jsx","RadioGroup","Radio","styled","FormHelperText","FormControlLabel"],"mappings":";;;;;AAwCO,MAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAA;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,wCACGA,cAAA,EAAI,SAAQ,QAAO,eAAc,UAAS,YAAW,cAAc,GAAG,UACrE,0CAACC,sBAAA,EAAY,OAAc,SAAQ,YAAW,UAAqB,GAAG,kBACnE,UAAA;AAAA,IAAA,wCACEC,cAAAA,eAAA,EAAc,SAAQ,SAAS,GAAG,YAChC,UAAA,OACH;AAAA,IAEFC,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACC,GAAG;AAAA,QACJ;AAAA,QACA,IAAI,MAAM,KAAK,MAAM,KAAK,MAAM,EAAE,KAAK,IAAA,IAAQ,EAAE,KAAK,EAAA;AAAA,QAErD,UAAA,QAAQ,IAAI,CAAA,WACXD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YAEC,OAAO,OAAO;AAAA,YACd;AAAA,YACA,SACEA,2BAAAA;AAAAA,cAACE,SAAAA;AAAAA,cAAA;AAAA,gBACC;AAAA,gBACA;AAAA,gBACC,GAAG;AAAA,gBACJ;AAAA,gBACA,UAAU,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,YAGrB,OAAO,OAAO;AAAA,YACd;AAAA,UAAA;AAAA,UAbK,OAAO;AAAA,QAAA,CAef;AAAA,MAAA;AAAA,IAAA;AAAA,IAEHF,2BAAAA,IAAC,sBAAA,EAAqB,OAAc,UACjC,mBAAS,WAAA,CACZ;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAM,uBAAuBG,SAAAA,OAAOC,SAAAA,cAAc,EAAE;AAAA,EAClD,WAAW;AACb,CAAC;AAED,MAAM,gBAAgBD,SAAAA,OAAOE,SAAAA,gBAAgB,EAAE,CAAC,EAAE,YAAY;AAC5D,SAAO;AAAA,IACL,cAAc;AAAA,IACd,KAAK,MAAM,QAAQ,GAAG;AAAA,IACtB,YAAY;AAAA,IACZ,WAAW;AAAA,EAAA;AAEf,CAAC;;"}

package/dist/react/cjs/components/app-pagination.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const AppPagination = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Pagination,
+    {
+      variant: "outlined",
+      size: "medium",
+      shape: "rounded",
+      showFirstButton: true,
+      showLastButton: true,
+      ...props
+    }
+  );
+};
+exports.AppPagination = AppPagination;
+//# sourceMappingURL=app-pagination.js.map

package/dist/react/cjs/components/app-pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-pagination.js","sources":["../../../../src/components/app-pagination.tsx"],"sourcesContent":["import { Pagination, type PaginationProps } from '@mui/material';\n\n//\n//\n\nexport type AppPaginationProps = Omit<PaginationProps, 'variant' | 'color' | 'shape' | 'size'> & {\n  size?: 'medium' | 'large';\n};\n\nexport const AppPagination = (props: AppPaginationProps) => {\n  return (\n    <Pagination\n      variant=\"outlined\"\n      size=\"medium\"\n      shape=\"rounded\"\n      showFirstButton\n      showLastButton\n      {...props}\n    />\n  );\n};\n"],"names":["jsx","Pagination"],"mappings":";;;;AASO,MAAM,gBAAgB,CAAC,UAA8B;AAC1D,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACN,iBAAe;AAAA,MACf,gBAAc;AAAA,MACb,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;;"}

package/dist/react/cjs/components/app-radio-group.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const material = require("@mui/material");
+const AppRadioGroup = ({
+  name,
+  label,
+  options,
+  disabled = false,
+  row = true,
+  value,
+  onChange,
+  labelProps,
+  radioSize = "medium",
+  sx
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(AppRadioGroupLegend, { disabled, component: "legend", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.RadioGroup, { row, name, onChange, sx, value, children: options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      AppRadioGroupLabel,
+      {
+        disabled,
+        ...option,
+        control: /* @__PURE__ */ jsxRuntime.jsx(material.Radio, { disableRipple: true, size: radioSize }),
+        ...labelProps
+      },
+      i
+    )) })
+  ] });
+};
+const AppRadioGroupLabel = material.styled(material.FormControlLabel)(({ theme }) => {
+  return {
+    marginInline: 0,
+    gap: theme.spacing(0.5)
+  };
+});
+const AppRadioGroupLegend = material.styled(material.FormLabel)(({ theme }) => {
+  return {
+    fontWeight: theme.typography.subtitle2.fontWeight,
+    fontSize: theme.typography.subtitle2.fontSize,
+    lineHeight: theme.typography.subtitle2.lineHeight,
+    marginBottom: theme.spacing(1.5)
+  };
+});
+exports.AppRadioGroup = AppRadioGroup;
+//# sourceMappingURL=app-radio-group.js.map

package/dist/react/cjs/components/app-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-radio-group.js","sources":["../../../../src/components/app-radio-group.tsx"],"sourcesContent":["import {\n  RadioGroupProps,\n  FormControlLabelProps,\n  Box,\n  RadioGroup,\n  Radio,\n  FormControlLabel,\n  FormLabel,\n  styled,\n} from '@mui/material';\n\n//\n//\n\n// For this component, the control is omitted from the options\n// to ensure that developers do not pass different controls.\nexport interface AppRadioGroupProps extends RadioGroupProps {\n  name: string;\n  label?: string;\n  options: Omit<FormControlLabelProps, 'control'>[];\n  disabled?: boolean;\n  row?: boolean;\n  value?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  labelProps?: Omit<FormControlLabelProps, 'control' | 'label'>;\n  radioSize?: 'small' | 'medium' | 'large';\n}\n\nexport const AppRadioGroup: React.FC<AppRadioGroupProps> = ({\n  name,\n  label,\n  options,\n  disabled = false,\n  row = true,\n  value,\n  onChange,\n  labelProps,\n  radioSize = 'medium',\n  sx,\n}: AppRadioGroupProps) => {\n  return (\n    <Box>\n      {label && (\n        <AppRadioGroupLegend disabled={disabled} component=\"legend\">\n          {label}\n        </AppRadioGroupLegend>\n      )}\n\n      <RadioGroup row={row} name={name} onChange={onChange} sx={sx} value={value}>\n        {options.map((option, i) => (\n          <AppRadioGroupLabel\n            key={i}\n            disabled={disabled}\n            {...option}\n            control={<Radio disableRipple size={radioSize} />}\n            {...labelProps}\n          />\n        ))}\n      </RadioGroup>\n    </Box>\n  );\n};\n\n//\n\nconst AppRadioGroupLabel = styled(FormControlLabel)(({ theme }) => {\n  return {\n    marginInline: 0,\n    gap: theme.spacing(0.5),\n  };\n});\n\nconst AppRadioGroupLegend = styled(FormLabel)<{ component?: string }>(({ theme }) => {\n  return {\n    fontWeight: theme.typography.subtitle2.fontWeight,\n    fontSize: theme.typography.subtitle2.fontSize,\n    lineHeight: theme.typography.subtitle2.lineHeight,\n    marginBottom: theme.spacing(1.5),\n  };\n});\n"],"names":["Box","jsx","RadioGroup","Radio","styled","FormControlLabel","FormLabel"],"mappings":";;;;AA4BO,MAAM,gBAA8C,CAAC;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,MAA0B;AACxB,yCACGA,cAAA,EACE,UAAA;AAAA,IAAA,SACCC,2BAAAA,IAAC,qBAAA,EAAoB,UAAoB,WAAU,UAChD,UAAA,OACH;AAAA,IAGFA,2BAAAA,IAACC,SAAAA,YAAA,EAAW,KAAU,MAAY,UAAoB,IAAQ,OAC3D,UAAA,QAAQ,IAAI,CAAC,QAAQ,MACpBD,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QAEC;AAAA,QACC,GAAG;AAAA,QACJ,SAASA,2BAAAA,IAACE,gBAAA,EAAM,eAAa,MAAC,MAAM,WAAW;AAAA,QAC9C,GAAG;AAAA,MAAA;AAAA,MAJC;AAAA,IAAA,CAMR,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;AAIA,MAAM,qBAAqBC,SAAAA,OAAOC,SAAAA,gBAAgB,EAAE,CAAC,EAAE,YAAY;AACjE,SAAO;AAAA,IACL,cAAc;AAAA,IACd,KAAK,MAAM,QAAQ,GAAG;AAAA,EAAA;AAE1B,CAAC;AAED,MAAM,sBAAsBD,SAAAA,OAAOE,SAAAA,SAAS,EAA0B,CAAC,EAAE,YAAY;AACnF,SAAO;AAAA,IACL,YAAY,MAAM,WAAW,UAAU;AAAA,IACvC,UAAU,MAAM,WAAW,UAAU;AAAA,IACrC,YAAY,MAAM,WAAW,UAAU;AAAA,IACvC,cAAc,MAAM,QAAQ,GAAG;AAAA,EAAA;AAEnC,CAAC;;"}