@bikdotai/bik-component-library 0.0.734 → 0.0.735-beta.1

package/dist/cjs/components/slider/slider.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface SliderBikProps {
-    min?: number;
-    max?: number;
-    defaultValue?: number;
-    onChange: (event: Event, value: number) => void;
-    step?: number;
-    disabled?: boolean;
-}
-export declare const BikSlider: React.FC<SliderBikProps>;
+import React from 'react';
+export interface SliderBikProps {
+    min?: number;
+    max?: number;
+    defaultValue?: number;
+    onChange: (event: Event, value: number) => void;
+    step?: number;
+    disabled?: boolean;
+}
+export declare const BikSlider: React.FC<SliderBikProps>;

package/dist/cjs/components/slider/slider.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),a=require("../../constants/Theme.js");exports.BikSlider=n=>{let{min:s=0,max:r=100,defaultValue:o,onChange:i,step:l=1,disabled:u=!1}=n;const c=void 0!==o?o:s,[b,d]=t.useState(c),[x,m]=t.useState(!1),[p,g]=t.useState(!1),[h,f]=t.useState(!1),v=t.useRef(null),j=t.useRef(null),w=(e=>({container:{position:"relative",marginTop:"30px",height:"8px",width:"100%",cursor:e?"not-allowed":"pointer",opacity:e?.5:1},track:{position:"absolute",top:0,left:0,right:0,height:"8px",backgroundColor:"#E0E0E0",borderRadius:"4px"},filledTrack:{position:"absolute",top:0,left:0,height:"8px",backgroundColor:a.COLORS.background.brand,borderRadius:"4px",transition:"width 0.1s ease"},thumb:{position:"absolute",top:"50%",width:"24px",height:"24px",backgroundColor:a.COLORS.background.brand,border:`2px solid ${a.COLORS.background.brand}`,borderRadius:"50%",transform:"translate(-50%, -50%)",cursor:e?"not-allowed":"grab",transition:"box-shadow 0.2s ease",outline:"none",zIndex:1},thumbDisabled:{cursor:"not-allowed"},valueLabel:{position:"absolute",bottom:"100%",left:"50%",marginBottom:"16px",width:"32px",height:"32px",backgroundColor:a.COLORS.background.brand,borderRadius:"50% 50% 50% 0",transform:"translate(0, 0) rotate(-45deg) scale(0)",transformOrigin:"bottom left",transition:"transform 0.2s ease",pointerEvents:"none",display:"flex",alignItems:"center",justifyContent:"center"},valueLabelVisible:{transform:"translate(0, 0) rotate(-45deg) scale(1)"},valueLabelText:{transform:"rotate(45deg)",color:"white",fontSize:"12px",lineHeight:1.2,fontWeight:500}}))(u);t.useEffect((()=>{d(void 0!==o?o:s)}),[o,s]);const k=t.useCallback((e=>{if(!v.current)return s;const t=v.current.getBoundingClientRect(),a=Math.max(0,Math.min(1,(e-t.left)/t.width)),n=s+a*(r-s),o=Math.round(n/l)*l;return Math.max(s,Math.min(r,o))}),[s,r,l]),O=t.useCallback((e=>{if(u)return;e.preventDefault(),m(!0),f(!0);const t=k(e.clientX);d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[u,k,i]),E=t.useCallback((e=>{if(!x||u)return;const t=k(e.clientX);d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[x,u,k,i]),R=t.useCallback((()=>{m(!1),f(!1)}),[]),C=t.useCallback((e=>{if(u)return;let t=b;switch(e.key){case"ArrowLeft":case"ArrowDown":t=Math.max(s,b-l);break;case"ArrowRight":case"ArrowUp":t=Math.min(r,b+l);break;case"Home":t=s;break;case"End":t=r;break;default:return}e.preventDefault(),d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[u,b,s,r,l,i]);t.useEffect((()=>{if(x)return document.addEventListener("mousemove",E),document.addEventListener("mouseup",R),()=>{document.removeEventListener("mousemove",E),document.removeEventListener("mouseup",R)}}),[x,E,R]);const L=(b-s)/(r-s)*100,M=isNaN(L)?0:Math.max(0,Math.min(100,L));return e.jsxRuntimeExports.jsxs("div",Object.assign({ref:v,style:w.container,onMouseDown:O,role:"slider","aria-label":"bik slider","aria-valuemin":s,"aria-valuemax":r,"aria-valuenow":b,tabIndex:u?-1:0,onKeyDown:C},{children:[e.jsxRuntimeExports.jsx("div",{style:w.track}),e.jsxRuntimeExports.jsx("div",{style:Object.assign(Object.assign({},w.filledTrack),{width:`${M}%`})}),e.jsxRuntimeExports.jsx("div",Object.assign({ref:j,style:(()=>{const e=Object.assign({},w.thumb);return u?Object.assign(Object.assign({},e),w.thumbDisabled):(x?(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.5)",e.cursor="grabbing"):p&&(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.08)"),e.left=`${M}%`,e)})(),onMouseEnter:()=>!u&&g(!0),onMouseLeave:()=>!u&&g(!1),onFocus:()=>!u&&f(!0),onBlur:()=>!u&&f(!1)},{children:e.jsxRuntimeExports.jsx("div",Object.assign({style:(()=>{const e=Object.assign({},w.valueLabel);return h||p?Object.assign(Object.assign({},e),w.valueLabelVisible):e})()},{children:e.jsxRuntimeExports.jsx("span",Object.assign({style:w.valueLabelText},{children:b}))}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),a=require("../../constants/Theme.js");exports.BikSlider=n=>{let{min:r=0,max:o=100,defaultValue:s,onChange:i,step:l=1,disabled:u=!1}=n;const c=void 0!==s?s:r,[b,d]=t.useState(c),[h,p]=t.useState(!1),[x,g]=t.useState(!1),[m,f]=t.useState(!1),v=t.useRef(null),w=t.useRef(null),k=(e=>({container:{position:"relative",marginTop:"30px",height:"8px",width:"100%",cursor:e?"not-allowed":"pointer",opacity:e?.5:1},track:{position:"absolute",top:0,left:0,right:0,height:"8px",backgroundColor:"#E0E0E0",borderRadius:"4px"},filledTrack:{position:"absolute",top:0,left:0,height:"8px",backgroundColor:a.COLORS.background.brand,borderRadius:"4px",transition:"width 0.1s ease"},thumb:{position:"absolute",top:"50%",width:"24px",height:"24px",backgroundColor:a.COLORS.background.brand,border:`2px solid ${a.COLORS.background.brand}`,borderRadius:"50%",transform:"translate(-50%, -50%)",cursor:e?"not-allowed":"grab",transition:"box-shadow 0.2s ease",outline:"none",zIndex:1},thumbDisabled:{cursor:"not-allowed"},valueLabel:{position:"absolute",bottom:"100%",left:"50%",marginBottom:"16px",width:"32px",height:"32px",backgroundColor:a.COLORS.background.brand,borderRadius:"50% 50% 50% 0",transform:"translate(0, 0) rotate(-45deg) scale(0)",transformOrigin:"bottom left",transition:"transform 0.2s ease",pointerEvents:"none",display:"flex",alignItems:"center",justifyContent:"center"},valueLabelVisible:{transform:"translate(0, 0) rotate(-45deg) scale(1)"},valueLabelText:{transform:"rotate(45deg)",color:"white",fontSize:"12px",lineHeight:1.2,fontWeight:500}}))(u);t.useEffect((()=>{d(void 0!==s?s:r)}),[s,r]);const j=t.useCallback((e=>{if(!v.current)return r;const t=v.current.getBoundingClientRect(),a=Math.max(0,Math.min(1,(e-t.left)/t.width)),n=r+a*(o-r),s=Math.round(n/l)*l;return Math.max(r,Math.min(o,s))}),[r,o,l]),O=t.useCallback((e=>{if(u)return;e.preventDefault(),p(!0),f(!0);const t=j(e.clientX);d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[u,j,i]),C=t.useCallback((e=>{if(!h||u)return;const t=j(e.clientX);d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[h,u,j,i]),L=t.useCallback((()=>{p(!1),f(!1)}),[]),E=t.useCallback((e=>{if(u)return;let t=b;switch(e.key){case"ArrowLeft":case"ArrowDown":t=Math.max(r,b-l);break;case"ArrowRight":case"ArrowUp":t=Math.min(o,b+l);break;case"Home":t=r;break;case"End":t=o;break;default:return}e.preventDefault(),d(t);const a=new Event("change",{bubbles:!0});i(a,t)}),[u,b,r,o,l,i]);t.useEffect((()=>{if(h)return document.addEventListener("mousemove",C),document.addEventListener("mouseup",L),()=>{document.removeEventListener("mousemove",C),document.removeEventListener("mouseup",L)}}),[h,C,L]);const M=(b-r)/(o-r)*100,y=isNaN(M)?0:Math.max(0,Math.min(100,M));return e.jsxs("div",{ref:v,style:k.container,onMouseDown:O,role:"slider","aria-label":"bik slider","aria-valuemin":r,"aria-valuemax":o,"aria-valuenow":b,tabIndex:u?-1:0,onKeyDown:E,children:[e.jsx("div",{style:k.track}),e.jsx("div",{style:Object.assign(Object.assign({},k.filledTrack),{width:`${y}%`})}),e.jsx("div",{ref:w,style:(()=>{const e=Object.assign({},k.thumb);return u?Object.assign(Object.assign({},e),k.thumbDisabled):(h?(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.5)",e.cursor="grabbing"):x&&(e.boxShadow="0px 0px 0px 8px rgba(115, 29, 207, 0.08)"),e.left=`${y}%`,e)})(),onMouseEnter:()=>!u&&g(!0),onMouseLeave:()=>!u&&g(!1),onFocus:()=>!u&&f(!0),onBlur:()=>!u&&f(!1),children:e.jsx("div",{style:(()=>{const e=Object.assign({},k.valueLabel);return m||x?Object.assign(Object.assign({},e),k.valueLabelVisible):e})(),children:e.jsx("span",{style:k.valueLabelText,children:b})})})]})};

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

@@ -1,11 +1,11 @@
-import { SpinnerProps } from './model';
-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>;
+import { SpinnerProps } from './model';
+export declare const Spinner: {
+    ({ size, color, className }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const PureSpinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width: string;
+    height: string;
+    color?: string;
+    backgroundColor?: string;
+}>> & string;

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),r=require("react-lottie"),t=require("styled-components"),n=require("../../constants/Theme.js"),o=require("./lotties/black.json.js"),i=require("./lotties/brand.json.js"),s=require("./lotties/red.json.js"),a=require("./lotties/white.json.js"),d=require("./themes.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(r),c=l(t);const p={[n.COLORS.stroke.brand]:i,[n.COLORS.content.primary]:o,[n.COLORS.content.primaryInverse]:a,[n.COLORS.content.negative]:s},j=r=>{let{size:t,color:o,className:i}=r;const s={loop:!0,autoplay:!0,animationData:p[null!=o?o:n.COLORS.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e.jsxRuntimeExports.jsx("div",Object.assign({className:`spinner-container ${i}`},{children:e.jsxRuntimeExports.jsx(u.default,{options:s,width:d.SizeMap[t],isStopped:!1,isPaused:!1})}))};j.displayName="Spinner";const m=c.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react-lottie"),t=require("styled-components"),n=require("../../constants/Theme.js"),o=require("./lotties/black.json.js"),i=require("./lotties/brand.json.js"),s=require("./lotties/red.json.js"),a=require("./lotties/white.json.js"),l=require("./themes.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r),c=d(t);const p={[n.COLORS.stroke.brand]:i,[n.COLORS.content.primary]:o,[n.COLORS.content.primaryInverse]:a,[n.COLORS.content.negative]:s},j=r=>{let{size:t,color:o,className:i}=r;const s={loop:!0,autoplay:!0,animationData:p[null!=o?o:n.COLORS.stroke.brand],rendererSettings:{preserveAspectRatio:"xMidYMid slice"}};return e.jsx("div",{className:`spinner-container ${i}`,children:e.jsx(u.default,{options:s,width:l.SizeMap[t],isStopped:!1,isPaused:!1})})};j.displayName="Spinner";const m=c.default.div`
 	width: ${e=>e.width};
 	height: ${e=>e.height};
 	border: 5px solid ${e=>{var r;return null!==(r=e.backgroundColor)&&void 0!==r?r:"transparent"}};

package/dist/cjs/components/spinner/index.d.ts

@@ -1 +1 @@
-export * from './Spinner';
+export * from './Spinner';

package/dist/cjs/components/spinner/model.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
-export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Size of the spinner
-     *
-     */
-    size: 'small' | 'large';
-    /**
-     * Color of the spinner.
-     * Defaults to COLORS.content.brand
-     */
-    color?: string;
-}
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Size of the spinner
+     *
+     */
+    size: 'small' | 'large';
+    /**
+     * Color of the spinner.
+     * Defaults to COLORS.content.brand
+     */
+    color?: string;
+    className?: string;
+}

package/dist/cjs/components/spinner/themes.d.ts

@@ -1,3 +1,3 @@
-export declare const SizeMap: {
-    [key in 'small' | 'large']: number;
-};
+export declare const SizeMap: {
+    [key in 'small' | 'large']: number;
+};

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

@@ -1,13 +1,13 @@
-import React from 'react';
-export declare const Star: React.FC<{
-    filled?: boolean;
-    size?: number;
-    emptyColor?: string;
-    filledColor?: string;
-    onClick?: (action: 'de-select' | 'select') => void;
-    onHover?: (hovered: boolean) => void;
-    /** this means this star is hovered-active cause there is a star hovered after this  */
-    asHovered?: boolean;
-    mode?: 'VIEW' | 'EDIT';
-    version?: 'v1' | 'v2';
-}>;
+import React from 'react';
+export declare const Star: React.FC<{
+    filled?: boolean;
+    size?: number;
+    emptyColor?: string;
+    filledColor?: string;
+    onClick?: (action: 'de-select' | 'select') => void;
+    onHover?: (hovered: boolean) => void;
+    /** 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/cjs/components/star-rating/Star.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),s=require("../../constants/Theme.js"),r=require("../../assets/icons/starEmpty.svg.js"),o=require("../../assets/icons/starFilled.svg.js"),n=require("../../assets/icons/starFilledV2.svg.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(t);exports.Star=l=>{let{size:i,filled:a,emptyColor:c,filledColor:d,onClick:E,asHovered:f,onHover:v,mode:j,version:x="v1"}=l;const[p,g]=t.useState(!1);t.useEffect((()=>{null==v||v(p)}),[p]),t.useEffect((()=>{f||g(!1)}),[f]);const h=u.default.useMemo((()=>(e=>"v1"===e?o.default:n.default)(x)),[x]);return f?e.jsxRuntimeExports.jsx(h,{onClick:()=>{null==E||E("select")},onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1),style:{cursor:"pointer"},width:i,height:i,color:null!=d?d:s.COLORS.background.warning.vibrant}):p?e.jsxRuntimeExports.jsx(h,{onMouseLeave:()=>g(!1),onMouseEnter:()=>g(!0),style:{cursor:"pointer"},onClick:()=>{null==E||E("select")},width:i,height:i,color:null!=d?d:s.COLORS.background.warning.vibrant}):a?e.jsxRuntimeExports.jsx(h,{onMouseEnter:()=>"VIEW"!==j&&g(!0),onMouseLeave:()=>"VIEW"!==j&&g(!1),style:{cursor:"VIEW"!==j?"pointer":"default"},onClick:()=>{"VIEW"!==j&&(null==E||E("de-select"))},width:i,height:i,color:null!=d?d:s.COLORS.background.warning.vibrant}):e.jsxRuntimeExports.jsx(r.default,{onMouseEnter:()=>"VIEW"!==j&&g(!0),onMouseLeave:()=>"VIEW"!==j&&g(!1),style:{cursor:"VIEW"!==j?"pointer":"default"},onClick:()=>{"VIEW"!==j&&(null==E||E("select"))},width:i,height:i,color:null!=c?c:s.COLORS.surface.standard})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../constants/Theme.js"),s=require("../../assets/icons/starEmpty.svg.js"),o=require("../../assets/icons/starFilled.svg.js"),n=require("../../assets/icons/starFilledV2.svg.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(t);exports.Star=l=>{let{size:i,filled:a,emptyColor:c,filledColor:d,onClick:f,asHovered:v,onHover:E,mode:g,version:h="v1"}=l;const[j,C]=t.useState(!1);t.useEffect((()=>{null==E||E(j)}),[j]),t.useEffect((()=>{v||C(!1)}),[v]);const p=u.default.useMemo((()=>(e=>"v1"===e?o.default:n.default)(h)),[h]);return v?e.jsx(p,{onClick:()=>{null==f||f("select")},onMouseEnter:()=>C(!0),onMouseLeave:()=>C(!1),style:{cursor:"pointer"},width:i,height:i,color:null!=d?d:r.COLORS.background.warning.vibrant}):j?e.jsx(p,{onMouseLeave:()=>C(!1),onMouseEnter:()=>C(!0),style:{cursor:"pointer"},onClick:()=>{null==f||f("select")},width:i,height:i,color:null!=d?d:r.COLORS.background.warning.vibrant}):a?e.jsx(p,{onMouseEnter:()=>"VIEW"!==g&&C(!0),onMouseLeave:()=>"VIEW"!==g&&C(!1),style:{cursor:"VIEW"!==g?"pointer":"default"},onClick:()=>{"VIEW"!==g&&(null==f||f("de-select"))},width:i,height:i,color:null!=d?d:r.COLORS.background.warning.vibrant}):e.jsx(s.default,{onMouseEnter:()=>"VIEW"!==g&&C(!0),onMouseLeave:()=>"VIEW"!==g&&C(!1),style:{cursor:"VIEW"!==g?"pointer":"default"},onClick:()=>{"VIEW"!==g&&(null==f||f("select"))},width:i,height:i,color:null!=c?c:r.COLORS.surface.standard})};

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

@@ -1,11 +1,11 @@
-import React from 'react';
-export declare const StarRating: React.FC<{
-    emptyColor?: string;
-    filledColor?: string;
-    onChange: (stars: number) => void;
-    value?: number;
-    maxValue?: number;
-    starSize?: number;
-    mode?: 'VIEW' | 'EDIT';
-    version?: 'v1' | 'v2';
-}>;
+import React from 'react';
+export declare const StarRating: React.FC<{
+    emptyColor?: string;
+    filledColor?: string;
+    onChange: (stars: number) => void;
+    value?: number;
+    maxValue?: number;
+    starSize?: number;
+    mode?: 'VIEW' | 'EDIT';
+    version?: 'v1' | 'v2';
+}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var I=require("../../node_modules/@emotion/styled/base/dist/emotion-styled-base.esm.js"),g=require("../../node_modules/react/jsx-runtime.js"),C=require("react"),A=require("./Star.js");const e=I.default("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)."}});exports.StarRating=I=>{let{emptyColor:c,filledColor:l,onChange:t,value:s,maxValue:d,starSize:b,mode:G,version:i="v1"}=I;const[o,a]=C.useState(null!=s?s:0),[n,u]=C.useState(!1),[y,X]=C.useState(0),Z=C.useMemo((()=>Array(null!=d?d:5).fill(null).map(((I,g)=>g+1))),[d]);return C.useEffect((()=>{n&&t(o)}),[o]),C.useEffect((()=>{u(!0)}),[]),g.jsxRuntimeExports.jsx(e,{children:Z.map((I=>g.jsxRuntimeExports.jsx(A.Star,{asHovered:!!y&&I<=y,size:null!=b?b:24,filled:y?void 0:I<=o,emptyColor:c,filledColor:l,onClick:g=>{a("de-select"===g?I<o?I:I-1:I)},onHover:g=>{X(g?I:0)},mode:G,version:i},I)))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var I=require("@emotion/styled/base"),g=require("react/jsx-runtime"),C=require("react"),A=require("./Star.js");function e(I){return I&&"object"==typeof I&&"default"in I?I:{default:I}}const l=e(I).default("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,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlN0YXJSYXRpbmcudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUk2QiIsImZpbGUiOiJTdGFyUmF0aW5nLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGpzeCBhcyBfanN4IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgU3RhciB9IGZyb20gJy4vU3Rhcic7XG5jb25zdCBDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0Z2FwOiAxMnB4O1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuYDtcbmV4cG9ydCBjb25zdCBTdGFyUmF0aW5nID0gKHsgZW1wdHlDb2xvciwgZmlsbGVkQ29sb3IsIG9uQ2hhbmdlLCB2YWx1ZSwgbWF4VmFsdWUsIHN0YXJTaXplLCBtb2RlLCB2ZXJzaW9uID0gJ3YxJywgfSkgPT4ge1xuICAgIGNvbnN0IFtzdGFycywgc2V0U3RhcnNdID0gdXNlU3RhdGUodmFsdWUgIT09IG51bGwgJiYgdmFsdWUgIT09IHZvaWQgMCA/IHZhbHVlIDogMCk7XG4gICAgY29uc3QgW21vdW50ZWQsIHNldE1vdW50ZWRGbGFnXSA9IHVzZVN0YXRlKGZhbHNlKTtcbiAgICBjb25zdCBbaG92ZXJlZFN0YXIsIHNldEhvdmVyZWRTdGFyXSA9IHVzZVN0YXRlKDApO1xuICAgIGNvbnN0IGFyciA9IHVzZU1lbW8oKCkgPT4ge1xuICAgICAgICBjb25zdCBsaW1pdCA9IG1heFZhbHVlICE9PSBudWxsICYmIG1heFZhbHVlICE9PSB2b2lkIDAgPyBtYXhWYWx1ZSA6IDU7XG4gICAgICAgIHJldHVybiBBcnJheShsaW1pdClcbiAgICAgICAgICAgIC5maWxsKG51bGwpXG4gICAgICAgICAgICAubWFwKChfLCBpZHgpID0+IGlkeCArIDEpO1xuICAgIH0sIFttYXhWYWx1ZV0pO1xuICAgIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgICAgIGlmIChtb3VudGVkKSB7XG4gICAgICAgICAgICBvbkNoYW5nZShzdGFycyk7XG4gICAgICAgIH1cbiAgICB9LCBbc3RhcnNdKTtcbiAgICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgICBzZXRNb3VudGVkRmxhZyh0cnVlKTtcbiAgICB9LCBbXSk7XG4gICAgcmV0dXJuIChfanN4KENvbnRhaW5lciwgeyBjaGlsZHJlbjogYXJyLm1hcCgoaWR4KSA9PiAoX2pzeChTdGFyLCB7IGFzSG92ZXJlZDogaG92ZXJlZFN0YXIgPyBpZHggPD0gaG92ZXJlZFN0YXIgOiBmYWxzZSwgc2l6ZTogc3RhclNpemUgIT09IG51bGwgJiYgc3RhclNpemUgIT09IHZvaWQgMCA/IHN0YXJTaXplIDogMjQsIGZpbGxlZDogaG92ZXJlZFN0YXIgPyB1bmRlZmluZWQgOiBpZHggPD0gc3RhcnMsIGVtcHR5Q29sb3I6IGVtcHR5Q29sb3IsIGZpbGxlZENvbG9yOiBmaWxsZWRDb2xvciwgb25DbGljazogKGFjdGlvbikgPT4ge1xuICAgICAgICAgICAgICAgIGlmIChhY3Rpb24gPT09ICdkZS1zZWxlY3QnKSB7XG4gICAgICAgICAgICAgICAgICAgIGlmIChpZHggPCBzdGFycykge1xuICAgICAgICAgICAgICAgICAgICAgICAgc2V0U3RhcnMoaWR4KTtcbiAgICAgICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICAgICBlbHNlIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIHNldFN0YXJzKGlkeCAtIDEpO1xuICAgICAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgIGVsc2Uge1xuICAgICAgICAgICAgICAgICAgICBzZXRTdGFycyhpZHgpO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0sIG9uSG92ZXI6IChob3ZlcmVkKSA9PiB7XG4gICAgICAgICAgICAgICAgaWYgKGhvdmVyZWQpXG4gICAgICAgICAgICAgICAgICAgIHNldEhvdmVyZWRTdGFyKGlkeCk7XG4gICAgICAgICAgICAgICAgZWxzZSB7XG4gICAgICAgICAgICAgICAgICAgIHNldEhvdmVyZWRTdGFyKDApO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH0sIG1vZGU6IG1vZGUsIHZlcnNpb246IHZlcnNpb24gfSwgaWR4KSkpIH0pKTtcbn07XG4vLyMgc291cmNlTWFwcGluZ1VSTD1TdGFyUmF0aW5nLmpzLm1hcCJdfQ== */",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)."}});exports.StarRating=I=>{let{emptyColor:e,filledColor:t,onChange:c,value:b,maxValue:G,starSize:s,mode:d,version:n="v1"}=I;const[a,Z]=C.useState(null!=b?b:0),[i,o]=C.useState(!1),[u,p]=C.useState(0),r=C.useMemo((()=>Array(null!=G?G:5).fill(null).map(((I,g)=>g+1))),[G]);return C.useEffect((()=>{i&&c(a)}),[a]),C.useEffect((()=>{o(!0)}),[]),g.jsx(l,{children:r.map((I=>g.jsx(A.Star,{asHovered:!!u&&I<=u,size:null!=s?s:24,filled:u?void 0:I<=a,emptyColor:e,filledColor:t,onClick:g=>{Z("de-select"===g?I<a?I:I-1:I)},onHover:g=>{p(g?I:0)},mode:d,version:n},I)))})};

package/dist/cjs/components/star-rating/index.d.ts

@@ -1 +1 @@
-export * from './StarRating';
+export * from './StarRating';

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

@@ -1,14 +1,14 @@
-import React from 'react';
-export interface ShopifyScopeWrapper {
-    permissions: string[];
-    permissionRequestTitle: string;
-    permissionRequestSubTitle: string;
-    cacheInLocal?: boolean;
-    permissionEvaluationFunction: (permissions: string[]) => Promise<{
-        hasPermission: boolean;
-        urlForPermissions?: string;
-    }>;
-    children: React.ReactNode;
-    onPermissionClickCallback?: () => void;
-}
-export declare const ShopifyScopeWrapper: React.FC<ShopifyScopeWrapper>;
+import React from 'react';
+export interface ShopifyScopeWrapper {
+    permissions: string[];
+    permissionRequestTitle: string;
+    permissionRequestSubTitle: string;
+    cacheInLocal?: boolean;
+    permissionEvaluationFunction: (permissions: string[]) => Promise<{
+        hasPermission: boolean;
+        urlForPermissions?: string;
+    }>;
+    children: React.ReactNode;
+    onPermissionClickCallback?: () => void;
+}
+export declare const ShopifyScopeWrapper: React.FC<ShopifyScopeWrapper>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("../../node_modules/react/jsx-runtime.js"),s=require("react"),i=require("./StateComponent.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(s);exports.ShopifyScopeWrapper=n=>{const[a,r]=o.default.useState(!1),[u,l]=o.default.useState(!1),[c,p]=o.default.useState(""),m=s.useCallback((()=>n.permissions.join("-")+"-hasPermission"),[n.permissions]),d=s.useCallback((()=>{const e=m(),t=localStorage.getItem(e);return!!t&&"true"===t}),[m]),h=s.useCallback((e=>{const t=m();localStorage.setItem(t,e.toString())}),[m]),f=s.useCallback((()=>{c?window.open(c,"_blank"):n.onPermissionClickCallback&&n.onPermissionClickCallback()}),[n,c]);return s.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(n.cacheInLocal&&d())return void r(!0);const{hasPermission:e,urlForPermissions:t}=yield n.permissionEvaluationFunction(n.permissions);r(e),p(t),l(!0),n.cacheInLocal&&e&&h(e)})).then().catch()}),[d,n,h]),u?a?t.jsxRuntimeExports.jsx(t.jsxRuntimeExports.Fragment,{children:n.children}):t.jsxRuntimeExports.jsx(i.StateComponent,{states:i.StateInterface.WARNING,heading:n.permissionRequestTitle,subline:n.permissionRequestSubTitle,width:400,isButtonEnabled:!0,buttonText:"Grant permissions",onButtonClick:f}):t.jsxRuntimeExports.jsx(i.StateComponent,{states:i.StateInterface.LOADING,heading:"Checking permissions",subline:"Checking if we have the right shopify scopes approved to access this page.",width:400,isButtonEnabled:!1})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),s=require("react"),i=require("./StateComponent.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(s);exports.ShopifyScopeWrapper=n=>{const[o,r]=a.default.useState(!1),[c,l]=a.default.useState(!1),[u,p]=a.default.useState(""),d=s.useCallback((()=>n.permissions.join("-")+"-hasPermission"),[n.permissions]),h=s.useCallback((()=>{const e=d(),t=localStorage.getItem(e);return!!t&&"true"===t}),[d]),m=s.useCallback((e=>{const t=d();localStorage.setItem(t,e.toString())}),[d]),f=s.useCallback((()=>{u?window.open(u,"_blank"):n.onPermissionClickCallback&&n.onPermissionClickCallback()}),[n,u]);return s.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(n.cacheInLocal&&h())return void r(!0);const{hasPermission:e,urlForPermissions:t}=yield n.permissionEvaluationFunction(n.permissions);r(e),p(t),l(!0),n.cacheInLocal&&e&&m(e)})).then().catch()}),[h,n,m]),c?o?t.jsx(t.Fragment,{children:n.children}):t.jsx(i.StateComponent,{states:i.StateInterface.WARNING,heading:n.permissionRequestTitle,subline:n.permissionRequestSubTitle,width:400,isButtonEnabled:!0,buttonText:"Grant permissions",onButtonClick:f}):t.jsx(i.StateComponent,{states:i.StateInterface.LOADING,heading:"Checking permissions",subline:"Checking if we have the right shopify scopes approved to access this page.",width:400,isButtonEnabled:!1})};

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

@@ -1,42 +1,42 @@
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
-import React from 'react';
-import { Type } from "../button/model";
-export declare enum StateInterface {
-    SUCCESS = "success",
-    ERROR = "error",
-    WARNING = "warning",
-    LOADING = "loading",
-    RETRY = "retry",
-    INFO = "info"
-}
-export declare enum ButtonActions {
-    CANCEL = "cancel",
-    OTHER = "other"
-}
-export declare enum ButtonTypes {
-    SINGLE = "SINGLE",
-    DOUBLE = "DOUBLE"
-}
-export type StateComponentProps = {
-    headerImage?: string;
-    states: StateInterface;
-    heading: string;
-    subline: string;
-    errorText?: string;
-    icon?: JSX.Element;
-    isButtonEnabled: boolean;
-    type?: ButtonTypes;
-    buttonText?: string;
-    buttonType?: Type;
-    buttonIcon?: ReactJSXElement;
-    onButtonClick?: (buttonClicked: ButtonActions) => void;
-    leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    width: number;
-    size?: 'DEFAULT' | 'SMALL';
-    iconHeight?: number;
-    iconWidth?: number;
-    closeButtonType?: Type;
-    secondaryButtonText?: string;
-    'data-test'?: string;
-};
-export declare const StateComponent: React.FC<React.PropsWithChildren<StateComponentProps>>;
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import React from 'react';
+import { Type } from '@src/components/button/model';
+export declare enum StateInterface {
+    SUCCESS = "success",
+    ERROR = "error",
+    WARNING = "warning",
+    LOADING = "loading",
+    RETRY = "retry",
+    INFO = "info"
+}
+export declare enum ButtonActions {
+    CANCEL = "cancel",
+    OTHER = "other"
+}
+export declare enum ButtonTypes {
+    SINGLE = "SINGLE",
+    DOUBLE = "DOUBLE"
+}
+export type StateComponentProps = {
+    headerImage?: string;
+    states: StateInterface;
+    heading: string;
+    subline: string;
+    errorText?: string;
+    icon?: JSX.Element;
+    isButtonEnabled: boolean;
+    type?: ButtonTypes;
+    buttonText?: string;
+    buttonType?: Type;
+    buttonIcon?: ReactJSXElement;
+    onButtonClick?: (buttonClicked: ButtonActions) => void;
+    leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    width: number;
+    size?: 'DEFAULT' | 'SMALL';
+    iconHeight?: number;
+    iconWidth?: number;
+    closeButtonType?: Type;
+    secondaryButtonText?: string;
+    'data-test'?: string;
+};
+export declare const StateComponent: React.FC<React.PropsWithChildren<StateComponentProps>>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,s,n=require("../../node_modules/react/jsx-runtime.js"),r=require("../../constants/Theme.js"),o=require("../../assets/icons/errorIcon.svg.js"),i=require("../../assets/icons/retryIcon.svg.js"),a=require("../../assets/icons/state_icon.svg.js"),x=require("../../assets/icons/successIcon.svg.js"),c=require("../../assets/icons/warningIcon.svg.js"),u=require("../button/Button.js"),p=require("../spinner/Spinner.js"),j=require("../TypographyStyle.js"),d=require("./StateComponent.styled.js");exports.StateInterface=void 0,(t=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",t.ERROR="error",t.WARNING="warning",t.LOADING="loading",t.RETRY="retry",t.INFO="info",exports.ButtonActions=void 0,(e=exports.ButtonActions||(exports.ButtonActions={})).CANCEL="cancel",e.OTHER="other",exports.ButtonTypes=void 0,(s=exports.ButtonTypes||(exports.ButtonTypes={})).SINGLE="SINGLE",s.DOUBLE="DOUBLE";exports.StateComponent=t=>{var e;const s=()=>l==exports.StateInterface.SUCCESS?n.jsxRuntimeExports.jsx(x.default,{}):l==exports.StateInterface.WARNING?n.jsxRuntimeExports.jsx(c.default,{}):l==exports.StateInterface.ERROR?n.jsxRuntimeExports.jsx(o.default,{}):l===exports.StateInterface.LOADING?n.jsxRuntimeExports.jsx(p.Spinner,{size:"large"}):l===exports.StateInterface.RETRY?n.jsxRuntimeExports.jsx(i.default,{}):l==exports.StateInterface.INFO?n.jsxRuntimeExports.jsx(a.default,{}):void 0,{states:l,heading:R,subline:m,errorText:E,icon:S=s(),isButtonEnabled:g,type:h,buttonText:y,buttonType:I,onButtonClick:O,leadingIcon:B,width:T,headerImage:L,iconWidth:C,iconHeight:b,closeButtonType:f,secondaryButtonText:A,"data-test":v}=t;return n.jsxRuntimeExports.jsxs(d.StateComponentContainer,Object.assign({width:T,"data-test":v},{children:[n.jsxRuntimeExports.jsx(d.StateIcon,Object.assign({iconWidth:C,iconHeight:b},{children:L?n.jsxRuntimeExports.jsx("img",{src:L,width:"100%",height:"auto",alt:""}):S})),n.jsxRuntimeExports.jsxs(d.StateHeading,Object.assign({size:t.size},{children:["SMALL"===t.size&&n.jsxRuntimeExports.jsx(j.TitleRegular,{children:R}),"SMALL"!==t.size&&n.jsxRuntimeExports.jsx(j.TitleMedium,{children:R})]})),n.jsxRuntimeExports.jsxs(d.StateSubline,{children:["SMALL"!==t.size&&n.jsxRuntimeExports.jsx(j.BodyPrimary,Object.assign({color:r.COLORS.content.secondary},{children:m})),"SMALL"===t.size&&n.jsxRuntimeExports.jsx(j.BodySecondary,Object.assign({color:r.COLORS.content.secondary},{children:m})),E&&n.jsxRuntimeExports.jsx(j.BodySecondary,Object.assign({color:r.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"}},{children:E}))]}),null!==(e=t.children)&&void 0!==e?e:n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{}),g&&n.jsxRuntimeExports.jsx(n.jsxRuntimeExports.Fragment,{children:n.jsxRuntimeExports.jsxs(d.ButtonContainer,Object.assign({size:t.size},{children:[h==exports.ButtonTypes.DOUBLE&&n.jsxRuntimeExports.jsx(u.Button,{"data-test":`${v}-cancel`,onClick:()=>O&&O(exports.ButtonActions.CANCEL),buttonType:f||"secondary",buttonText:A||"Cancel",matchParentWidth:!0}),n.jsxRuntimeExports.jsx(u.Button,{"data-test":`${v}-primary`,onClick:()=>O&&O(exports.ButtonActions.OTHER),buttonType:null!=I?I:"primary",LeadingIcon:B,buttonText:null!=y?y:"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/retryIcon.svg.js"),a=require("../../assets/icons/state_icon.svg.js"),c=require("../../assets/icons/successIcon.svg.js"),u=require("../../assets/icons/warningIcon.svg.js"),d=require("../button/Button.js"),l=require("../spinner/Spinner.js"),x=require("../TypographyStyle.js"),p=require("./StateComponent.styled.js");exports.StateInterface=void 0,(e=exports.StateInterface||(exports.StateInterface={})).SUCCESS="success",e.ERROR="error",e.WARNING="warning",e.LOADING="loading",e.RETRY="retry",e.INFO="info",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=()=>S==exports.StateInterface.SUCCESS?s.jsx(c.default,{}):S==exports.StateInterface.WARNING?s.jsx(u.default,{}):S==exports.StateInterface.ERROR?s.jsx(o.default,{}):S===exports.StateInterface.LOADING?s.jsx(l.Spinner,{size:"large"}):S===exports.StateInterface.RETRY?s.jsx(i.default,{}):S==exports.StateInterface.INFO?s.jsx(a.default,{}):void 0,{states:S,heading:j,subline:h,errorText:y,icon:I=n(),isButtonEnabled:g,type:B,buttonText:T,buttonType:L,onButtonClick:C,leadingIcon:R,width:O,headerImage:f,iconWidth:m,iconHeight:E,closeButtonType:A,secondaryButtonText:v,"data-test":N}=e;return s.jsxs(p.StateComponentContainer,{width:O,"data-test":N,children:[s.jsx(p.StateIcon,{iconWidth:m,iconHeight:E,children:f?s.jsx("img",{src:f,width:"100%",height:"auto",alt:""}):I}),s.jsxs(p.StateHeading,{size:e.size,children:["SMALL"===e.size&&s.jsx(x.TitleRegular,{children:j}),"SMALL"!==e.size&&s.jsx(x.TitleMedium,{children:j})]}),s.jsxs(p.StateSubline,{children:["SMALL"!==e.size&&s.jsx(x.BodyPrimary,{color:r.COLORS.content.secondary,children:h}),"SMALL"===e.size&&s.jsx(x.BodySecondary,{color:r.COLORS.content.secondary,children:h}),y&&s.jsx(x.BodySecondary,{color:r.COLORS.content.negative,style:{marginTop:8,whiteSpace:"pre-line"},children:y})]}),null!==(t=e.children)&&void 0!==t?t:s.jsx(s.Fragment,{}),g&&s.jsx(s.Fragment,{children:s.jsxs(p.ButtonContainer,{size:e.size,children:[B==exports.ButtonTypes.DOUBLE&&s.jsx(d.Button,{"data-test":`${N}-cancel`,onClick:()=>C&&C(exports.ButtonActions.CANCEL),buttonType:A||"secondary",buttonText:v||"Cancel",matchParentWidth:!0}),s.jsx(d.Button,{"data-test":`${N}-primary`,onClick:()=>C&&C(exports.ButtonActions.OTHER),buttonType:null!=L?L:"primary",LeadingIcon:R,buttonText:null!=T?T:"Retry",matchParentWidth:!0})]})})]})};

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

@@ -1,14 +1,14 @@
-export declare const StateComponentContainer: import("styled-components").StyledComponent<"div", any, {
-    width: number;
-}, 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>;
-export declare const ButtonContainer: import("styled-components").StyledComponent<"div", any, {
-    size?: "SMALL" | "DEFAULT" | undefined;
-}, never>;
-export declare const StateSubline: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StateComponentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    width: number;
+}>> & string;
+export declare const StateIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    iconWidth?: number;
+    iconHeight?: number;
+}>> & string;
+export declare const StateHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size?: "SMALL" | "DEFAULT";
+}>> & string;
+export declare const ButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    size?: "SMALL" | "DEFAULT";
+}>> & string;
+export declare const StateSubline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -1,2 +1,2 @@
-export * from './StateComponent';
-export * from './ShopifyScopeWrapper';
+export * from './StateComponent';
+export * from './ShopifyScopeWrapper';

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

@@ -1,10 +1,10 @@
-import React from 'react';
-export interface DeleteConfirmationModalProps {
-    header: string;
-    subHeader: string;
-    confirmationText: string;
-    onDeleteConfirmed: () => void;
-    onCancelClicked: () => void;
-    'data-test'?: string;
-}
-export declare const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps>;
+import React from 'react';
+export interface DeleteConfirmationModalProps {
+    header: string;
+    subHeader: string;
+    confirmationText: string;
+    onDeleteConfirmed: () => void;
+    onCancelClicked: () => void;
+    'data-test'?: string;
+}
+export declare const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("../modals/styledModal.js");exports.DeleteConfirmationModal=o=>e.jsxRuntimeExports.jsx(t.StyledModal,{"data-test":o["data-test"],centralContainerStyles:{width:400},onClose:()=>o.onCancelClicked(),open:!0,headingTitle:o.header,headingSubtitle:o.subHeader,primaryButton:{buttonText:o.confirmationText,buttonType:"destructive",size:"small",onClick:()=>o.onDeleteConfirmed()},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:()=>o.onCancelClicked()}});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../modals/styledModal.js");exports.DeleteConfirmationModal=n=>e.jsx(t.StyledModal,{"data-test":n["data-test"],centralContainerStyles:{width:400},onClose:()=>n.onCancelClicked(),open:!0,headingTitle:n.header,headingSubtitle:n.subHeader,primaryButton:{buttonText:n.confirmationText,buttonType:"destructive",size:"small",onClick:()=>n.onDeleteConfirmed()},secondaryButton:{buttonText:"Cancel",buttonType:"tertiaryGray",size:"small",onClick:()=>n.onCancelClicked()}});

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

@@ -1,26 +1,26 @@
-import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
-import React from 'react';
-import { Type } from '../button/model';
-import { ButtonActions, ButtonTypes, StateInterface } from '../states/StateComponent';
-export type StateModalComponentProps = {
-    states: StateInterface;
-    heading: string;
-    subline: string;
-    icon?: JSX.Element;
-    isButtonEnabled: boolean;
-    type?: ButtonTypes;
-    buttonText?: string;
-    buttonIcon?: ReactJSXElement;
-    onButtonClick?: (buttonClicked: ButtonActions) => void;
-    leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    width?: number;
-    onClose?: () => void;
-    zIndex?: number;
-    headerImage?: string;
-    iconWidth?: number;
-    iconHeight?: number;
-    closeButtonType?: Type;
-    'data-test'?: string;
-    secondaryButtonText?: string;
-};
-export declare const StateModalComponent: React.FC<React.PropsWithChildren<StateModalComponentProps>>;
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import React from 'react';
+import { Type } from '../button/model';
+import { ButtonActions, ButtonTypes, StateInterface } from '../states/StateComponent';
+export type StateModalComponentProps = {
+    states: StateInterface;
+    heading: string;
+    subline: string;
+    icon?: JSX.Element;
+    isButtonEnabled: boolean;
+    type?: ButtonTypes;
+    buttonText?: string;
+    buttonIcon?: ReactJSXElement;
+    onButtonClick?: (buttonClicked: ButtonActions) => void;
+    leadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    width?: number;
+    onClose?: () => void;
+    zIndex?: number;
+    headerImage?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    closeButtonType?: Type;
+    'data-test'?: string;
+    secondaryButtonText?: 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("../../node_modules/react/jsx-runtime.js"),t=require("react"),n=require("../../constants/zindex.js"),s=require("../../assets/icons/errorIcon.svg.js"),o=require("../../assets/icons/successIcon.svg.js"),i=require("../../assets/icons/warningIcon.svg.js"),r=require("../modals/styledModal.js"),a=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=u=>{const d=()=>l==c.StateInterface.SUCCESS?e.jsxRuntimeExports.jsx(o.default,{}):l==c.StateInterface.WARNING?e.jsxRuntimeExports.jsx(i.default,{}):l==c.StateInterface.ERROR?e.jsxRuntimeExports.jsx(s.default,{}):l===c.StateInterface.LOADING?e.jsxRuntimeExports.jsx(a.Spinner,{size:"large"}):void 0,{states:l,heading:x,subline:j,icon:p=d(),isButtonEnabled:I,type:S,buttonText:g,onButtonClick:m,leadingIcon:h,width:C,zIndex:f,headerImage:y,iconHeight:E,iconWidth:O,closeButtonType:R,secondaryButtonText:b}=u,[q,B]=t.useState(!0);return e.jsxRuntimeExports.jsx(r.StyledModal,Object.assign({"data-test":u["data-test"],open:q,onClose:function(){u.onClose&&u.onClose(),B(!1)},closeOnOutsideClick:!(l===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:C},hideCrossButton:l===c.StateInterface.LOADING,zIndex:f||n.ComponentZindex.STATE_MODAL},{children:e.jsxRuntimeExports.jsx(c.StateComponent,Object.assign({states:l,heading:x,subline:j,isButtonEnabled:I,leadingIcon:h,type:S,buttonText:g,onButtonClick:m,icon:p,width:C||400,headerImage:y,iconHeight:E,iconWidth:O,closeButtonType:R,secondaryButtonText:b},{children:u.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"),o=require("../../assets/icons/successIcon.svg.js"),i=require("../../assets/icons/warningIcon.svg.js"),a=require("../modals/styledModal.js"),r=require("../spinner/Spinner.js"),c=require("../states/StateComponent.js");exports.StateModalComponent=d=>{const l=()=>u==c.StateInterface.SUCCESS?e.jsx(o.default,{}):u==c.StateInterface.WARNING?e.jsx(i.default,{}):u==c.StateInterface.ERROR?e.jsx(s.default,{}):u===c.StateInterface.LOADING?e.jsx(r.Spinner,{size:"large"}):void 0,{states:u,heading:I,subline:x,icon:S=l(),isButtonEnabled:j,type:p,buttonText:h,onButtonClick:C,leadingIcon:g,width:f,zIndex:y,headerImage:m,iconHeight:q,iconWidth:B,closeButtonType:O,secondaryButtonText:T}=d,[b,v]=t.useState(!0);return e.jsx(a.StyledModal,{"data-test":d["data-test"],open:b,onClose:function(){d.onClose&&d.onClose(),v(!1)},closeOnOutsideClick:!(u===c.StateInterface.LOADING),centralContainerStyles:{display:"flex",alignItems:"center",justifyContent:"center",width:f},hideCrossButton:u===c.StateInterface.LOADING,zIndex:y||n.ComponentZindex.STATE_MODAL,children:e.jsx(c.StateComponent,{states:u,heading:I,subline:x,isButtonEnabled:j,leadingIcon:g,type:p,buttonText:h,onButtonClick:C,icon:S,width:f||400,headerImage:m,iconHeight:q,iconWidth:B,closeButtonType:O,secondaryButtonText:T,children:d.children})})};

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

@@ -1,2 +1,2 @@
-export * from './StateModalComponent';
-export * from './DeleteConfirmationModal';
+export * from './StateModalComponent';
+export * from './DeleteConfirmationModal';

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

@@ -1,24 +1,24 @@
-export type StepperStates = 'default' | 'completed' | 'error' | 'active' | 'inactive';
-export interface StepperProps {
-    steps: EachStep[];
-    activeStep: EachStep;
-    onClickingEachStep: (step: EachStep) => void;
-    hideHoverState?: boolean;
-}
-export interface EachStep {
-    stepKey: string;
-    stepName: string;
-    isCompleted: boolean;
-    isError: boolean;
-    isInActive: boolean;
-}
-export interface SingleStepperProps {
-    index: number;
-    isLastElement: boolean;
-    eachStep: EachStep;
-    isActive: boolean;
-    onClickingStep: (step: EachStep) => void;
-    stepsCount: number;
-    hideHoverState?: boolean;
-}
-export declare const Stepper: (stepperDetails: StepperProps) => import("react/jsx-runtime").JSX.Element;
+export type StepperStates = 'default' | 'completed' | 'error' | 'active' | 'inactive';
+export interface StepperProps {
+    steps: EachStep[];
+    activeStep: EachStep;
+    onClickingEachStep: (step: EachStep) => void;
+    hideHoverState?: boolean;
+}
+export interface EachStep {
+    stepKey: string;
+    stepName: string;
+    isCompleted: boolean;
+    isError: boolean;
+    isInActive: boolean;
+}
+export interface SingleStepperProps {
+    index: number;
+    isLastElement: boolean;
+    eachStep: EachStep;
+    isActive: boolean;
+    onClickingStep: (step: EachStep) => void;
+    stepsCount: number;
+    hideHoverState?: boolean;
+}
+export declare const Stepper: (stepperDetails: StepperProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,8 +1,8 @@
-import { StepperStates } from './Stepper';
-export declare const StepperContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-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>;
+import { StepperStates } from './Stepper';
+export declare const StepperContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SingleStepperChildContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    selectedState: StepperStates;
+    stepsCount: number;
+    isInActive?: boolean;
+}>> & string;
+export declare const WorkingStepperContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/components/stepper/StepperService.d.ts

@@ -1,4 +1,4 @@
-import { EachStep } from './Stepper';
-export default class StepperService {
-    updateSteps: (steps: EachStep[], stepToUpdate: EachStep, propertiesToUpdate: Partial<EachStep>) => EachStep[];
-}
+import { EachStep } from './Stepper';
+export default class StepperService {
+    updateSteps: (steps: EachStep[], stepToUpdate: EachStep, propertiesToUpdate: Partial<EachStep>) => EachStep[];
+}