@bikdotai/bik-component-library 0.0.3202-beta.1 → 0.0.5581-tooltip-beta

package/dist/esm/components/radioButton/RadioButton.js

@@ -1 +1 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{useState as s,useEffect as l}from"react";import{RadioButtonContainer as t,RadioButtonIcon as a}from"./RadioButton.styled.js";import{BodyPrimary as o,BodyCaption as r}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const n=s=>{const l=s.isDisabled?c.content.inactive:s.isActive?c.background.positive.vibrant:c.content.primary;return i("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:l,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?c.content.inactive:c.background.positive.vibrant})]}))},d=d=>{const[m,b]=s(d.isActive||!1),[v,p]=s(!1),[S,h]=s(!1);return l((()=>{b(d.isActive)}),[d.isActive]),i(t,Object.assign({onClick:()=>{var i;if(!d.isDisabled){const e=!m;b(e),null===(i=d.onValueChange)||void 0===i||i.call(d,e,d.value)}},onMouseEnter:()=>p(!d.skipHoverState),onMouseLeave:()=>p(!1),onMouseDown:()=>h(!d.skipHoverState),onMouseUp:()=>h(!1)},{children:[e(a,Object.assign({checked:m,hovered:v,clicked:S,isDisabled:d.isDisabled||!1,size:d.size},{children:e(n,{isSmall:"SMALL"===d.size,isActive:m,isDisabled:d.isDisabled||!1})})),d.label&&"SMALL"!==d.size&&e(o,Object.assign({color:d.isDisabled?c.text.disabled:c.text.primary},{children:d.label})),d.label&&"SMALL"===d.size&&e(r,Object.assign({color:d.isDisabled?c.text.disabled:c.text.primary},{children:d.label}))]}))};export{d as RadioButton};
+import{jsxs as i,jsx as e,Fragment as s}from"react/jsx-runtime";import{useState as l,useEffect as t}from"react";import{RadioButtonContainer as a,RadioButtonIcon as r}from"./RadioButton.styled.js";import{TitleSmall as o,BodyCaption as c,BodySecondary as n,BodyPrimary as d}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";const m=s=>{const l=s.isDisabled?b.content.inactive:s.isActive?b.background.positive.vibrant:b.content.primary;return i("svg",Object.assign({width:s.isSmall?"16":"20",height:s.isSmall?"16":"20",viewBox:s.isSmall?"0 0 16 16":"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?6:9,stroke:l,strokeWidth:s.isSmall?1.5:2}),s.isActive&&e("circle",{cx:s.isSmall?"8":"10",cy:s.isSmall?"8":"10",r:s.isSmall?3:5,fill:s.isDisabled?b.content.inactive:b.background.positive.vibrant})]}))},v=v=>{const[p,h]=l(v.isActive||!1),[S,g]=l(!1),[x,u]=l(!1);t((()=>{h(v.isActive)}),[v.isActive]);return i(a,Object.assign({onClick:()=>{var i;if(!v.skipSelectingOff&&!v.isDisabled){const e=!p;h(e),null===(i=v.onValueChange)||void 0===i||i.call(v,e,v.value)}},onMouseEnter:()=>g(!v.skipHoverState),onMouseLeave:()=>g(!1),onMouseDown:()=>u(!v.skipHoverState),onMouseUp:()=>u(!1)},{children:[e(r,Object.assign({checked:p,hovered:S,clicked:x,isDisabled:v.isDisabled||!1,size:v.size},{children:e(m,{isSmall:"SMALL"===v.size,isActive:p,isDisabled:v.isDisabled||!1})})),v.label?v.boldOnChecked&&p?e(o,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):"SMALL"===v.size?e(c,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):"MEDIUM"===v.labelSize?e(n,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):e(d,Object.assign({color:v.isDisabled?b.text.disabled:b.text.primary},{children:v.label})):e(s,{})]}))};export{v as RadioButton};

package/dist/esm/components/radioList/RadioList.d.ts

@@ -8,6 +8,8 @@ export type RadioListProps = {
     subTitle?: string;
     listItems: RadioListItem[];
     onChange: (option: RadioListItem) => void;
+    listContainerStyles?: React.CSSProperties;
+    boldOnChecked?: boolean;
 };
 export declare const RadioList: React.FC<RadioListProps>;
 export {};

package/dist/esm/components/radioList/RadioList.js

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{RadioButton as o}from"../radioButton/RadioButton.js";import{RadioListStyled as r}from"./RadioList.styled.js";import{TitleRegular as n,BodySecondary as a}from"../TypographyStyle.js";import{COLORS as c}from"../../constants/Theme.js";const l=l=>{const[m,d]=i(l.listItems);s((()=>{d(l.listItems)}),[l.listItems]);const h=(t,e)=>{let i;const s=[...m];s.forEach((s=>{s.value===e?(i=s,s.isActive=t):s.isActive=!t})),d(s),l.onChange(i)};return t(r,{children:[(l.title||l.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[l.title&&e(n,{children:l.title}),l.subTitle&&e(a,Object.assign({color:c.text.secondary},{children:l.subTitle}))]})),e("div",Object.assign({className:"list__container"},{children:m.map((t=>e(o,Object.assign({},t,{onValueChange:h}),t.value)))}))]})};export{l as RadioList};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as s}from"react";import{RadioButton as o}from"../radioButton/RadioButton.js";import{RadioListStyled as n}from"./RadioList.styled.js";import{TitleRegular as l,BodySecondary as r}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";const c=c=>{var m;const[d,h]=i(c.listItems);s((()=>{h(c.listItems)}),[c.listItems]);const u=(t,e)=>{let i;const s=[...d];s.forEach((s=>{s.value===e?(i=s,s.isActive=t):s.isActive=!t})),h(s),c.onChange(i)};return t(n,{children:[(c.title||c.subTitle)&&t("div",Object.assign({className:"title__container"},{children:[c.title&&e(l,{children:c.title}),c.subTitle&&e(r,Object.assign({color:a.text.secondary},{children:c.subTitle}))]})),e("div",Object.assign({style:null!==(m=c.listContainerStyles)&&void 0!==m?m:{},className:"list__container"},{children:d.map((t=>e(o,Object.assign({},t,{onValueChange:u,boldOnChecked:c.boldOnChecked}),t.value)))}))]})};export{c as RadioList};

package/dist/esm/components/resizeImage/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ResizableImageProps {
+    imageUrl: string;
+    targetSize: number;
+    alt?: string;
+    style?: React.CSSProperties;
+}
+export declare const ResizableImage: React.FC<ResizableImageProps>;

package/dist/esm/components/resizeImage/index.js

@@ -0,0 +1 @@
+import{jsx as t}from"react/jsx-runtime";import{useState as e,useEffect as r}from"react";import{BikShimmer as m}from"../shimmer/ShimmerComponent/BikShimmer.js";import{resizeImage as i}from"../../utils/resizeImage.js";const o=o=>{let{imageUrl:s,targetSize:h,alt:p,style:a}=o;const[n,c]=e("");return r((()=>{i(s,h).then((t=>{c(t)})).catch((t=>{c(s)}))}),[s,h]),n?t("img",{alt:p,src:n,height:h,width:h,style:a}):t(m,{boxes:[{marginTop:"0px",height:`${h}px`,width:`${h}px`}]})};export{o as ResizableImage};

