@bikdotai/bik-component-library 0.0.754 → 0.0.755-beta.0

package/dist/cjs/components/ProgressChecklist/MultiChecklistItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../accordion/Accordion.js"),i=require("./SimpleChecklistItem.js");exports.default=o=>{let{item:t,children:s,isOpen:c,onToggle:d}=o;const n="boolean"==typeof c?c:!!t.isActive,a=e.jsx(i.default,{header:t.header,subheader:t.subheader,icon:t.icon,activeIcon:t.activeIcon,completedIcon:t.completedIcon,isCompleted:t.isCompleted,isActive:t.isActive,tag:t.tag});return e.jsx(r.BikAccordion,Object.assign({header:a,headerStyles:{height:"auto",cursor:"pointer"},onToggleAccordion:d||(()=>{}),isOpen:n,skipHoverHeader:!0,showBorders:!0,borderRadius:"8px"},{children:s?e.jsx("div",Object.assign({style:{border:"none",padding:16}},{children:s})):null}))};

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { ALERT_TYPES } from '../alerts';
+import { TooltipProps } from '../tooltips/Tooltip';
+export interface ChecklistItemType {
+    id: string;
+    label: string;
+    description?: string;
+    completed?: boolean;
+}
+export interface SingleChecklistItemType {
+    id: string;
+    header: string;
+    subheader: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    completedIcon?: React.ReactNode;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    onSetup?: () => void;
+    alertText?: string | React.ReactNode;
+    alertType?: ALERT_TYPES;
+    tag?: {
+        tagText: string | number;
+        variant?: 'regular' | 'circle' | 'compressed';
+        type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+        theme?: 'light' | 'dark';
+        tooltip?: Omit<TooltipProps, 'children'>;
+    };
+    type: 'single';
+    buttonType?: 'primary' | 'secondary' | 'tertiary';
+    buttonText?: string;
+    buttonDisabled?: boolean;
+    hideRedirectButton?: boolean;
+    hideSetupButton?: boolean;
+}
+export interface MultiChecklistItemType {
+    id: string;
+    header: string;
+    subheader?: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    completedIcon?: React.ReactNode;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    onSetup?: () => void;
+    tag?: {
+        tagText: string | number;
+        variant?: 'regular' | 'circle' | 'compressed';
+        type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+        theme?: 'light' | 'dark';
+        tooltip?: Omit<TooltipProps, 'children'>;
+    };
+    type: 'multiple';
+    alertType?: ALERT_TYPES;
+    steps?: Array<{
+        id?: string;
+        text: string;
+        onClick?: () => void;
+        isCompleted?: boolean;
+    }>;
+    buttonType?: 'primary' | 'secondary' | 'tertiary';
+}
+export interface ProgressChecklistProps {
+    header?: string;
+    subheader?: string;
+    items?: Array<SingleChecklistItemType | MultiChecklistItemType>;
+    progressBarColor?: string;
+    headerAction?: React.ReactNode;
+    /** Whether to render the progress bar. Defaults to true. */
+    showProgressBar?: boolean;
+    /** Whether to remove border, border-radius, and padding. Defaults to false. */
+    noBorder?: boolean;
+}
+declare const ProgressChecklist: React.FC<ProgressChecklistProps>;
+export default ProgressChecklist;

