@adiba-banking-cloud/backoffice 0.0.70 → 0.0.72

package/build/index.cjs.js/index.js

@@ -20,6 +20,7 @@ require('@fontsource/poppins/500.css');
 require('@fontsource/poppins/600.css');
 require('@fontsource/poppins/700.css');
 require('@fontsource/poppins/800.css');
+var form = require('@mantine/form');
 
 function _interopNamespaceDefault(e) {
 	var n = Object.create(null);
@@ -11342,8 +11343,8 @@ const createAreaFillGradient = function (baseColor) {
   };
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Initialize Highcharts with rounded corners
 if (typeof window !== "undefined") {
@@ -11352,8 +11353,8 @@ if (typeof window !== "undefined") {
 const Column = props => {
   const chartRef = React.useRef(null);
   const chartOptions = React.useMemo(() => {
-    const column = _objectSpread$4({}, props);
-    return _objectSpread$4(_objectSpread$4({}, initChart$2(column)), initSeries$2(column));
+    const column = _objectSpread$5({}, props);
+    return _objectSpread$5(_objectSpread$5({}, initChart$2(column)), initSeries$2(column));
   }, [props]);
   React.useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11456,7 +11457,7 @@ const initSeries$2 = props => {
         enableMouseTracking: false,
         showInLegend: false
       });
-      const mainSeries = _objectSpread$4(_objectSpread$4({}, fillSeries(boundary)), {
+      const mainSeries = _objectSpread$5(_objectSpread$5({}, fillSeries(boundary)), {
         name: props.yAxisLabel[0],
         color: seriesColors ? seriesColors[0] : "gray",
         data: seriesData[0],
@@ -11496,7 +11497,7 @@ const initSeries$2 = props => {
         pointWidth: undefined
       }
     };
-    const plot = _objectSpread$4(_objectSpread$4({}, {
+    const plot = _objectSpread$5(_objectSpread$5({}, {
       column: {
         borderWidth: 0,
         borderRadius: 10
@@ -11551,13 +11552,13 @@ const initChart$1 = props => {
   };
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const Area = props => {
   const chartRef = React.useRef(null);
   const chartOptions = React.useMemo(() => {
-    const area = _objectSpread$3({}, props);
-    return _objectSpread$3(_objectSpread$3({}, initChart$1(area)), initSeries$1(area));
+    const area = _objectSpread$4({}, props);
+    return _objectSpread$4(_objectSpread$4({}, initChart$1(area)), initSeries$1(area));
   }, [props]);
   React.useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11618,7 +11619,7 @@ const initSeries$1 = props => {
     const labels = {
       color: "#575E77"
     };
-    return _objectSpread$3(_objectSpread$3({}, defaults), {
+    return _objectSpread$4(_objectSpread$4({}, defaults), {
       labels
     });
   };
@@ -11656,8 +11657,8 @@ const initSeries$1 = props => {
 };
 
 const _excluded$c = ["withLegend", "centerLabel", "centerValue"];
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const initChart = _ref => {
   let {
       withLegend,
@@ -11707,7 +11708,7 @@ const initChart = _ref => {
     },
     legend: !withLegend ? {
       enabled: false
-    } : _objectSpread$2(_objectSpread$2({}, {
+    } : _objectSpread$3(_objectSpread$3({}, {
       enabled: true,
       layout: "vertical",
       verticalAlign: "middle",
@@ -11740,13 +11741,13 @@ const initChart = _ref => {
   };
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const DonutChart = props => {
   const chartRef = React.useRef(null);
   const chartOptions = React.useMemo(() => {
-    const area = _objectSpread$1({}, props);
-    return _objectSpread$1(_objectSpread$1({}, initChart(area)), initSeries(area));
+    const area = _objectSpread$2({}, props);
+    return _objectSpread$2(_objectSpread$2({}, initChart(area)), initSeries(area));
   }, [props]);
   React.useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -12376,25 +12377,6 @@ const SimpleText = _ref => {
   }, rest), label);
 };
 
-const theme = core.createTheme({
-  focusRing: "never",
-  colors: {
-    adiba: ["#E7E8EB", "#CFD1D8", "#B7BAC4", "#9FA3B1", "#575E77", "#273050", "#0f193d", "#0D1636", "#0C1430", "#0A112A"],
-    altiba: ["#F4E2CE", "#EED4B5", "#E9C59D", "#D89A54", "#D38C3B", "#CD7E23", "#c8700b", "#B46409", "#A05908", "#8C4E07"]
-  },
-  fontFamily: "Poppins",
-  headings: {
-    fontFamily: "Poppins",
-    fontWeight: "500"
-  },
-  primaryColor: "adiba",
-  other: {
-    fontWeights: {
-      normal: 300
-    }
-  }
-});
-
 const _excluded$6 = ["createFn", "icon", "label"];
 const PageTitle = _ref => {
   var _switcher$items;
@@ -12428,8 +12410,7 @@ const PageTitle = _ref => {
     rightsection = /*#__PURE__*/React.createElement(core.SegmentedControl, {
       size: "sm",
       bg: "white",
-      bd: "1px solid gray.3",
-      color: theme.primaryColor,
+      color: 'adiba',
       data: switcher.items
     });
   }
@@ -13065,6 +13046,25 @@ const File = _ref => {
   }, /*#__PURE__*/React.createElement(Icons, rightsection === null || rightsection === void 0 ? void 0 : rightsection.icon)) : undefined)));
 };
 
+const theme = core.createTheme({
+  focusRing: "never",
+  colors: {
+    adiba: ["#E7E8EB", "#CFD1D8", "#B7BAC4", "#9FA3B1", "#575E77", "#273050", "#0f193d", "#0D1636", "#0C1430", "#0A112A"],
+    altiba: ["#F4E2CE", "#EED4B5", "#E9C59D", "#D89A54", "#D38C3B", "#CD7E23", "#c8700b", "#B46409", "#A05908", "#8C4E07"]
+  },
+  fontFamily: "Poppins",
+  headings: {
+    fontFamily: "Poppins",
+    fontWeight: "500"
+  },
+  primaryColor: "adiba",
+  other: {
+    fontWeights: {
+      normal: 300
+    }
+  }
+});
+
 var ErrorAnimation = "data:null;base64,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";
 
 const ErrorModal = _ref => {
@@ -13248,20 +13248,43 @@ const Drawer = _ref => {
   }, page))));
 };
 
-const _excluded$1 = ["fields", "isEditable", "layout"];
+const _excluded$1 = ["fields", "isEditable", "layout", "hasSubmit", "hasReset"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const SimpleForm = _ref => {
   let {
       fields,
       isEditable = true,
-      layout = []
-    } = _ref;
-    _objectWithoutProperties(_ref, _excluded$1);
+      layout = [],
+      hasSubmit,
+      hasReset
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   const components = {
     Textarea: core.Textarea,
     TextInput: core.TextInput,
     PasswordInput: core.PasswordInput,
     NumberInput: core.NumberInput
   };
+  const form$1 = form.useForm({
+    mode: "uncontrolled",
+    initialValues: () => {
+      const localInitialValues = {};
+      fields.forEach((field, index) => {
+        if (typeof field === "string") {
+          const sanitizedField = santize(field);
+          localInitialValues[sanitizedField.name] = "";
+        }
+        if (typeof field === "object" && Object.keys(components).includes(field.component)) {
+          var _field$field;
+          const sanitizedField = santize((_field$field = field.field) !== null && _field$field !== void 0 ? _field$field : "");
+          localInitialValues[sanitizedField.name] = "";
+        }
+      });
+      return _objectSpread$1(_objectSpread$1({}, localInitialValues), rest.initialValues);
+    },
+    validate: rest.formValidate
+  });
   const indexDiff = fields.length - layout.length;
   layout.push(...Array(indexDiff).fill(12));
   const inputProps = {
@@ -13275,29 +13298,47 @@ const SimpleForm = _ref => {
     variant: !isEditable ? "unstyled" : "default",
     required: true
   };
-  return /*#__PURE__*/React.createElement(core.Grid, null, fields.map((field, index) => {
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: form$1.onSubmit(values => {
+      var _rest$onSubmit;
+      return hasSubmit ? (_rest$onSubmit = rest.onSubmit) === null || _rest$onSubmit === void 0 ? void 0 : _rest$onSubmit.call(rest, values) : void 0;
+    }),
+    onReset: form$1.reset,
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(core.Stack, {
+    h: "100%"
+  }, /*#__PURE__*/React.createElement(core.Grid, null, fields.map((field, index) => {
     if (typeof field === "string") {
+      const sanitizedField = santize(field);
       return /*#__PURE__*/React.createElement(core.Grid.Col, {
         key: index,
         span: layout[index]
-      }, /*#__PURE__*/React.createElement(core.TextInput, _extends({}, inputProps, santize(field))));
+      }, /*#__PURE__*/React.createElement(core.TextInput, _extends({}, inputProps, sanitizedField, form$1.getInputProps(sanitizedField.name))));
     }
     if (typeof field === "function") {
       return /*#__PURE__*/React.createElement(core.Grid.Col, {
         key: index,
         span: layout[index]
-      }, field());
+      }, field(form$1.getInputProps));
     }
-    if (["Textarea", "TextInput", "PasswordInput", "NumberInput"].includes(field.component)) {
-      var _field$field;
+    if (Object.keys(components).includes(field.component)) {
+      var _field$field2;
       const Component = components[field.component];
+      const sanitizedField = santize((_field$field2 = field.field) !== null && _field$field2 !== void 0 ? _field$field2 : "");
       return /*#__PURE__*/React.createElement(core.Grid.Col, {
         key: index,
         span: layout[index]
-      }, /*#__PURE__*/React.createElement(Component, _extends({}, field.field, inputProps, santize((_field$field = field.field) !== null && _field$field !== void 0 ? _field$field : ""))));
+      }, /*#__PURE__*/React.createElement(Component, _extends({}, field.field, inputProps, sanitizedField, form$1.getInputProps(sanitizedField.name))));
     }
     return null;
-  }));
+  })), /*#__PURE__*/React.createElement(core.Space, {
+    flex: 1
+  }), /*#__PURE__*/React.createElement(FormButtons, {
+    hasSubmit,
+    hasReset
+  })));
 };
 const santize = field => {
   var _ref2, _field$label, _field$placeholder, _field$name, _field$name$split$joi, _field$name2;
@@ -13315,6 +13356,130 @@ const santize = field => {
     name: (_field$name$split$joi = (_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.split(" ").join("_").toLowerCase()) !== null && _field$name$split$joi !== void 0 ? _field$name$split$joi : ""
   };
 };
+const FormButtons = _ref3 => {
+  let {
+    hasSubmit = false,
+    hasReset = false
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(core.Group, {
+    justify: "flex-end",
+    grow: true,
+    gap: 10,
+    w: "100%",
+    display: hasSubmit || hasReset ? "flex" : "none"
+  }, /*#__PURE__*/React.createElement(core.Button, {
+    leftSection: /*#__PURE__*/React.createElement(Icons, {
+      name: "CloseCircle",
+      size: 16
+    }),
+    variant: "filled",
+    color: "red",
+    size: "lg",
+    radius: "xl",
+    miw: "25%",
+    type: "reset",
+    style: {
+      display: hasReset ? "block" : "none"
+    },
+    flex: 1
+  }, /*#__PURE__*/React.createElement(core.Text, {
+    fw: 400,
+    fz: "sm",
+    c: "white"
+  }, "Cancel")), /*#__PURE__*/React.createElement(core.Button, {
+    leftSection: /*#__PURE__*/React.createElement(Icons, {
+      name: "TickCircle",
+      size: 16
+    }),
+    variant: "filled",
+    color: "adiba.5",
+    size: "lg",
+    radius: "xl",
+    miw: "25%",
+    type: "submit",
+    style: {
+      display: hasSubmit ? "block" : "none"
+    },
+    flex: 1
+  }, /*#__PURE__*/React.createElement(core.Text, {
+    fw: 300,
+    fz: "sm",
+    c: "white"
+  }, "Save")));
+};
+
+const MaskedTilePanel = _ref => {
+  let {
+    label,
+    value,
+    icon,
+    onMasked = () => true
+  } = _ref;
+  const [masked, toggle] = hooks.useToggle();
+  const name = masked ? "Eye" : "EyeSlash";
+  return /*#__PURE__*/React.createElement(core.Card, {
+    p: "md",
+    bg: "gray.0",
+    style: {
+      borderRadius: "10px"
+    }
+  }, /*#__PURE__*/React.createElement(core.Group, {
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(core.Stack, {
+    gap: 0,
+    p: 0
+  }, /*#__PURE__*/React.createElement(core.Text, {
+    fz: "sm",
+    fw: 300,
+    p: 0,
+    c: "gray.7"
+  }, label), /*#__PURE__*/React.createElement(core.TextInput, {
+    type: masked ? "password" : "text",
+    fw: 300,
+    p: 0,
+    c: "adiba",
+    value: value,
+    variant: "unstyled",
+    readOnly: true
+  })), /*#__PURE__*/React.createElement(core.ActionIcon, {
+    variant: "transparent",
+    onClick: () => onMasked() ? toggle() : void 0
+  }, icon && /*#__PURE__*/React.createElement(Icons, {
+    size: 24,
+    color: "gray",
+    name: name
+  }))));
+};
+const TilePanel = _ref2 => {
+  let {
+    label,
+    value
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(core.Card, {
+    p: "md",
+    bg: "gray.0",
+    style: {
+      borderRadius: "10px"
+    }
+  }, /*#__PURE__*/React.createElement(core.Group, {
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(core.Stack, {
+    gap: 0,
+    p: 0
+  }, /*#__PURE__*/React.createElement(core.Text, {
+    fz: "sm",
+    fw: 300,
+    p: 0,
+    c: "gray.7"
+  }, label), /*#__PURE__*/React.createElement(core.TextInput, {
+    fw: 300,
+    p: 0,
+    c: "adiba",
+    value: value,
+    variant: "unstyled",
+    readOnly: true
+  }))));
+};
 
 var ConfirmAnimation = "data:null;base64,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";
 
@@ -13502,6 +13667,7 @@ exports.File = File;
 exports.Icons = Icons;
 exports.InfoModal = InfoModal;
 exports.LabelPanel = LabelPanel;
+exports.MaskedTilePanel = MaskedTilePanel;
 exports.PageTitle = PageTitle;
 exports.PaymentMethod = PaymentMethod;
 exports.PaymentMethodAdd = PaymentMethodAdd;
@@ -13517,6 +13683,7 @@ exports.SimpleText = SimpleText;
 exports.StackedColumn = StackedColumn;
 exports.SubscriptionPlans = SubscriptionPlans;
 exports.SuccessModal = SuccessModal;
+exports.TilePanel = TilePanel;
 exports.TitleWithIndex = TitleWithIndex;
 exports.TitledPanel = TitledPanel;
 exports.TwoFactorModal = TwoFactorModal;

package/build/index.esm.js/index.js

@@ -2,14 +2,14 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { modals } from '@mantine/modals';
 import React, { useRef, useMemo, useEffect } from 'react';
-import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, TextInput, ActionIcon, Box, Title, createTheme, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, AspectRatio, Overlay, rem, SimpleGrid, Indicator, Table, PinInput, Drawer as Drawer$1, ScrollArea, Grid, NumberInput, PasswordInput, Textarea } from '@mantine/core';
+import { Center, Image, Space, Popover, Button, Stack, Divider, Group, Text, Menu, Avatar, Badge, NavLink, Card, TextInput, ActionIcon, Box, Title, SegmentedControl, Breadcrumbs, Anchor, ColorSwatch, AspectRatio, Overlay, rem, SimpleGrid, Indicator, Table, createTheme, PinInput, Drawer as Drawer$1, ScrollArea, NumberInput, PasswordInput, Textarea, Grid } from '@mantine/core';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
 import _extends from '@babel/runtime/helpers/extends';
 import HighchartsReact from 'highcharts-react-official';
 import HighchartsRounded from 'highcharts-rounded-corners';
 import * as IconSax from 'iconsax-react';
 import { Link } from 'react-router-dom';
-import { useDisclosure } from '@mantine/hooks';
+import { useDisclosure, useToggle } from '@mantine/hooks';
 import '@fontsource/poppins/100.css';
 import '@fontsource/poppins/200.css';
 import '@fontsource/poppins/300.css';
@@ -18,6 +18,7 @@ import '@fontsource/poppins/500.css';
 import '@fontsource/poppins/600.css';
 import '@fontsource/poppins/700.css';
 import '@fontsource/poppins/800.css';
+import { useForm } from '@mantine/form';
 
 function _mergeNamespaces(n, m) {
 	m.forEach(function (e) {
@@ -11321,8 +11322,8 @@ const createAreaFillGradient = function (baseColor) {
   };
 };
 
-function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 
 // Initialize Highcharts with rounded corners
 if (typeof window !== "undefined") {
@@ -11331,8 +11332,8 @@ if (typeof window !== "undefined") {
 const Column = props => {
   const chartRef = useRef(null);
   const chartOptions = useMemo(() => {
-    const column = _objectSpread$4({}, props);
-    return _objectSpread$4(_objectSpread$4({}, initChart$2(column)), initSeries$2(column));
+    const column = _objectSpread$5({}, props);
+    return _objectSpread$5(_objectSpread$5({}, initChart$2(column)), initSeries$2(column));
   }, [props]);
   useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11435,7 +11436,7 @@ const initSeries$2 = props => {
         enableMouseTracking: false,
         showInLegend: false
       });
-      const mainSeries = _objectSpread$4(_objectSpread$4({}, fillSeries(boundary)), {
+      const mainSeries = _objectSpread$5(_objectSpread$5({}, fillSeries(boundary)), {
         name: props.yAxisLabel[0],
         color: seriesColors ? seriesColors[0] : "gray",
         data: seriesData[0],
@@ -11475,7 +11476,7 @@ const initSeries$2 = props => {
         pointWidth: undefined
       }
     };
-    const plot = _objectSpread$4(_objectSpread$4({}, {
+    const plot = _objectSpread$5(_objectSpread$5({}, {
       column: {
         borderWidth: 0,
         borderRadius: 10
@@ -11530,13 +11531,13 @@ const initChart$1 = props => {
   };
 };
 
-function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const Area = props => {
   const chartRef = useRef(null);
   const chartOptions = useMemo(() => {
-    const area = _objectSpread$3({}, props);
-    return _objectSpread$3(_objectSpread$3({}, initChart$1(area)), initSeries$1(area));
+    const area = _objectSpread$4({}, props);
+    return _objectSpread$4(_objectSpread$4({}, initChart$1(area)), initSeries$1(area));
   }, [props]);
   useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -11597,7 +11598,7 @@ const initSeries$1 = props => {
     const labels = {
       color: "#575E77"
     };
-    return _objectSpread$3(_objectSpread$3({}, defaults), {
+    return _objectSpread$4(_objectSpread$4({}, defaults), {
       labels
     });
   };
@@ -11635,8 +11636,8 @@ const initSeries$1 = props => {
 };
 
 const _excluded$c = ["withLegend", "centerLabel", "centerValue"];
-function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const initChart = _ref => {
   let {
       withLegend,
@@ -11686,7 +11687,7 @@ const initChart = _ref => {
     },
     legend: !withLegend ? {
       enabled: false
-    } : _objectSpread$2(_objectSpread$2({}, {
+    } : _objectSpread$3(_objectSpread$3({}, {
       enabled: true,
       layout: "vertical",
       verticalAlign: "middle",
@@ -11719,13 +11720,13 @@ const initChart = _ref => {
   };
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const DonutChart = props => {
   const chartRef = useRef(null);
   const chartOptions = useMemo(() => {
-    const area = _objectSpread$1({}, props);
-    return _objectSpread$1(_objectSpread$1({}, initChart(area)), initSeries(area));
+    const area = _objectSpread$2({}, props);
+    return _objectSpread$2(_objectSpread$2({}, initChart(area)), initSeries(area));
   }, [props]);
   useEffect(() => {
     if (chartRef.current && chartRef.current.chart) {
@@ -12355,25 +12356,6 @@ const SimpleText = _ref => {
   }, rest), label);
 };
 
-const theme = createTheme({
-  focusRing: "never",
-  colors: {
-    adiba: ["#E7E8EB", "#CFD1D8", "#B7BAC4", "#9FA3B1", "#575E77", "#273050", "#0f193d", "#0D1636", "#0C1430", "#0A112A"],
-    altiba: ["#F4E2CE", "#EED4B5", "#E9C59D", "#D89A54", "#D38C3B", "#CD7E23", "#c8700b", "#B46409", "#A05908", "#8C4E07"]
-  },
-  fontFamily: "Poppins",
-  headings: {
-    fontFamily: "Poppins",
-    fontWeight: "500"
-  },
-  primaryColor: "adiba",
-  other: {
-    fontWeights: {
-      normal: 300
-    }
-  }
-});
-
 const _excluded$6 = ["createFn", "icon", "label"];
 const PageTitle = _ref => {
   var _switcher$items;
@@ -12407,8 +12389,7 @@ const PageTitle = _ref => {
     rightsection = /*#__PURE__*/React.createElement(SegmentedControl, {
       size: "sm",
       bg: "white",
-      bd: "1px solid gray.3",
-      color: theme.primaryColor,
+      color: 'adiba',
       data: switcher.items
     });
   }
@@ -13044,6 +13025,25 @@ const File = _ref => {
   }, /*#__PURE__*/React.createElement(Icons, rightsection === null || rightsection === void 0 ? void 0 : rightsection.icon)) : undefined)));
 };
 
+const theme = createTheme({
+  focusRing: "never",
+  colors: {
+    adiba: ["#E7E8EB", "#CFD1D8", "#B7BAC4", "#9FA3B1", "#575E77", "#273050", "#0f193d", "#0D1636", "#0C1430", "#0A112A"],
+    altiba: ["#F4E2CE", "#EED4B5", "#E9C59D", "#D89A54", "#D38C3B", "#CD7E23", "#c8700b", "#B46409", "#A05908", "#8C4E07"]
+  },
+  fontFamily: "Poppins",
+  headings: {
+    fontFamily: "Poppins",
+    fontWeight: "500"
+  },
+  primaryColor: "adiba",
+  other: {
+    fontWeights: {
+      normal: 300
+    }
+  }
+});
+
 var ErrorAnimation = "data:null;base64,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";
 
 const ErrorModal = _ref => {
@@ -13227,20 +13227,43 @@ const Drawer = _ref => {
   }, page))));
 };
 
-const _excluded$1 = ["fields", "isEditable", "layout"];
+const _excluded$1 = ["fields", "isEditable", "layout", "hasSubmit", "hasReset"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const SimpleForm = _ref => {
   let {
       fields,
       isEditable = true,
-      layout = []
-    } = _ref;
-    _objectWithoutProperties(_ref, _excluded$1);
+      layout = [],
+      hasSubmit,
+      hasReset
+    } = _ref,
+    rest = _objectWithoutProperties(_ref, _excluded$1);
   const components = {
     Textarea: Textarea,
     TextInput: TextInput,
     PasswordInput: PasswordInput,
     NumberInput: NumberInput
   };
+  const form = useForm({
+    mode: "uncontrolled",
+    initialValues: () => {
+      const localInitialValues = {};
+      fields.forEach((field, index) => {
+        if (typeof field === "string") {
+          const sanitizedField = santize(field);
+          localInitialValues[sanitizedField.name] = "";
+        }
+        if (typeof field === "object" && Object.keys(components).includes(field.component)) {
+          var _field$field;
+          const sanitizedField = santize((_field$field = field.field) !== null && _field$field !== void 0 ? _field$field : "");
+          localInitialValues[sanitizedField.name] = "";
+        }
+      });
+      return _objectSpread$1(_objectSpread$1({}, localInitialValues), rest.initialValues);
+    },
+    validate: rest.formValidate
+  });
   const indexDiff = fields.length - layout.length;
   layout.push(...Array(indexDiff).fill(12));
   const inputProps = {
@@ -13254,29 +13277,47 @@ const SimpleForm = _ref => {
     variant: !isEditable ? "unstyled" : "default",
     required: true
   };
-  return /*#__PURE__*/React.createElement(Grid, null, fields.map((field, index) => {
+  return /*#__PURE__*/React.createElement("form", {
+    onSubmit: form.onSubmit(values => {
+      var _rest$onSubmit;
+      return hasSubmit ? (_rest$onSubmit = rest.onSubmit) === null || _rest$onSubmit === void 0 ? void 0 : _rest$onSubmit.call(rest, values) : void 0;
+    }),
+    onReset: form.reset,
+    style: {
+      height: "100%"
+    }
+  }, /*#__PURE__*/React.createElement(Stack, {
+    h: "100%"
+  }, /*#__PURE__*/React.createElement(Grid, null, fields.map((field, index) => {
     if (typeof field === "string") {
+      const sanitizedField = santize(field);
       return /*#__PURE__*/React.createElement(Grid.Col, {
         key: index,
         span: layout[index]
-      }, /*#__PURE__*/React.createElement(TextInput, _extends({}, inputProps, santize(field))));
+      }, /*#__PURE__*/React.createElement(TextInput, _extends({}, inputProps, sanitizedField, form.getInputProps(sanitizedField.name))));
     }
     if (typeof field === "function") {
       return /*#__PURE__*/React.createElement(Grid.Col, {
         key: index,
         span: layout[index]
-      }, field());
+      }, field(form.getInputProps));
     }
-    if (["Textarea", "TextInput", "PasswordInput", "NumberInput"].includes(field.component)) {
-      var _field$field;
+    if (Object.keys(components).includes(field.component)) {
+      var _field$field2;
       const Component = components[field.component];
+      const sanitizedField = santize((_field$field2 = field.field) !== null && _field$field2 !== void 0 ? _field$field2 : "");
       return /*#__PURE__*/React.createElement(Grid.Col, {
         key: index,
         span: layout[index]
-      }, /*#__PURE__*/React.createElement(Component, _extends({}, field.field, inputProps, santize((_field$field = field.field) !== null && _field$field !== void 0 ? _field$field : ""))));
+      }, /*#__PURE__*/React.createElement(Component, _extends({}, field.field, inputProps, sanitizedField, form.getInputProps(sanitizedField.name))));
     }
     return null;
-  }));
+  })), /*#__PURE__*/React.createElement(Space, {
+    flex: 1
+  }), /*#__PURE__*/React.createElement(FormButtons, {
+    hasSubmit,
+    hasReset
+  })));
 };
 const santize = field => {
   var _ref2, _field$label, _field$placeholder, _field$name, _field$name$split$joi, _field$name2;
@@ -13294,6 +13335,130 @@ const santize = field => {
     name: (_field$name$split$joi = (_field$name2 = field.name) === null || _field$name2 === void 0 ? void 0 : _field$name2.split(" ").join("_").toLowerCase()) !== null && _field$name$split$joi !== void 0 ? _field$name$split$joi : ""
   };
 };
+const FormButtons = _ref3 => {
+  let {
+    hasSubmit = false,
+    hasReset = false
+  } = _ref3;
+  return /*#__PURE__*/React.createElement(Group, {
+    justify: "flex-end",
+    grow: true,
+    gap: 10,
+    w: "100%",
+    display: hasSubmit || hasReset ? "flex" : "none"
+  }, /*#__PURE__*/React.createElement(Button, {
+    leftSection: /*#__PURE__*/React.createElement(Icons, {
+      name: "CloseCircle",
+      size: 16
+    }),
+    variant: "filled",
+    color: "red",
+    size: "lg",
+    radius: "xl",
+    miw: "25%",
+    type: "reset",
+    style: {
+      display: hasReset ? "block" : "none"
+    },
+    flex: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    fw: 400,
+    fz: "sm",
+    c: "white"
+  }, "Cancel")), /*#__PURE__*/React.createElement(Button, {
+    leftSection: /*#__PURE__*/React.createElement(Icons, {
+      name: "TickCircle",
+      size: 16
+    }),
+    variant: "filled",
+    color: "adiba.5",
+    size: "lg",
+    radius: "xl",
+    miw: "25%",
+    type: "submit",
+    style: {
+      display: hasSubmit ? "block" : "none"
+    },
+    flex: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    fw: 300,
+    fz: "sm",
+    c: "white"
+  }, "Save")));
+};
+
+const MaskedTilePanel = _ref => {
+  let {
+    label,
+    value,
+    icon,
+    onMasked = () => true
+  } = _ref;
+  const [masked, toggle] = useToggle();
+  const name = masked ? "Eye" : "EyeSlash";
+  return /*#__PURE__*/React.createElement(Card, {
+    p: "md",
+    bg: "gray.0",
+    style: {
+      borderRadius: "10px"
+    }
+  }, /*#__PURE__*/React.createElement(Group, {
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 0,
+    p: 0
+  }, /*#__PURE__*/React.createElement(Text, {
+    fz: "sm",
+    fw: 300,
+    p: 0,
+    c: "gray.7"
+  }, label), /*#__PURE__*/React.createElement(TextInput, {
+    type: masked ? "password" : "text",
+    fw: 300,
+    p: 0,
+    c: "adiba",
+    value: value,
+    variant: "unstyled",
+    readOnly: true
+  })), /*#__PURE__*/React.createElement(ActionIcon, {
+    variant: "transparent",
+    onClick: () => onMasked() ? toggle() : void 0
+  }, icon && /*#__PURE__*/React.createElement(Icons, {
+    size: 24,
+    color: "gray",
+    name: name
+  }))));
+};
+const TilePanel = _ref2 => {
+  let {
+    label,
+    value
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(Card, {
+    p: "md",
+    bg: "gray.0",
+    style: {
+      borderRadius: "10px"
+    }
+  }, /*#__PURE__*/React.createElement(Group, {
+    justify: "space-between"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    gap: 0,
+    p: 0
+  }, /*#__PURE__*/React.createElement(Text, {
+    fz: "sm",
+    fw: 300,
+    p: 0,
+    c: "gray.7"
+  }, label), /*#__PURE__*/React.createElement(TextInput, {
+    fw: 300,
+    p: 0,
+    c: "adiba",
+    value: value,
+    variant: "unstyled",
+    readOnly: true
+  }))));
+};
 
 var ConfirmAnimation = "data:null;base64,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";
 
@@ -13467,4 +13632,4 @@ const useManagedModals = () => {
   };
 };
 
-export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DonutChart, Drawer, DynamicLogo, DynamicShigaLogo, EqualizerColumn, ErrorModal, File, Icons, InfoModal, LabelPanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimpleForm, SimpleModal, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, SuccessModal, TitleWithIndex, TitledPanel, TwoFactorModal, UserMenu, theme, useManagedModals, useModal };
+export { ApplicationMenu, ApplicationPanel, AvatarLabelPanel, ConnectionPanel, DonutChart, Drawer, DynamicLogo, DynamicShigaLogo, EqualizerColumn, ErrorModal, File, Icons, InfoModal, LabelPanel, MaskedTilePanel, PageTitle, PaymentMethod, PaymentMethodAdd, SearchPanel, SideMenu, SimpleArea, SimpleColumn, SimpleForm, SimpleModal, SimplePanel, SimpleTable, SimpleText, StackedColumn, SubscriptionPlans, SuccessModal, TilePanel, TitleWithIndex, TitledPanel, TwoFactorModal, UserMenu, theme, useManagedModals, useModal };

package/build/typings/components/forms/simple/Simple.stories.d.ts

@@ -4,3 +4,5 @@ import { SimpleForm } from "./Simple";
 declare const _default: Meta<typeof SimpleForm>;
 export default _default;
 export declare const SimpleFormContainer: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Simple.types").SimpleFormProps>;
+export declare const FunctionFormContainer: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Simple.types").SimpleFormProps>;
+export declare const ComponentFormContainer: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./Simple.types").SimpleFormProps>;

package/build/typings/components/forms/simple/Simple.types.d.ts

@@ -1,5 +1,5 @@
 import { NumberInputProps, PasswordInputProps, TextareaProps, TextInputProps } from "@mantine/core";
-type FormInput = string | FormInputObject | Function;
+type FormInput = string | FormInputObject | ((props: (name: string) => any) => React.ReactNode);
 export interface FormInputObject {
     component: "Textarea" | "TextInput" | "PasswordInput" | "NumberInput";
     field: TextInputProps | TextareaProps | PasswordInputProps | NumberInputProps;
@@ -12,5 +12,9 @@ export interface SimpleFormProps {
     hasReset?: boolean;
     hasSubmit?: boolean;
     isEditable: boolean;
+    initialValues?: Record<string, string>;
+    formValidate?: {
+        [key: string]: (value: string) => string | null;
+    };
 }
 export {};

package/build/typings/components/index.d.ts

@@ -25,3 +25,4 @@ export { SuccessModal } from "./modals/success/Success";
 export { TwoFactorModal } from "./modals/twofactor/Twofactor";
 export { Drawer } from "./general/drawer/Drawer";
 export { SimpleForm } from "./forms/simple/Simple";
+export { MaskedTilePanel, TilePanel } from "./panels/tile/Tile";

package/build/typings/components/panels/tile/Tile.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { TilePanelProps } from "./Tile.types";
+export declare const MaskedTilePanel: React.FC<TilePanelProps>;
+export declare const TilePanel: React.FC<TilePanelProps>;

package/build/typings/components/panels/tile/Tile.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/react/*";
+import { MaskedTilePanel } from "./Tile";
+import "@mantine/core/styles.css";
+import "../../global.css";
+declare const _default: Meta<typeof MaskedTilePanel>;
+export default _default;
+export declare const TilePanelContainer: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react/*").ReactRenderer, import("./Tile.types").TilePanelProps>;

package/build/typings/components/panels/tile/Tile.types.d.ts

@@ -0,0 +1,7 @@
+import { IconsProps } from "../../general/icons/Icons.types";
+export interface TilePanelProps {
+    label: string;
+    value: string;
+    icon?: IconsProps;
+    onMasked?: () => boolean;
+}

package/build/typings/components/theme.d.ts

@@ -7,7 +7,7 @@ import "@fontsource/poppins/600.css";
 import "@fontsource/poppins/700.css";
 import "@fontsource/poppins/800.css";
 export declare const theme: {
-    focusRing?: "auto" | "never" | "always" | undefined;
+    focusRing?: "auto" | "always" | "never" | undefined;
     scale?: number | undefined;
     fontSmoothing?: boolean | undefined;
     white?: string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adiba-banking-cloud/backoffice",
   "author": "TUROG Technologies",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "description": "An ADIBA component library for backoffice and dashboard applications",
   "license": "ISC",
   "main": "build/index.cjs.js",
@@ -34,6 +34,7 @@
     "@mantine/core": "^7.12.2",
     "@mantine/hooks": "^7.12.2",
     "@mantine/modals": "^7.17.8",
+    "@mantine/form": "^7.17.8",
     "highcharts-react-official": "^3.2.2",
     "highcharts-rounded-corners": "^1.0.7",
     "iconsax-react": "^0.0.8",
@@ -57,6 +58,7 @@
     "@hello-pangea/dnd": "^16.5.0",
     "@lottiefiles/dotlottie-react": "^0.14.1",
     "@mantine/core": "^7.12.2",
+    "@mantine/form": "^7.17.8",
     "@mantine/hooks": "^7.12.2",
     "@mantine/modals": "^7.17.8",
     "@rollup/plugin-babel": "^6.0.3",