@bikdotai/bik-component-library 0.0.736-beta.7 → 0.0.736-beta.8

package/dist/cjs/components/ai-modals/AiCreditsLow.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/alert_triangle.svg.js"),r=require("../button/Button.js"),n=require("../modals/Modal.js"),o=require("../TypographyStyle.js");exports.AiCreditsLow=({open:s,onModalClose:l,onLeftBtnClick:d,onRightBtnClick:c})=>e.jsx(n.Modal,{open:s,centralContainerStyles:{width:"498px",borderRadius:"12px"},onClose:l,closeOnOutsideClick:!0,zIndex:40,children:e.jsxs("div",{style:{padding:"24px",display:"flex",flexDirection:"column",width:"100%"},children:[e.jsx("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center"},children:e.jsx("div",{style:{backgroundColor:t.COLORS.background.negative.light,width:"64px",height:"64px",padding:"12px",borderRadius:"40px"},children:e.jsx(i.default,{width:40,height:40,color:t.COLORS.content.negative})})}),e.jsx("div",{style:{height:"32px"}}),e.jsx(o.TitleLarge,{children:"Your AI Credits are running low"}),e.jsx("div",{style:{height:"24px"}}),e.jsx(o.BodyPrimary,{color:t.COLORS.content.secondary,children:"Recharge your credits now to ensure uninterrupted service."}),e.jsx("div",{style:{height:"12px"}}),e.jsx("div",{style:{display:"flex",flexDirection:"row",justifyContent:"center"},children:e.jsx(o.BodyPrimary,{color:t.COLORS.content.secondary,children:"Don’t let the growth stop. Add AI Credits"})}),e.jsx("div",{style:{height:"32px"}}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"},children:[e.jsx(r.Button,{buttonText:"Close",buttonType:"text",size:"small",onClick:d}),e.jsx(r.Button,{buttonText:"Contact Support",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:c})]})]})});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/alert_triangle.svg.js"),i=require("../button/Button.js"),n=require("../modals/Modal.js"),r=require("../TypographyStyle.js");exports.AiCreditsLow=o=>{let{open:l,onModalClose:d,onLeftBtnClick:c,onRightBtnClick:a}=o;return e.jsx(n.Modal,Object.assign({open:l,centralContainerStyles:{width:"498px",borderRadius:"12px"},onClose:d,closeOnOutsideClick:!0,zIndex:40},{children:e.jsxs("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column",width:"100%"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e.jsx("div",Object.assign({style:{backgroundColor:t.COLORS.background.negative.light,width:"64px",height:"64px",padding:"12px",borderRadius:"40px"}},{children:e.jsx(s.default,{width:40,height:40,color:t.COLORS.content.negative})}))})),e.jsx("div",{style:{height:"32px"}}),e.jsx(r.TitleLarge,{children:"Your AI Credits are running low"}),e.jsx("div",{style:{height:"24px"}}),e.jsx(r.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:"Recharge your credits now to ensure uninterrupted service."})),e.jsx("div",{style:{height:"12px"}}),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"center"}},{children:e.jsx(r.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:"Don’t let the growth stop. Add AI Credits"}))})),e.jsx("div",{style:{height:"32px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e.jsx(i.Button,{buttonText:"Close",buttonType:"text",size:"small",onClick:c}),e.jsx(i.Button,{buttonText:"Contact Support",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:a})]}))]}))}))};

package/dist/cjs/components/ai-modals/AiSyncProgress.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const AiSyncProgress: React.FC<{
+    open: boolean;
+    onModalClose: () => void;
+    completedPercent: number;
+    onRightBtnClick: () => void;
+    onLeftBtnClick: () => void;
+}>;

package/dist/cjs/components/ai-modals/AiSyncProgress.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../../assets/icons/sync.svg.js"),s=require("../button/Button.js"),r=require("../modals/Modal.js"),o=require("../progress-bar/ProgressBarComponent.js"),n=require("../TypographyStyle.js");exports.AiSyncProgress=({open:l,onModalClose:a,completedPercent:c,onLeftBtnClick:d,onRightBtnClick:x})=>e.jsx(r.Modal,{open:l,centralContainerStyles:{width:"498px",height:"324px",borderRadius:"12px"},onClose:a,closeOnOutsideClick:!0,zIndex:40,children:e.jsxs("div",{style:{padding:"24px",display:"flex",flexDirection:"column"},children:[e.jsx("div",{style:{display:"flex",justifyContent:"center"},children:e.jsx(n.TitleLarge,{children:"Wait for Sync to complete"})}),e.jsx("div",{style:{height:"24px"}}),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:"12px"},children:[e.jsx(i.default,{width:24,height:24}),e.jsx(n.BodyPrimary,{color:"#616161",children:"Syncing Shopify Store Data..."})]}),e.jsx(o.ProgressBarComponent,{completed:c,isAnimated:!1,height:16,color:t.COLORS.background.positive.vibrant})]}),e.jsx("div",{style:{height:"24px"}}),e.jsx(n.BodyPrimary,{color:t.COLORS.content.secondary,children:"You can start replying with AI after sync is complete. In the meanwhile, learn how to leverage AI for maximum efficiency"}),e.jsx("div",{style:{height:"32px"}}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"},children:[e.jsx(s.Button,{buttonText:"Close",buttonType:"text",size:"small",onClick:d}),e.jsx(s.Button,{buttonText:"Explore Bik.ai",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:x})]})]})});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),s=require("../../assets/icons/sync.svg.js"),i=require("../button/Button.js"),n=require("../modals/Modal.js"),r=require("../progress-bar/ProgressBarComponent.js"),o=require("../TypographyStyle.js");exports.AiSyncProgress=l=>{let{open:a,onModalClose:c,completedPercent:d,onLeftBtnClick:x,onRightBtnClick:p}=l;return e.jsx(n.Modal,Object.assign({open:a,centralContainerStyles:{width:"498px",height:"324px",borderRadius:"12px"},onClose:c,closeOnOutsideClick:!0,zIndex:40},{children:e.jsxs("div",Object.assign({style:{padding:"24px",display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"center"}},{children:e.jsx(o.TitleLarge,{children:"Wait for Sync to complete"})})),e.jsx("div",{style:{height:"24px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"12px"}},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:"12px"}},{children:[e.jsx(s.default,{width:24,height:24}),e.jsx(o.BodyPrimary,Object.assign({color:"#616161"},{children:"Syncing Shopify Store Data..."}))]})),e.jsx(r.ProgressBarComponent,{completed:d,isAnimated:!1,height:16,color:t.COLORS.background.positive.vibrant})]})),e.jsx("div",{style:{height:"24px"}}),e.jsx(o.BodyPrimary,Object.assign({color:t.COLORS.content.secondary},{children:"You can start replying with AI after sync is complete. In the meanwhile, learn how to leverage AI for maximum efficiency"})),e.jsx("div",{style:{height:"32px"}}),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end",alignItems:"center",gap:"12px"}},{children:[e.jsx(i.Button,{buttonText:"Close",buttonType:"text",size:"small",onClick:x}),e.jsx(i.Button,{buttonText:"Explore Bik.ai",size:"small",style:{backgroundColor:t.COLORS.background.brand},onClick:p})]}))]}))}))};

package/dist/cjs/components/ai-modals/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ActivateBikAI';
+export * from './AiSyncProgress';
+export * from './AiCreditsExhausted';
+export * from './AiCreditsLow';

package/dist/cjs/components/alerts/Alert.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ALERT_TYPES, CONTENT_POSITION } from "./AlertHelper";
+export type AlertProps = {
+    type: ALERT_TYPES;
+    text: string | React.ReactNode;
+    icon?: React.FC<{
+        width: number;
+        height: number;
+        color: string;
+    }>;
+    textColor?: string;
+    contentPosition?: CONTENT_POSITION;
+    containerStyle?: React.CSSProperties;
+    redirectTo?: string;
+    redirectToText?: string;
+    iconStyle?: React.CSSProperties;
+    handleRedirectButtonClick?: () => void;
+    showCrossButton?: boolean;
+    handleCrossIconClick?: () => void;
+};
+export declare const Alert: React.FC<AlertProps>;

package/dist/cjs/components/alerts/Alert.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/cross.svg.js"),o=require("./Alert.styled.js"),r=require("./AlertHelper.js"),i=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.Alert=l=>{var s,c;return e.jsxs(o.AlertStyle,{type:l.type,contentPosition:l.contentPosition,style:l.containerStyle,children:[e.jsxs(o.AlertContentWrapper,{contentPosition:l.contentPosition,children:[l.icon&&e.jsx("div",{style:Object.assign(Object.assign({},null==l?void 0:l.iconStyle),{display:(null===(s=null==l?void 0:l.iconStyle)||void 0===s?void 0:s.display)||"flex",alignSelf:(null===(c=null==l?void 0:l.iconStyle)||void 0===c?void 0:c.alignSelf)||"flex-start"}),children:e.jsx(l.icon,{color:r.COLOR_CONFIG_MAP[l.type].textColor,height:16,width:16})}),e.jsx(i.BodyCaption,{style:{color:l.textColor||r.COLOR_CONFIG_MAP[l.type].textColor,marginLeft:8,marginRight:4},children:l.text}),l.redirectToText&&l.redirectTo&&e.jsx(i.BodyCaption,{style:{color:n.COLORS.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{"INTERNAL"===l.redirectTo&&l.handleRedirectButtonClick?l.handleRedirectButtonClick():l.redirectTo&&window.open(l.redirectTo,"_blank")},children:l.redirectToText})]}),l.showCrossButton&&e.jsx(o.CloseIconWrapper,{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.secondary,onClick:()=>{(null==l?void 0:l.handleCrossIconClick)&&l.handleCrossIconClick()}})})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/cross.svg.js"),o=require("./Alert.styled.js"),i=require("./AlertHelper.js"),r=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");exports.Alert=l=>{var s,c;return e.jsxs(o.AlertStyle,Object.assign({type:l.type,contentPosition:l.contentPosition,style:l.containerStyle},{children:[e.jsxs(o.AlertContentWrapper,Object.assign({contentPosition:l.contentPosition},{children:[l.icon&&e.jsx("div",Object.assign({style:Object.assign(Object.assign({},null==l?void 0:l.iconStyle),{display:(null===(s=null==l?void 0:l.iconStyle)||void 0===s?void 0:s.display)||"flex",alignSelf:(null===(c=null==l?void 0:l.iconStyle)||void 0===c?void 0:c.alignSelf)||"flex-start"})},{children:e.jsx(l.icon,{color:i.COLOR_CONFIG_MAP[l.type].textColor,height:16,width:16})})),e.jsx(r.BodyCaption,Object.assign({style:{color:l.textColor||i.COLOR_CONFIG_MAP[l.type].textColor,marginLeft:8,marginRight:4}},{children:l.text})),l.redirectToText&&l.redirectTo&&e.jsx(r.BodyCaption,Object.assign({style:{color:n.COLORS.text.brand,cursor:"pointer",textDecoration:"underline"},onClick:()=>{"INTERNAL"===l.redirectTo&&l.handleRedirectButtonClick?l.handleRedirectButtonClick():l.redirectTo&&window.open(l.redirectTo,"_blank")}},{children:l.redirectToText}))]})),l.showCrossButton&&e.jsx(o.CloseIconWrapper,{children:e.jsx(t.default,{width:20,height:20,color:n.COLORS.content.secondary,onClick:()=>{(null==l?void 0:l.handleCrossIconClick)&&l.handleCrossIconClick()}})})]}))};