package/dist/esm/components/searchBar/searchBar.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,g]=t("default"),[C,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),g("default"),j(""),i.onChange(""),k("none"),c("")};return e(a,{validate:u,onFocus:()=>{b.length&&f("cross"),"default"===p&&r&&(g("clicked"),k("active"))},width:d,state:C,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:s,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||g("default"),k("none")}})};export{i as SearchBar};
+import{jsx as e}from"react/jsx-runtime";import{SearchIcon as o}from"../../assets/icons/searchIcon.js";import{useState as t,useEffect as n}from"react";import s from"../../assets/icons/cross.svg.js";import{Input as a}from"../input/Input.js";const i=i=>{const{isEnabled:r,onEnter:c,placeholder:l,width:d,variant:h,validate:u,isActive:v}=i,[m,f]=t("search"),[p,g]=t("default"),[C,k]=t(v?"active":r?"none":"disabled"),[b,j]=t(i.initialValue||"");n((()=>{k(v?"active":r?"none":"disabled")}),[r,v]),n((()=>{i.reset&&I()}),[null==i?void 0:i.reset]);const w=e=>{r&&c(e)},I=()=>{f("search"),g("default"),j(""),i.onChange(""),k("none"),c("")};return e(a,{id:"search-bar",validate:u,onFocus:()=>{b.length&&f("cross"),"default"===p&&r&&(g("clicked"),k("active"))},width:d,state:C,leftIcon:"search"===m&&"default"===p?{icon:o}:void 0,rightIcon:"cross"===m?{icon:s,callback:()=>{I(),i.onClickCross&&i.onClickCross()}}:void 0,onChangeText:(e,o)=>{i.onChange(e),j(e),"keydown"!==(null==o?void 0:o.type)||13!==o.which&&13!==o.keyCode?e.trim().length?f("cross"):f("search"):w(e)},placeholder:l,variant:h,value:b,onBlur:()=>{b.length||g("default"),k("none")}})};export{i as SearchBar};

package/dist/esm/components/shimmer/ShimmerComponent/ShimmerStyled.d.ts

@@ -7,3 +7,12 @@ export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
     direction?: "row" | "column" | undefined;
     gap?: string | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ShimmerComponentStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isBrand?: boolean | undefined;
+    height: number;
+    width: number;
+    marginTop?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/shimmer/ShimmerComponent/ShimmerStyled.js

@@ -1,4 +1,4 @@
-import i from"@emotion/styled/base";import{keyframes as b}from"@emotion/react";const l=b`
+import b from"@emotion/styled/base";import{keyframes as c}from"@emotion/react";const l=c`
   0% {
     background-position: -468px 0;
   }
@@ -6,4 +6,4 @@ import i from"@emotion/styled/base";import{keyframes as b}from"@emotion/react";c
   100% {
     background-position: 468px 0;
   }
