@codezee/sixtify-brahma 0.2.188 → 0.2.190

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codezee/sixtify-brahma",
-  "version": "0.2.188",
+  "version": "0.2.190",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/hardikranpariya/sixtify-brahma.git"
@@ -124,6 +124,7 @@
     "gh-pages": "^6.3.0",
     "html2canvas": "^1.4.1",
     "i18next": "^23.12.1",
+    "iconoir-react": "^7.11.0",
     "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts

@@ -1,7 +1,7 @@
 import type { AutocompleteValue, AutocompleteProps as MuiAutocompleteProps, StackProps } from "@mui/material";
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps, type UseFormSetValue } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
-import type { OnAction } from "../../utils/types";
+import type { OnAction, Styling } from "../../utils/types";
 export type Option = {
     heading?: string;
     label: string;
@@ -37,7 +37,7 @@ export type AutocompleteProps<P extends FieldValues> = UseControllerProps<P> & O
     disableClearable?: boolean;
     setValue?: UseFormSetValue<P>;
     containerProps?: StackProps;
-    styling?: "custom" | "default";
+    styling?: Styling;
     disabledAction?: boolean;
     navigationKey?: NavigationKey;
     customOnChange?: (selected: any) => void;

package/packages/shared-components/dist/FormFields/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"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"}

package/packages/shared-components/dist/FormFields/Autocomplete/Skeleton.d.ts

@@ -1,6 +1,7 @@
+import type { Styling } from "../../utils/types";
 type SkeletonProps = {
     label?: string;
-    styling: "custom" | "default";
+    styling: Styling;
 };
 export declare const Skeleton: ({ label, styling }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/packages/shared-components/dist/FormFields/Autocomplete/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Skeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CAAC;AACF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAoBzD,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/Autocomplete/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AACF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAoBzD,CAAC"}

package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.d.ts

@@ -4,6 +4,7 @@ import type { DateView, PickerValidDate } from "@mui/x-date-pickers/models";
 import React from "react";
 import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
+import type { Styling } from "../../utils/types";
 export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> & MuiDatePickerProps<PickerValidDate> & Partial<{
     label?: string;
     required: boolean;
@@ -21,7 +22,7 @@ export type DatePickerProps<P extends FieldValues> = UseControllerProps<P> & Mui
         message?: string;
     }) => void;
     containerProps?: StackProps;
-    styling?: "custom" | "default";
+    styling?: Styling;
     navigationKey?: NavigationKey;
 }>;
 export declare const dateFormats: {

package/packages/shared-components/dist/FormFields/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,OAAkB,EAClB,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAkOpB"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+B,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7E,OAAO,KAAK,EAAE,eAAe,IAAI,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAE5F,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAG5E,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GACxE,kBAAkB,CAAC,eAAe,CAAC,GACnC,OAAO,CAAC;IACN,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAC;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAEL,eAAO,MAAM,WAAW;;;CAGvB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAcjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAclC,CAAC;AAEF,wBAAgB,UAAU,CAAC,CAAC,SAAS,WAAW,EAAE,EAChD,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,oBAA4B,EAC5B,gBAAwB,EACxB,KAAgC,EAChC,MAAqC,EACrC,cAAc,EACd,OAAkB,EAClB,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,eAAe,CAAC,CAAC,CAAC,2CAkOpB"}

package/packages/shared-components/dist/FormFields/DatePicker/Skeleton.d.ts

