@bikdotai/bik-component-library 0.0.488-beta-3 → 0.0.488-beta-6

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.d.ts

@@ -26,5 +26,8 @@ export interface BikImagePipelineProps {
         error?: string;
         success?: boolean;
     };
+    loadingStateOptions?: {
+        headerImage?: string;
+    };
 }
-export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, }: BikImagePipelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, loadingStateOptions, }: BikImagePipelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),r=require("../../image-compress/ImageCompress.js"),s=require("../../states/StateComponent.js");require("../../../_virtual/_tslib.js");var t=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=i=>{let{cropOptions:l,fileTitle:n,compressionOptions:p,currentImage:c,options:u,onFinish:d,onCancel:m,fileUploadOptions:g}=i;const h=o.useRef(null),[j,C]=o.useState(),[f,v]=o.useState(c),[x,I]=o.useState(!1);o.useEffect((()=>{u.upload?(C("upload"),setTimeout((()=>{b()}),500)):u.crop?C("crop"):u.compress?C("compress"):u.uploadToFirestorage?C("cloud-upload"):I(!0)}),[u.upload,u.crop,u.compress,u.uploadToFirestorage]);const S=o.useCallback(((e,o)=>{if(!u.uploadToFirestorage)return d(e,o),void I(!0);C("cloud-upload"),g&&g.uploadFile(o,g.path).then((r=>{d(e,o,r),I(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),F=e=>{e||m();const o=r.ImageService.base64ToImage(e);u.compress?(C("compress"),r.ImageService.compressImage(o,p).then((e=>{if(!e)return I(!0),void m();S(e.base64,e.compressedFile)}))):S(e,o)},b=()=>{h.current.click()};return x?e.jsx(e.Fragment,{}):"cloud-upload"===j?!g||g.success?e.jsx(e.Fragment,{}):g.error?e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{I(!0),m()}})}):e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.StateInterface.LOADING,heading:`Uploading your ${n||"photo"}`,subline:`Please wait while we upload your ${n||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxs(e.Fragment,{children:[u.upload&&e.jsx("input",{ref:h,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],r=new FileReader;r.onload=()=>{var e;v({src:r.result}),e=r.result,u.crop?C("crop"):F(e)},o&&r.readAsDataURL(o)}}),"crop"===j&&e.jsx(a.BikImageCropper,{src:f.src,onCropComplete:e=>{v({src:e}),F(e)},aspectRatio:l.aspectRatio,onCancel:m})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),r=require("../../image-compress/ImageCompress.js"),t=require("../../states/StateComponent.js");require("../../../_virtual/_tslib.js");var s=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=i=>{let{cropOptions:l,fileTitle:n,compressionOptions:p,currentImage:c,options:u,onFinish:d,onCancel:m,fileUploadOptions:g,loadingStateOptions:h}=i;const j=o.useRef(null),[C,I]=o.useState(),[f,v]=o.useState(c),[x,S]=o.useState(!1);o.useEffect((()=>{u.upload?(I("upload"),setTimeout((()=>{y()}),500)):u.crop?I("crop"):u.compress?I("compress"):u.uploadToFirestorage?I("cloud-upload"):S(!0)}),[u.upload,u.crop,u.compress,u.uploadToFirestorage]);const F=o.useCallback(((e,o)=>{if(!u.uploadToFirestorage)return d(e,o),void S(!0);I("cloud-upload"),g&&g.uploadFile(o,g.path).then((r=>{d(e,o,r),S(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),b=e=>{e||m();const o=r.ImageService.base64ToImage(e);u.compress?(I("compress"),r.ImageService.compressImage(o,p).then((e=>{if(!e)return S(!0),void m();F(e.base64,e.compressedFile)}))):F(e,o)},y=()=>{j.current.click()};return x?e.jsx(e.Fragment,{}):"cloud-upload"===C?!g||g.success?e.jsx(e.Fragment,{}):g.error?e.jsx("div",{children:e.jsx(s.StateModalComponent,{states:t.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{S(!0),m()}})}):e.jsx("div",{children:e.jsx(s.StateModalComponent,{headerImage:null==h?void 0:h.headerImage,states:t.StateInterface.LOADING,heading:`Uploading your ${n||"photo"}`,subline:`Please wait while we upload your ${n||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxs(e.Fragment,{children:[u.upload&&e.jsx("input",{ref:j,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],r=new FileReader;r.onload=()=>{var e;v({src:r.result}),e=r.result,u.crop?I("crop"):b(e)},o&&r.readAsDataURL(o)}}),"crop"===C&&e.jsx(a.BikImageCropper,{src:f.src,onCropComplete:e=>{v({src:e}),b(e)},aspectRatio:l.aspectRatio,onCancel:m})]})};

package/dist/cjs/components/states/StateComponent.d.ts

@@ -16,6 +16,7 @@ export declare enum ButtonTypes {
     DOUBLE = "DOUBLE"
 }
 export type StateComponentProps = {
+    headerImage?: string;
     states: StateInterface;
     heading: string;
     subline: string;

package/dist/cjs/components/states/StateComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,s=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),l=require("../TypographyStyle.js"),d=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",exports.ButtonActions=void 0,(t=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",t.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=e=>{var t;const n=()=>x==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):x==exports.StateInterface.WARNING?s.jsx(a.default,{}):x==exports.StateInterface.ERROR?s.jsx(o.default,{}):x===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:x,heading:p,subline:j,icon:S=n(),isButtonEnabled:y,type:h,buttonText:g,buttonType:B,onButtonClick:L,leadingIcon:C,width:I}=e;return s.jsxs(d.StateComponentContainer,Object.assign({width:I},{children:[s.jsx(d.StateIcon,{children:S}),s.jsxs(d.StateHeading,Object.assign({size:e.size},{children:["SMALL"===e.size&&s.jsx(l.TitleRegular,{children:p}),"SMALL"!==e.size&&s.jsx(l.TitleMedium,{children:p})]})),s.jsxs(d.StateSubline,{children:["SMALL"!==e.size&&s.jsx(l.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:j})),"SMALL"===e.size&&s.jsx(l.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:j}))]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),y&&s.jsx(s.Fragment,{children:s.jsxs(d.ButtonContainer,Object.assign({size:e.size},{children:[h==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>L&&L(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>L&&L(exports.ButtonActions.OTHER),buttonType:null!=B?B:"primary",LeadingIcon:C,buttonText:null!=g?g:"Retry",matchParentWidth:!0})]}))})]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,n,s=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),c=require("../button/Button.js"),u=require("../spinner/Spinner.js"),d=require("../TypographyStyle.js"),l=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",exports.ButtonActions=void 0,(t=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",t.OTHER="other",exports.ButtonTypes=void 0,(n=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",n.DOUBLE="DOUBLE";exports.StateComponent=e=>{var t;const n=()=>x==exports.StateInterface.SUCCESS?s.jsx(i.default,{}):x==exports.StateInterface.WARNING?s.jsx(a.default,{}):x==exports.StateInterface.ERROR?s.jsx(o.default,{}):x===exports.StateInterface.LOADING?s.jsx(u.Spinner,{size:"large"}):void 0,{states:x,heading:p,subline:j,icon:S=n(),isButtonEnabled:h,type:g,buttonText:y,buttonType:B,onButtonClick:I,leadingIcon:L,width:C,headerImage:O}=e;return s.jsxs(l.StateComponentContainer,Object.assign({width:C},{children:[s.jsx(l.StateIcon,{children:O?s.jsx("img",{src:O,width:"100%",height:"auto",alt:""}):S}),s.jsxs(l.StateHeading,Object.assign({size:e.size},{children:["SMALL"===e.size&&s.jsx(d.TitleRegular,{children:p}),"SMALL"!==e.size&&s.jsx(d.TitleMedium,{children:p})]})),s.jsxs(l.StateSubline,{children:["SMALL"!==e.size&&s.jsx(d.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:j})),"SMALL"===e.size&&s.jsx(d.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:j}))]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),h&&s.jsx(s.Fragment,{children:s.jsxs(l.ButtonContainer,Object.assign({size:e.size},{children:[g==exports.ButtonTypes.DOUBLE&&s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),s.jsx(c.Button,{onClick:()=>I&&I(exports.ButtonActions.OTHER),buttonType:null!=B?B:"primary",LeadingIcon:L,buttonText:null!=y?y:"Retry",matchParentWidth:!0})]}))})]}))};

package/dist/cjs/components/states-modal/StateModalComponent.d.ts

@@ -15,5 +15,6 @@ export type StateModalComponentProps = {
     width?: number;
     onClose?: () => void;
     zIndex?: number;
+    headerImage?: string;
 };
 export declare const StateModalComponent: React.FC<React.PropsWithChildren<StateModalComponentProps>>;

package/dist/cjs/components/states-modal/StateModalComponent.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/successIcon.svg.js"),o=require("../../assets/icons/warningIcon.svg.js"),r=require("../modals/styledModal.js"),a=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=l=>{const d=()=>u==c.StateInterface.SUCCESS?e.jsx(i.default,{}):u==c.StateInterface.WARNING?e.jsx(o.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(a.Spinner,{size:"large"}):void 0,{states:u,heading:j,subline:I,icon:S=d(),isButtonEnabled:x,type:C,buttonText:p,onButtonClick:f,leadingIcon:g,width:O,zIndex:b}=l,[h,q]=t.useState(!0);return e.jsx(r.StyledModal,Object.assign({open:h,onClose:function(){l.onClose&&l.onClose(),q(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:O},hideCrossButton:u===c.StateInterface.LOADING,zIndex:b||n.ComponentZindex.STATE_MODAL},{children:e.jsx(c.StateComponent,Object.assign({states:u,heading:j,subline:I,isButtonEnabled:x,leadingIcon:g,type:C,buttonText:p,onButtonClick:f,icon:S,width:O||400},{children:l.children}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),r=require("../../assets/icons/successIcon.svg.js"),a=require("../../assets/icons/warningIcon.svg.js"),i=require("../modals/styledModal.js"),o=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=d=>{const l=()=>u==c.StateInterface.SUCCESS?e.jsx(r.default,{}):u==c.StateInterface.WARNING?e.jsx(a.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(o.Spinner,{size:"large"}):void 0,{states:u,heading:I,subline:j,icon:S=l(),isButtonEnabled:x,type:C,buttonText:g,onButtonClick:p,leadingIcon:f,width:h,zIndex:O,headerImage:b}=d,[m,q]=t.useState(!0);return e.jsx(i.StyledModal,Object.assign({open:m,onClose:function(){d.onClose&&d.onClose(),q(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:h},hideCrossButton:u===c.StateInterface.LOADING,zIndex:O||n.ComponentZindex.STATE_MODAL},{children:e.jsx(c.StateComponent,Object.assign({states:u,heading:I,subline:j,isButtonEnabled:x,leadingIcon:f,type:C,buttonText:g,onButtonClick:p,icon:S,width:h||400,headerImage:b},{children:d.children}))}))};

package/dist/esm/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/image-cropper/BikImagePipeline/BikImagePipeline.d.ts

@@ -26,5 +26,8 @@ export interface BikImagePipelineProps {
         error?: string;
         success?: boolean;
     };
+    loadingStateOptions?: {
+        headerImage?: string;
+    };
 }