-`,t=i("div","production"===process.env.NODE_ENV?{target:"eh9q9i90"}:{target:"eh9q9i90",label:"ShimmerStyled"})("display:flex;flex-direction:",(i=>i.direction||"column"),";width:100%;height:100%;gap:",(i=>i.gap||"0px"),";.shine{border-radius:4px;background:",(i=>i.isBrand?"linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(224, 224, 224, 0.00) 100%)":"#f6f7f8 linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #F0F0F0 100%) no-repeat"),";background-size:800px 304px;display:inline-block;position:relative;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-name:",l,";-webkit-animation-timing-function:linear;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoaW1tZXJTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVd3QyIsImZpbGUiOiJTaGltbWVyU3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5jb25zdCBrZXlmcmFtZXNBbmltYXRpb24gPSBrZXlmcmFtZXMgYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTQ2OHB4IDA7XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiA0NjhweCAwO1xuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgU2hpbW1lclN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogJHsocHJvcHMpID0+IHByb3BzLmRpcmVjdGlvbiB8fCAnY29sdW1uJ307XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGdhcDogJHsocHJvcHMpID0+IHByb3BzLmdhcCB8fCAnMHB4J307XG5cblx0LnNoaW5lIHtcblx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0YmFja2dyb3VuZDogJHsocHJvcHMpID0+IHByb3BzLmlzQnJhbmRcclxuICAgID8gJ2xpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMwKSAwJSwgcmdiYSgyMjQsIDIyNCwgMjI0LCAwLjAwKSAxMDAlKSdcclxuICAgIDogJyNmNmY3ZjggbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAjZjZmN2Y4IDAlLCAjZWRlZWYxIDIwJSwgI2Y2ZjdmOCA0MCUsICNGMEYwRjAgMTAwJSkgbm8tcmVwZWF0J307XG5cdFx0YmFja2dyb3VuZC1zaXplOiA4MDBweCAzMDRweDtcblx0XHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdFx0LXdlYmtpdC1hbmltYXRpb24tZHVyYXRpb246IDFzO1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XG5cdFx0LXdlYmtpdC1hbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTtcblx0XHQtd2Via2l0LWFuaW1hdGlvbi1uYW1lOiAke2tleWZyYW1lc0FuaW1hdGlvbn07XG5cdFx0LXdlYmtpdC1hbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNoaW1tZXJTdHlsZWQuanMubWFwIl19 */"));export{t as ShimmerStyled};
+`,d=b("div","production"===process.env.NODE_ENV?{target:"eh9q9i91"}:{target:"eh9q9i91",label:"ShimmerStyled"})("display:flex;flex-direction:",(b=>b.direction||"column"),";width:100%;height:100%;gap:",(b=>b.gap||"0px"),";.shine{border-radius:4px;background:",(b=>b.isBrand?"linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(224, 224, 224, 0.00) 100%)":"#f6f7f8 linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #F0F0F0 100%) no-repeat"),";background-size:800px 304px;display:inline-block;position:relative;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-name:",l,";-webkit-animation-timing-function:linear;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoaW1tZXJTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVd3QyIsImZpbGUiOiJTaGltbWVyU3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5jb25zdCBrZXlmcmFtZXNBbmltYXRpb24gPSBrZXlmcmFtZXMgYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTQ2OHB4IDA7XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiA0NjhweCAwO1xuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgU2hpbW1lclN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogJHsocHJvcHMpID0+IHByb3BzLmRpcmVjdGlvbiB8fCAnY29sdW1uJ307XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG5cdGdhcDogJHsocHJvcHMpID0+IHByb3BzLmdhcCB8fCAnMHB4J307XG5cblx0LnNoaW5lIHtcblx0XHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdFx0YmFja2dyb3VuZDogJHsocHJvcHMpID0+IHByb3BzLmlzQnJhbmRcclxuICAgID8gJ2xpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMwKSAwJSwgcmdiYSgyMjQsIDIyNCwgMjI0LCAwLjAwKSAxMDAlKSdcclxuICAgIDogJyNmNmY3ZjggbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAjZjZmN2Y4IDAlLCAjZWRlZWYxIDIwJSwgI2Y2ZjdmOCA0MCUsICNGMEYwRjAgMTAwJSkgbm8tcmVwZWF0J307XG5cdFx0YmFja2dyb3VuZC1zaXplOiA4MDBweCAzMDRweDtcblx0XHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdFx0cG9zaXRpb246IHJlbGF0aXZlO1xuXG5cdFx0LXdlYmtpdC1hbmltYXRpb24tZHVyYXRpb246IDFzO1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7XG5cdFx0LXdlYmtpdC1hbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTtcblx0XHQtd2Via2l0LWFuaW1hdGlvbi1uYW1lOiAke2tleWZyYW1lc0FuaW1hdGlvbn07XG5cdFx0LXdlYmtpdC1hbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBTaGltbWVyQ29tcG9uZW50U3R5bGVkID0gc3R5bGVkLmRpdiBgXG5cdGJvcmRlci1yYWRpdXM6IDRweDtcblx0YmFja2dyb3VuZDogJHsocHJvcHMpID0+IHByb3BzLmlzQnJhbmRcclxuICAgID8gJ2xpbmVhci1ncmFkaWVudCg5MGRlZywgcmdiYSgyNTUsIDI1NSwgMjU1LCAwLjMwKSAwJSwgcmdiYSgyMjQsIDIyNCwgMjI0LCAwLjAwKSAxMDAlKSdcclxuICAgIDogJyNmNmY3ZjggbGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCAjZjZmN2Y4IDAlLCAjZWRlZWYxIDIwJSwgI2Y2ZjdmOCA0MCUsICNGMEYwRjAgMTAwJSkgbm8tcmVwZWF0J307XG5cdHdpZHRoOiAkeyhwcm9wcykgPT4gcHJvcHMud2lkdGh9cHg7XG5cdGhlaWdodDogJHsocHJvcHMpID0+IHByb3BzLmhlaWdodH1weDtcblx0bWFyZ2luLXRvcDogJHsocHJvcHMpID0+IHByb3BzLm1hcmdpblRvcCB8fCAwfXB4O1xuXHRkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5cdHBvc2l0aW9uOiByZWxhdGl2ZTtcblx0LXdlYmtpdC1hbmltYXRpb24tZHVyYXRpb246IDFzO1xuXHQtd2Via2l0LWFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuXHQtd2Via2l0LWFuaW1hdGlvbi1pdGVyYXRpb24tY291bnQ6IGluZmluaXRlO1xuXHQtd2Via2l0LWFuaW1hdGlvbi1uYW1lOiAke2tleWZyYW1lc0FuaW1hdGlvbn07XG5cdC13ZWJraXQtYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9U2hpbW1lclN0eWxlZC5qcy5tYXAiXX0= */")),i=b("div","production"===process.env.NODE_ENV?{target:"eh9q9i90"}:{target:"eh9q9i90",label:"ShimmerComponentStyled"})("border-radius:4px;background:",(b=>b.isBrand?"linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(224, 224, 224, 0.00) 100%)":"#f6f7f8 linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #F0F0F0 100%) no-repeat"),";width:",(b=>b.width),"px;height:",(b=>b.height),"px;margin-top:",(b=>b.marginTop||0),"px;display:inline-block;position:relative;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-name:",l,";-webkit-animation-timing-function:linear;"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoaW1tZXJTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtDaUQiLCJmaWxlIjoiU2hpbW1lclN0eWxlZC50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuY29uc3Qga2V5ZnJhbWVzQW5pbWF0aW9uID0ga2V5ZnJhbWVzIGBcbiAgMCUge1xuICAgIGJhY2tncm91bmQtcG9zaXRpb246IC00NjhweCAwO1xuICB9XG5cbiAgMTAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogNDY4cHggMDtcbiAgfVxuYDtcclxuZXhwb3J0IGNvbnN0IFNoaW1tZXJTdHlsZWQgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246ICR7KHByb3BzKSA9PiBwcm9wcy5kaXJlY3Rpb24gfHwgJ2NvbHVtbid9O1xuXHR3aWR0aDogMTAwJTtcblx0aGVpZ2h0OiAxMDAlO1xuXHRnYXA6ICR7KHByb3BzKSA9PiBwcm9wcy5nYXAgfHwgJzBweCd9O1xuXG5cdC5zaGluZSB7XG5cdFx0Ym9yZGVyLXJhZGl1czogNHB4O1xuXHRcdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiBwcm9wcy5pc0JyYW5kXHJcbiAgICA/ICdsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4zMCkgMCUsIHJnYmEoMjI0LCAyMjQsIDIyNCwgMC4wMCkgMTAwJSknXHJcbiAgICA6ICcjZjZmN2Y4IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgI2Y2ZjdmOCAwJSwgI2VkZWVmMSAyMCUsICNmNmY3ZjggNDAlLCAjRjBGMEYwIDEwMCUpIG5vLXJlcGVhdCd9O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogODAwcHggMzA0cHg7XG5cdFx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWR1cmF0aW9uOiAxcztcblx0XHQtd2Via2l0LWFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogaW5maW5pdGU7XG5cdFx0LXdlYmtpdC1hbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNBbmltYXRpb259O1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgU2hpbW1lckNvbXBvbmVudFN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRib3JkZXItcmFkaXVzOiA0cHg7XG5cdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiBwcm9wcy5pc0JyYW5kXHJcbiAgICA/ICdsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4zMCkgMCUsIHJnYmEoMjI0LCAyMjQsIDIyNCwgMC4wMCkgMTAwJSknXHJcbiAgICA6ICcjZjZmN2Y4IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgI2Y2ZjdmOCAwJSwgI2VkZWVmMSAyMCUsICNmNmY3ZjggNDAlLCAjRjBGMEYwIDEwMCUpIG5vLXJlcGVhdCd9O1xuXHR3aWR0aDogJHsocHJvcHMpID0+IHByb3BzLndpZHRofXB4O1xuXHRoZWlnaHQ6ICR7KHByb3BzKSA9PiBwcm9wcy5oZWlnaHR9cHg7XG5cdG1hcmdpbi10b3A6ICR7KHByb3BzKSA9PiBwcm9wcy5tYXJnaW5Ub3AgfHwgMH1weDtcblx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdC13ZWJraXQtYW5pbWF0aW9uLWR1cmF0aW9uOiAxcztcblx0LXdlYmtpdC1hbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkcztcblx0LXdlYmtpdC1hbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTtcblx0LXdlYmtpdC1hbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNBbmltYXRpb259O1xuXHQtd2Via2l0LWFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGxpbmVhcjtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVNoaW1tZXJTdHlsZWQuanMubWFwIl19 */"));export{i as ShimmerComponentStyled,d as ShimmerStyled};

package/dist/esm/components/shimmer-image/ShimmerImage.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
 export type ShimmerImageProps = {
     imageUrl: string;
-    width: number;
+    width: number | string;
     height: number;
     alt?: string;
     borderRadius?: number;
     defaultImageUrl?: string;
 };
+export declare const DEFAULT_IMAGE = "https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c";
 export declare const ShimmerImage: React.FC<ShimmerImageProps>;

package/dist/esm/components/shimmer-image/ShimmerImage.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useEffect as i}from"react";import{BikShimmer as o}from"../shimmer/ShimmerComponent/BikShimmer.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",l=l=>{let{imageUrl:s,width:d,height:n,borderRadius:m,alt:h,defaultImageUrl:c=a}=l;const[g,p]=t(!0),[b,u]=t(!1);return i((()=>{const e=new Image;return e.src=s,e.onload=()=>{u(!1),p(!1)},e.onerror=()=>{u(!0),p(!1)},()=>{e.onload=null,e.onerror=null}}),[s]),e("div",Object.assign({style:{position:"relative",width:d,height:n,borderRadius:m}},{children:[g&&r(o,{boxes:[{height:`${n}px`,width:`${d}px`,marginTop:"0px"}]}),r("img",b?{src:c,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:"block",width:"100%",height:"100%"}}:{src:s,alt:null!=h?h:"Image",style:{borderRadius:null!=m?m:0,display:g?"none":"block",width:"100%",height:"100%"}})]}))};export{l as ShimmerImage};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as o,useEffect as r}from"react";import{BikShimmer as i}from"../shimmer/ShimmerComponent/BikShimmer.js";const a="https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F9034204a-cbf9-4b93-8b28-ccf880d273f9?alt=media&token=318529b5-8df0-4644-85b0-40fff1dc1d5c",l=l=>{let{imageUrl:s,width:d,height:n,borderRadius:m,alt:c,defaultImageUrl:h=a}=l;const[b,g]=o(!0),[p,u]=o(!1);return r((()=>{const e=new Image;return e.src=s,e.onload=()=>{u(!1),g(!1)},e.onerror=()=>{u(!0),g(!1)},()=>{e.onload=null,e.onerror=null}}),[s]),e("div",Object.assign({style:{position:"relative",width:d,height:n,borderRadius:m}},{children:[b&&t(i,{boxes:[{height:`${n}px`,width:`${d}px`,marginTop:"0px"}]}),t("img",p?{src:h,alt:null!=c?c:"Image",style:{borderRadius:null!=m?m:0,display:"block",width:"100%",height:"100%",objectFit:"cover"}}:{src:s,alt:null!=c?c:"Image",style:{borderRadius:null!=m?m:0,display:b?"none":"block",width:"100%",height:"100%",objectFit:"cover"}})]}))};export{a as DEFAULT_IMAGE,l as ShimmerImage};