@@ -1,6 +1,7 @@
+import type { Styling } from "../../utils/types";
 type SkeletonProps = {
     label?: string;
-    styling: "custom" | "default";
+    styling: Styling;
 };
 export declare const Skeleton: ({ label, styling }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/packages/shared-components/dist/FormFields/DatePicker/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/Skeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAqBzD,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DatePicker/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAqBzD,CAAC"}

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts

@@ -3,6 +3,7 @@ import type { PickerValidDate } from "@mui/x-date-pickers/models";
 import { type ReactElement } from "react";
 import type { FieldError, FieldValues, UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
+import type { Styling } from "../../utils/types";
 export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> & MuiDateTimePickerProps<PickerValidDate> & Partial<{
     label: string;
     required: boolean;
@@ -19,7 +20,7 @@ export type DateTimePickerProps<P extends FieldValues> = UseControllerProps<P> &
         type: string;
         message?: string;
     }) => void;
-    styling?: "custom" | "default";
+    styling?: Styling;
     navigationKey?: NavigationKey;
 }>;
 export declare function DateTimePicker<P extends FieldValues>({ control, defaultValue, disabled, label, readOnly, name, error, helperText, loading, required, clearable, rules, format, helperIcon, toolTipText, timeStepsMinutes, styling, navigationKey, ...restProps }: DateTimePickerProps<P>): import("react/jsx-runtime").JSX.Element;

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAwOxB"}
+{"version":3,"file":"DateTimePicker.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/DateTimePicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,IAAI,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAExG,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAc,EAAY,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EAGX,kBAAkB,EACnB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,WAAW,IAAI,kBAAkB,CAAC,CAAC,CAAC,GAC5E,sBAAsB,CAAC,eAAe,CAAC,GACvC,OAAO,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,CAAC,EACb,KAAK,EAAE,UAAU,GAAG;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAE,KACnD,IAAI,CAAC;IACV,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC,CAAC;AAwCL,wBAAgB,cAAc,CAAC,CAAC,SAAS,WAAW,EAAE,EACpD,OAAO,EACP,YAAY,EACZ,QAAgB,EAChB,KAAK,EACL,QAAgB,EAChB,IAAI,EACJ,KAAa,EACb,UAAU,EACV,OAAe,EACf,QAAgB,EAChB,SAAmC,EACnC,KAAK,EACL,MAA2B,EAC3B,UAAU,EACV,WAAW,EACX,gBAAoB,EACpB,OAAkB,EAClB,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,mBAAmB,CAAC,CAAC,CAAC,2CAwOxB"}

package/packages/shared-components/dist/FormFields/DateTimePicker/Skeleton.d.ts