package/dist/cjs/components/alerts/Alert.styled.d.ts

@@ -0,0 +1,9 @@
+import { ALERT_TYPES, CONTENT_POSITION } from "./AlertHelper";
+export declare const AlertStyle: import("styled-components").StyledComponent<"div", any, {
+    type: ALERT_TYPES;
+    contentPosition?: CONTENT_POSITION | undefined;
+}, never>;
+export declare const AlertContentWrapper: import("styled-components").StyledComponent<"div", any, {
+    contentPosition?: CONTENT_POSITION | undefined;
+}, never>;
+export declare const CloseIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/alerts/AlertHelper.d.ts

@@ -0,0 +1,40 @@
+export declare enum ALERT_TYPES {
+    NEGATIVE = "Negative",
+    WARNING = "Warning",
+    POSITIVE = "Positive",
+    NEUTRAL = "Neutral",
+    BRAND = "Brand"
+}
+export declare enum CONTENT_POSITION {
+    START = "start",
+    CENTER = "center",
+    END = "end",
+    SPACE_BETWEEN = "space-between"
+}
+export declare const COLOR_CONFIG_MAP: {
+    Negative: {
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+    };
+    Warning: {
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+    };
+    Positive: {
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+    };
+    Neutral: {
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+    };
+    Brand: {
+        backgroundColor: string;
+        textColor: string;
+        borderColor: string;
+    };
+};

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

@@ -0,0 +1,2 @@
+export * from './Alert';
+export * from './AlertHelper';

package/dist/cjs/components/analytics-card/AnalyticsCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ModeType = 'light' | 'dark';
+export declare const AnalyticsCard: React.FC<{
+    cardInfo: {
+        [category: string]: string;
+    };
+    width?: string;
+    mode?: ModeType;
+    isLoading?: boolean;
+}>;

package/dist/cjs/components/analytics-card/AnalyticsCard.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../constants/Theme.js"),i=require("../shimmer/ShimmerComponent/BikShimmer.js"),s=require("../TypographyStyle.js"),r=require("./AnalyticsCard.styled.js");exports.AnalyticsCard=a=>{const{cardInfo:n,width:h,mode:c}=a;return e.jsx(r.AnalyticsContainer,{width:h,mode:c,count:Object.keys(n).length,children:a.isLoading?e.jsxs("div",{className:"shimmers",children:[e.jsx(i.BikShimmer,{isBrand:"light"!=a.mode,boxes:[{height:"18px",width:"120px"},{height:"18px",width:"120px"}]}),e.jsx(i.BikShimmer,{isBrand:"light"!=a.mode,boxes:[{height:"18px",width:"120px"},{height:"18px",width:"120px"}]})]}):Object.keys(n).map(i=>{const h=n[i],c=i;return e.jsxs(r.CardDataContainer,{className:"analytics__card",count:Object.keys(n).length,children:[e.jsx(s.TitleSmall,{className:"statistic",color:"light"==a.mode?t.BASE_COLORS.brand[900]:t.BASE_COLORS.grayscale.white,children:h}),e.jsx(s.BodyCaption,{className:"category",color:"light"==a.mode?t.BASE_COLORS.brand[900]:t.COLORS.content.secondaryInverse,children:c})]},c)})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../constants/Theme.js"),t=require("../shimmer/ShimmerComponent/BikShimmer.js"),i=require("../TypographyStyle.js"),r=require("./AnalyticsCard.styled.js");exports.AnalyticsCard=a=>{const{cardInfo:n,width:c,mode:h}=a;return e.jsx(r.AnalyticsContainer,Object.assign({width:c,mode:h,count:Object.keys(n).length},{children:a.isLoading?e.jsxs("div",Object.assign({className:"shimmers"},{children:[e.jsx(t.BikShimmer,{isBrand:"light"!=a.mode,boxes:[{height:"18px",width:"120px"},{height:"18px",width:"120px"}]}),e.jsx(t.BikShimmer,{isBrand:"light"!=a.mode,boxes:[{height:"18px",width:"120px"},{height:"18px",width:"120px"}]})]})):Object.keys(n).map((t=>{const c=n[t],h=t;return e.jsxs(r.CardDataContainer,Object.assign({className:"analytics__card",count:Object.keys(n).length},{children:[e.jsx(i.TitleSmall,Object.assign({className:"statistic",color:"light"==a.mode?s.BASE_COLORS.brand[900]:s.BASE_COLORS.grayscale.white},{children:c})),e.jsx(i.BodyCaption,Object.assign({className:"category",color:"light"==a.mode?s.BASE_COLORS.brand[900]:s.COLORS.content.secondaryInverse},{children:h}))]}),h)}))}))};

package/dist/cjs/components/analytics-card/AnalyticsCard.styled.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { ModeType } from './AnalyticsCard';
+export declare const AnalyticsContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    width: string;
+    mode?: ModeType | undefined;
+    count?: number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CardDataContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    count: number;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/cjs/components/analytics-card/AnalyticsCard.styled.js