package/dist/esm/components/side-modal/SideModal.d.ts

@@ -3,13 +3,19 @@ import { ButtonProps } from '../button/model';
 export interface SideModalProps {
     header: string;
     children: React.ReactNode;
+    headerCustomComponent?: React.ReactNode;
     footerCustomComponent?: React.ReactNode;
     footerDirection?: 'row' | 'row-reverse';
     hideCrossButton?: boolean;
     width?: string;
-    saveButtonProps: ButtonProps;
-    cancelButtonProps: ButtonProps;
+    saveButtonProps?: ButtonProps;
+    cancelButtonProps?: ButtonProps;
     onClose: () => void;
     zIndex?: number;
+    hideFooter?: boolean;
+    bodyStyle?: React.CSSProperties;
+    element?: Element | DocumentFragment;
+    headerStyle?: React.CSSProperties;
+    footerStyle?: React.CSSProperties;
 }
 export declare const SideModal: React.FC<SideModalProps>;

package/dist/esm/components/side-modal/SideModal.js

@@ -1 +1 @@
-import{jsx as o,jsxs as t,Fragment as e}from"react/jsx-runtime";import r from"react-dom";import i from"../../assets/icons/cross.svg.js";import{Button as n}from"../button/Button.js";import{TitleMedium as s}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as m,SideModalBody as a,SideModalFooter as h,FooterButtonWrapper as l}from"./SideModal.style.js";const p=p=>r.createPortal(o(c,Object.assign({zIndex:p.zIndex},{children:t(d,Object.assign({width:p.width},{children:[t(m,{children:[o(s,{children:p.header}),!p.hideCrossButton&&o(i,{width:24,height:24,onClick:p.onClose})]}),o(a,{children:p.children}),t(h,Object.assign({footerDirection:p.footerDirection},{children:[t(l,Object.assign({footerDirection:p.footerDirection},{children:[o(n,Object.assign({},p.saveButtonProps)),o(n,Object.assign({},p.cancelButtonProps))]})),p.footerCustomComponent?p.footerCustomComponent:o(e,{})]}))]}))})),document.body);export{p as SideModal};
+import{jsx as e,jsxs as o,Fragment as t}from"react/jsx-runtime";import r from"react-dom";import n from"../../assets/icons/cross.svg.js";import{Button as s}from"../button/Button.js";import{TitleMedium as i}from"../TypographyStyle.js";import{SideModalStyle as c,SideModalContainer as d,SideModalHeader as l,SideModalBody as a,SideModalFooter as h,FooterButtonWrapper as m}from"./SideModal.style.js";const p=p=>{var u;return r.createPortal(e(c,Object.assign({zIndex:p.zIndex},{children:o(d,Object.assign({width:p.width},{children:[o(l,Object.assign({headerStyle:Object.assign({},p.headerStyle)},{children:[(null==p?void 0:p.headerCustomComponent)||e(i,{children:p.header}),!p.hideCrossButton&&e(n,{width:24,height:24,onClick:p.onClose})]})),e(a,Object.assign({hideFooter:p.hideFooter,bodyStyle:Object.assign({},p.bodyStyle)},{children:p.children})),!0===p.hideFooter?null:o(h,Object.assign({footerDirection:p.footerDirection,footerStyle:Object.assign({},p.footerStyle)},{children:[(p.saveButtonProps||p.cancelButtonProps)&&o(m,Object.assign({footerDirection:p.footerDirection},{children:[p.saveButtonProps&&e(s,Object.assign({},p.saveButtonProps)),p.cancelButtonProps&&e(s,Object.assign({},p.cancelButtonProps))]})),p.footerCustomComponent?p.footerCustomComponent:e(t,{})]}))]}))})),null!==(u=p.element)&&void 0!==u?u:document.body)};export{p as SideModal};

package/dist/esm/components/side-modal/SideModal.style.d.ts

@@ -4,10 +4,16 @@ export declare const SideModalStyle: import("styled-components").StyledComponent
 export declare const SideModalContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
 }, never>;
-export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SideModalHeader: import("styled-components").StyledComponent<"div", any, {
+    headerStyle: React.CSSProperties;
+}, never>;
+export declare const SideModalBody: import("styled-components").StyledComponent<"div", any, {
+    hideFooter?: boolean | undefined;
+    bodyStyle: React.CSSProperties;
+}, never>;
 export declare const SideModalFooter: import("styled-components").StyledComponent<"div", any, {
     footerDirection?: "row" | "row-reverse" | undefined;
+    footerStyle: React.CSSProperties;
 }, never>;
 export declare const FooterButtonWrapper: import("styled-components").StyledComponent<"div", any, {
     footerDirection?: "row" | "row-reverse" | undefined;

package/dist/esm/components/side-modal/SideModal.style.js

@@ -1,22 +1,22 @@
-import t from"styled-components";import{COLORS as i}from"../../constants/Theme.js";import{ComponentZindex as e}from"../../constants/zindex.js";const o=t.div`
+import e,{css as t}from"styled-components";import{COLORS as o}from"../../constants/Theme.js";import{ComponentZindex as i}from"../../constants/zindex.js";const r=e.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${t=>t.zIndex||e.SIDE_MODAL};
+	z-index: ${e=>e.zIndex||i.SIDE_MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.4);
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
-`,r=t.div`
+`,n=e.div`
 	height: 100%;
-	width: ${t=>t.width||"566px"};
-	background: ${i.surface.standard};
+	width: ${e=>e.width||"566px"};
+	background: ${o.surface.standard};
 	position: relative;
 	display: flex;
 	flex-direction: column;
-`,n=t.div`
+`,d=e.div`
 	width: 100%;
 	height: 60px;
 	position: sticky;
@@ -25,30 +25,41 @@ import t from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	background: ${i.surface.standard};
+	background: ${o.surface.standard};
 	padding: 0px 24px;
-	border-bottom: 1px solid ${i.stroke.primary};
+	border-bottom: 1px solid ${o.stroke.primary};
 	svg:hover {
 		cursor: pointer;
+		background: ${o.background.base};
+		border-radius: 4px;
 	}
-`,d=t.div`
+	${e=>{let{headerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	`}}
+`,s=e.div`
 	overflow-y: auto;
 	padding: 24px;