@@ -1,6 +1,7 @@
+import type { Styling } from "../../utils/types";
 type SkeletonProps = {
     label?: string;
-    styling: "custom" | "default";
+    styling: Styling;
 };
 export declare const Skeleton: ({ label, styling }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/packages/shared-components/dist/FormFields/DateTimePicker/Skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/Skeleton.tsx"],"names":[],"mappings":"AAEA,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC/B,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAqBzD,CAAC"}
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DateTimePicker/Skeleton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,aAAa,GAAG;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,oBAAoB,aAAa,4CAqBzD,CAAC"}

package/packages/shared-components/dist/FormFields/DecimalTextField/DecimalTextField.d.ts

@@ -1,11 +1,12 @@
 import { type TextFieldProps as MuiTextFieldProps, type StackProps } from "@mui/material";
 import type { FieldValues, UseControllerProps } from "react-hook-form";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
+import type { Styling } from "../../utils/types";
 export type DecimalTextFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<MuiTextFieldProps, keyof UseControllerProps<P> | "type" | "value" | "onChange"> & {
     label?: string;
     loading?: boolean;
     containerProps?: StackProps;
-    styling?: "custom" | "default";
+    styling?: Styling;
     infoMessage?: React.ReactNode;
     decimalScale: number;
     defaultFallbackValue?: number;

package/packages/shared-components/dist/FormFields/DecimalTextField/DecimalTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DecimalTextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DecimalTextField/DecimalTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAO7C,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,IACrD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CACF,iBAAiB,EACjB,MAAM,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAC5D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC/B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,EACtD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAwB,EACxB,GAAG,EACH,GAAG,EACH,YAAY,EACZ,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,cAAc,EACd,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAsW1B"}
+{"version":3,"file":"DecimalTextField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/DecimalTextField/DecimalTextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,cAAc,IAAI,iBAAiB,EACxC,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,qBAAqB,CAAC,CAAC,SAAS,WAAW,IACrD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CACF,iBAAiB,EACjB,MAAM,kBAAkB,CAAC,CAAC,CAAC,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAC5D,GAAG;IACF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,WAAW,EAAE,EACtD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,oBAAwB,EACxB,GAAG,EACH,GAAG,EACH,YAAY,EACZ,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAe,EACf,WAAgB,EAChB,cAAc,EACd,OAAkB,EAClB,WAAW,EACX,cAAc,EACd,aAAqB,EACrB,GAAG,SAAS,EACb,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAsW1B"}

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileNames.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileNames.tsx"],"names":[],"mappings":"AAYA,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0CAIvB,cAAc,4CA+EhB,CAAC"}
+{"version":3,"file":"FileNames.d.ts","sourceRoot":"","sources":["../../../src/FormFields/FileUpload/FileNames.tsx"],"names":[],"mappings":"AAaA,KAAK,cAAc,GAAG;IACpB,SAAS,EAAE,MAAM,EAAE,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,0CAIvB,cAAc,4CAmFhB,CAAC"}

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.js

@@ -16,6 +16,7 @@ const react_1 = require("react");
 const uuid_1 = require("uuid");
 const utils_1 = require("../../utils");
 const ViewFilePreviewDialog_1 = require("./Dialogs/ViewFilePreviewDialog");
+const Tooltip_1 = require("../../Tooltip");
 const FileNames = ({ fileNames, previewEnabled = false, onDelete, }) => {
     const [selectedFile, setSelectedFile] = (0, react_1.useState)();
     const { openedDialog, onDialogClose, onDialogOpen } = (0, utils_1.useDialogActions)();
@@ -35,6 +36,6 @@ const FileNames = ({ fileNames, previewEnabled = false, onDelete, }) => {
     const dialogRenderer = {
         viewAttachment: selectedFile && ((0, jsx_runtime_1.jsx)(ViewFilePreviewDialog_1.ViewFilePreviewDialog, { open: openedDialog === "viewAttachment", onClose: onDialogClose, fileName: selectedFile })),
     };
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", maxHeight: "120px", overflow: "auto", children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(icons_material_1.AttachFile, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", maxHeight: "120px", overflow: "auto", children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(icons_material_1.AttachFile, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Preview", children: (0, jsx_runtime_1.jsx)(icons_material_1.VisibilityOutlined, {}) }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Delete", children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) }) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
 };
 exports.FileNames = FileNames;

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AASH,wBAAgB,WAAW,CAAC,EAC1B,OAAkB,EAClB,WAAmB,EACnB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,IAAQ,EACR,QAAiC,GAClC,EAAE,gBAAgB,2CAwMlB"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAKlD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,QAAQ,EAAE,QAAQ,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AASH,wBAAgB,WAAW,CAAC,EAC1B,OAAkB,EAClB,WAAmB,EACnB,YAAiB,EACjB,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,SAAiB,EACjB,OAAe,EACf,IAAQ,EACR,QAAiC,GAClC,EAAE,gBAAgB,2CA6OlB"}

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.js

@@ -28,7 +28,7 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
         isOpen: isOpenCaptureModal,
     });
     const theme = (0, material_1.useTheme)();