-export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, }: BikImagePipelineProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, loadingStateOptions, }: BikImagePipelineProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -1 +1 @@
-import{jsx as o,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as s,useEffect as a,useCallback as i}from"react";import{ImageService as p}from"../../image-compress/ImageCompress.js";import{StateInterface as l}from"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import{StateModalComponent as n}from"../../states-modal/StateModalComponent.js";import"../../modals/styledModal.js";import{BikImageCropper as c}from"../BikImageCropper.js";const d=d=>{let{cropOptions:m,fileTitle:u,compressionOptions:g,currentImage:h,options:f,onFinish:C,onCancel:w,fileUploadOptions:y}=d;const b=t(null),[j,F]=s(),[R,v]=s(h),[I,T]=s(!1);a((()=>{f.upload?(F("upload"),setTimeout((()=>{k()}),500)):f.crop?F("crop"):f.compress?F("compress"):f.uploadToFirestorage?F("cloud-upload"):T(!0)}),[f.upload,f.crop,f.compress,f.uploadToFirestorage]);const O=i(((o,e)=>{if(!f.uploadToFirestorage)return C(o,e),void T(!0);F("cloud-upload"),y&&y.uploadFile(e,y.path).then((r=>{C(o,e,r),T(!0)})).catch((o=>{console.log("starting err process with ")}))}),[]),E=o=>{o||w();const e=p.base64ToImage(o);f.compress?(F("compress"),p.compressImage(e,g).then((o=>{if(!o)return T(!0),void w();O(o.base64,o.compressedFile)}))):O(o,e)},k=()=>{b.current.click()};return I?o(e,{}):"cloud-upload"===j?!y||y.success?o(e,{}):y.error?o("div",{children:o(n,{states:l.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{T(!0),w()}})}):o("div",{children:o(n,{states:l.LOADING,heading:`Uploading your ${u||"photo"}`,subline:`Please wait while we upload your ${u||"photo"}`,isButtonEnabled:!1,width:300})}):r(e,{children:[f.upload&&o("input",{ref:b,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{const e=o.target.files[0],r=new FileReader;r.onload=()=>{var o;v({src:r.result}),o=r.result,f.crop?F("crop"):E(o)},e&&r.readAsDataURL(e)}}),"crop"===j&&o(c,{src:R.src,onCropComplete:o=>{v({src:o}),E(o)},aspectRatio:m.aspectRatio,onCancel:w})]})};export{d as BikImagePipeline};
+import{jsx as o,Fragment as e,jsxs as r}from"react/jsx-runtime";import{useRef as t,useState as s,useEffect as a,useCallback as i}from"react";import{ImageService as l}from"../../image-compress/ImageCompress.js";import{StateInterface as p}from"../../states/StateComponent.js";import"../../../_virtual/_tslib.js";import{StateModalComponent as n}from"../../states-modal/StateModalComponent.js";import"../../modals/styledModal.js";import{BikImageCropper as c}from"../BikImageCropper.js";const d=d=>{let{cropOptions:m,fileTitle:u,compressionOptions:g,currentImage:h,options:f,onFinish:C,onCancel:w,fileUploadOptions:y,loadingStateOptions:I}=d;const b=t(null),[j,v]=s(),[F,R]=s(h),[O,T]=s(!1);a((()=>{f.upload?(v("upload"),setTimeout((()=>{B()}),500)):f.crop?v("crop"):f.compress?v("compress"):f.uploadToFirestorage?v("cloud-upload"):T(!0)}),[f.upload,f.crop,f.compress,f.uploadToFirestorage]);const E=i(((o,e)=>{if(!f.uploadToFirestorage)return C(o,e),void T(!0);v("cloud-upload"),y&&y.uploadFile(e,y.path).then((r=>{C(o,e,r),T(!0)})).catch((o=>{console.log("starting err process with ")}))}),[]),k=o=>{o||w();const e=l.base64ToImage(o);f.compress?(v("compress"),l.compressImage(e,g).then((o=>{if(!o)return T(!0),void w();E(o.base64,o.compressedFile)}))):E(o,e)},B=()=>{b.current.click()};return O?o(e,{}):"cloud-upload"===j?!y||y.success?o(e,{}):y.error?o("div",{children:o(n,{states:p.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{T(!0),w()}})}):o("div",{children:o(n,{headerImage:null==I?void 0:I.headerImage,states:p.LOADING,heading:`Uploading your ${u||"photo"}`,subline:`Please wait while we upload your ${u||"photo"}`,isButtonEnabled:!1,width:300})}):r(e,{children:[f.upload&&o("input",{ref:b,type:"file",accept:"image/*",style:{display:"none"},onChange:o=>{const e=o.target.files[0],r=new FileReader;r.onload=()=>{var o;R({src:r.result}),o=r.result,f.crop?v("crop"):k(o)},e&&r.readAsDataURL(e)}}),"crop"===j&&o(c,{src:F.src,onCropComplete:o=>{R({src:o}),k(o)},aspectRatio:m.aspectRatio,onCancel:w})]})};export{d as BikImagePipeline};