package/dist/cjs/components/ProgressChecklist/ProgressChecklist.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),s=require("../../constants/Theme.js"),i=require("../../assets/icons/ActiveChecklistIcon.js"),r=require("../../assets/icons/CompletedChecklistIcon.js"),l=require("../../assets/icons/InactiveChecklistIcon.js"),n=require("../../assets/icons/info.svg.js"),o=require("../../assets/icons/SmallCheckIcon.js"),c=require("../alerts/Alert.js"),a=require("../alerts/AlertHelper.js"),d=require("../button/Button.js"),p=require("../progress-bar-v2/ProgressBarV2.js"),g=require("../tag/Tag.js"),u=require("../tooltips/Tooltip.js"),j=require("../TypographyStyle.js"),x=require("./MultiChecklistItem.js"),h=require("./ProgressChecklist.style.js"),C=require("./ProgressStepper.js");exports.default=y=>{let{header:v,subheader:b,items:m=[],progressBarColor:T,headerAction:S,showProgressBar:f=!0,noBorder:O=!1}=y;const[k,I]=t.useState(m);t.useEffect((()=>{I(m)}),[m]);const A=k.filter((e=>e.isCompleted)).length,q=k.length,B=q>0?A/q*100:0;return e.jsxs(h.ProgressChecklistContainer,Object.assign({noBorder:O},{children:[e.jsxs(h.HeaderSection,{children:[e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center"}},{children:[e.jsx(j.TitleMedium,{children:v}),S&&e.jsx("div",{children:S})]})),e.jsx(j.BodySecondary,Object.assign({color:s.COLORS.content.secondary},{children:b}))]}),f&&e.jsxs(h.ProgressBarSection,Object.assign({style:{display:"flex",alignItems:"center",gap:"16px"}},{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:e.jsx(p.ProgressBarV2,{progress:Math.round(B),type:p.ProgressBarType.LINE,matchParentWidth:!0,showProgress:!1,color:null!=T?T:s.COLORS.background.positive.vibrant,progressBarThickness:12})})),e.jsx("div",Object.assign({style:{display:"flex",justifyContent:"flex-end",alignItems:"center",minWidth:12}},{children:e.jsxs(j.TitleSmall,Object.assign({style:{color:s.COLORS.content.secondary,textAlign:"right"}},{children:[A," / ",q]}))}))]})),e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:k.map((t=>{var s,p,j,y,v,b,m,T;if("single"===t.type)return e.jsxs(h.SingleChecklistItem,Object.assign({isActive:t.isActive||!1},{children:[e.jsxs(h.SingleChecklistMainRow,{children:[e.jsx(h.SingleChecklistIconWrapper,{children:t.isCompleted?null!==(s=t.completedIcon)&&void 0!==s?s:e.jsx(r.CompletedChecklistIcon,{}):t.isActive?null!==(p=t.activeIcon)&&void 0!==p?p:e.jsx(i.ActiveChecklistIcon,{}):null!==(j=t.icon)&&void 0!==j?j:e.jsx(l.InactiveChecklistIcon,{})}),e.jsxs(h.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(h.SingleChecklistHeader,Object.assign({completed:!!t.isCompleted,isActive:!!t.isActive},{children:t.header})),(null===(y=t.tag)||void 0===y?void 0:y.tagText)&&(t.tag.tooltip?e.jsx(u.Tooltip,Object.assign({},t.tag.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(g.Tag,{tagText:t.tag.tagText,variant:t.tag.variant,type:t.tag.type,theme:t.tag.theme})}))})):e.jsx(g.Tag,{tagText:t.tag.tagText,variant:t.tag.variant,type:t.tag.type,theme:t.tag.theme}))]})),e.jsx(h.SingleChecklistSubheader,{children:t.subheader})]}),t.isCompleted&&!t.hideRedirectButton&&e.jsx("div",Object.assign({onClick:t.onSetup,style:{cursor:"pointer"}},{children:e.jsx(o.SmallCheckIcon,{style:{marginLeft:"12px"}})})),!t.isCompleted&&t.isActive&&!t.hideSetupButton&&e.jsx(h.SingleChecklistActionWrapper,{children:e.jsx(d.Button,{buttonText:null!==(v=t.buttonText)&&void 0!==v?v:"Setup",buttonType:null!==(b=t.buttonType)&&void 0!==b?b:"primary",onClick:t.onSetup,disabled:null!==(m=t.buttonDisabled)&&void 0!==m&&m})})]}),t.alertText&&e.jsx(h.SingleChecklistAlertRow,{children:e.jsx(c.Alert,{text:t.alertText,type:null!==(T=t.alertType)&&void 0!==T?T:a.ALERT_TYPES.WARNING,contentPosition:a.CONTENT_POSITION.START,textColor:t.alertType===a.ALERT_TYPES.BRAND?"#4B1583":"",icon:t=>e.jsx(n.default,Object.assign({},t))})})]}),t.id);if("multiple"===t.type){const s=t.steps&&t.steps.length>0?t.steps.map(((e,s)=>{var i;return{id:null!==(i=e.id)&&void 0!==i?i:`${t.id}-sub-${s+1}`,text:e.text,label:e.text,onClick:e.onClick,isCompleted:!!e.isCompleted}})):[{id:`${t.id}-sub-1`,text:"Connect",label:"Connect",isCompleted:!1},{id:`${t.id}-sub-2`,text:"Configure",label:"Configure",isCompleted:!1},{id:`${t.id}-sub-3`,text:"Verify",label:"Verify",isCompleted:!1}];return e.jsx(x.default,Object.assign({item:t},{children:e.jsx(C.default,{steps:s,isStepperActive:t.isActive})}),t.id)}}))}))]}))};

package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.d.ts

@@ -0,0 +1,32 @@
+export declare const ProgressChecklistContainer: import("styled-components").StyledComponent<"div", any, {
+    noBorder?: boolean | undefined;
+}, never>;
+export declare const HeaderSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProgressBarSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChecklistItemsSection: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChecklistItem: import("styled-components").StyledComponent<"div", any, {
+    completed?: boolean | undefined;
+}, never>;
+export declare const ChecklistCheckbox: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const ChecklistItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChecklistItemText: import("styled-components").StyledComponent<"p", any, {
+    completed?: boolean | undefined;
+}, never>;
+export declare const ChecklistItemDescription: import("styled-components").StyledComponent<"p", any, {
+    completed?: boolean | undefined;
+}, never>;
+export declare const SingleChecklistItem: import("styled-components").StyledComponent<"div", any, {
+    isActive: boolean;
+}, never>;
+export declare const SingleChecklistMainRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SingleChecklistIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SingleChecklistContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SingleChecklistHeader: import("styled-components").StyledComponent<"div", any, {
+    completed?: boolean | undefined;
+    isActive?: boolean | undefined;
+}, never>;
+export declare const SingleChecklistSubheader: import("styled-components").StyledComponent<"div", any, {
+    isActive?: boolean | undefined;
+}, never>;
+export declare const SingleChecklistActionWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SingleChecklistAlertRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/cjs/components/ProgressChecklist/ProgressChecklist.style.js

@@ -0,0 +1,133 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(e);const o=i.default.div`
+	border-radius: ${e=>e.noBorder?"0":"8px"};
+	border: ${e=>e.noBorder?"none":"1px solid #e0e0e0"};
+	padding: ${e=>e.noBorder?"0":"24px"};
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	background: ${t.COLORS.surface.standard};
+
+	.accordion__overview {
+		padding: 16px !important;
+		border-bottom: none;
+	}
+`,n=i.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+`,l=i.default.div`
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+`;i.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	overflow-y: auto;
+	flex: 1;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: ${t.COLORS.stroke.primary};
+		border-radius: 3px;
+	}
+`,i.default.div`
+	display: flex;
+	align-items: flex-start;
+	gap: 12px;
+	padding: 12px;
+	background: ${e=>e.completed?"#F0F7F4":t.COLORS.surface.standard};
+	border: 1px solid
+		${e=>e.completed?"#D4E9E3":t.COLORS.stroke.primary};
+	border-radius: 6px;
+	cursor: pointer;
+	transition: all 0.2s ease;
+
+	&:hover {
+		background: ${e=>e.completed?"#E8F4F0":t.COLORS.background.base};
+	}
+`,i.default.input`
+	width: 18px;
+	height: 18px;
+	margin-top: 2px;
+	cursor: pointer;
+	flex-shrink: 0;
+`,i.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+`,i.default.p`
+	margin: 0;
+	font-size: 14px;
+	font-weight: 500;
+	line-height: 20px;
+	color: ${e=>e.completed?t.COLORS.content.secondary:t.COLORS.content.primary};
+	text-decoration: ${e=>e.completed?"line-through":"none"};
+`,i.default.p`
+	margin: 0;
+	font-size: 12px;
+	font-weight: 400;
+	line-height: 16px;
+	color: ${t.COLORS.content.secondary};
+	opacity: ${e=>e.completed?.6:1};
+`;const a=i.default.div`
+	border-radius: 8px;
+	border: 1px solid
+		${e=>e.isActive?t.COLORS.stroke.primary:"#E0E0E0"};
+	padding: 16px;
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	background: ${t.COLORS.surface.standard};
+	transition: all 0.2s ease;
+
+	&:hover {
+		border-color: ${e=>e.isActive?t.COLORS.stroke.primary:"#D0D0D0"};
+	}
+`,d=i.default.div`
+	display: flex;
+	align-items: center;
+	gap: 16px;
+	width: 100%;
+`,p=i.default.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+`,s=i.default.div`
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	flex: 1;
+`,c=i.default.div`
+	font-size: 16px;
+	font-weight: 600;
+	line-height: 24px;
+	color: ${e=>e.completed?t.COLORS.background.positive.vibrant:e.isActive?t.COLORS.content.primary:t.COLORS.content.placeholder} !important;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	gap: 12px;
+`,x=i.default.div`
+	font-size: 14px;
+	font-weight: 400;
+	line-height: 20px;
+	color: ${e=>e.isActive?t.COLORS.content.secondary:t.COLORS.content.placeholder};
+	margin: 0;
+`,f=i.default.div`
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	flex-shrink: 0;
+`,u=i.default.div`
+	width: 100%;
+	margin-top: 8px;
+`;exports.HeaderSection=n,exports.ProgressBarSection=l,exports.ProgressChecklistContainer=o,exports.SingleChecklistActionWrapper=f,exports.SingleChecklistAlertRow=u,exports.SingleChecklistContent=s,exports.SingleChecklistHeader=c,exports.SingleChecklistIconWrapper=p,exports.SingleChecklistItem=a,exports.SingleChecklistMainRow=d,exports.SingleChecklistSubheader=x;

package/dist/cjs/components/ProgressChecklist/ProgressStepper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface StepItem {
+    id?: string;
+    text: string;
+    label?: string;
+    onClick?: () => void;
+    isCompleted?: boolean;
+}
+interface ProgressStepperProps {
+    steps?: StepItem[];
+    onStepClick?: (id: string) => void;
+    isStepperActive?: boolean;
+}
+declare const _default: React.NamedExoticComponent<ProgressStepperProps>;
+export default _default;

package/dist/cjs/components/ProgressChecklist/ProgressStepper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),l=require("../button/Button.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(t);const s=n=>{let{steps:s=[],onStepClick:o,isStepperActive:r}=n;var a,c;const p=s.length>0?s:[{id:"step-1",text:"Step One"},{id:"step-2",text:"Step Two"},{id:"step-3",text:"Step Three"}],[u,x]=t.useState(null!==(c=null===(a=p[0])||void 0===a?void 0:a.id)&&void 0!==c?c:null);return e.jsx("div",Object.assign({style:{paddingLeft:52}},{children:e.jsx("div",Object.assign({style:{margin:0,padding:0,display:"flex",flexDirection:"column",gap:12}},{children:p.map(((t,n)=>{var s,a,c,h,v,g,C;return e.jsxs(d.default.Fragment,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:8}},{children:[(()=>{var i;const l=(0===n||(null===(i=p[n-1])||void 0===i?void 0:i.isCompleted))&&!0===r;return!0===t.isCompleted?e.jsx("div",Object.assign({style:{width:24,height:24,flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsxs("svg",Object.assign({width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[e.jsx("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",fill:"#EFE6F9"}),e.jsx("rect",{x:"0.5",y:"0.5",width:"23",height:"23",rx:"11.5",stroke:"#4B1583"}),e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M17.8047 7.52851C18.0651 7.78886 18.0651 8.21097 17.8047 8.47132L10.4714 15.8047C10.2111 16.065 9.78894 16.065 9.5286 15.8047L6.19526 12.4713C5.93491 12.211 5.93491 11.7889 6.19526 11.5285C6.45561 11.2682 6.87772 11.2682 7.13807 11.5285L10 14.3904L16.8619 7.52851C17.1223 7.26816 17.5444 7.26816 17.8047 7.52851Z",fill:"#4B1583"})]}))})):e.jsx("div",Object.assign({style:{width:24,height:24,borderRadius:30,padding:4,display:"flex",alignItems:"center",justifyContent:"center",boxSizing:"border-box",background:l?"#4B1583":"transparent",color:l?"#FFFFFF":"#BDBDBD",border:"1px solid "+(l?"#4B1583":"#E0E0E0"),fontSize:12,lineHeight:"12px",flex:"0 0 24px"},"aria-hidden":!0},{children:e.jsx("span",Object.assign({style:{fontSize:12,fontWeight:500}},{children:n+1}))}))})(),e.jsx("div",Object.assign({style:{display:"flex",alignItems:"center",justifyContent:"flex-start",minWidth:0},"aria-label":`Open ${null!==(a=null!==(s=t.label)&&void 0!==s?s:t.text)&&void 0!==a?a:`step ${n+1}`}`},{children:e.jsx(l.Button,{buttonText:null!==(h=null!==(c=t.label)&&void 0!==c?c:t.text)&&void 0!==h?h:`Step ${n+1}`,buttonType:"text",buttonTextColor:t.isCompleted?i.COLORS.text.secondary:0!==n&&!0!==(null===(v=p[n-1])||void 0===v?void 0:v.isCompleted)||!r?i.COLORS.content.inactive:"#4B1583",matchParentWidth:!1,size:"small",style:{width:"fit-content",paddingLeft:0,textDecoration:"none",textDecorationLine:"none"},onClick:()=>{var e,i;x(null!==(e=t.id)&&void 0!==e?e:u),(!t.isCompleted&&r&&(0===n||!0===(null===(i=p[n-1])||void 0===i?void 0:i.isCompleted))||t.isCompleted)&&(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}})})),!t.isCompleted&&(0===n||!0===(null===(g=p[n-1])||void 0===g?void 0:g.isCompleted))&&r&&e.jsx("div",Object.assign({style:{width:20,height:20,display:"flex",alignItems:"center",justifyContent:"center",cursor:"pointer"},"aria-hidden":!0,onClick:e=>{var i,l;x(null!==(i=t.id)&&void 0!==i?i:u),t.isCompleted||!r||0!==n&&!0!==(null===(l=p[n-1])||void 0===l?void 0:l.isCompleted)||(t.onClick?t.onClick():t.id&&(null==o||o(t.id)))}},{children:e.jsx("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M5.83333 6.66667C5.3731 6.66667 5 6.29357 5 5.83333C5 5.3731 5.3731 5 5.83333 5H14.1667C14.6269 5 15 5.3731 15 5.83333V14.1667C15 14.6269 14.6269 15 14.1667 15C13.7064 15 13.3333 14.6269 13.3333 14.1667V7.84518L6.42259 14.7559C6.09715 15.0814 5.56951 15.0814 5.24408 14.7559C4.91864 14.4305 4.91864 13.9028 5.24408 13.5774L12.1548 6.66667H5.83333Z",fill:"#4B1583"})}))}))]})),n!==p.length-1&&e.jsx("div",{"aria-hidden":!0,style:{width:8,height:1,borderRadius:2,background:"#BDBDBD",transform:"rotate(90deg)",marginLeft:8}})]},null!==(C=t.id)&&void 0!==C?C:`step-${n}`)}))}))}))};var o=d.default.memo(s);exports.default=o;

package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { TooltipProps } from '../tooltips/Tooltip';
+interface TagProps {
+    tagText: string | number;
+    variant?: 'regular' | 'circle' | 'compressed';
+    type?: 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+    theme?: 'light' | 'dark';
+    tooltip?: Omit<TooltipProps, 'children'>;
+}
+interface SimpleChecklistItemProps {
+    header: string;
+    subheader?: string;
+    icon?: React.ReactNode;
+    activeIcon?: React.ReactNode;
+    completedIcon?: React.ReactNode;
+    isActive?: boolean;
+    isCompleted?: boolean;
+    tag?: TagProps;
+}
+declare const SimpleChecklistItem: React.FC<SimpleChecklistItemProps>;
+export default SimpleChecklistItem;

package/dist/cjs/components/ProgressChecklist/SimpleChecklistItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/ActiveChecklistIcon.js"),s=require("../../assets/icons/CompletedChecklistIcon.js"),i=require("../../assets/icons/InactiveChecklistIcon.js"),l=require("../tag/Tag.js"),c=require("../tooltips/Tooltip.js"),n=require("./ProgressChecklist.style.js");exports.default=r=>{let{header:a,subheader:o,icon:h,activeIcon:j,completedIcon:d,isActive:x,isCompleted:g,tag:p}=r;return e.jsx("div",{children:e.jsxs(n.SingleChecklistMainRow,{children:[e.jsx(n.SingleChecklistIconWrapper,{children:g?null!=d?d:e.jsx(s.CompletedChecklistIcon,{}):x?null!=j?j:e.jsx(t.ActiveChecklistIcon,{}):null!=h?h:e.jsx(i.InactiveChecklistIcon,{})}),e.jsxs(n.SingleChecklistContent,{children:[e.jsxs("div",Object.assign({style:{display:"flex",alignItems:"center",gap:12}},{children:[e.jsx(n.SingleChecklistHeader,Object.assign({completed:g,isActive:x},{children:a})),(null==p?void 0:p.tagText)&&(p.tooltip?e.jsx(c.Tooltip,Object.assign({},p.tooltip,{children:e.jsx("span",Object.assign({style:{display:"inline-flex"}},{children:e.jsx(l.Tag,{tagText:p.tagText,variant:p.variant,type:p.type,theme:p.theme})}))})):e.jsx(l.Tag,{tagText:p.tagText,variant:p.variant,type:p.type,theme:p.theme}))]})),o&&e.jsx(n.SingleChecklistSubheader,Object.assign({isActive:x},{children:o}))]})]})})};

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

@@ -0,0 +1,2 @@
+export { default as ProgressChecklist } from './ProgressChecklist';
+export type { ChecklistItemType } from './ProgressChecklist';

package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/components/EventsTrigger.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
 declare const EventsTrigger: React.FC<QueryBuilderNodeProps>;
 export default EventsTrigger;

package/dist/cjs/components/QueryBuilder/Triggers/EVENTS/selectors/useIGTriggerNameCacheSelector.d.ts

@@ -1,2 +1,2 @@
-import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
+import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
 export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];

package/dist/cjs/components/QueryBuilder/Triggers/IG/components/IGTrigger.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { QueryBuilderNodeProps } from "../../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderNodeProps } from "../../../Types/QueryBuilderNodeProps.type";
 declare const IGTrigger: React.FC<QueryBuilderNodeProps>;
 export default IGTrigger;

package/dist/cjs/components/QueryBuilder/Triggers/IG/selectors/useIGTriggerNameCacheSelector.d.ts

@@ -1,2 +1,2 @@
-import { QueryBuilderAPIData } from "../../../types/QueryBuilderAPI.type";
+import { QueryBuilderAPIData } from "../../../Types/QueryBuilderAPI.type";
 export declare const useIGTriggerNameCacheSelector: () => QueryBuilderAPIData[];

package/dist/cjs/components/QueryBuilder/Triggers/components/BaseTriggerQueryBuilderNode.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { DropdownOption } from "../../../dropdown/type";
-import { QueryBuilderProperty } from "../../types/QueryBuilder.type";
-import { QueryBuilderNodeProps } from "../../types/QueryBuilderNodeProps.type";
+import { QueryBuilderProperty } from "../../Types/QueryBuilder.type";
+import { QueryBuilderNodeProps } from "../../Types/QueryBuilderNodeProps.type";
 declare const BaseTriggerQueryBuilderNode: React.FC<QueryBuilderNodeProps & {
     cacheKey: string;
     propertyAddBtnText: string;

package/dist/cjs/components/post-live-checklist/PostLiveChecklist.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface ChecklistItem {
+    id: string;
+    isCompleted: boolean;
+    isOpen?: boolean;
+    header: string;
+    image?: string;
+    subHeader?: string;
+}
+export interface ButtonGroupItem {
+    id: string;
+    title: string;
+    icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+export interface PostLiveChecklistProps {
+    title?: string;
+    subtitle?: string;
+    marketingChecklist?: ChecklistItem[];
+    supportChecklist?: ChecklistItem[];
+    onChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;
+    useCaseType?: 'marketing' | 'support' | 'both' | string;
+}
+export declare const PostLiveChecklist: React.FC<PostLiveChecklistProps>;

package/dist/cjs/components/post-live-checklist/PostLiveChecklist.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/MarketingIconTab.js"),s=require("../../assets/icons/SupportIconTab.js"),i=require("react"),r=require("../buttonGroup/ButtonGroup.js"),n=require("../post-live-checklist-item/PostLiveChecklistItem.js"),o=require("../TypographyStyle.js"),a=require("../../constants/Theme.js");exports.PostLiveChecklist=l=>{let{title:u="Boost Performance",subtitle:c="Enable these features to make your assistant smarter",marketingChecklist:d=[],supportChecklist:p=[],onChecklistSetup:m,useCaseType:g}=l;var h;const[j,b]=i.useState("marketing"),[k,C]=i.useState("none"),[x,f]=i.useState("marketing");i.useEffect((()=>{const e=d.filter((e=>!e.isCompleted)).length,t=p.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?C("tabs"):(C("list"),e>0&&f("marketing"),t>0&&f("support")):C("none")}),[d,p]);const O=(()=>{const e=[{id:"marketing",title:"Marketing",icon:t.default},{id:"support",title:"Support",icon:s.default}];if(!g)return e;return"support"===String(g).toLowerCase()?[e[1],e[0]]:e})();i.useEffect((()=>{"tabs"===k&&O.length>0&&b(O[0].id)}),[k,g]);const v=e=>e.toUpperCase(),y=(e,t)=>{m&&m(e,t)};if("none"===k)return null;const S="tabs"===k?"marketing"===j?d:p:"marketing"===x?d:p;return e.jsxs("div",Object.assign({style:{padding:16,border:`1px solid ${a.COLORS.stroke.primary}`,backgroundColor:a.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",{children:[e.jsx(o.TitleRegular,Object.assign({color:"#4B1583"},{children:u})),e.jsx(o.BodySecondary,Object.assign({color:(null===(h=a.COLORS.content)||void 0===h?void 0:h.secondary)||"#666666"},{children:c}))]}),e.jsx("div",Object.assign({style:{marginTop:12}},{children:"tabs"===k?e.jsxs(e.Fragment,{children:[e.jsx(r.ButtonGroup,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>b(e),activeButtonId:j,buttonGroup:O}),e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:S.map((t=>e.jsx(n.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>y(t.id,v(j))},t.id)))}))]}):e.jsx("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:S.map((t=>e.jsx(n.PostLiveChecklistItem,{isCompleted:t.isCompleted,isOpen:t.isOpen,header:t.header,image:t.image,subHeader:t.subHeader,onSetup:()=>y(t.id,v(x))},t.id)))}))}))]}))};

package/dist/cjs/components/post-live-checklist/PostLiveChecklist.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export default _default;
+export declare const Default: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const WithBothChecklists: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const SupportFirstOrdering: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const ListModeSupport: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const ListModeMarketing: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const AllCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const CustomTitles: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;
+export declare const WithSomeCompleted: ComponentStory<import("react").FC<import("./PostLiveChecklist").PostLiveChecklistProps>>;

package/dist/cjs/components/post-live-checklist/index.d.ts

@@ -0,0 +1,2 @@
+export { PostLiveChecklist } from './PostLiveChecklist';
+export type { PostLiveChecklistProps, ChecklistItem, } from './PostLiveChecklist';

package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface PostLiveChecklistItemProps {
+    isCompleted: boolean;
+    header: string;
+    subHeader?: string;
+    isOpen?: boolean;
+    onSetup?: () => void;
+    image?: string;
+}
+export declare const PostLiveChecklistItem: React.FC<PostLiveChecklistItemProps>;

package/dist/cjs/components/post-live-checklist-item/PostLiveChecklistItem.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/CheckIndicatorIcon.js"),t=require("../../assets/icons/chevronDownOutline.svg.js"),i=require("../../assets/icons/chevronUpOutline.svg.js"),n=require("react"),r=require("../button/Button.js"),c=require("../TypographyStyle.js"),o=require("../../constants/Theme.js");exports.PostLiveChecklistItem=l=>{const{isCompleted:d,header:a,subHeader:u,isOpen:j=!1}=l,{onSetup:x}=l,[h,p]=n.useState(j);return n.useEffect((()=>{p(j)}),[j]),e.jsxs("div",Object.assign({style:{backgroundColor:h?o.COLORS.surface.subdued:o.COLORS.surface.standard,borderRadius:8}},{children:[e.jsxs("div",Object.assign({style:{color:o.COLORS.surface.standard,padding:16,display:"flex",flexDirection:"row",justifyContent:"space-between",alignItems:"center",cursor:d?"default":"pointer"},onClick:()=>!d&&p(!h)},{children:[e.jsx(c.TitleSmall,Object.assign({color:h?"#4B1583":o.COLORS.content.primary},{children:a})),d?e.jsx(s.CheckIndicatorIcon,{}):h?e.jsx(i.default,{width:24,height:24,color:o.COLORS.content.secondary}):e.jsx(t.default,{width:24,height:24,color:o.COLORS.content.secondary})]})),e.jsx("div",{children:h&&e.jsx("div",Object.assign({style:{display:"flex",flexDirection:"column",gap:"16px"}},{children:e.jsxs("div",Object.assign({style:{padding:16,paddingTop:0,gap:16,display:"flex",flexDirection:"column"}},{children:[e.jsx("div",Object.assign({style:{height:200,backgroundColor:"#EFE6F9",borderRadius:8,overflow:"hidden"}},{children:e.jsx("img",{src:l.image,alt:"checklist item",style:{width:"100%",height:"100%",objectFit:"cover",display:"block"}})})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",alignItems:"center",gap:16}},{children:[e.jsx("div",Object.assign({style:{flex:2}},{children:e.jsx(c.BodyCaption,Object.assign({color:o.COLORS.content.secondary,numberOfLines:3},{children:u}))})),e.jsx("div",Object.assign({style:{flex:1,display:"flex",justifyContent:"flex-end"}},{children:e.jsx(r.Button,{buttonType:"primary",size:"small",buttonText:"Setup",onClick:()=>{x&&x()}})}))]}))]}))}))})]}))};

package/dist/cjs/components/post-live-checklist-item/index.d.ts

@@ -0,0 +1 @@
+export * from './PostLiveChecklistItem';

package/dist/cjs/index.d.ts

@@ -6,6 +6,7 @@ export { AmplitudeEvent };
 export { StringUtils };
 export * from './constants/Theme';
 export * from './constants/zindex';
+export * from './assets/icons';
 export * from './components/checkBox';
 export * from './components/list-item';
 export * from './components/pagination';
@@ -101,6 +102,9 @@ export * from './components/dot-pulse';
 export * from './components/bik-chatbot';
 export * from './components/banner';
 export * from './components/feature-announcements';
+export * from './components/post-live-checklist-item';
+export * from './components/post-live-checklist';
+export * from './components/ProgressChecklist';
 export * from './components/BikGiftedChat';
 export * from './components/markdown';
 export * from './components/vertical-full-screen-modal';