-	height: calc(100% - 120px);
-`,s=t.div`
+	height: ${e=>e.hideFooter?"calc(100% - 60px)":"calc(100% - 120px)"};
+	${e=>{let{bodyStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	`}}
+`,a=e.div`
 	height: 60px;
 	width: 100%;
 	position: sticky;
 	bottom: 0;
 	display: flex;
-	flex-direction: ${t=>t.footerDirection||"row"};
+	flex-direction: ${e=>e.footerDirection||"row"};
 	justify-content: space-between;
 	align-items: center;
-	background: ${i.surface.standard};
-	border-top: 1px solid ${i.stroke.primary};
+	background: ${o.surface.standard};
+	border-top: 1px solid ${o.stroke.primary};
 	padding: 0px 24px;
-`,p=t.div`
+	${e=>{let{footerStyle:o}=e;return t`
+		${Object.keys(o).map((e=>`${e}: ${o[e]};`)).join("\n")}
+	`}}
+`,p=e.div`
 	display: flex;
-	flex-direction: ${t=>t.footerDirection||"row"};
+	flex-direction: ${e=>e.footerDirection||"row"};
 	gap: 8px;
-`;export{p as FooterButtonWrapper,d as SideModalBody,r as SideModalContainer,s as SideModalFooter,n as SideModalHeader,o as SideModalStyle};
+`;export{p as FooterButtonWrapper,s as SideModalBody,n as SideModalContainer,a as SideModalFooter,d as SideModalHeader,r as SideModalStyle};

package/dist/esm/components/spinner/Spinner.d.ts

@@ -3,3 +3,9 @@ export declare const Spinner: {
     ({ size, color, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export declare const PureSpinner: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    height: string;
+    color?: string | undefined;
+    backgroundColor?: string | undefined;
+}, never>;

package/dist/esm/components/spinner/Spinner.js

@@ -1 +1,18 @@
-import{jsx as t}from"react/jsx-runtime";import e from"react-lottie";import{COLORS as o}from"../../constants/Theme.js";import*as s from"./lotties/black.json.js";import*as r from"./lotties/brand.json.js";import*as i from"./lotties/red.json.js";import*as n from"./lotties/white.json.js";import{SizeMap as a}from"./themes.js";const m={[o.stroke.brand]:r,[o.content.primary]:s,[o.content.primaryInverse]:n,[o.content.negative]:i},p=s=>{let{size:r,color:i,className:n}=s;const p={loop:!0,autoplay:!0,animationData:m[null!=i?i:o.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return t("div",Object.assign({className:`spinner-container ${n}`},{children:t(e,{options:p,width:a[r],isStopped:!1,isPaused:!1})}))};p.displayName="Spinner";export{p as Spinner};
+import{jsx as t}from"react/jsx-runtime";import o from"react-lottie";import r from"styled-components";import{COLORS as e}from"../../constants/Theme.js";import*as i from"./lotties/black.json.js";import*as n from"./lotties/brand.json.js";import*as s from"./lotties/red.json.js";import*as a from"./lotties/white.json.js";import{SizeMap as m}from"./themes.js";const l={[e.stroke.brand]:n,[e.content.primary]:i,[e.content.primaryInverse]:a,[e.content.negative]:s},d=r=>{let{size:i,color:n,className:s}=r;const a={loop:!0,autoplay:!0,animationData:l[null!=n?n:e.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return t("div",Object.assign({className:`spinner-container ${s}`},{children:t(o,{options:a,width:m[i],isStopped:!1,isPaused:!1})}))};d.displayName="Spinner";const p=r.div`
+	width: ${t=>t.width};
+	height: ${t=>t.height};
+	border: 5px solid ${t=>{var o;return null!==(o=t.backgroundColor)&&void 0!==o?o:"transparent"}};
+	border-bottom-color: ${t=>{var o;return null!==(o=t.color)&&void 0!==o?o:e.stroke.brand}};
+	border-radius: 50%;
+	display: inline-block;
+	animation: rotation 1s linear infinite;
+
+	@keyframes rotation {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;export{p as PureSpinner,d as Spinner};

package/dist/esm/components/star-rating/Star.d.ts

@@ -9,4 +9,5 @@ export declare const Star: React.FC<{
     /** this means this star is hovered-active cause there is a star hovered after this  */
     asHovered?: boolean;
     mode?: 'VIEW' | 'EDIT';
+    version?: 'v1' | 'v2';
 }>;

package/dist/esm/components/star-rating/Star.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{useState as e,useEffect as r}from"react";import{COLORS as n}from"../../constants/Theme.js";import t from"../../assets/icons/starEmpty.svg.js";import l from"../../assets/icons/starFilled.svg.js";const s=s=>{let{size:i,filled:u,emptyColor:c,filledColor:a,onClick:d,asHovered:m,onHover:h,mode:E}=s;const[g,p]=e(!1);return r((()=>{null==h||h(g)}),[g]),r((()=>{m||p(!1)}),[m]),m?o(l,{onClick:()=>{null==d||d("select")},onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),style:{cursor:"pointer"},width:i,height:i,color:null!=a?a:n.background.warning.vibrant}):g?o(l,{onMouseLeave:()=>p(!1),onMouseEnter:()=>p(!0),style:{cursor:"pointer"},onClick:()=>{null==d||d("select")},width:i,height:i,color:null!=a?a:n.background.warning.vibrant}):u?o(l,{onMouseEnter:()=>"VIEW"!==E&&p(!0),onMouseLeave:()=>"VIEW"!==E&&p(!1),style:{cursor:"VIEW"!==E?"pointer":"default"},onClick:()=>{"VIEW"!==E&&(null==d||d("de-select"))},width:i,height:i,color:null!=a?a:n.background.warning.vibrant}):o(t,{onMouseEnter:()=>"VIEW"!==E&&p(!0),onMouseLeave:()=>"VIEW"!==E&&p(!1),style:{cursor:"VIEW"!==E?"pointer":"default"},onClick:()=>{"VIEW"!==E&&(null==d||d("select"))},width:i,height:i,color:null!=c?c:n.surface.standard})};export{s as Star};
+import{jsx as o}from"react/jsx-runtime";import e,{useState as r,useEffect as n}from"react";import{COLORS as t}from"../../constants/Theme.js";import s from"../../assets/icons/starEmpty.svg.js";import l from"../../assets/icons/starFilled.svg.js";import i from"../../assets/icons/starFilledV2.svg.js";const c=c=>{let{size:u,filled:a,emptyColor:d,filledColor:m,onClick:v,asHovered:g,onHover:h,mode:p,version:E="v1"}=c;const[f,M]=r(!1);n((()=>{null==h||h(f)}),[f]),n((()=>{g||M(!1)}),[g]);const V=e.useMemo((()=>(o=>"v1"===o?l:i)(E)),[E]);return g?o(V,{onClick:()=>{null==v||v("select")},onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1),style:{cursor:"pointer"},width:u,height:u,color:null!=m?m:t.background.warning.vibrant}):f?o(V,{onMouseLeave:()=>M(!1),onMouseEnter:()=>M(!0),style:{cursor:"pointer"},onClick:()=>{null==v||v("select")},width:u,height:u,color:null!=m?m:t.background.warning.vibrant}):a?o(V,{onMouseEnter:()=>"VIEW"!==p&&M(!0),onMouseLeave:()=>"VIEW"!==p&&M(!1),style:{cursor:"VIEW"!==p?"pointer":"default"},onClick:()=>{"VIEW"!==p&&(null==v||v("de-select"))},width:u,height:u,color:null!=m?m:t.background.warning.vibrant}):o(s,{onMouseEnter:()=>"VIEW"!==p&&M(!0),onMouseLeave:()=>"VIEW"!==p&&M(!1),style:{cursor:"VIEW"!==p?"pointer":"default"},onClick:()=>{"VIEW"!==p&&(null==v||v("select"))},width:u,height:u,color:null!=d?d:t.surface.standard})};export{c as Star};

package/dist/esm/components/star-rating/StarRating.d.ts

@@ -7,4 +7,5 @@ export declare const StarRating: React.FC<{
     maxValue?: number;
     starSize?: number;
     mode?: 'VIEW' | 'EDIT';
+    version?: 'v1' | 'v2';
 }>;

package/dist/esm/components/star-rating/StarRating.js

@@ -1 +1 @@
-import g from"@emotion/styled/base";import{jsx as I}from"react/jsx-runtime";import{useState as C,useMemo as A,useEffect as c}from"react";import{Star as l}from"./Star.js";const e=g("div","production"===process.env.NODE_ENV?{target:"e1yh3w250"}:{target:"e1yh3w250",label:"Container"})("production"===process.env.NODE_ENV?{name:"31c8wb",styles:"display:flex;flex-direction:row;gap:12px;justify-content:start;align-items:center"}:{name:"31c8wb",styles:"display:flex;flex-direction:row;gap:12px;justify-content:start;align-items:center",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0YXJSYXRpbmcudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUk2QiIsImZpbGUiOiJTdGFyUmF0aW5nLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VNZW1vLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0IHsgU3RhciB9IGZyb20gJy4vU3Rhcic7XHJcbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRnYXA6IDEycHg7XG5cdGp1c3RpZnktY29udGVudDogc3RhcnQ7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xyXG5leHBvcnQgY29uc3QgU3RhclJhdGluZyA9ICh7IGVtcHR5Q29sb3IsIGZpbGxlZENvbG9yLCBvbkNoYW5nZSwgdmFsdWUsIG1heFZhbHVlLCBzdGFyU2l6ZSwgbW9kZSwgfSkgPT4ge1xyXG4gICAgY29uc3QgW3N0YXJzLCBzZXRTdGFyc10gPSB1c2VTdGF0ZSh2YWx1ZSAhPT0gbnVsbCAmJiB2YWx1ZSAhPT0gdm9pZCAwID8gdmFsdWUgOiAwKTtcclxuICAgIGNvbnN0IFttb3VudGVkLCBzZXRNb3VudGVkRmxhZ10gPSB1c2VTdGF0ZShmYWxzZSk7XHJcbiAgICBjb25zdCBbaG92ZXJlZFN0YXIsIHNldEhvdmVyZWRTdGFyXSA9IHVzZVN0YXRlKDApO1xyXG4gICAgY29uc3QgYXJyID0gdXNlTWVtbygoKSA9PiB7XHJcbiAgICAgICAgY29uc3QgbGltaXQgPSBtYXhWYWx1ZSAhPT0gbnVsbCAmJiBtYXhWYWx1ZSAhPT0gdm9pZCAwID8gbWF4VmFsdWUgOiA1O1xyXG4gICAgICAgIHJldHVybiBBcnJheShsaW1pdClcclxuICAgICAgICAgICAgLmZpbGwobnVsbClcclxuICAgICAgICAgICAgLm1hcCgoXywgaWR4KSA9PiBpZHggKyAxKTtcclxuICAgIH0sIFttYXhWYWx1ZV0pO1xyXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcclxuICAgICAgICBpZiAobW91bnRlZCkge1xyXG4gICAgICAgICAgICBvbkNoYW5nZShzdGFycyk7XHJcbiAgICAgICAgfVxyXG4gICAgfSwgW3N0YXJzXSk7XHJcbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xyXG4gICAgICAgIHNldE1vdW50ZWRGbGFnKHRydWUpO1xyXG4gICAgfSwgW10pO1xyXG4gICAgcmV0dXJuIChfanN4KENvbnRhaW5lciwgeyBjaGlsZHJlbjogYXJyLm1hcCgoaWR4KSA9PiAoX2pzeChTdGFyLCB7IGFzSG92ZXJlZDogaG92ZXJlZFN0YXIgPyBpZHggPD0gaG92ZXJlZFN0YXIgOiBmYWxzZSwgc2l6ZTogc3RhclNpemUgIT09IG51bGwgJiYgc3RhclNpemUgIT09IHZvaWQgMCA/IHN0YXJTaXplIDogMjQsIGZpbGxlZDogaG92ZXJlZFN0YXIgPyB1bmRlZmluZWQgOiBpZHggPD0gc3RhcnMsIGVtcHR5Q29sb3I6IGVtcHR5Q29sb3IsIGZpbGxlZENvbG9yOiBmaWxsZWRDb2xvciwgb25DbGljazogKGFjdGlvbikgPT4ge1xyXG4gICAgICAgICAgICAgICAgaWYgKGFjdGlvbiA9PT0gJ2RlLXNlbGVjdCcpIHtcclxuICAgICAgICAgICAgICAgICAgICBpZiAoaWR4IDwgc3RhcnMpIHtcclxuICAgICAgICAgICAgICAgICAgICAgICAgc2V0U3RhcnMoaWR4KTtcclxuICAgICAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICAgICAgZWxzZSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldFN0YXJzKGlkeCAtIDEpO1xyXG4gICAgICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICAgIGVsc2Uge1xyXG4gICAgICAgICAgICAgICAgICAgIHNldFN0YXJzKGlkeCk7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH0sIG9uSG92ZXI6IChob3ZlcmVkKSA9PiB7XHJcbiAgICAgICAgICAgICAgICBpZiAoaG92ZXJlZClcclxuICAgICAgICAgICAgICAgICAgICBzZXRIb3ZlcmVkU3RhcihpZHgpO1xyXG4gICAgICAgICAgICAgICAgZWxzZSB7XHJcbiAgICAgICAgICAgICAgICAgICAgc2V0SG92ZXJlZFN0YXIoMCk7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgIH0sIG1vZGU6IG1vZGUgfSwgaWR4KSkpIH0pKTtcclxufTtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9U3RhclJhdGluZy5qcy5tYXAiXX0= */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),t=g=>{let{emptyColor:t,filledColor:Z,onChange:b,value:i,maxValue:G,starSize:X,mode:o}=g;const[d,a]=C(null!=i?i:0),[n,s]=C(!1),[p,W]=C(0),m=A((()=>Array(null!=G?G:5).fill(null).map(((g,I)=>I+1))),[G]);return c((()=>{n&&b(d)}),[d]),c((()=>{s(!0)}),[]),I(e,{children:m.map((g=>I(l,{asHovered:!!p&&g<=p,size:null!=X?X:24,filled:p?void 0:g<=d,emptyColor:t,filledColor:Z,onClick:I=>{a("de-select"===I?g<d?g:g-1:g)},onHover:I=>{W(I?g:0)},mode:o},g)))})};export{t as StarRating};
+import I from"@emotion/styled/base";import{jsx as g}from"react/jsx-runtime";import{useState as C,useMemo as A,useEffect as c}from"react";import{Star as l}from"./Star.js";const e=I("div","production"===process.env.NODE_ENV?{target:"e1yh3w250"}:{target:"e1yh3w250",label:"Container"})("production"===process.env.NODE_ENV?{name:"31c8wb",styles:"display:flex;flex-direction:row;gap:12px;justify-content:start;align-items:center"}:{name:"31c8wb",styles:"display:flex;flex-direction:row;gap:12px;justify-content:start;align-items:center",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0YXJSYXRpbmcudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUk2QiIsImZpbGUiOiJTdGFyUmF0aW5nLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgdXNlRWZmZWN0LCB1c2VNZW1vLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcclxuaW1wb3J0IHsgU3RhciB9IGZyb20gJy4vU3Rhcic7XHJcbmNvbnN0IENvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogcm93O1xuXHRnYXA6IDEycHg7XG5cdGp1c3RpZnktY29udGVudDogc3RhcnQ7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5gO1xyXG5leHBvcnQgY29uc3QgU3RhclJhdGluZyA9ICh7IGVtcHR5Q29sb3IsIGZpbGxlZENvbG9yLCBvbkNoYW5nZSwgdmFsdWUsIG1heFZhbHVlLCBzdGFyU2l6ZSwgbW9kZSwgdmVyc2lvbiA9ICd2MScsIH0pID0+IHtcclxuICAgIGNvbnN0IFtzdGFycywgc2V0U3RhcnNdID0gdXNlU3RhdGUodmFsdWUgIT09IG51bGwgJiYgdmFsdWUgIT09IHZvaWQgMCA/IHZhbHVlIDogMCk7XHJcbiAgICBjb25zdCBbbW91bnRlZCwgc2V0TW91bnRlZEZsYWddID0gdXNlU3RhdGUoZmFsc2UpO1xyXG4gICAgY29uc3QgW2hvdmVyZWRTdGFyLCBzZXRIb3ZlcmVkU3Rhcl0gPSB1c2VTdGF0ZSgwKTtcclxuICAgIGNvbnN0IGFyciA9IHVzZU1lbW8oKCkgPT4ge1xyXG4gICAgICAgIGNvbnN0IGxpbWl0ID0gbWF4VmFsdWUgIT09IG51bGwgJiYgbWF4VmFsdWUgIT09IHZvaWQgMCA/IG1heFZhbHVlIDogNTtcclxuICAgICAgICByZXR1cm4gQXJyYXkobGltaXQpXHJcbiAgICAgICAgICAgIC5maWxsKG51bGwpXHJcbiAgICAgICAgICAgIC5tYXAoKF8sIGlkeCkgPT4gaWR4ICsgMSk7XHJcbiAgICB9LCBbbWF4VmFsdWVdKTtcclxuICAgIHVzZUVmZmVjdCgoKSA9PiB7XHJcbiAgICAgICAgaWYgKG1vdW50ZWQpIHtcclxuICAgICAgICAgICAgb25DaGFuZ2Uoc3RhcnMpO1xyXG4gICAgICAgIH1cclxuICAgIH0sIFtzdGFyc10pO1xyXG4gICAgdXNlRWZmZWN0KCgpID0+IHtcclxuICAgICAgICBzZXRNb3VudGVkRmxhZyh0cnVlKTtcclxuICAgIH0sIFtdKTtcclxuICAgIHJldHVybiAoX2pzeChDb250YWluZXIsIHsgY2hpbGRyZW46IGFyci5tYXAoKGlkeCkgPT4gKF9qc3goU3RhciwgeyBhc0hvdmVyZWQ6IGhvdmVyZWRTdGFyID8gaWR4IDw9IGhvdmVyZWRTdGFyIDogZmFsc2UsIHNpemU6IHN0YXJTaXplICE9PSBudWxsICYmIHN0YXJTaXplICE9PSB2b2lkIDAgPyBzdGFyU2l6ZSA6IDI0LCBmaWxsZWQ6IGhvdmVyZWRTdGFyID8gdW5kZWZpbmVkIDogaWR4IDw9IHN0YXJzLCBlbXB0eUNvbG9yOiBlbXB0eUNvbG9yLCBmaWxsZWRDb2xvcjogZmlsbGVkQ29sb3IsIG9uQ2xpY2s6IChhY3Rpb24pID0+IHtcclxuICAgICAgICAgICAgICAgIGlmIChhY3Rpb24gPT09ICdkZS1zZWxlY3QnKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgaWYgKGlkeCA8IHN0YXJzKSB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldFN0YXJzKGlkeCk7XHJcbiAgICAgICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgICAgICAgIGVsc2Uge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICBzZXRTdGFycyhpZHggLSAxKTtcclxuICAgICAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgICBlbHNlIHtcclxuICAgICAgICAgICAgICAgICAgICBzZXRTdGFycyhpZHgpO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB9LCBvbkhvdmVyOiAoaG92ZXJlZCkgPT4ge1xyXG4gICAgICAgICAgICAgICAgaWYgKGhvdmVyZWQpXHJcbiAgICAgICAgICAgICAgICAgICAgc2V0SG92ZXJlZFN0YXIoaWR4KTtcclxuICAgICAgICAgICAgICAgIGVsc2Uge1xyXG4gICAgICAgICAgICAgICAgICAgIHNldEhvdmVyZWRTdGFyKDApO1xyXG4gICAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICB9LCBtb2RlOiBtb2RlLCB2ZXJzaW9uOiB2ZXJzaW9uIH0sIGlkeCkpKSB9KSk7XHJcbn07XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVN0YXJSYXRpbmcuanMubWFwIl19 */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}}),b=I=>{let{emptyColor:b,filledColor:t,onChange:d,value:G,maxValue:o,starSize:s,mode:i,version:X="v1"}=I;const[a,n]=C(null!=G?G:0),[y,Z]=C(!1),[W,m]=C(0),p=A((()=>Array(null!=o?o:5).fill(null).map(((I,g)=>g+1))),[o]);return c((()=>{y&&d(a)}),[a]),c((()=>{Z(!0)}),[]),g(e,{children:p.map((I=>g(l,{asHovered:!!W&&I<=W,size:null!=s?s:24,filled:W?void 0:I<=a,emptyColor:b,filledColor:t,onClick:g=>{n("de-select"===g?I<a?I:I-1:I)},onHover:g=>{m(g?I:0)},mode:i,version:X},I)))})};export{b as StarRating};

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;
@@ -29,5 +30,7 @@ export type StateComponentProps = {
     leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
     width: number;
     size?: 'DEFAULT' | 'SMALL';
+    iconHeight?: number;
+    iconWidth?: number;
 };
 export declare const StateComponent: React.FC<React.PropsWithChildren<StateComponentProps>>;

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 i}from"../../constants/Theme.js";import o 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 h,BodySecondary as m}from"../TypographyStyle.js";import{StateComponentContainer as g,StateIcon as u,StateHeading as p,StateSubline as L,ButtonContainer as b}from"./StateComponent.styled.js";var j,O,S;!function(n){n.SUCCESS="success",n.ERROR="error",n.WARNING="warning",n.LOADING="loading"}(j||(j={})),function(n){n.CANCEL="cancel",n.OTHER="other"}(O||(O={})),function(n){n.SINGLE="SINGLE",n.DOUBLE="DOUBLE"}(S||(S={}));const E=E=>{var y;const C=()=>f==j.SUCCESS?t(s,{}):f==j.WARNING?t(r,{}):f==j.ERROR?t(o,{}):f===j.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:w,iconWidth:x,iconHeight:D}=E;return n(g,Object.assign({width:W},{children:[t(u,Object.assign({iconWidth:x,iconHeight:D},{children:w?t("img",{src:w,width:"100%",height:"auto",alt:""}):A})),n(p,Object.assign({size:E.size},{children:["SMALL"===E.size&&t(l,{children:I}),"SMALL"!==E.size&&t(d,{children:I})]})),n(L,{children:["SMALL"!==E.size&&t(h,Object.assign({color:i.content.secondary},{children:R})),"SMALL"===E.size&&t(m,Object.assign({color:i.content.secondary},{children:R}))]}),null!==(y=E.children)&&void 0!==y?y:t(e,{}),N&&t(e,{children:n(b,Object.assign({size:E.size},{children:[T==S.DOUBLE&&t(c,{onClick:()=>B&&B(O.CANCEL),buttonType:"secondary",buttonText:"Cancel",matchParentWidth:!0}),t(c,{onClick:()=>B&&B(O.OTHER),buttonType:null!=v?v:"primary",LeadingIcon:G,buttonText:null!=z?z:"Retry",matchParentWidth:!0})]}))})]}))};export{O as ButtonActions,S as ButtonTypes,E as StateComponent,j as StateInterface};

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