-    const { butterflyBlue, iron } = theme.palette.app.color;
+    const { butterflyBlue, iron, lightBlue } = theme.palette.app.color;
     const handleFileChange = (event) => {
         if (event.target.files) {
             const files = Array.from(event.target.files);
@@ -69,21 +69,25 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
     if (loading) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { flexWrap: isCapture ? "wrap" : "nowrap", gap: "20px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => !defaultValue && inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), tabIndex: 0, role: "button", "aria-label": label ?? "Upload image", sx: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { flexWrap: isCapture ? "wrap" : "nowrap", gap: "20px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { onClick: () => !defaultValue && inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onMouseEnter: () => setHover(true), onFocus: () => setHover(true), onBlur: (e) => {
+                            if (!e.currentTarget.contains(e.relatedTarget)) {
+                                setHover(false);
+                            }
+                        }, onMouseLeave: () => setHover(false), tabIndex: 0, role: "button", "aria-label": label ?? "Upload image", sx: {
                             height: "120px",
                             width: "120px",
                             position: "relative",
                             overflow: "hidden",
                             border: defaultValue
-                                ? `2px solid ${butterflyBlue[900]}`
-                                : `2px dashed ${theme.palette.grey[400]}`,
+                                ? `1px solid ${butterflyBlue[900]}`
+                                : `1px solid ${theme.palette.grey[400]}`,
                             cursor: "pointer",
                             borderRadius: "10px",
                             "& img": {
                                 borderRadius: "10px",
                             },
                             ":hover": {
-                                border: `2px dashed ${butterflyBlue[900]}`,
+                                border: `1px solid ${butterflyBlue[900]}`,
                             },
                             ":focus-visible": {
                                 outline: `2px solid ${butterflyBlue[900]}`,
@@ -97,7 +101,21 @@ function ImageUpload({ variant = "square", isUploading = false, defaultValue = "
                                     },
                                 }
                                 : {}),
-                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", ref: setInputRef, accept: imageFileType.join(","), onChange: handleFileChange, style: { display: "none" } }), hover && !!defaultValue && ((0, jsx_runtime_1.jsxs)(ImageUpload_styled_1.DarkBackgroundContainer, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => inputRef.current?.click(), children: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, { sx: { color: "white" } }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: handleFileRemove, children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, { sx: { color: "white" } }) })] })), isUploading && ((0, jsx_runtime_1.jsx)(ImageUpload_styled_1.DarkBackgroundContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: iron[600], children: "Processing..." }) })), defaultValue ? ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, style: {
+                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", ref: setInputRef, accept: imageFileType.join(","), onChange: handleFileChange, style: { display: "none" } }), (0, jsx_runtime_1.jsx)(material_1.Fade, { in: hover && !!defaultValue, timeout: { enter: 300, exit: 1000 }, children: (0, jsx_runtime_1.jsxs)(ImageUpload_styled_1.DarkBackgroundContainer, { onFocus: () => setHover(true), onBlur: (e) => {
+                                        if (!e.currentTarget.contains(e.relatedTarget)) {
+                                            setHover(false);
+                                        }
+                                    }, children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { tabIndex: 0, onClick: () => inputRef.current?.click(), onKeyDown: (event) => {
+                                                if (event.key === "Enter" || event.key === " ") {
+                                                    event.preventDefault();
+                                                    inputRef.current?.click();
+                                                }
+                                            }, children: (0, jsx_runtime_1.jsx)(icons_material_1.Edit, { sx: { color: lightBlue[50] } }) }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onKeyDown: (event) => {
+                                                if (event.key === "Enter" || event.key === " ") {
+                                                    event.preventDefault();
+                                                    onDelete();
+                                                }
+                                            }, tabIndex: 0, onClick: handleFileRemove, children: (0, jsx_runtime_1.jsx)(icons_material_1.Delete, { sx: { color: lightBlue[50] } }) })] }) }), isUploading && ((0, jsx_runtime_1.jsx)(ImageUpload_styled_1.DarkBackgroundContainer, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { color: iron[600], children: "Processing..." }) })), defaultValue ? ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, style: {
                                         width: "100%",
                                         height: "100%",
                                         objectFit: "cover",

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,uBAAuB,EAAE,aAAa,CAAC,QAAQ,CAe1D,CAAC"}
+{"version":3,"file":"ImageUpload.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/ImageUpload/ImageUpload.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,uBAAuB,EAAE,aAAa,CAAC,QAAQ,CAgB1D,CAAC"}

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.styled.js

@@ -9,10 +9,11 @@ exports.DarkBackgroundContainer = (0, material_1.styled)(material_1.Box)(({ them
         left: 0,
         right: 0,
         bottom: 0,
-        backgroundColor: theme.palette.app.color.mirage[600],
+        backgroundColor: (0, material_1.alpha)(theme.palette.app.color.mirage[600], 0.2),
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        transition: "opacity 0.5s ease",
+        backdropFilter: "blur(3px)",
+        transition: "1s",
     };
 });

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.d.ts

@@ -1,6 +1,7 @@
 import { type ControllerRenderProps, type FieldValues, type UseControllerProps } from "react-hook-form";
 import type { PhoneInputProps } from "react-phone-input-2";
 import { type NavigationKey } from "../../utils/hooks/useFormFieldFocus";
+import type { Styling } from "../../utils/types";
 export type PhoneInputFieldProps<P extends FieldValues> = UseControllerProps<P> & Omit<PhoneInputProps, keyof ControllerRenderProps<P>> & {
     label?: string;
     loading?: boolean;
@@ -9,6 +10,7 @@ export type PhoneInputFieldProps<P extends FieldValues> = UseControllerProps<P>
     error?: boolean;
     helperText?: string;
     navigationKey?: NavigationKey;
+    styling?: Styling;
 };
-export declare function PhoneInputField<P extends FieldValues>({ control, name, defaultValue, rules, label, disabled, required, rows, loading, placeholder, error, helperText, navigationKey, ...phoneInputProps }: PhoneInputFieldProps<P>): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneInputField<P extends FieldValues>({ control, name, defaultValue, rules, label, disabled, required, rows, loading, placeholder, error, helperText, navigationKey, styling, ...phoneInputProps }: PhoneInputFieldProps<P>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=PhoneInputField.d.ts.map

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,aAAqB,EACrB,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAuNzB"}
+{"version":3,"file":"PhoneInputField.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE3D,OAAO,EAEL,KAAK,aAAa,EACnB,MAAM,qCAAqC,CAAC;AAG7C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,CAAC,CAAC,SAAS,WAAW,IACpD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,eAAe,EAAE,MAAM,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEN,wBAAgB,eAAe,CAAC,CAAC,SAAS,WAAW,EAAE,EACrD,OAAO,EACP,IAAI,EACJ,YAAY,EACZ,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,QAAQ,EACR,IAAI,EACJ,OAAe,EACf,WAAgB,EAChB,KAAK,EACL,UAAU,EACV,aAAqB,EACrB,OAAkB,EAClB,GAAG,eAAe,EACnB,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAkMzB"}

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.js

@@ -11,10 +11,11 @@ const react_1 = require("react");
 const react_hook_form_1 = require("react-hook-form");
 const react_phone_input_2_1 = __importDefault(require("react-phone-input-2"));
 const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
+const PhoneInputField_styled_1 = require("./PhoneInputField.styled");
 const Skeleton_1 = require("./Skeleton");
-function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, navigationKey = "tab", ...phoneInputProps }) {
+function PhoneInputField({ control, name, defaultValue, rules, label, disabled = false, required, rows, loading = false, placeholder = "", error, helperText, navigationKey = "tab", styling = "custom", ...phoneInputProps }) {
     const theme = (0, material_1.useTheme)();
-    const { iron, red, butterflyBlue, slate } = theme.palette.app.color;
+    const { iron, red, slate } = theme.palette.app.color;
     const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({
         name,
         control,
@@ -84,35 +85,9 @@ function PhoneInputField({ control, name, defaultValue, rules, label, disabled =
         };
     }, [setInputRef, restField, disabled]);
     if (loading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, rows: rows, styling: styling });
     }
-    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, sx: {
-                            "& .phone-input-container": {
-                                ...(disabled
-                                    ? {}
-                                    : {
-                                        "&:focus-within": {
-                                            border: `2px solid ${butterflyBlue[900]} !important`,
-                                        },
-                                    }),
-                            },
-                            "& .phone-input-field": {
-                                ...(disabled
-                                    ? {}
-                                    : {
-                                        "&:focus": {
-                                            "& ~ .flag-dropdown": {
-                                                borderColor: error ? red[900] : butterflyBlue[900],
-                                            },
-                                        },
-                                    }),
-                            },
-                            "& .flag-dropdown": {
-                                "&.open": {
-                                    borderColor: error ? red[900] : butterflyBlue[900],
-                                },
-                            },
-                        }, children: (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, placeholder: placeholder || label, onChange: (phone) => {
+    return ((0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "4px", children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(material_1.InputLabel, { required: required, disabled: disabled, children: label })), (0, jsx_runtime_1.jsx)(PhoneInputField_styled_1.PhoneInputWrapper, { ref: containerRef, styling: styling, error: error, className: styling === "custom" ? "custom_phone_input" : "default_phone_input", children: (0, jsx_runtime_1.jsx)(react_phone_input_2_1.default, { country: "in", enableSearch: true, disabled: disabled, specialLabel: label ?? "", placeholder: placeholder || label, onChange: (phone) => {
                                 onChange(phone);
                             }, value: value, onBlur: () => {
                                 restField.onBlur();

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.styled.d.ts

@@ -0,0 +1,10 @@
+import { type BoxProps } from "@mui/material";
+import type { ComponentType } from "react";
+import type { Styling } from "../../utils/types";
+type PhoneInputWrapperProps = BoxProps & {
+    styling?: Styling;
+    error?: boolean;
+};
+export declare const PhoneInputWrapper: ComponentType<PhoneInputWrapperProps>;
+export {};
+//# sourceMappingURL=PhoneInputField.styled.d.ts.map

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.styled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneInputField.styled.d.ts","sourceRoot":"","sources":["../../../src/FormFields/PhoneInputField/PhoneInputField.styled.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,QAAQ,EAAkB,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,KAAK,sBAAsB,GAAG,QAAQ,GAAG;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,aAAa,CAAC,sBAAsB,CAuNlE,CAAC"}

package/packages/shared-components/dist/FormFields/PhoneInputField/PhoneInputField.styled.js

@@ -0,0 +1,214 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PhoneInputWrapper = void 0;
+const material_1 = require("@mui/material");
+exports.PhoneInputWrapper = (0, material_1.styled)(material_1.Box)(({ styling, theme, error }) => {
+    const baseStyles = {
+        position: "relative",
+    };
+    const { red, butterflyBlue, iron, slate, black } = theme.palette.app.color;
+    if (styling === "custom") {
+        return {
+            ...baseStyles,
+            "&.custom_phone_input": {
+                "& .phone-input-container": {
+                    "&:focus-within": {
+                        border: `2px solid ${butterflyBlue[900]} !important`,
+                    },
+                },
+                "& .phone-input-field": {
+                    padding: "8.5px 50px 8.5px 30px",
+                    "&:focus": {
+                        "& ~ .flag-dropdown": {
+                            borderColor: error ? red[900] : butterflyBlue[900],
+                        },
+                    },
+                },
+                "& .flag-dropdown": {
+                    "&.open": {
+                        borderColor: error ? red[900] : butterflyBlue[900],
+                    },
+                },
+            },
+        };
+    }
+    return {
+        "&.default_phone_input": {
+            "& .react-tel-input": {
+                "& .form-control": {
+                    fontSize: "16px",
+                    background: iron[600],
+                    border: `1px solid ${slate[100]}`,
+                    borderRadius: "5px",
+                    width: "300px",
+                    outline: "none",
+                    padding: "18.5px 14px 18.5px 58px",
+                    transition: "box-shadow ease .25s, border-color ease .25s",
+                    "&:focus": {
+                        borderColor: butterflyBlue[900],
+                        boxShadow: `0 0 0 2px ${butterflyBlue[900]}`,
+                    },
+                    "&.invalid-number": {
+                        border: `1px solid ${red[900]}`,
+                        "&:focus": {
+                            boxShadow: `0 0 0 2px ${red[900]}`,
+                        },
+                        "&+div:before": {
+                            content: "'Error'",
+                            display: "none",
+                            color: `${red[900]}`,
+                            width: "27px",
+                        },
+                    },
+                },
+                "& .flag-dropdown": {
+                    position: "absolute",
+                    top: "0",
+                    bottom: "0",
+                    padding: "0",
+                    backgroundColor: iron[600],
+                    borderRadius: "3px 0 0 3px",
+                    "&:hover, &:focus": {
+                        cursor: "pointer",
+                    },
+                },
+                "& input[disabled]": {
+                    "&+.flag-dropdown": {
+                        "&:hover": {
+                            cursor: "default",
+                            borderColor: slate[100],
+                            "& .selected-flag": {
+                                backgroundColor: "transparent",
+                            },
+                        },
+                    },
+                },
+                "& .selected-flag": {
+                    outline: "none",
+                    position: "relative",
+                    height: "100%",
+                    padding: "0 0 0 8px",
+                    borderRadius: "3px 0 0 3px",
+                    "&:focus": {
+                        "& .arrow": {
+                            borderLeftWidth: "4px",
+                            borderRightWidth: "4px",
+                            borderTop: `5px solid ${butterflyBlue[900]}`,
+                        },
+                    },
+                    "& .flag": {
+                        position: "absolute",
+                        top: "50%",
+                        marginTop: "-6px",
+                    },
+                    "& .arrow": {
+                        position: "relative",
+                        top: "50%",
+                        marginTop: "-1px",
+                        width: "0",
+                        height: "0",
+                        borderLeft: "3px solid transparent",
+                        borderRight: "3px solid transparent",
+                        borderTop: "4px solid #555",
+                        "&.up": {
+                            borderTop: "none",
+                            borderBottom: "4px solid #555",
+                        },
+                    },
+                },
+                "& .country-list": {
+                    outline: "none",
+                    zIndex: 1,
+                    listStyle: "none",
+                    position: "absolute",
+                    padding: "0",
+                    margin: "10px 0 10px -1px",
+                    boxShadow: `1px 2px 18px ${black[900]}`,
+                    backgroundColor: "white",
+                    width: "300px",
+                    maxHeight: "220px",
+                    overflowY: "scroll",
+                    borderRadius: "7px",
+                    "& .flag": {
+                        display: "inline-block",
+                        position: "absolute",
+                        left: "13px",
+                        top: "8px",
+                        marginRight: "7px",
+                        marginTop: "2px",
+                    },
+                    "& .divider": {
+                        paddingBottom: "5px",
+                        marginBottom: "5px",
+                        borderBottom: "1px solid #ccc",
+                    },
+                    "& .country": {
+                        position: "relative",
+                        padding: "12px 9px 13px 46px",
+                        "& .dial-code": {
+                            color: "#6b6b6b",
+                        },
+                        "&:hover": {
+                            backgroundColor: "hsl(0, 0.00%, 94.50%)",
+                        },
+                        "&.highlight": {
+                            backgroundColor: slate[300],
+                        },
+                    },
+                    "& .country-name": {
+                        marginRight: "6px",
+                    },
+                    "& .search": {
+                        zIndex: 2,
+                        position: "sticky",
+                        top: "0",
+                        backgroundColor: "#fff",
+                        padding: "10px 0 6px 10px",
+                    },
+                    "& .search-emoji": {
+                        display: "none",
+                        fontSize: "15px",
+                    },
+                    "& .search-box": {
+                        border: `1px solid ${slate[100]}`,
+                        borderRadius: "3px",
+                        fontSize: "15px",
+                        lineHeight: "15px",
+                        marginLeft: "6px",
+                        padding: "3px 8px 5px",
+                        outline: "none",
+                        "&:hover": {
+                            borderColor: slate[50],
+                        },
+                    },
+                    "& .no-entries-message": {
+                        padding: "7px 10px 11px",
+                        opacity: ".7",
+                    },
+                },
+                "& .invalid-number-message": {
+                    position: "absolute",
+                    zIndex: 1,
+                    fontSize: "13px",
+                    left: "25px",
+                    top: "-7px",
+                    background: "#fff",
+                    padding: "0 5px",
+                    color: red[900],
+                },
+                "& .special-label": {
+                    position: "absolute",
+                    zIndex: 5,
+                    top: "-7px",
+                    left: "10px",
+                    display: "block",
+                    background: iron[600],
+                    opacity: "0.8",
+                    fontSize: "10.5px",
+                    whiteSpace: "nowrap",
+                    lineHeight: "1.1",
+                },
+            },
+        },
+    };
+});