@@ -1,46 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var a=n(t);const i=a.default.div`
-	display: flex;
-	flex-wrap: wrap;
-	row-gap: 16px;
-	align-items: center;
-	justify-content: space-evenly;
-
-	${t=>t.width?`width: ${t.width}`:"width: 280px"};
-	background: ${t=>"light"==t.mode?e.BASE_COLORS.grayscale[100]:e.BASE_COLORS.brand[900]};
-	padding: 26px 12px 16px 12px;
-	border-radius: 0 0 8px 8px;
-
-	.analytics__card:nth-child(n + 4) {
-		${t=>5==t.count?"flex-basis: 48%":6==t.count||7==t.count?"flex-basis: 31%":8==t.count?"flex-basis: 23%":""};
-	}
-
-	.analytics__card:nth-child(4) {
-		${t=>7==t.count?"flex-basis: 23% !important":""}
-	}
-
-	.shimmers {
-		display: flex;
-		gap: 8px;
-		.shine {
-			margin-top: 2px !important;
-		}
-	}
-`,o=a.default.div`
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	row-gap: 4px;
-
-	flex-grow: 1;
-	flex-shrink: 0;
-	flex-basis: ${t=>2==t.count?"48%":3==t.count?"31%":4==t.count?"23%":5==t.count||6==t.count?"31%":7==t.count||8==t.count?"23%":"auto"};
-
-	.category,
-	.statistic {
-		max-width: 100%;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-`;exports.AnalyticsContainer=i,exports.CardDataContainer=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),g=require("../../constants/Theme.js");function I(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}var A=I(c);const C=A.default("div","production"===process.env.NODE_ENV?{target:"ednv6o21"}:{target:"ednv6o21",label:"AnalyticsContainer"})("display:flex;flex-wrap:wrap;row-gap:16px;align-items:center;justify-content:space-evenly;",(c=>c.width?`width: ${c.width}`:"width: 280px"),";background:",(c=>"light"==c.mode?g.BASE_COLORS.grayscale[100]:g.BASE_COLORS.brand[900]),";padding:26px 12px 16px 12px;border-radius:0 0 8px 8px;.analytics__card:nth-child(n + 4){",(c=>5==c.count?"flex-basis: 48%":6==c.count||7==c.count?"flex-basis: 31%":8==c.count?"flex-basis: 23%":""),";}.analytics__card:nth-child(4){",(c=>7==c.count?"flex-basis: 23% !important":""),";}.shimmers{display:flex;gap:8px;.shine{margin-top:2px!important;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc0NhcmQuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFNkMiLCJmaWxlIjoiQW5hbHl0aWNzQ2FyZC5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBCQVNFX0NPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc0NvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LXdyYXA6IHdyYXA7XG5cdHJvdy1nYXA6IDE2cHg7XG5cdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdGp1c3RpZnktY29udGVudDogc3BhY2UtZXZlbmx5O1xuXG5cdCR7KHByb3BzKSA9PiAocHJvcHMud2lkdGggPyBgd2lkdGg6ICR7cHJvcHMud2lkdGh9YCA6ICd3aWR0aDogMjgwcHgnKX07XG5cdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiBwcm9wcy5tb2RlID09ICdsaWdodCdcclxuICAgID8gQkFTRV9DT0xPUlMuZ3JheXNjYWxlWycxMDAnXVxyXG4gICAgOiBCQVNFX0NPTE9SUy5icmFuZFsnOTAwJ119O1xuXHRwYWRkaW5nOiAyNnB4IDEycHggMTZweCAxMnB4O1xuXHRib3JkZXItcmFkaXVzOiAwIDAgOHB4IDhweDtcblxuXHQuYW5hbHl0aWNzX19jYXJkOm50aC1jaGlsZChuICsgNCkge1xuXHRcdCR7KHByb3BzKSA9PiBwcm9wcy5jb3VudCA9PSA1XHJcbiAgICA/ICdmbGV4LWJhc2lzOiA0OCUnXHJcbiAgICA6IHByb3BzLmNvdW50ID09IDYgfHwgcHJvcHMuY291bnQgPT0gN1xyXG4gICAgICAgID8gJ2ZsZXgtYmFzaXM6IDMxJSdcclxuICAgICAgICA6IHByb3BzLmNvdW50ID09IDhcclxuICAgICAgICAgICAgPyAnZmxleC1iYXNpczogMjMlJ1xyXG4gICAgICAgICAgICA6ICcnfTtcblx0fVxuXG5cdC5hbmFseXRpY3NfX2NhcmQ6bnRoLWNoaWxkKDQpIHtcblx0XHQkeyhwcm9wcykgPT4gKHByb3BzLmNvdW50ID09IDcgPyAnZmxleC1iYXNpczogMjMlICFpbXBvcnRhbnQnIDogJycpfVxuXHR9XG5cblx0LnNoaW1tZXJzIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGdhcDogOHB4O1xuXHRcdC5zaGluZSB7XG5cdFx0XHRtYXJnaW4tdG9wOiAycHggIWltcG9ydGFudDtcblx0XHR9XG5cdH1cbmA7XHJcbmV4cG9ydCBjb25zdCBDYXJkRGF0YUNvbnRhaW5lciA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcblx0cm93LWdhcDogNHB4O1xuXG5cdGZsZXgtZ3JvdzogMTtcblx0ZmxleC1zaHJpbms6IDA7XG5cdGZsZXgtYmFzaXM6ICR7KHByb3BzKSA9PiBwcm9wcy5jb3VudCA9PSAyXHJcbiAgICA/ICc0OCUnXHJcbiAgICA6IHByb3BzLmNvdW50ID09IDNcclxuICAgICAgICA/ICczMSUnXHJcbiAgICAgICAgOiBwcm9wcy5jb3VudCA9PSA0XHJcbiAgICAgICAgICAgID8gJzIzJSdcclxuICAgICAgICAgICAgOiBwcm9wcy5jb3VudCA9PSA1XHJcbiAgICAgICAgICAgICAgICA/ICczMSUnXHJcbiAgICAgICAgICAgICAgICA6IHByb3BzLmNvdW50ID09IDZcclxuICAgICAgICAgICAgICAgICAgICA/ICczMSUnXHJcbiAgICAgICAgICAgICAgICAgICAgOiBwcm9wcy5jb3VudCA9PSA3XHJcbiAgICAgICAgICAgICAgICAgICAgICAgID8gJzIzJSdcclxuICAgICAgICAgICAgICAgICAgICAgICAgOiBwcm9wcy5jb3VudCA9PSA4XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA/ICcyMyUnXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA6ICdhdXRvJ307XG5cblx0LmNhdGVnb3J5LFxuXHQuc3RhdGlzdGljIHtcblx0XHRtYXgtd2lkdGg6IDEwMCU7XG5cdFx0b3ZlcmZsb3c6IGhpZGRlbjtcblx0XHR3aGl0ZS1zcGFjZTogbm93cmFwO1xuXHRcdHRleHQtb3ZlcmZsb3c6IGVsbGlwc2lzO1xuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1BbmFseXRpY3NDYXJkLnN0eWxlZC5qcy5tYXAiXX0= */")),b=A.default("div","production"===process.env.NODE_ENV?{target:"ednv6o20"}:{target:"ednv6o20",label:"CardDataContainer"})("display:flex;flex-direction:column;align-items:center;justify-content:center;row-gap:4px;flex-grow:1;flex-shrink:0;flex-basis:",(c=>2==c.count?"48%":3==c.count?"31%":4==c.count?"23%":5==c.count||6==c.count?"31%":7==c.count||8==c.count?"23%":"auto"),";.category,.statistic{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc0NhcmQuc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQzRDIiwiZmlsZSI6IkFuYWx5dGljc0NhcmQuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQkFTRV9DT0xPUlMgfSBmcm9tIFwiLi4vLi4vY29uc3RhbnRzL1RoZW1lXCI7XHJcbmV4cG9ydCBjb25zdCBBbmFseXRpY3NDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC13cmFwOiB3cmFwO1xuXHRyb3ctZ2FwOiAxNnB4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWV2ZW5seTtcblxuXHQkeyhwcm9wcykgPT4gKHByb3BzLndpZHRoID8gYHdpZHRoOiAke3Byb3BzLndpZHRofWAgOiAnd2lkdGg6IDI4MHB4Jyl9O1xuXHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4gcHJvcHMubW9kZSA9PSAnbGlnaHQnXHJcbiAgICA/IEJBU0VfQ09MT1JTLmdyYXlzY2FsZVsnMTAwJ11cclxuICAgIDogQkFTRV9DT0xPUlMuYnJhbmRbJzkwMCddfTtcblx0cGFkZGluZzogMjZweCAxMnB4IDE2cHggMTJweDtcblx0Ym9yZGVyLXJhZGl1czogMCAwIDhweCA4cHg7XG5cblx0LmFuYWx5dGljc19fY2FyZDpudGgtY2hpbGQobiArIDQpIHtcblx0XHQkeyhwcm9wcykgPT4gcHJvcHMuY291bnQgPT0gNVxyXG4gICAgPyAnZmxleC1iYXNpczogNDglJ1xyXG4gICAgOiBwcm9wcy5jb3VudCA9PSA2IHx8IHByb3BzLmNvdW50ID09IDdcclxuICAgICAgICA/ICdmbGV4LWJhc2lzOiAzMSUnXHJcbiAgICAgICAgOiBwcm9wcy5jb3VudCA9PSA4XHJcbiAgICAgICAgICAgID8gJ2ZsZXgtYmFzaXM6IDIzJSdcclxuICAgICAgICAgICAgOiAnJ307XG5cdH1cblxuXHQuYW5hbHl0aWNzX19jYXJkOm50aC1jaGlsZCg0KSB7XG5cdFx0JHsocHJvcHMpID0+IChwcm9wcy5jb3VudCA9PSA3ID8gJ2ZsZXgtYmFzaXM6IDIzJSAhaW1wb3J0YW50JyA6ICcnKX1cblx0fVxuXG5cdC5zaGltbWVycyB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRnYXA6IDhweDtcblx0XHQuc2hpbmUge1xuXHRcdFx0bWFyZ2luLXRvcDogMnB4ICFpbXBvcnRhbnQ7XG5cdFx0fVxuXHR9XG5gO1xyXG5leHBvcnQgY29uc3QgQ2FyZERhdGFDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdHJvdy1nYXA6IDRweDtcblxuXHRmbGV4LWdyb3c6IDE7XG5cdGZsZXgtc2hyaW5rOiAwO1xuXHRmbGV4LWJhc2lzOiAkeyhwcm9wcykgPT4gcHJvcHMuY291bnQgPT0gMlxyXG4gICAgPyAnNDglJ1xyXG4gICAgOiBwcm9wcy5jb3VudCA9PSAzXHJcbiAgICAgICAgPyAnMzElJ1xyXG4gICAgICAgIDogcHJvcHMuY291bnQgPT0gNFxyXG4gICAgICAgICAgICA/ICcyMyUnXHJcbiAgICAgICAgICAgIDogcHJvcHMuY291bnQgPT0gNVxyXG4gICAgICAgICAgICAgICAgPyAnMzElJ1xyXG4gICAgICAgICAgICAgICAgOiBwcm9wcy5jb3VudCA9PSA2XHJcbiAgICAgICAgICAgICAgICAgICAgPyAnMzElJ1xyXG4gICAgICAgICAgICAgICAgICAgIDogcHJvcHMuY291bnQgPT0gN1xyXG4gICAgICAgICAgICAgICAgICAgICAgICA/ICcyMyUnXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIDogcHJvcHMuY291bnQgPT0gOFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgPyAnMjMlJ1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgOiAnYXV0byd9O1xuXG5cdC5jYXRlZ29yeSxcblx0LnN0YXRpc3RpYyB7XG5cdFx0bWF4LXdpZHRoOiAxMDAlO1xuXHRcdG92ZXJmbG93OiBoaWRkZW47XG5cdFx0d2hpdGUtc3BhY2U6IG5vd3JhcDtcblx0XHR0ZXh0LW92ZXJmbG93OiBlbGxpcHNpcztcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9QW5hbHl0aWNzQ2FyZC5zdHlsZWQuanMubWFwIl19 */"));exports.AnalyticsContainer=C,exports.CardDataContainer=b;