@@ -1,7 +1,10 @@
 export declare const StateComponentContainer: import("styled-components").StyledComponent<"div", any, {
     width: number;
 }, never>;
-export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StateIcon: import("styled-components").StyledComponent<"div", any, {
+    iconWidth?: number | undefined;
+    iconHeight?: number | undefined;
+}, never>;
 export declare const StateHeading: import("styled-components").StyledComponent<"div", any, {
     size?: "SMALL" | "DEFAULT" | undefined;
 }, never>;

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

@@ -7,23 +7,23 @@ import i from"styled-components";const t=i.div`
 	flex-direction: column;
 	align-items: center;
 `,e=i.div`
-	width: 64px;
-	height: 64px;
+	width: ${i=>i.iconWidth?i.iconWidth:64}px;
+	height: ${i=>i.iconHeight?i.iconHeight:64}px;
 	display: flex;
 	justify-content: center;
 	align-items: end;
-`,p=i.div`
+`,d=i.div`
 	margin-top: ${i=>"SMALL"===i.size?8:16}px;
 	text-align: center;
 	max-width: 100%;
-`,d=i.div`
+`,n=i.div`
 	display: flex;
 	margin-top: ${i=>"SMALL"===i.size?8:24}px;
 	gap: 12px;
 	width: 100%;
-`,x=i.div`
+`,p=i.div`
 	margin-top: 4px;
 	max-width: 100%;
 	text-align: center;
 	max-width: 100%;
-`;export{d as ButtonContainer,t as StateComponentContainer,p as StateHeading,e as StateIcon,x as StateSubline};
+`;export{n as ButtonContainer,t as StateComponentContainer,d as StateHeading,e as StateIcon,p as StateSubline};

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

@@ -15,5 +15,8 @@ export type StateModalComponentProps = {
     width?: number;
     onClose?: () => void;
     zIndex?: number;
+    headerImage?: string;
+    iconWidth?: number;
+    iconHeight?: number;
 };
 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 c}from"../spinner/Spinner.js";import{StateInterface as a,StateComponent as d}from"../states/StateComponent.js";const l=l=>{const m=()=>p==a.SUCCESS?t(s,{}):p==a.WARNING?t(i,{}):p==a.ERROR?t(o,{}):p===a.LOADING?t(c,{size:"large"}):void 0,{states:p,heading:g,subline:h,icon:u=m(),isButtonEnabled:I,type:f,buttonText:C,onButtonClick:j,leadingIcon:O,width:b,zIndex:x,headerImage:S,iconHeight:y,iconWidth:A}=l,[B,E]=n(!0);return t(r,Object.assign({open:B,onClose:function(){l.onClose&&l.onClose(),E(!1)},closeOnOutsideClick:!(p===a.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:b},hideCrossButton:p===a.LOADING,zIndex:x||e.STATE_MODAL},{children:t(d,Object.assign({states:p,heading:g,subline:h,isButtonEnabled:I,leadingIcon:O,type:f,buttonText:C,onButtonClick:j,icon:u,width:b||400,headerImage:S,iconHeight:y,iconWidth:A},{children:l.children}))}))};export{l as StateModalComponent};

package/dist/esm/components/stepper/Stepper.d.ts

@@ -3,6 +3,7 @@ export interface StepperProps {
     steps: EachStep[];
     activeStep: EachStep;
     onClickingEachStep: (step: EachStep) => void;
+    hideHoverState?: boolean;
 }
 export interface EachStep {
     stepKey: string;
@@ -18,5 +19,6 @@ export interface SingleStepperProps {
     isActive: boolean;
     onClickingStep: (step: EachStep) => void;
     stepsCount: number;
+    hideHoverState?: boolean;
 }
 export declare const Stepper: (stepperDetails: StepperProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/stepper/Stepper.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import i from"../../assets/icons/check.svg.js";import n from"../../assets/icons/errorInfo.svg.js";import{BodySecondary as o,BodyPrimary as c}from"../TypographyStyle.js";import{StepperContainer as r,SingleStepperChildContainer as a}from"./Stepper.styled.js";const l=t=>{const{steps:s,activeStep:i,onClickingEachStep:n}=t;return e(r,{children:s.map(((t,o)=>e(p,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{n(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:o==s.length-1,index:o},o)))})},p=r=>{const{eachStep:l,isLastElement:p,index:d,isActive:m,onClickingStep:h}=r,{stepName:g,isCompleted:v,isError:j,isInActive:u}=l,S=()=>m?"active":v?"completed":j?"error":u?"inactive":"default";return t(a,Object.assign({stepsCount:r.stepsCount,onClick:()=>{!u&&h(l)},selectedState:S()},{children:[t("div",Object.assign({className:`hover-container ${u?"blocked":"pointer"} `},{children:[e("div",Object.assign({className:"badge"},{children:"completed"==S()?e(i,{height:16,width:16,color:s.content.positive}):"error"==S()?e(n,{height:16,width:16}):e(o,Object.assign({className:"badge-text"},{children:d+1}))})),e(c,Object.assign({className:"step-text",title:g},{children:g}))]})),e("div",{className:p?"":"horizontal-divider"})]}))};export{l as Stepper};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{COLORS as s}from"../../constants/Theme.js";import i from"../../assets/icons/check.svg.js";import o from"../../assets/icons/errorInfo.svg.js";import{BodySecondary as n,BodyPrimary as r}from"../TypographyStyle.js";import{StepperContainer as c,SingleStepperChildContainer as a}from"./Stepper.styled.js";const l=t=>{const{steps:s,activeStep:i,onClickingEachStep:o,hideHoverState:n}=t;return e(c,{children:s.map(((t,r)=>e(p,{stepsCount:s.length,eachStep:t,onClickingStep:e=>{o(e)},isActive:(null==i?void 0:i.stepKey)==(null==t?void 0:t.stepKey),isLastElement:r==s.length-1,index:r,hideHoverState:n},r)))})},p=c=>{const{eachStep:l,isLastElement:p,index:d,isActive:m,onClickingStep:h,hideHoverState:v}=c,{stepName:g,isCompleted:S,isError:j,isInActive:u}=l,b=()=>m?"active":S?"completed":j?"error":u?"inactive":"default";return t(a,Object.assign({stepsCount:c.stepsCount,onClick:()=>{!u&&h(l)},selectedState:b(),isInActive:u||v},{children:[t("div",Object.assign({className:`hover-container ${u?"blocked":"pointer"} `},{children:[e("div",Object.assign({className:"badge"},{children:"completed"==b()?e(i,{height:16,width:16,color:s.content.positive}):"error"==b()?e(o,{height:16,width:16}):e(n,Object.assign({className:"badge-text"},{children:d+1}))})),e(r,Object.assign({className:"step-text",title:g},{children:g}))]})),e("div",{className:p?"":"horizontal-divider"})]}))};export{l as Stepper};

package/dist/esm/components/stepper/Stepper.styled.d.ts

@@ -3,5 +3,6 @@ export declare const StepperContainer: import("styled-components").StyledCompone
 export declare const SingleStepperChildContainer: import("styled-components").StyledComponent<"div", any, {
     selectedState: StepperStates;
     stepsCount: number;
+    isInActive?: boolean | undefined;
 }, never>;
 export declare const WorkingStepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/stepper/Stepper.styled.js

@@ -1,10 +1,10 @@
-import e from"styled-components";import{getTheme as t}from"./themes.js";const o=e.div`
+import e from"styled-components";import{getTheme as t}from"./themes.js";const i=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
 	align-items: center;
 	gap: 16px;
-`,i=e.div`
+`,o=e.div`
 	display: flex;
 	flex-direction: row;
 	justify-content: center;
@@ -26,9 +26,9 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const o=
 		align-items: center;
 		gap: 8px;
 		&:hover {
-			padding: 6px 8px 6px 6px;
-			background: #f0f0f0;
-			border-radius: 30px;
+			padding: ${e=>e.isInActive?void 0:"6px 8px 6px 6px"};
+			background: ${e=>e.isInActive?void 0:"#f0f0f0"};
+			border-radius: ${e=>e.isInActive?void 0:"30px"};
 		}
 	}
 	.badge {
@@ -80,4 +80,4 @@ import e from"styled-components";import{getTheme as t}from"./themes.js";const o=
 		align-items: center;
 		overflow-y: auto;
 	}
-`;export{i as SingleStepperChildContainer,o as StepperContainer};
+`;export{o as SingleStepperChildContainer,i as StepperContainer};