package/dist/esm/components/states/StateComponent.d.ts

@@ -16,6 +16,7 @@ export declare enum ButtonTypes {
     DOUBLE = "DOUBLE"
 }
 export type StateComponentProps = {
+    headerImage?: string;
     states: StateInterface;
     heading: string;
     subline: string;

package/dist/esm/components/states/StateComponent.js

@@ -1 +1 @@
-import{jsxs as n,jsx as t,Fragment as e}from"react/jsx-runtime";import{COLORS as o}from"../../constants/Theme.js";import i from"../../assets/icons/errorIcon.svg.js";import s from"../../assets/icons/successIcon.svg.js";import r from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as l,TitleMedium as d,BodyPrimary as m,BodySecondary as h}from"../TypographyStyle.js";import{StateComponentContainer as u,StateIcon as p,StateHeading as L,StateSubline as g,ButtonContainer as S}from"./StateComponent.styled.js";var b,j,E;!function(n){n.SUCCESS="success",n.ERROR="error",n.WARNING="warning",n.LOADING="loading"}(b||(b={})),function(n){n.CANCEL="cancel",n.OTHER="other"}(j||(j={})),function(n){n.SINGLE="SINGLE",n.DOUBLE="DOUBLE"}(E||(E={}));const O=O=>{var y;const C=()=>f==b.SUCCESS?t(s,{}):f==b.WARNING?t(r,{}):f==b.ERROR?t(i,{}):f===b.LOADING?t(a,{size:"large"}):void 0,{states:f,heading:I,subline:R,icon:A=C(),isButtonEnabled:N,type:T,buttonText:z,buttonType:v,onButtonClick:B,leadingIcon:G,width:x}=O;return n(u,Object.assign({width:x},{children:[t(p,{children:A}),n(L,Object.assign({size:O.size},{children:["SMALL"===O.size&&t(l,{children:I}),"SMALL"!==O.size&&t(d,{children:I})]})),n(g,{children:["SMALL"!==O.size&&t(m,Object.assign({color:o.content.secondary},{children:R})),"SMALL"===O.size&&t(h,Object.assign({color:o.content.secondary},{children:R}))]}),null!==(y=O.children)&&void 0!==y?y:t(e,{}),N&&t(e,{children:n(S,Object.assign({size:O.size},{children:[T==E.DOUBLE&&t(c,{onClick:()=>B&&B(j.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),t(c,{onClick:()=>B&&B(j.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:G,buttonText:null!=z?z:"Retry",matchParentWidth:!0})]}))})]}))};export{j as ButtonActions,E as ButtonTypes,O as StateComponent,b as StateInterface};
+import{jsxs as n,jsx as t,Fragment as e}from"react/jsx-runtime";import{COLORS as o}from"../../constants/Theme.js";import i from"../../assets/icons/errorIcon.svg.js";import s from"../../assets/icons/successIcon.svg.js";import r from"../../assets/icons/warningIcon.svg.js";import{Button as c}from"../button/Button.js";import{Spinner as a}from"../spinner/Spinner.js";import{TitleRegular as l,TitleMedium as d,BodyPrimary as m,BodySecondary as h}from"../TypographyStyle.js";import{StateComponentContainer as u,StateIcon as p,StateHeading as g,StateSubline as L,ButtonContainer as S}from"./StateComponent.styled.js";var b,j,E;!function(n){n.SUCCESS="success",n.ERROR="error",n.WARNING="warning",n.LOADING="loading"}(b||(b={})),function(n){n.CANCEL="cancel",n.OTHER="other"}(j||(j={})),function(n){n.SINGLE="SINGLE",n.DOUBLE="DOUBLE"}(E||(E={}));const O=O=>{var y;const C=()=>f==b.SUCCESS?t(s,{}):f==b.WARNING?t(r,{}):f==b.ERROR?t(i,{}):f===b.LOADING?t(a,{size:"large"}):void 0,{states:f,heading:I,subline:R,icon:A=C(),isButtonEnabled:N,type:T,buttonText:z,buttonType:v,onButtonClick:B,leadingIcon:G,width:w,headerImage:x}=O;return n(u,Object.assign({width:w},{children:[t(p,{children:x?t("img",{src:x,width:"100%",height:"auto",alt:""}):A}),n(g,Object.assign({size:O.size},{children:["SMALL"===O.size&&t(l,{children:I}),"SMALL"!==O.size&&t(d,{children:I})]})),n(L,{children:["SMALL"!==O.size&&t(m,Object.assign({color:o.content.secondary},{children:R})),"SMALL"===O.size&&t(h,Object.assign({color:o.content.secondary},{children:R}))]}),null!==(y=O.children)&&void 0!==y?y:t(e,{}),N&&t(e,{children:n(S,Object.assign({size:O.size},{children:[T==E.DOUBLE&&t(c,{onClick:()=>B&&B(j.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),t(c,{onClick:()=>B&&B(j.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:G,buttonText:null!=z?z:"Retry",matchParentWidth:!0})]}))})]}))};export{j as ButtonActions,E as ButtonTypes,O as StateComponent,b as StateInterface};

package/dist/esm/components/states-modal/StateModalComponent.d.ts

@@ -15,5 +15,6 @@ export type StateModalComponentProps = {
     width?: number;
     onClose?: () => void;
     zIndex?: number;
+    headerImage?: string;
 };
 export declare const StateModalComponent: React.FC<React.PropsWithChildren<StateModalComponentProps>>;

package/dist/esm/components/states-modal/StateModalComponent.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{useState as n}from"react";import{ComponentZindex as o}from"../../constants/zindex.js";import s from"../../assets/icons/errorIcon.svg.js";import e from"../../assets/icons/successIcon.svg.js";import i from"../../assets/icons/warningIcon.svg.js";import{StyledModal as r}from"../modals/styledModal.js";import{Spinner as c}from"../spinner/Spinner.js";import{StateInterface as a,StateComponent as l}from"../states/StateComponent.js";const d=d=>{const m=()=>p==a.SUCCESS?t(e,{}):p==a.WARNING?t(i,{}):p==a.ERROR?t(s,{}):p===a.LOADING?t(c,{size:"large"}):void 0,{states:p,heading:u,subline:f,icon:g=m(),isButtonEnabled:C,type:I,buttonText:j,onButtonClick:h,leadingIcon:O,width:b,zIndex:x}=d,[S,y]=n(!0);return t(r,Object.assign({open:S,onClose:function(){d.onClose&&d.onClose(),y(!1)},closeOnOutsideClick:!(p===a.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:b},hideCrossButton:p===a.LOADING,zIndex:x||o.STATE_MODAL},{children:t(l,Object.assign({states:p,heading:u,subline:f,isButtonEnabled:C,leadingIcon:O,type:I,buttonText:j,onButtonClick:h,icon:g,width:b||400},{children:d.children}))}))};export{d as StateModalComponent};
+import{jsx as t}from"react/jsx-runtime";import{useState as n}from"react";import{ComponentZindex as e}from"../../constants/zindex.js";import o from"../../assets/icons/errorIcon.svg.js";import s from"../../assets/icons/successIcon.svg.js";import i from"../../assets/icons/warningIcon.svg.js";import{StyledModal as r}from"../modals/styledModal.js";import{Spinner as a}from"../spinner/Spinner.js";import{StateInterface as c,StateComponent as l}from"../states/StateComponent.js";const d=d=>{const m=()=>p==c.SUCCESS?t(s,{}):p==c.WARNING?t(i,{}):p==c.ERROR?t(o,{}):p===c.LOADING?t(a,{size:"large"}):void 0,{states:p,heading:u,subline:g,icon:I=m(),isButtonEnabled:f,type:C,buttonText:h,onButtonClick:j,leadingIcon:O,width:b,zIndex:x,headerImage:S}=d,[y,A]=n(!0);return t(r,Object.assign({open:y,onClose:function(){d.onClose&&d.onClose(),A(!1)},closeOnOutsideClick:!(p===c.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:b},hideCrossButton:p===c.LOADING,zIndex:x||e.STATE_MODAL},{children:t(l,Object.assign({states:p,heading:u,subline:g,isButtonEnabled:f,leadingIcon:O,type:C,buttonText:h,onButtonClick:j,icon:I,width:b||400,headerImage:S},{children:d.children}))}))};export{d as StateModalComponent};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.488-beta-3",
+	"version": "0.0.488-beta-6",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",