package/dist/cjs/components/analytics-card/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AnalyticsCard';
+export * from './AnalyticsCard.styled';

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface AnalyticsChipInterface {
+    title: string;
+    primaryValue: string;
+    backgroundColor?: string;
+    captionColor?: string;
+    titleColor?: string;
+    width?: number | string;
+    extraJSX?: JSX.Element;
+    tooltipContent?: string;
+    style?: React.CSSProperties;
+    channelConfig?: {
+        whatsapp?: string;
+        instagram?: string;
+        email?: string;
+        sms?: string;
+    };
+}
+export declare const AnalyticsChip: React.FC<AnalyticsChipInterface>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../assets/icons/info.svg.js"),o=require("../tooltips/Tooltip.js"),t=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),s=require("./AnalyticsChipChannelFooter.js"),l=require("./CommonStyles.js");exports.AnalyticsChip=n=>{const{title:a,primaryValue:c,titleColor:h,captionColor:y=t.BASE_COLORS.grayscale[700],backgroundColor:C=t.BASE_COLORS.grayscale[50],width:d="224.67px",extraJSX:u,tooltipContent:p,channelConfig:j,style:x}=n;return e.jsxs(l.AnalyticsChipContainer,{style:null!=x?x:{},backgroundColor:C,width:d,children:[e.jsxs("div",{className:"sub--container",children:[e.jsx(i.BodyCaption,{style:{color:y},children:a}),p&&e.jsx(o.Tooltip,{body:p,children:e.jsx("div",{children:e.jsx(r.default,{height:14.67,width:14.67,color:t.BASE_COLORS.grayscale[500]})})})]}),e.jsx(i.TitleLarge,{style:{color:h},children:c}),j&&e.jsx(s.AnalyticsChipChannelFooter,{channelConfig:j}),u]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/info.svg.js"),t=require("../tooltips/Tooltip.js"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./AnalyticsChipChannelFooter.js"),n=require("./CommonStyles.js");exports.AnalyticsChip=l=>{const{title:a,primaryValue:c,titleColor:h,captionColor:j=i.BASE_COLORS.grayscale[700],backgroundColor:y=i.BASE_COLORS.grayscale[50],width:C="224.67px",extraJSX:d,tooltipContent:u,channelConfig:p,style:g}=l;return e.jsxs(n.AnalyticsChipContainer,Object.assign({style:null!=g?g:{},backgroundColor:y,width:C},{children:[e.jsxs("div",Object.assign({className:"sub--container"},{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:j}},{children:a})),u&&e.jsx(t.Tooltip,Object.assign({body:u},{children:e.jsx("div",{children:e.jsx(s.default,{height:14.67,width:14.67,color:i.BASE_COLORS.grayscale[500]})})}))]})),e.jsx(r.TitleLarge,Object.assign({style:{color:h}},{children:c})),p&&e.jsx(o.AnalyticsChipChannelFooter,{channelConfig:p}),d]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChipChannelFooter.d.ts

@@ -0,0 +1,4 @@
+import { AnalyticsChipInterface } from './AnalyticsChip';
+export declare const AnalyticsChipChannelFooter: (props: {
+    channelConfig: AnalyticsChipInterface['channelConfig'];
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsChipChannelFooter.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/chat-channel.svg.js"),n=require("../../assets/icons/email-channel.svg.js"),a=require("../../assets/icons/instagram-channel.svg.js"),t=require("../../assets/icons/whatsapp-channel.svg.js"),r=require("../../constants/Theme.js"),l=require("../TypographyStyle.js");const i=s=>{const{ChannelIcon:n,value:a}=s;return e.jsxs("div",{style:{display:"flex",gap:"4px"},children:[e.jsx(n,{width:12,height:12}),e.jsx(l.BodyTiny,{color:r.COLORS.content.secondary,children:a})]})};exports.AnalyticsChipChannelFooter=r=>{if(!r.channelConfig)return e.jsx(e.Fragment,{});const{whatsapp:l,instagram:c,email:o,sms:h}=r.channelConfig;return e.jsxs("div",{style:{display:"flex",gap:"16px"},children:[!!l&&e.jsx(i,{ChannelIcon:t.default,value:l}),!!c&&e.jsx(i,{ChannelIcon:a.default,value:c}),!!o&&e.jsx(i,{ChannelIcon:n.default,value:o}),!!h&&e.jsx(i,{ChannelIcon:s.default,value:h})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/chat-channel.svg.js"),n=require("../../assets/icons/email-channel.svg.js"),a=require("../../assets/icons/instagram-channel.svg.js"),t=require("../../assets/icons/whatsapp-channel.svg.js"),r=require("../../constants/Theme.js"),l=require("../TypographyStyle.js");const i=s=>{const{ChannelIcon:n,value:a}=s;return e.jsxs("div",Object.assign({style:{display:"flex",gap:"4px"}},{children:[e.jsx(n,{width:12,height:12}),e.jsx(l.BodyTiny,Object.assign({color:r.COLORS.content.secondary},{children:a}))]}))};exports.AnalyticsChipChannelFooter=r=>{if(!r.channelConfig)return e.jsx(e.Fragment,{});const{whatsapp:l,instagram:c,email:o,sms:h}=r.channelConfig;return e.jsxs("div",Object.assign({style:{display:"flex",gap:"16px"}},{children:[!!l&&e.jsx(i,{ChannelIcon:t.default,value:l}),!!c&&e.jsx(i,{ChannelIcon:a.default,value:c}),!!o&&e.jsx(i,{ChannelIcon:n.default,value:o}),!!h&&e.jsx(i,{ChannelIcon:s.default,value:h})]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.d.ts

@@ -0,0 +1,51 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import { DropDirection } from 'react-bootstrap/esm/DropdownContext';
+export interface DropdownOptions {
+    label: string;
+    subLabel?: string;
+    value: string;
+    key: string | number;
+    noOfDays?: number;
+    isCustom?: boolean;
+    dateRangeSelectionOptions?: {
+        selectRange: boolean;
+        selectedDates?: Date[];
+        selectedDate?: Date;
+        minDate?: Date;
+        maxDate?: Date;
+    };
+}
+export interface AnalyticsDropdownInterface {
+    options: DropdownOptions[];
+    selected?: DropdownOptions;
+    placeholder?: string;
+    resetDropdown?: boolean;
+    onOptionSelected: (chosen: DropdownOptions & {
+        selectedRange?: [Date, Date];
+    }) => void;
+    maxHeight?: string;
+    backgroundcolor?: string;
+    calendarPopperConfig?: {
+        offsetSkid?: number;
+        offsetDistance?: number;
+    };
+    variant?: 'small' | 'default';
+    datePickerPlacement?: DropDirection;
+    closeDropdown?: boolean;
+    labelColor?: string;
+    styleProps?: React.CSSProperties;
+    showTimePicker?: boolean;
+}
+export declare const AnalyticsDropdown: React.FC<AnalyticsDropdownInterface>;
+export declare const EachItem: React.FC<{
+    eachOption: DropdownOptions;
+    selectedOption: DropdownOptions | undefined;
+    selectedDate: Date[] | undefined;
+    onClickingEachItem: (optionSelected: DropdownOptions) => void;
+    rangeSelection?: boolean;
+    isLastItem?: boolean;
+    isFirstItem?: boolean;
+    showTimePicker?: boolean;
+}>;
+export declare const formatDate: (dateVal: Date, includeTime?: boolean) => string;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsDropdown.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("react-bootstrap"),n=require("react-dom"),r=require("../../constants/Theme.js"),i=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var s=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js"),require("../datePicker/model.js"),require("../dropdown/DropdownPopover/index.js"),require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js"),require("../datePicker/DatePicker.styled.js");var d=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);const c=({eachOption:o,selectedOption:t,selectedDate:n,onClickingEachItem:i,rangeSelection:l,isLastItem:a,isFirstItem:c,showTimePicker:p})=>e.jsxs(d.ItemMenuContainer,{isFirstItem:c,isLastItem:a,onClick:()=>i(o),isSelected:o.isCustom?o.key==(null==t?void 0:t.key)&&!!n:o.key==(null==t?void 0:t.key),children:[e.jsx(s.BodySecondary,{color:o.key==(null==t?void 0:t.key)?r.BASE_COLORS.positive[900]:r.BASE_COLORS.grayscale[900],children:o.label}),o.subLabel?e.jsx(s.BodyCaption,{style:{color:r.BASE_COLORS.grayscale[700]},children:o.subLabel}):e.jsx(e.Fragment,{}),n&&(null==t?void 0:t.isCustom)&&o.key==(null==t?void 0:t.key)&&e.jsx(s.BodyCaption,{style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"},children:l?`${u(n[0],p)} to ${u(n[1],p)}`:`${u(n[0],p)}`})]},o.key),u=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};exports.AnalyticsDropdown=({options:n,placeholder:l="Select an option",selected:p,onOptionSelected:m,resetDropdown:g,maxHeight:v,backgroundcolor:w,calendarPopperConfig:j,variant:y="default",datePickerPlacement:D,closeDropdown:h,labelColor:S,styleProps:O,showTimePicker:f=!1})=>{var k,x,b;const[q,C]=o.useState(!1),[R,I]=o.useState(p),[P,E]=o.useState(),[L,T]=o.useState(!1),[B,M]=o.useState(p),F=o.useRef(null),A="small"===y?s.Caption:s.BodySecondary;o.useEffect(()=>{g&&I(void 0)},[g]),o.useEffect(()=>{var e;(null==p?void 0:p.isCustom)&&(null===(e=p.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?E(p.dateRangeSelectionOptions.selectedDates):E(void 0),I(p)},[p]),o.useEffect(()=>{T(!1),C(!1)},[h]);const $=e=>{void 0!==e?(T(e),q&&C(!1)):T(e=>!e)},_=e=>{F.current&&!F.current.contains(e.target)&&(q&&C(!1),$(!1))};return o.useEffect(()=>(L&&document.addEventListener("mousedown",_),()=>{document.removeEventListener("mousedown",_)}),[L]),e.jsx(e.Fragment,{children:e.jsxs(d.MainDropdown,{drop:"down",show:L,onToggle:$,bgColor:w,id:"analytic-dropdown",children:[e.jsx(t.Dropdown.Toggle,{id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===y?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${r.DEFAULT_THEME.colorsV2.stroke.primary}`}:O||void 0,children:e.jsx(A,{style:"small"===y||S?{color:S||r.DEFAULT_THEME.colorsV2.content.secondary}:void 0,children:(null==R?void 0:R.isCustom)?P?u(P[0],f)===u(P[1],f)?`${u(P[0],f)}`:`${u(P[0],f)} to ${u(P[1],f)}`:(null==B?void 0:B.label)?null==B?void 0:B.label:l:R?null==R?void 0:R.label:l})}),a.default.createPortal(e.jsx(t.Dropdown.Menu,{className:"main--dropdown",style:{padding:0},ref:F,children:e.jsxs(d.MainDropdown,{drop:null!=D?D:"end",id:"sub--dropdown",show:q,onToggle:e=>{!e&&T(!1),C(!q)},children:[e.jsx("div",{style:{maxHeight:v||"auto",overflowY:"scroll"},children:n.map((o,r)=>{var i;return e.jsx("div",{children:(null==o?void 0:o.isCustom)?e.jsx(t.Dropdown.Toggle,{className:"sub--dropdown",children:e.jsx(c,{isFirstItem:0===r,isLastItem:r===n.length-1,eachOption:o,selectedOption:R,selectedDate:P,onClickingEachItem:e=>{I(e),C(!0)},rangeSelection:!!(null===(i=null==o?void 0:o.dateRangeSelectionOptions)||void 0===i?void 0:i.selectRange),showTimePicker:f})}):e.jsx(c,{isFirstItem:0===r,isLastItem:r===n.length-1,eachOption:o,selectedOption:R,selectedDate:P,onClickingEachItem:e=>{if(E(void 0),I(e),M(e),$(),!e.noOfDays)return void m(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),m(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:f})},null==o?void 0:o.key)})}),e.jsx(t.Dropdown.Menu,{className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==j?void 0:j.offsetSkid)||0,(null==j?void 0:j.offsetDistance)||0]}}]},children:e.jsx(i.DatePicker,{selectRange:(null===(k=null==R?void 0:R.dateRangeSelectionOptions)||void 0===k?void 0:k.selectRange)||!1,showTimePicker:f,maxDate:null===(x=null==R?void 0:R.dateRangeSelectionOptions)||void 0===x?void 0:x.maxDate,minDate:null===(b=null==R?void 0:R.dateRangeSelectionOptions)||void 0===b?void 0:b.minDate,selectedDates:P,onSelectRange:(e,o)=>{const t=[e,o];(null==R?void 0:R.dateRangeSelectionOptions)&&(R.dateRangeSelectionOptions.selectedDates=t,m(Object.assign(Object.assign({},R),{selectedRange:[e,o]}))),M(R),C(!1),E(t),T(!L)},onSelectDate:e=>{(null==R?void 0:R.dateRangeSelectionOptions)&&(R.dateRangeSelectionOptions.selectedDates=[e,e],m(Object.assign(Object.assign({},R),{selectedRange:[e,e]}))),M(R),C(!1),E([e,e]),T(!L)}})})]})}),document.body)]})})},exports.EachItem=c,exports.formatDate=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("react-bootstrap"),n=require("react-dom"),s=require("../../constants/Theme.js"),i=require("../datePicker/DatePicker.js");require("react-calendar"),require("../../utils/DateUtils.js");var r=require("../TypographyStyle.js");require("../datePicker/DatePickerWrapper.styled.js"),require("../datePicker/model.js"),require("../dropdown/DropdownPopover/index.js"),require("../dropdown/Dropdown.js"),require("../dropdown/ChipDropdown.js"),require("../zeroState/ZeroState.js"),require("../dropdown/OpenedDropdown/components/description/Description.styled.js"),require("../checkBox/CheckBox.styled.js"),require("../list-item/ListItem.js"),require("../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js"),require("../dropdown/OpenedDropdown/components/menu/MenuItem.js"),require("../dropdown/OpenedDropdown/components/menu/MenuList.styled.js"),require("../button/Button.js"),require("../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js"),require("../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js"),require("../icon-button/IconButton.js"),require("../input/Input.js"),require("../dropdown/MenuItem/MenuItem.js"),require("../datePicker/DatePicker.styled.js");var d=require("./CommonStyles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=l(n);const c=o=>{let{eachOption:t,selectedOption:n,selectedDate:i,onClickingEachItem:l,rangeSelection:a,isLastItem:c,isFirstItem:p,showTimePicker:m}=o;return e.jsxs(d.ItemMenuContainer,Object.assign({isFirstItem:p,isLastItem:c,onClick:()=>l(t),isSelected:t.isCustom?t.key==(null==n?void 0:n.key)&&!!i:t.key==(null==n?void 0:n.key)},{children:[e.jsx(r.BodySecondary,Object.assign({color:t.key==(null==n?void 0:n.key)?s.BASE_COLORS.positive[900]:s.BASE_COLORS.grayscale[900]},{children:t.label})),t.subLabel?e.jsx(r.BodyCaption,Object.assign({style:{color:s.BASE_COLORS.grayscale[700]}},{children:t.subLabel})):e.jsx(e.Fragment,{}),i&&(null==n?void 0:n.isCustom)&&t.key==(null==n?void 0:n.key)&&e.jsx(r.BodyCaption,Object.assign({style:{whiteSpace:"normal",wordBreak:"break-word",textAlign:"left"}},{children:a?`${u(i[0],m)} to ${u(i[1],m)}`:`${u(i[0],m)}`}))]}),t.key)},u=(e,o)=>{const t=e.toLocaleString("default",{day:"numeric",month:"short",year:"numeric"});if(o){return`${t} (${e.toLocaleString("default",{hour:"numeric",minute:"2-digit",hour12:!0})})`}return t};exports.AnalyticsDropdown=n=>{let{options:l,placeholder:p="Select an option",selected:m,onOptionSelected:g,resetDropdown:j,maxHeight:v,backgroundcolor:w,calendarPopperConfig:O,variant:y="default",datePickerPlacement:D,closeDropdown:h,labelColor:b,styleProps:S,showTimePicker:f=!1}=n;var k,x,q;const[C,R]=o.useState(!1),[I,P]=o.useState(m),[E,L]=o.useState(),[T,B]=o.useState(!1),[M,F]=o.useState(m),A=o.useRef(null),$="small"===y?r.Caption:r.BodySecondary;o.useEffect((()=>{j&&P(void 0)}),[j]),o.useEffect((()=>{var e;(null==m?void 0:m.isCustom)&&(null===(e=m.dateRangeSelectionOptions)||void 0===e?void 0:e.selectedDates)?L(m.dateRangeSelectionOptions.selectedDates):L(void 0),P(m)}),[m]),o.useEffect((()=>{B(!1),R(!1)}),[h]);const _=e=>{void 0!==e?(B(e),C&&R(!1)):B((e=>!e))},H=e=>{A.current&&!A.current.contains(e.target)&&(C&&R(!1),_(!1))};return o.useEffect((()=>(T&&document.addEventListener("mousedown",H),()=>{document.removeEventListener("mousedown",H)})),[T]),e.jsx(e.Fragment,{children:e.jsxs(d.MainDropdown,Object.assign({drop:"down",show:T,onToggle:_,bgColor:w,id:"analytic-dropdown"},{children:[e.jsx(t.Dropdown.Toggle,Object.assign({id:"dropdown-autoclose-outside",className:"main--dropdown",style:"small"===y?{display:"flex",alignItems:"center",gap:6,padding:"4px 8px",backgroundColor:"#FAFAFA",borderRadius:4,border:`1px solid ${s.DEFAULT_THEME.colorsV2.stroke.primary}`}:S||void 0},{children:e.jsx($,Object.assign({style:"small"===y||b?{color:b||s.DEFAULT_THEME.colorsV2.content.secondary}:void 0},{children:(null==I?void 0:I.isCustom)?E?u(E[0],f)===u(E[1],f)?`${u(E[0],f)}`:`${u(E[0],f)} to ${u(E[1],f)}`:(null==M?void 0:M.label)?null==M?void 0:M.label:p:I?null==I?void 0:I.label:p}))})),a.default.createPortal(e.jsx(t.Dropdown.Menu,Object.assign({className:"main--dropdown",style:{padding:0},ref:A},{children:e.jsxs(d.MainDropdown,Object.assign({drop:null!=D?D:"end",id:"sub--dropdown",show:C,onToggle:e=>{!e&&B(!1),R(!C)}},{children:[e.jsx("div",Object.assign({style:{maxHeight:v||"auto",overflowY:"scroll"}},{children:l.map(((o,n)=>{var s;return e.jsx("div",{children:(null==o?void 0:o.isCustom)?e.jsx(t.Dropdown.Toggle,Object.assign({className:"sub--dropdown"},{children:e.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:o,selectedOption:I,selectedDate:E,onClickingEachItem:e=>{P(e),R(!0)},rangeSelection:!!(null===(s=null==o?void 0:o.dateRangeSelectionOptions)||void 0===s?void 0:s.selectRange),showTimePicker:f})})):e.jsx(c,{isFirstItem:0===n,isLastItem:n===l.length-1,eachOption:o,selectedOption:I,selectedDate:E,onClickingEachItem:e=>{if(L(void 0),P(e),F(e),_(),!e.noOfDays)return void g(e);const o=new Date,t=new Date;t.setDate(o.getDate()-e.noOfDays),g(Object.assign(Object.assign({},e),{selectedRange:[t,o]}))},showTimePicker:f})},null==o?void 0:o.key)}))})),e.jsx(t.Dropdown.Menu,Object.assign({className:"sub--dropdown",popperConfig:{modifiers:[{name:"offset",options:{offset:[(null==O?void 0:O.offsetSkid)||0,(null==O?void 0:O.offsetDistance)||0]}}]}},{children:e.jsx(i.DatePicker,{selectRange:(null===(k=null==I?void 0:I.dateRangeSelectionOptions)||void 0===k?void 0:k.selectRange)||!1,showTimePicker:f,maxDate:null===(x=null==I?void 0:I.dateRangeSelectionOptions)||void 0===x?void 0:x.maxDate,minDate:null===(q=null==I?void 0:I.dateRangeSelectionOptions)||void 0===q?void 0:q.minDate,selectedDates:E,onSelectRange:(e,o)=>{const t=[e,o];(null==I?void 0:I.dateRangeSelectionOptions)&&(I.dateRangeSelectionOptions.selectedDates=t,g(Object.assign(Object.assign({},I),{selectedRange:[e,o]}))),F(I),R(!1),L(t),B(!T)},onSelectDate:e=>{(null==I?void 0:I.dateRangeSelectionOptions)&&(I.dateRangeSelectionOptions.selectedDates=[e,e],g(Object.assign(Object.assign({},I),{selectedRange:[e,e]}))),F(I),R(!1),L([e,e]),B(!T)}})}))]}))})),document.body)]}))})},exports.EachItem=c,exports.formatDate=u;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMetric.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AnalyticsTrendInterface } from './AnalyticsTrend';
+export declare const AnalyticsMetric: React.FC<{
+    title?: string;
+    RightHeaderComponent?: React.ReactElement;
+    trends: AnalyticsTrendInterface[];
+    containerStyle?: React.CSSProperties;
+    trendStyle?: React.CSSProperties;
+    trendContainerStyle?: React.CSSProperties;
+    trendIconStyle?: React.CSSProperties;
+    titleSize?: 'large' | 'small';
+    titleColor?: string;
+    perRow?: number;
+    isLoading?: boolean;
+    hideHeaderDiv?: boolean;
+    relativePercentageDiff?: number;
+    isInternationalStore?: boolean;
+}>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMetric.js

@@ -1,5 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("styled-components"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),r=require("./AnalyticsTrend.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=l(t).default.div`
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-`;exports.AnalyticsMetric=({title:t,trends:l,RightHeaderComponent:s,containerStyle:a,titleSize:o,titleColor:c,perRow:y,isLoading:p,trendStyle:g,trendContainerStyle:h,trendIconStyle:u,hideHeaderDiv:x,isInternationalStore:j})=>{const f="large"===o?i.TitleMedium:i.TitleRegular,m=y||(l.length<=4?l.length:l.length%3==0?3:4),S=Math.ceil(l.length/m);return e.jsxs("div",{style:Object.assign({paddingTop:24,paddingBottom:24},null!=a?a:{}),children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:x?0:12},children:[t&&e.jsx(f,{color:null!=c?c:n.COLORS.content.secondary,style:{paddingLeft:24,paddingRight:24},children:t}),s]}),e.jsx(d,{children:Array.from({length:S}).map((t,n)=>e.jsx(e.Fragment,{children:e.jsx("div",{style:{display:"flex",width:"100%",marginTop:0===n?0:16},children:l.slice(n*m,(n+1)*m).map((t,i)=>{var d;return e.jsx("div",{style:{flex:1,maxWidth:1===l.length?"100%":"50%"},children:e.jsx(r.AnalyticsTrend,Object.assign({},t,{isLoading:p,card:!1,size:null!==(d=t.size)&&void 0!==d?d:"small",rightSeparator:i+n*m<Math.min((n+1)*m-1,l.length-1),trendStyle:g,trendIconStyle:u,trendContainerStyle:h,isInternationalStore:j}))},i)})},n)}))})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var g=require("@emotion/styled/base"),I=require("react/jsx-runtime"),C=require("../../constants/Theme.js"),A=require("../TypographyStyle.js"),l=require("./AnalyticsTrend.js");function e(g){return g&&"object"==typeof g&&"default"in g?g:{default:g}}const c=e(g).default("div","production"===process.env.NODE_ENV?{target:"e1bel8cf0"}:{target:"e1bel8cf0",label:"TrendContainer"})("production"===process.env.NODE_ENV?{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap"}:{name:"jovua5",styles:"display:flex;flex-direction:row;flex-wrap:wrap",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkFuYWx5dGljc01ldHJpYy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBS2tDIiwiZmlsZSI6IkFuYWx5dGljc01ldHJpYy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBqc3ggYXMgX2pzeCwganN4cyBhcyBfanN4cywgRnJhZ21lbnQgYXMgX0ZyYWdtZW50IH0gZnJvbSBcInJlYWN0L2pzeC1ydW50aW1lXCI7XHJcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgQ09MT1JTIH0gZnJvbSBcIi4uLy4uL2NvbnN0YW50cy9UaGVtZVwiO1xyXG5pbXBvcnQgeyBUaXRsZU1lZGl1bSwgVGl0bGVSZWd1bGFyIH0gZnJvbSAnLi4vVHlwb2dyYXBoeVN0eWxlJztcclxuaW1wb3J0IHsgQW5hbHl0aWNzVHJlbmQgfSBmcm9tICcuL0FuYWx5dGljc1RyZW5kJztcclxuY29uc3QgVHJlbmRDb250YWluZXIgPSBzdHlsZWQuZGl2IGBcblx0ZGlzcGxheTogZmxleDtcblx0ZmxleC1kaXJlY3Rpb246IHJvdztcblx0ZmxleC13cmFwOiB3cmFwO1xuYDtcclxuZXhwb3J0IGNvbnN0IEFuYWx5dGljc01ldHJpYyA9ICh7IHRpdGxlLCB0cmVuZHMsIFJpZ2h0SGVhZGVyQ29tcG9uZW50LCBjb250YWluZXJTdHlsZSwgdGl0bGVTaXplLCB0aXRsZUNvbG9yLCBwZXJSb3csIGlzTG9hZGluZywgdHJlbmRTdHlsZSwgdHJlbmRDb250YWluZXJTdHlsZSwgdHJlbmRJY29uU3R5bGUsIGhpZGVIZWFkZXJEaXYsIGlzSW50ZXJuYXRpb25hbFN0b3JlLCB9KSA9PiB7XHJcbiAgICBjb25zdCBUeXBvID0gdGl0bGVTaXplID09PSAnbGFyZ2UnID8gVGl0bGVNZWRpdW0gOiBUaXRsZVJlZ3VsYXI7XHJcbiAgICBjb25zdCBwZXJSb3dMb2NhbCA9IHBlclJvdyB8fFxyXG4gICAgICAgICh0cmVuZHMubGVuZ3RoIDw9IDQgPyB0cmVuZHMubGVuZ3RoIDogdHJlbmRzLmxlbmd0aCAlIDMgPT0gMCA/IDMgOiA0KTtcclxuICAgIGNvbnN0IHJvd3MgPSBNYXRoLmNlaWwodHJlbmRzLmxlbmd0aCAvIHBlclJvd0xvY2FsKTtcclxuICAgIHJldHVybiAoX2pzeHMoXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiBPYmplY3QuYXNzaWduKHsgcGFkZGluZ1RvcDogMjQsIHBhZGRpbmdCb3R0b206IDI0IH0sIChjb250YWluZXJTdHlsZSAhPT0gbnVsbCAmJiBjb250YWluZXJTdHlsZSAhPT0gdm9pZCAwID8gY29udGFpbmVyU3R5bGUgOiB7fSkpIH0sIHsgY2hpbGRyZW46IFtfanN4cyhcImRpdlwiLCBPYmplY3QuYXNzaWduKHsgc3R5bGU6IHtcclxuICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiAnZmxleCcsXHJcbiAgICAgICAgICAgICAgICAgICAgZmxleERpcmVjdGlvbjogJ3JvdycsXHJcbiAgICAgICAgICAgICAgICAgICAganVzdGlmeUNvbnRlbnQ6ICdzcGFjZS1iZXR3ZWVuJyxcclxuICAgICAgICAgICAgICAgICAgICBwYWRkaW5nQm90dG9tOiBoaWRlSGVhZGVyRGl2ID8gMCA6IDEyLFxyXG4gICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBbdGl0bGUgJiYgKF9qc3goVHlwbywgT2JqZWN0LmFzc2lnbih7IGNvbG9yOiB0aXRsZUNvbG9yICE9PSBudWxsICYmIHRpdGxlQ29sb3IgIT09IHZvaWQgMCA/IHRpdGxlQ29sb3IgOiBDT0xPUlMuY29udGVudC5zZWNvbmRhcnksIHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nTGVmdDogMjQsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBwYWRkaW5nUmlnaHQ6IDI0LFxyXG4gICAgICAgICAgICAgICAgICAgICAgICB9IH0sIHsgY2hpbGRyZW46IHRpdGxlIH0pKSksIFJpZ2h0SGVhZGVyQ29tcG9uZW50XSB9KSksIF9qc3goVHJlbmRDb250YWluZXIsIHsgY2hpbGRyZW46IEFycmF5LmZyb20oeyBsZW5ndGg6IHJvd3MgfSkubWFwKChfLCByb3dJbmRleCkgPT4gKF9qc3goX0ZyYWdtZW50LCB7IGNoaWxkcmVuOiBfanN4KFwiZGl2XCIsIE9iamVjdC5hc3NpZ24oeyBzdHlsZToge1xyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgZGlzcGxheTogJ2ZsZXgnLFxyXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJyxcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1hcmdpblRvcDogcm93SW5kZXggPT09IDAgPyAwIDogMTYsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgIH0gfSwgeyBjaGlsZHJlbjogdHJlbmRzXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAuc2xpY2Uocm93SW5kZXggKiBwZXJSb3dMb2NhbCwgKHJvd0luZGV4ICsgMSkgKiBwZXJSb3dMb2NhbClcclxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIC5tYXAoKHRyZW5kLCBpKSA9PiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICB2YXIgX2E7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICByZXR1cm4gKF9qc3goXCJkaXZcIiwgT2JqZWN0LmFzc2lnbih7IHN0eWxlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGZsZXg6IDEsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIG1heFdpZHRoOiB0cmVuZHMubGVuZ3RoID09PSAxID8gJzEwMCUnIDogJzUwJScsXHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgfSB9LCB7IGNoaWxkcmVuOiBfanN4KEFuYWx5dGljc1RyZW5kLCBPYmplY3QuYXNzaWduKHt9LCB0cmVuZCwgeyBpc0xvYWRpbmc6IGlzTG9hZGluZywgY2FyZDogZmFsc2UsIHNpemU6IChfYSA9IHRyZW5kLnNpemUpICE9PSBudWxsICYmIF9hICE9PSB2b2lkIDAgPyBfYSA6ICdzbWFsbCcsIHJpZ2h0U2VwYXJhdG9yOiBpICsgcm93SW5kZXggKiBwZXJSb3dMb2NhbCA8XHJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBNYXRoLm1pbigocm93SW5kZXggKyAxKSAqIHBlclJvd0xvY2FsIC0gMSwgdHJlbmRzLmxlbmd0aCAtIDEpLCB0cmVuZFN0eWxlOiB0cmVuZFN0eWxlLCB0cmVuZEljb25TdHlsZTogdHJlbmRJY29uU3R5bGUsIHRyZW5kQ29udGFpbmVyU3R5bGU6IHRyZW5kQ29udGFpbmVyU3R5bGUsIGlzSW50ZXJuYXRpb25hbFN0b3JlOiBpc0ludGVybmF0aW9uYWxTdG9yZSB9KSkgfSksIGkpKTtcclxuICAgICAgICAgICAgICAgICAgICAgICAgfSkgfSksIHJvd0luZGV4KSB9KSkpIH0pXSB9KSkpO1xyXG59O1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1BbmFseXRpY3NNZXRyaWMuanMubWFwIl19 */",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.AnalyticsMetric=g=>{let{title:e,trends:t,RightHeaderComponent:b,containerStyle:i,titleSize:d,titleColor:s,perRow:n,isLoading:a,trendStyle:Z,trendContainerStyle:u,trendIconStyle:o,hideHeaderDiv:y,isInternationalStore:G}=g;const m="large"===d?A.TitleMedium:A.TitleRegular,p=n||(t.length<=4?t.length:t.length%3==0?3:4),r=Math.ceil(t.length/p);return I.jsxs("div",Object.assign({style:Object.assign({paddingTop:24,paddingBottom:24},null!=i?i:{})},{children:[I.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",paddingBottom:y?0:12}},{children:[e&&I.jsx(m,Object.assign({color:null!=s?s:C.COLORS.content.secondary,style:{paddingLeft:24,paddingRight:24}},{children:e})),b]})),I.jsx(c,{children:Array.from({length:r}).map(((g,C)=>I.jsx(I.Fragment,{children:I.jsx("div",Object.assign({style:{display:"flex",width:"100%",marginTop:0===C?0:16}},{children:t.slice(C*p,(C+1)*p).map(((g,A)=>{var e;return I.jsx("div",Object.assign({style:{flex:1,maxWidth:1===t.length?"100%":"50%"}},{children:I.jsx(l.AnalyticsTrend,Object.assign({},g,{isLoading:a,card:!1,size:null!==(e=g.size)&&void 0!==e?e:"small",rightSeparator:A+C*p<Math.min((C+1)*p-1,t.length-1),trendStyle:Z,trendIconStyle:o,trendContainerStyle:u,isInternationalStore:G}))}),A)}))}),C)})))})]}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AnalyticsChipInterface } from './AnalyticsChip';
+export declare const AnalyticsMultiChip: React.FC<{
+    chipDetails: AnalyticsChipInterface[];
+    wrapperStyle?: React.CSSProperties;
+}>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsMultiChip.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./AnalyticsChip.js"),i=require("./CommonStyles.js");exports.AnalyticsMultiChip=({chipDetails:s,wrapperStyle:l})=>e.jsx(i.AnalyticsMultiWrapper,{style:null!=l?l:{},children:s.map((e,i)=>r.createElement(t.AnalyticsChip,Object.assign({},e,{key:i+"_chip"})))});
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./AnalyticsChip.js"),i=require("./CommonStyles.js");exports.AnalyticsMultiChip=s=>{let{chipDetails:l,wrapperStyle:a}=s;return e.jsx(i.AnalyticsMultiWrapper,Object.assign({style:null!=a?a:{}},{children:l.map(((e,i)=>r.createElement(t.AnalyticsChip,Object.assign({},e,{key:i+"_chip"}))))}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+export interface AnalyticsTrendInterface {
+    title: string;
+    value?: number | string;
+    trendPercent?: number;
+    trendRaw?: number;
+    trendRawString?: string;
+    formatVal?: boolean;
+    timeline?: 'today' | 'yesterday' | '7 days' | '30 days' | 'custom';
+    customRange?: Date[];
+    type?: 'vertical' | 'horizontal';
+    tooltip?: string;
+    card?: boolean;
+    rightSeparator?: boolean;
+    size?: 'big' | 'small';
+    share?: boolean;
+    prefixSymbol?: string;
+    trailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    onTrailIconClick?: () => void;
+    iconTooltipBody?: string;
+    funnelPercent?: number;
+    isLoading?: boolean;
+    suffixText?: string;
+    trendStyle?: React.CSSProperties;
+    iconContainerStyle?: React.CSSProperties;
+    trendContainerStyle?: React.CSSProperties;
+    trendIconStyle?: React.CSSProperties;
+    containerStyle?: React.CSSProperties;
+    prevTrendDiff?: number;
+    relativePercentageDiff?: number;
+    isInternationalStore?: boolean;
+    Icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    tooltipTimelineText?: string;
+    customTimelineText?: string;
+}
+export declare const AnalyticsTrend: React.FC<AnalyticsTrendInterface>;

package/dist/cjs/components/analytics-chips-and-dropdowns/AnalyticsTrend.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),l=require("../../assets/icons/arrow_down.svg.js"),o=require("../../assets/icons/arrow_up.svg.js"),a=require("../../assets/icons/info.svg.js"),s=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),u=require("./chart/utils/calcPercentage.js"),h=require("./CommonStyles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=m(t);const p=({percent:n,direction:a,timeline:s,customRange:h,trendRaw:m,trendRawString:g,prefixSymbol:p,trendIconStyle:y,isInternationalStore:x,tooltipTimelineText:j,customTimelineText:f})=>{const S=()=>{const e=((null!=m?m:0)>0?"+":"")+(null!=p?p:"");return void 0===m?"--":`${null!=e?e:""}${(()=>{let e="--";if(m)return e=String(x?u.truncateValueForInternationalStore(Math.abs(m)):u.truncateValueForIndianStore(Math.abs(m))),m<0?"-"+e:e})()}`},[T,v]=t.useState(S()),[b,C]=t.useState(f||"");t.useEffect(()=>{f||C("today"===s?"vs yesterday":"yesterday"===s?"vs 1 day before":"7 days"===s?"vs last 7 days":"30 days"===s?"vs last 30 days":"custom"===s&&h?i.default.getAnalyticsCustomDateTimelineText(h):"")},[s,h]),t.useEffect(()=>{v(S())},[m]);const O="negative"===a?l.default:o.default,R="negative"===a?r.COLORS.background.negative.vibrant:"positive"===a?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder;return e.jsxs("div",{style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"},children:["number"==typeof n&&e.jsx(O,{color:R,height:16,width:16,style:Object.assign({marginRight:2},null!=y?y:{})}),"number"==typeof n&&a&&e.jsxs(d.Caption,{style:{color:R},children:["neutral"===a?0:n<1e3?n:">999","%"]}),!!m&&e.jsx(d.Caption,{style:{marginLeft:4,color:r.COLORS.content.placeholder},children:`(${T})`}),!m&&((null==g?void 0:g.length)||0)>0&&e.jsx(d.Caption,{style:{marginLeft:4,color:r.COLORS.content.placeholder},children:`${g}`}),s&&(j?e.jsx(c.Tooltip,{body:j,placement:"bottom",children:e.jsx(d.Caption,{style:{marginLeft:4,color:r.COLORS.content.placeholder},children:f||b})}):e.jsx(d.Caption,{style:{marginLeft:4,color:r.COLORS.content.placeholder},children:f||b}))]})};exports.AnalyticsTrend=({title:t,value:i,trendPercent:l,type:o="horizontal",timeline:m,customRange:y,tooltip:x,card:j=!0,rightSeparator:f=!1,size:S="big",share:T=!1,formatVal:v,prefixSymbol:b,trailingIcon:C,onTrailIconClick:O,iconTooltipBody:R,funnelPercent:w,isLoading:I,trendRaw:$,trendRawString:L,suffixText:q,trendStyle:D,trendContainerStyle:F,trendIconStyle:M,containerStyle:k,prevTrendDiff:P,relativePercentageDiff:V,isInternationalStore:z,Icon:_,iconContainerStyle:A,tooltipTimelineText:E,customTimelineText:N})=>{const B="big"===S?d.TitleLarge:d.TitleMedium,W=void 0!==l?l<0?"negative":0===l?"neutral":"positive":void 0,U=void 0!==l?T?Math.round(l):Math.abs(Math.round(l)):void 0;return e.jsx(h.AnalyticsTrendContainer,{card:j,style:Object.assign({},k),children:e.jsxs("div",{style:Object.assign({display:"flex",flexDirection:"row",gap:_?12:4,borderRightWidth:f?1:0,borderRightColor:r.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:j?0:24,paddingRight:j?0:24,height:"100%",justifyContent:_?"flex-start":"space-between",alignItems:"center"},null!=F?F:{}),children:[!!_&&e.jsx(h.IconContainer,{style:Object.assign({},A),children:e.jsx(_,{})}),e.jsxs("div",{style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=D?D:{}),children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"},children:[e.jsx(d.BodyCaption,{style:{color:r.COLORS.content.secondary},children:t}),x&&e.jsx(c.Tooltip,{body:x,placement:"right",width:300,children:e.jsx("div",{style:{display:"flex",cursor:"pointer",height:"100%"},children:e.jsx(a.default,{color:r.COLORS.content.primary,height:16,width:16})})})]}),e.jsxs("div",{style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},T?{justifyContent:"space-between"}:{}),children:[I&&e.jsx(n.ShimmerComponentStyled,{width:108,height:26}),!I&&e.jsx(B,{style:{color:r.COLORS.content.primary},children:void 0===i?"--":"number"==typeof i&&v?i>999?z?`${null!=b?b:""}${u.truncateValueForInternationalStore(i)} ${null!=q?q:""}`:`${null!=b?b:""}${u.truncateValueForIndianStore(i)} ${null!=q?q:""}`:`${null!=b?b:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(i)} ${null!=q?q:""}`:`${null!=b?b:""}${i} ${null!=q?q:""}`}),"number"==typeof V&&e.jsx(s.Tag,{tagText:`${V}%`,theme:"light",type:"neutral"}),"horizontal"===o&&!I&&!T&&e.jsx(p,{timeline:m,customRange:y,percent:U,direction:W,trendRaw:$,trendRawString:L,prefixSymbol:b,trendIconStyle:M,isInternationalStore:z,tooltipTimelineText:E,customTimelineText:N}),I&&!T&&"horizontal"===o&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===o&&!I&&void 0!==w&&e.jsx(s.Tag,{tagText:`${w} %`,theme:"light",type:"neutral"}),T&&!I&&void 0!==U&&e.jsx(s.Tag,{tagText:`${U} %`,theme:"light",type:"neutral"}),T||I||!P||0==P?e.jsx(e.Fragment,{}):e.jsx(s.Tag,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(P),theme:"light",type:"neutral"})]}),"vertical"===o&&!I&&!T&&e.jsx("div",{style:{marginTop:10},children:e.jsx(p,{timeline:m,customRange:y,percent:U,direction:W,trendRaw:$,trendRawString:L,prefixSymbol:b,trendIconStyle:M,isInternationalStore:z,tooltipTimelineText:E,customTimelineText:N})}),I&&"vertical"===o&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]}),R&&!I&&e.jsx(c.Tooltip,{body:R,placement:"right",children:C&&e.jsx("div",{className:"icon--holder",onClick:O,children:g.default.createElement(C,{height:20,width:20,color:r.COLORS.content.secondary})})})]})})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../shimmer/ShimmerComponent/ShimmerStyled.js"),i=require("../../utils/DateUtils.js"),r=require("../../constants/Theme.js"),l=require("../../assets/icons/arrow_down.svg.js"),s=require("../../assets/icons/arrow_up.svg.js"),o=require("../../assets/icons/info.svg.js"),a=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),d=require("../TypographyStyle.js"),g=require("./chart/utils/calcPercentage.js"),u=require("./CommonStyles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=h(t);const p=n=>{let{percent:o,direction:a,timeline:u,customRange:h,trendRaw:m,trendRawString:p,prefixSymbol:y,trendIconStyle:j,isInternationalStore:x,tooltipTimelineText:b,customTimelineText:f}=n;const S=()=>{const e=((null!=m?m:0)>0?"+":"")+(null!=y?y:"");return void 0===m?"--":`${null!=e?e:""}${(()=>{let e="--";if(m)return e=String(x?g.truncateValueForInternationalStore(Math.abs(m)):g.truncateValueForIndianStore(Math.abs(m))),m<0?"-"+e:e})()}`},[O,T]=t.useState(S()),[v,C]=t.useState(f||"");t.useEffect((()=>{f||C("today"===u?"vs yesterday":"yesterday"===u?"vs 1 day before":"7 days"===u?"vs last 7 days":"30 days"===u?"vs last 30 days":"custom"===u&&h?i.default.getAnalyticsCustomDateTimelineText(h):"")}),[u,h]),t.useEffect((()=>{T(S())}),[m]);const R="negative"===a?l.default:s.default,w="negative"===a?r.COLORS.background.negative.vibrant:"positive"===a?r.COLORS.background.positive.vibrant:r.COLORS.content.placeholder;return e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",flexDirection:"row",flexWrap:"wrap"}},{children:["number"==typeof o&&e.jsx(R,{color:w,height:16,width:16,style:Object.assign({marginRight:2},null!=j?j:{})}),"number"==typeof o&&a&&e.jsxs(d.Caption,Object.assign({style:{color:w}},{children:["neutral"===a?0:o<1e3?o:">999","%"]})),!!m&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:`(${O})`})),!m&&((null==p?void 0:p.length)||0)>0&&e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:`${p}`})),u&&(b?e.jsx(c.Tooltip,Object.assign({body:b,placement:"bottom"},{children:e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:f||v}))})):e.jsx(d.Caption,Object.assign({style:{marginLeft:4,color:r.COLORS.content.placeholder}},{children:f||v})))]}))};exports.AnalyticsTrend=t=>{let{title:i,value:l,trendPercent:s,type:h="horizontal",timeline:y,customRange:j,tooltip:x,card:b=!0,rightSeparator:f=!1,size:S="big",share:O=!1,formatVal:T,prefixSymbol:v,trailingIcon:C,onTrailIconClick:R,iconTooltipBody:w,funnelPercent:I,isLoading:$,trendRaw:L,trendRawString:q,suffixText:D,trendStyle:F,trendContainerStyle:M,trendIconStyle:k,containerStyle:P,prevTrendDiff:V,relativePercentageDiff:z,isInternationalStore:_,Icon:A,iconContainerStyle:E,tooltipTimelineText:N,customTimelineText:B}=t;const W="big"===S?d.TitleLarge:d.TitleMedium,U=void 0!==s?s<0?"negative":0===s?"neutral":"positive":void 0,G=void 0!==s?O?Math.round(s):Math.abs(Math.round(s)):void 0;return e.jsx(u.AnalyticsTrendContainer,Object.assign({card:b,style:Object.assign({},P)},{children:e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:A?12:4,borderRightWidth:f?1:0,borderRightColor:r.COLORS.stroke.primary,borderRightStyle:"solid",paddingLeft:b?0:24,paddingRight:b?0:24,height:"100%",justifyContent:A?"flex-start":"space-between",alignItems:"center"},null!=M?M:{})},{children:[!!A&&e.jsx(u.IconContainer,Object.assign({style:Object.assign({},E)},{children:e.jsx(A,{})})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"column",gap:4,height:"100%"},null!=F?F:{})},{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",gap:4,alignItems:"center"}},{children:[e.jsx(d.BodyCaption,Object.assign({style:{color:r.COLORS.content.secondary}},{children:i})),x&&e.jsx(c.Tooltip,Object.assign({body:x,placement:"right",width:300},{children:e.jsx("div",Object.assign({style:{display:"flex",cursor:"pointer",height:"100%"}},{children:e.jsx(o.default,{color:r.COLORS.content.primary,height:16,width:16})}))}))]})),e.jsxs("div",Object.assign({style:Object.assign({display:"flex",flexDirection:"row",gap:12,alignItems:"center"},O?{justifyContent:"space-between"}:{})},{children:[$&&e.jsx(n.ShimmerComponentStyled,{width:108,height:26}),!$&&e.jsx(W,Object.assign({style:{color:r.COLORS.content.primary}},{children:void 0===l?"--":"number"==typeof l&&T?l>999?_?`${null!=v?v:""}${g.truncateValueForInternationalStore(l)} ${null!=D?D:""}`:`${null!=v?v:""}${g.truncateValueForIndianStore(l)} ${null!=D?D:""}`:`${null!=v?v:""}${new Intl.NumberFormat("en-IN",{maximumFractionDigits:2}).format(l)} ${null!=D?D:""}`:`${null!=v?v:""}${l} ${null!=D?D:""}`})),"number"==typeof z&&e.jsx(a.Tag,{tagText:`${z}%`,theme:"light",type:"neutral"}),"horizontal"===h&&!$&&!O&&e.jsx(p,{timeline:y,customRange:j,percent:G,direction:U,trendRaw:L,trendRawString:q,prefixSymbol:v,trendIconStyle:k,isInternationalStore:_,tooltipTimelineText:N,customTimelineText:B}),$&&!O&&"horizontal"===h&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6}),"vertical"===h&&!$&&void 0!==I&&e.jsx(a.Tag,{tagText:`${I} %`,theme:"light",type:"neutral"}),O&&!$&&void 0!==G&&e.jsx(a.Tag,{tagText:`${G} %`,theme:"light",type:"neutral"}),O||$||!V||0==V?e.jsx(e.Fragment,{}):e.jsx(a.Tag,{tagText:(e=>{const t=Math.abs(e);return t%1!=0?`${t.toFixed(1)} %`:`${t} %`})(V),theme:"light",type:"neutral"})]})),"vertical"===h&&!$&&!O&&e.jsx("div",Object.assign({style:{marginTop:10}},{children:e.jsx(p,{timeline:y,customRange:j,percent:G,direction:U,trendRaw:L,trendRawString:q,prefixSymbol:v,trendIconStyle:k,isInternationalStore:_,tooltipTimelineText:N,customTimelineText:B})})),$&&"vertical"===h&&e.jsx(n.ShimmerComponentStyled,{height:20,width:141,marginTop:6})]})),w&&!$&&e.jsx(c.Tooltip,Object.assign({body:w,placement:"right"},{children:C&&e.jsx("div",Object.assign({className:"icon--holder",onClick:R},{children:m.default.createElement(C,{height:20,width:20,color:r.COLORS.content.secondary})}))}))]}))}))};

package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+export declare const AnalyticsChipContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    backgroundColor?: string | undefined;
+    width?: string | number | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AnalyticsMultiWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const MainDropdown: import("@emotion/styled").StyledComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import("react").ComponentType<any> | undefined;
+    forwardedAs?: string | import("react").ComponentType<any> | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & {
+    height?: string | undefined;
+    bgColor?: string | undefined;
+}, {}, {}>;
+export declare const ItemMenuContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    isSelected?: boolean | undefined;
+    isLastItem?: boolean | undefined;
+    isFirstItem?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AnalyticsTrendContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & {
+    card: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;