@bikdotai/bik-component-library 0.0.687-beta.7 → 0.0.687-beta.9

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

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

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

@@ -0,0 +1,29 @@
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("styled-components"));const i=e.default.div`
+	width: ${t=>t.width?`${t.width}px`:"400px"};
+	position: relative;
+	border-radius: 4px;
+	padding: 32px 24px 24px 24px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+`,n=e.default.div`
+	width: ${t=>t.iconWidth?t.iconWidth:64}px;
+	height: ${t=>t.iconHeight?t.iconHeight:64}px;
+	display: flex;
+	justify-content: center;
+	align-items: end;
+`,d=e.default.div`
+	margin-top: ${t=>"SMALL"===t.size?8:16}px;
+	text-align: center;
+	max-width: 100%;
+`,a=e.default.div`
+	display: flex;
+	margin-top: ${t=>"SMALL"===t.size?8:24}px;
+	gap: 12px;
+	width: 100%;
+`,o=e.default.div`
+	margin-top: 4px;
+	max-width: 100%;
+	text-align: center;
+	max-width: 100%;
+`;exports.ButtonContainer=a,exports.StateComponentContainer=i,exports.StateHeading=d,exports.StateIcon=n,exports.StateSubline=o;

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

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

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

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

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

@@ -0,0 +1,30 @@
+import { ReactJSXElement } from '@emotion/react/types/jsx-namespace';
+import React__default from 'react';
+import { Type } from '../button/model.js';
+import { StateInterface, ButtonTypes, ButtonActions } from '../states/StateComponent.js';
+
+type StateModalComponentProps = {
+    states: StateInterface;
+    heading: string;
+    subline: string;
+    icon?: JSX.Element;
+    isButtonEnabled: boolean;
+    type?: ButtonTypes;
+    buttonText?: string;
+    buttonIcon?: ReactJSXElement;
+    onButtonClick?: (buttonClicked: ButtonActions) => void;
+    leadingIcon?: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
+    width?: number;
+    onClose?: () => void;
+    zIndex?: number;
+    headerImage?: string;
+    iconWidth?: number;
+    iconHeight?: number;
+    closeButtonType?: Type;
+    'data-test'?: string;
+    secondaryButtonText?: string;
+};
+declare const StateModalComponent: React__default.FC<React__default.PropsWithChildren<StateModalComponentProps>>;
+
+export { StateModalComponent };
+export type { StateModalComponentProps };

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

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

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

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

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

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

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

@@ -0,0 +1,83 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("./themes.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(e);const o=n.default.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 16px;
+`,r=n.default.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 8px;
+
+	.pointer {
+		cursor: pointer;
+	}
+	.blocked {
+		cursor: not-allowed;
+	}
+
+	.hover-container {
+		padding: 6px 8px 6px 6px;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 8px;
+		&:hover {
+			padding: ${e=>e.isInActive?void 0:"6px 8px 6px 6px"};
+			background: ${e=>e.isInActive?void 0:"#f0f0f0"};
+			border-radius: ${e=>e.isInActive?void 0:"30px"};
+		}
+	}
+	.badge {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		padding: 4px;
+		gap: 10px;
+		width: 32px;
+		height: 24px;
+		background: ${e=>t.getTheme(e.selectedState).badgeBackground};
+		border: 1px solid ${e=>t.getTheme(e.selectedState).badgeBorder};
+		border-radius: 30px;
+		.badge-text {
+			font-weight: ${e=>t.getTheme(e.selectedState).fontWeight};
+			color: ${e=>t.getTheme(e.selectedState).badgeColor};
+		}
+	}
+	.step-text {
+		font-weight: ${e=>t.getTheme(e.selectedState).fontWeight};
+		font-feature-settings: 'tnum' on, 'lnum' on, 'case' on, 'ss04' on;
+		color: ${e=>t.getTheme(e.selectedState).textColor};
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		max-width: ${e=>e.stepsCount>2?200:250}px;
+	}
+	.horizontal-divider {
+		width: 48px;
+		height: 1px;
+		background: ${e=>t.getTheme(e.selectedState).dividerBackground};
+		margin-left: 8px;
+	}
+`;n.default.div`
+	.top-bar {
+		position: sticky;
+		top: 0px;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		background: white;
+	}
+	.main-container {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		overflow-y: auto;
+	}
+`,exports.SingleStepperChildContainer=r,exports.StepperContainer=o;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.getTheme=function(t){switch(t){case"active":return{textColor:`${e.COLORS.content.positive}`,badgeColor:`${e.COLORS.content.primaryInverse}`,badgeBackground:`${e.COLORS.background.positive.vibrant}`,badgeBorder:"transparent",dividerBackground:`${e.COLORS.content.positive}`,fontWeight:"600"};case"completed":return{textColor:`${e.COLORS.content.positive}`,badgeColor:`${e.COLORS.content.positive}`,badgeBackground:`${e.COLORS.background.positive.light}`,badgeBorder:`${e.COLORS.content.positive}`,dividerBackground:`${e.COLORS.content.positive}`,fontWeight:"400"};case"error":return{textColor:`${e.COLORS.content.negative}`,badgeBackground:`${e.COLORS.background.negative.light}`,badgeColor:`${e.COLORS.content.negative}`,badgeBorder:`${e.COLORS.content.negative}`,dividerBackground:`${e.COLORS.content.negative}`,fontWeight:"400"};case"inactive":return{textColor:`${e.COLORS.content.inactive}`,badgeBackground:"transparent",badgeColor:`${e.COLORS.content.inactive}`,badgeBorder:`${e.COLORS.content.inactive}`,dividerBackground:`${e.COLORS.content.inactive}`,fontWeight:"400"};default:return{textColor:`${e.COLORS.content.secondary}`,background:"trasparent",badgeColor:`${e.COLORS.content.secondary}`,badgeBorder:`${e.COLORS.content.secondary}`,dividerBackground:`${e.COLORS.content.secondary}`,fontWeight:"400"}}};

package/dist/cjs/components/switch/Switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { SwitchProps } from './model.js';
+
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
+
+export { Switch };

package/dist/cjs/components/switch/Switch.js

@@ -0,0 +1,61 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@emotion/styled"),r=require("react"),o=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=a(t);const l=r.forwardRef((({customThumbColor:t,trackColor:a,trackHeight:i,trackLength:l,disabled:u,value:c,onValueChange:p,duration:b,containerStyle:f,type:g,isLoading:h,"data-test":x})=>{const{colorsV2:k}=o.DEFAULT_THEME,[v,m]=r.useState(c),[y,C]=r.useState(h??!1),w=b??200;r.useEffect((()=>{"boolean"==typeof h&&C(h)}),[h]),r.useEffect((()=>{m(c)}),[c]);const $=u?{false:k.background.inactive,true:k.background.inactive}:{false:a?.false??"greenred"===g?k.background.negative.light:k.background.base,true:a?.true??"greenred"===g?k.background.positive.vibrant:k.background.brand},L={false:"greenred"===g?k.stroke.negative.lightAlt:k.stroke.primary,true:"greenred"===g?k.background.positive.vibrant:k.background.brand},j=u?{false:k.content.inactive,true:k.content.inactive}:{false:t?.false??"greenred"===g?k.content.negative:k.text.primary,true:t?.true??k.surface.standard},S=g?{false:"greenred"===g?k.stroke.negative.lightAlt:k.stroke.primary,true:"greenred"===g?k.stroke.positive.lightAlt:k.background.brandLight}:{false:k.stroke.primary,true:k.stroke.primary};return e.jsx(e.Fragment,{children:e.jsx(n,{"data-test":x,trackLength:l??40,trackHeight:i??20,onClick:()=>async function(){if(!u){"boolean"!=typeof h&&C(!0);try{await(p?.(!v)),m(!v)}catch(e){console.log(e)}"boolean"!=typeof h&&C(!1)}}(),trackColor:$,value:v,style:f,borderColor:L,duration:w,disabled:u,outlineColor:S,children:y?e.jsx(d,{value:v,trackColor:$}):e.jsx(s,{value:v,duration:w,thumbColor:j})})})}));l.displayName="Switch";const n=i.default.div`
+	display: flex;
+	flex-direction: row;
+	margin-top: 5px;
+	margin-bottom: 5px;
+	border-radius: 30px;
+	background-color: red;
+	background-color: ${e=>e.value?e.trackColor.true:e.trackColor.false};
+	width: ${e=>e.trackLength+"px"};
+	height: ${e=>e.trackHeight+"px"};
+	border-width: ${e=>e.disabled?"0px":"1px"};
+	border-style: solid;
+	border-color: ${e=>e.value?e.borderColor.true:e.borderColor.false};
+
+	transition: ${e=>e.duration/1e3+"s ease all"};
+	align-items: center;
+	cursor: ${e=>e.disabled?"default":"pointer"};
+	:focus {
+		outline: ${e=>e.value?e.outlineColor.true:e.outlineColor.false};
+		outline-style: solid;
+		outline-offset: 2px;
+		outline-width: 2px;
+	}
+	:active {
+		outline: ${e=>e.value?e.outlineColor.true:e.outlineColor.false};
+		outline-style: solid;
+		outline-offset: 2px;
+		outline-width: 2px;
+	}
+`,s=i.default.div`
+	height: 12px;
+	width: 12px;
+	margin: 4px;
+	border-radius: 8px;
+	position: relative;
+	left: ${e=>e.value?"calc(100% - 20px)":"0px"};
+	transition: ${e=>e.duration/1e3+"s ease all"};
+	background-color: ${e=>e.value?e.thumbColor.true:e.thumbColor.false};
+`,d=i.default.div`
+	border-width: 2px;
+	border-style: solid;
+	border-color: ${e=>e.value?e.trackColor.true:e.trackColor.false};
+	border-top-width: 2px;
+	border-top-style: solid;
+	border-top-color: ${e=>e.value?o.COLORS.text.white:o.COLORS.background.brand};
+	border-radius: 50%;
+	height: 8px;
+	width: 8px;
+	margin: 4px;
+	position: relative;
+	left: ${e=>e.value?"calc(100% - 20px)":"0px"};
+	animation: spin 1s linear infinite;
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+`;exports.Loader=d,exports.Switch=l,exports.SwitchContainer=n,exports.Thumb=s;

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

@@ -0,0 +1,20 @@
+interface SwitchProps extends React.HTMLAttributes<HTMLDivElement> {
+    customThumbColor?: SwitchColorProps;
+    trackColor?: SwitchColorProps;
+    onValueChange: (val: boolean) => Promise<boolean | void | string>;
+    value: boolean;
+    trackLength?: number;
+    trackHeight?: number;
+    disabled?: boolean;
+    duration?: number;
+    containerStyle?: React.CSSProperties;
+    type?: 'brand' | 'greenred';
+    isLoading?: boolean;
+    'data-test'?: string;
+}
+interface SwitchColorProps {
+    false: string;
+    true: string;
+}
+
+export type { SwitchColorProps, SwitchProps };

package/dist/cjs/components/tabs/Tabs.d.ts

@@ -0,0 +1,7 @@
+import React__default from 'react';
+import { TabViewHeaderProps, TabItemComponentProps } from './Tabs.model.js';
+
+declare const Tabs: React__default.FC<TabViewHeaderProps>;
+declare const TabItemComponent: React__default.FC<TabItemComponentProps>;
+
+export { TabItemComponent, Tabs };

package/dist/cjs/components/tabs/Tabs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../../constants/Theme.js"),a=require("../tag/Tag.js"),s=require("./Tabs.styles.js");const n=a=>{const{tabs:n,initialTab:l,onTabSelected:i,TabItemStyledProps:c,selectedTab:d,extendedBorder:u,rightComponent:b,size:T="default",isSquared:m=!1,containerStyles:x}=a,[p,g]=t.useState(l||n[0].key),{colorsV2:y}=r.DEFAULT_THEME;t.useEffect((()=>{d&&d!==p&&g(d)}),[d,p]);const C=a.backgroundColor,h=a.selectedTextColor??y.background.brand,S=a.textColor??y.content.secondary;return e.jsxs(s.TabHeader,{style:x??{},bgColor:C,"data-test":a["data-test"],children:[n.map(((t,r)=>e.jsx(o,{hasEqualSpacing:a.hasEqualSpacing,selectedTextColor:h,textColor:S,tab:t,currentTab:p,TabItemStyledProps:c,IconComponent:t.icon,size:T,setCurrentTab:e=>{g(e),i&&i(e)},isSquared:m,isFirstlement:0==r,isLastElement:r==n.length-1},t.key))),u&&e.jsx(s.EmptyTab,{}),e.jsx(s.RightComponent,{children:b})]})},o=n=>{const{tab:o,currentTab:l,setCurrentTab:i,TabItemStyledProps:c,IconComponent:d,size:u="default",isSquared:b=!1,isFirstlement:T,isLastElement:m}=n,x=o.key===l,{colorsV2:p}=r.DEFAULT_THEME,g=t.useCallback((()=>({...c,borderRadius:n.isSquared?T?"4px 0px 0px 4px":m?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(s.TabItem,{style:g(),selected:x,hasEqualSpacing:n.hasEqualSpacing,onClick:()=>i(n.tab.key),selectedTextColor:n.selectedTextColor,isSquared:b,"data-test":n["data-test"],children:[d&&e.jsx(d,{selected:x?p.background.brand:p.content.secondary}),void 0!==o.leadingNumber&&null!==o.leadingNumber&&e.jsx(s.TrailingNumberContainer,{selected:x,children:e.jsx(a.Tag,{tagText:o?.leadingNumber??0,theme:"dark",type:o.numberTagType,variant:"circle",color:p.content.primaryInverse})}),e.jsx(s.TabItemText,{style:"small"===u?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:n.textColor,selectedTextColor:n.selectedTextColor,selected:x,children:o.title}),void 0!==o.trailingNumber&&null!==o.trailingNumber&&e.jsx(s.TrailingNumberContainer,{selected:x,children:e.jsx(a.Tag,{tagText:o?.trailingNumber??0,theme:"dark",type:o.numberTagType,variant:"circle",color:p.content.primaryInverse})})]})};n.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=n;

package/dist/cjs/components/tabs/Tabs.model.d.ts

@@ -0,0 +1,52 @@
+import React__default from 'react';
+import { TagType } from '../tag/model.js';
+
+interface TabInterface {
+    key: string;
+    title: string;
+    icon?: React__default.JSXElementConstructor<{
+        selected: string;
+    }>;
+    trailingNumber?: number;
+    numberTagType?: TagType;
+    leadingNumber?: number;
+}
+interface TabViewHeaderProps {
+    hasEqualSpacing?: boolean;
+    tabs: TabInterface[];
+    onTabSelected: (tabKey: string) => void;
+    initialTab?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    selectedTextColor?: string;
+    TabItemStyledProps?: React__default.CSSProperties;
+    IconComponent?: React__default.JSXElementConstructor<{
+        selected: string;
+    }>;
+    selectedTab?: string;
+    extendedBorder?: boolean;
+    rightComponent?: JSX.Element;
+    size?: 'small' | 'default';
+    isSquared?: boolean;
+    containerStyles?: React__default.CSSProperties;
+    'data-test'?: string;
+}
+interface TabItemComponentProps {
+    hasEqualSpacing?: boolean;
+    tab: TabInterface;
+    currentTab: string;
+    setCurrentTab: (tabKey: string) => void;
+    textColor: string;
+    selectedTextColor: string;
+    TabItemStyledProps?: React__default.CSSProperties;
+    size?: 'small' | 'default';
+    IconComponent?: React__default.JSXElementConstructor<{
+        selected: string;
+    }>;
+    isSquared?: boolean;
+    isFirstlement?: boolean;
+    isLastElement?: boolean;
+    'data-test'?: string;
+}
+
+export type { TabInterface, TabItemComponentProps, TabViewHeaderProps };

package/dist/cjs/components/tabs/Tabs.styles.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),o=require("../../constants/Theme.js"),r=require("../TypographyStyle.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=t(e);const i=d.default.div`
+	display: flex;
+	flex-direction: row;
+	background-color: ${e=>e.bgColor};
+`,l=d.default.div`
+	display: flex;
+	flex-direction: row;
+	column-gap: 8px;
+	padding: ${e=>e.isSquared?"8px 24px":"14px 24px 12px 24px"};
+	padding-bottom: ${e=>e.isSquared?"":e.selected?"12px":"13px"};
+	align-items: center;
+	justify-content: center;
+	width: ${e=>e.hasEqualSpacing?"50%":"auto"};
+	border-bottom-color: ${e=>e.isSquared?"":e.selected?e.selectedTextColor:o.DEFAULT_THEME.colorsV2.background.inactive};
+	border-bottom-width: ${e=>e.isSquared?"":e.selected?"2px":"1px"};
+	border-bottom-style: ${e=>e.isSquared?"":"solid"};
+	border: ${e=>e.isSquared?e.selected?`1px solid ${e.selectedTextColor}`:`1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive}`:""};
+	flex-direction: row;
+	cursor: pointer;
+	min-width: ${e=>e.isSquared?"120px":""};
+	&:hover {
+		background-color: rgba(0, 0, 0, 0.03);
+	}
+	background-color: ${e=>e.isSquared&&e.selected?`${o.DEFAULT_THEME.colorsV2.background.brandLight}`:""};
+`,a=d.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	gap: 6px;
+	justify-content: center;
+	min-width: 20px;
+	height: 20px;
+	background: ${e=>e.selected?o.DEFAULT_THEME.colorsV2.background.inverseLight:o.DEFAULT_THEME.colorsV2.content.secondary};
+	color: ${o.DEFAULT_THEME.colorsV2.content.primaryInverse};
+	border-radius: 10px;
+`,s=d.default(r.ButtonLarge)`
+	color: ${e=>e.selected?e.selectedTextColor:e.textColor};
+`,c=d.default.div`
+	flex-grow: 1;
+	border-bottom: 1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive};
+`,n=d.default.div`
+	display: flex;
+	align-items: center;
+	border-bottom: 1px solid ${o.DEFAULT_THEME.colorsV2.background.inactive};
+`;exports.EmptyTab=c,exports.RightComponent=n,exports.TabHeader=i,exports.TabItem=l,exports.TabItemText=s,exports.TrailingNumberContainer=a;

package/dist/cjs/components/tag/Tag.d.ts

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { TagProps } from './model.js';
+
+declare const Tag: {
+    ({ tagText, LeadingIcon, TrailingIcon, onLeadingIconClicked, leadingIconId, trailingIconId, onTrailingIconClicked, theme, type, variant, version, cursor, alignIcon, noBorder, tagHtmlText, contentPadding, leadingIconTooltip, trailingIconTooltip, }: TagProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+export { Tag };

package/dist/cjs/components/tag/Tag.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),n=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),t=require("./model.js"),a=require("./Tag.styled.js"),o=require("./themes.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(i);const d=({tagText:i,LeadingIcon:l,TrailingIcon:d,onLeadingIconClicked:s,leadingIconId:p,trailingIconId:g,onTrailingIconClicked:u,theme:h="light",type:m="neutral",variant:j="regular",version:x,cursor:y,alignIcon:T,noBorder:I,tagHtmlText:C,contentPadding:f,leadingIconTooltip:w,trailingIconTooltip:b})=>{let v=i;const N=h;let k=m;t.ValidTagTypeMap[j][m]||(k="neutral"),"circle"===j&&"number"==typeof v&&v>99&&(v="99+");const q={height:"compressed"===j?12:16,width:"compressed"===j?12:16,color:o.getTagIconColor(h,k),style:{display:"block"}};return e.jsx(a.Tag,{cursor:y,theme:N,type:m,variant:j,version:x,alignIcon:T,noBorder:I,contentPadding:f,children:e.jsxs("div",{className:"container",children:[l&&(w?e.jsx(n.Tooltip,{...w,children:e.jsx("button",{className:"icon-leading",onClick:s,id:`${p}-wrapper`||"leading-icon-wrapper",children:c.default.createElement(l,{...q,id:p||"leading-icon"})})}):e.jsx("button",{className:"icon-leading",onClick:s,id:`${p}-wrapper`||"leading-icon-wrapper",children:c.default.createElement(l,{...q,id:p||"leading-icon"})})),C&&("ai"===m&&"light"===h?e.jsx(r.AiBodyCaption,{children:C}):e.jsx(r.BodyCaption,{className:"text",children:C})),!C&&""!==v&&("ai"===m&&"light"===h?e.jsx(r.AiBodyCaption,{children:v}):e.jsx(r.BodyCaption,{className:"text",children:v})),d&&(b?e.jsx(n.Tooltip,{...b,children:e.jsx("button",{className:"icon-trailing",onClick:u,id:`${g}-wrapper`||"trailing-icon-wrapper",children:c.default.createElement(d,{...q,id:g||"trailing-icon"})})}):e.jsx("button",{className:"icon-trailing",onClick:u,id:`${g}-wrapper`||"trailing-icon-wrapper",children:c.default.createElement(d,{...q,id:g||"trailing-icon"})}))]})})};d.displayName="Tag",exports.Tag=d;

package/dist/cjs/components/tag/Tag.styled.js

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/styled"),t=require("./themes.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=n(e).default.div`
+	cursor: ${e=>e.cursor??"default"};
+	${e=>"regular"===e.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;"}
+	.container {
+		display: flex;
+		align-items: ${e=>e.alignIcon?e.alignIcon:"center"};
+		gap: 6px;
+		padding: ${e=>t.getPadding(e.variant)};
+		padding: ${e=>e.contentPadding?e.contentPadding:t.getPadding(e.variant)}px;
+		background: ${e=>t.getBackgroundColor(e.theme,e.type)};
+
+		border-radius: ${e=>"regular"===e.variant?"4px":"12px"};
+
+		${e=>!e.noBorder&&"light"===e.theme&&`border: ${"2.0"===e.version?.5:1}px solid ${t.generateBorder(e.type,e.theme)};`}
+
+		.text {
+			color: ${e=>t.getTextColor(e.theme,e.type)};
+		}
+
+		.icon-trailing {
+			all: unset;
+			display: flex;
+		}
+
+		.icon-leading {
+			all: unset;
+			display: flex;
+		}
+	}
+`;exports.Tag=r;

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

@@ -0,0 +1,72 @@
+import React__default, { MouseEventHandler } from 'react';
+import { TooltipProps } from '../tooltips/Tooltip.js';
+
+type TagTheme = 'light' | 'dark';
+type TagVariant = 'regular' | 'circle' | 'compressed';
+type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+interface TagProps extends React__default.BaseHTMLAttributes<HTMLDivElement> {
+    /**
+     * Set the theme of the Tag
+     * @default default light
+     */
+    theme?: TagTheme;
+    /**
+     * Set the color of the Tag
+     * @default default neutral
+     */
+    type?: TagType;
+    /**
+     * Set the color of the Tag
+     * @default default regular
+     */
+    variant?: TagVariant;
+    /**
+     * The icon component that is the right of the text
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    TrailingIcon?: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
+    /**
+     * The right icon id,
+     * @default trailing-icon
+     */
+    trailingIconId?: string;
+    /**
+     * The right icon on click event, defaults to () => {}
+     */
+    onTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Tooltip props for the trailing icon
+     * @default undefined
+     */
+    trailingIconTooltip?: Omit<TooltipProps, 'children'>;
+    /**
+     * The icon component that is to the left of the text
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    LeadingIcon?: React__default.FunctionComponent<React__default.SVGAttributes<SVGElement>>;
+    /**
+     * The right icon on click event, defaults to () => {}
+     */
+    onLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;
+    /**
+     * The left icon id,
+     * @default leading-icon
+     */
+    leadingIconId?: string;
+    /**
+     * Tooltip props for the leading icon
+     * @default undefined
+     */
+    leadingIconTooltip?: Omit<TooltipProps, 'children'>;
+    tagText: string | number;
+    version?: '1.0' | '2.0';
+    cursor?: string;
+    alignIcon?: string;
+    noBorder?: boolean;
+    tagHtmlText?: JSX.Element;
+    contentPadding?: number;
+}
+
+export type { TagProps, TagTheme, TagType, TagVariant };

package/dist/cjs/components/tag/model.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.ValidTagTypeMap={regular:{negative:!0,warning:!0,positive:!0,neutral:!0,white:!0,purple:!0,blue:!0,ai:!0},circle:{negative:!0,warning:!0,positive:!0,neutral:!0,blue:!0,grey:!0,ai:!0},compressed:{negative:!0,warning:!0,positive:!0,neutral:!0,white:!0,purple:!0,blue:!0,ai:!0}};

package/dist/cjs/components/tag/themes.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var r=require("../../constants/Theme.js");const e={blue:{iconColor:{light:r.COLORS.content.blue,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.blue,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.blue.lightAlt,backgroundColor:{light:r.COLORS.background.blue.light,dark:r.COLORS.content.blue,circle:r.COLORS.content.blue}},purple:{iconColor:{light:r.COLORS.background.inverseLight,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.background.inverseLight,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.brandLightAlt,backgroundColor:{light:r.COLORS.background.brandLight,dark:r.COLORS.background.inverse,circle:r.COLORS.background.inverse}},negative:{iconColor:{light:r.COLORS.content.negative,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.negative,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.negative.lightAlt,backgroundColor:{light:r.COLORS.background.negative.light,dark:r.COLORS.background.negative.vibrant,circle:r.COLORS.background.negative.vibrant}},positive:{iconColor:{light:r.COLORS.content.positive,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.positive,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.positive.lightAlt,backgroundColor:{light:r.COLORS.background.positive.light,dark:r.COLORS.background.positive.vibrant,circle:r.COLORS.background.positive.vibrant}},warning:{iconColor:{light:r.COLORS.content.warning,dark:r.COLORS.content.primary},textColor:{light:r.COLORS.content.warning,dark:r.COLORS.content.primary},border:r.COLORS.stroke.warning.lightAlt,backgroundColor:{light:r.COLORS.background.warning.light,dark:r.COLORS.background.warning.vibrant,circle:r.COLORS.background.warning.vibrant}},neutral:{iconColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.primary,backgroundColor:{light:r.COLORS.surface.subdued,dark:r.COLORS.background.inverse,circle:r.COLORS.background.inverseLight}},white:{iconColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.primary,backgroundColor:{light:r.COLORS.surface.standard,dark:r.COLORS.background.inverse,circle:r.COLORS.background.inverseLight}},grey:{iconColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.secondary,dark:r.COLORS.content.primaryInverse},border:r.COLORS.stroke.primary,backgroundColor:{light:r.COLORS.surface.subdued,dark:r.COLORS.content.secondary,circle:r.COLORS.content.secondary}},ai:{iconColor:{light:r.COLORS.content.primaryInverse,dark:r.COLORS.content.primaryInverse},textColor:{light:r.COLORS.content.primaryInverse,dark:r.COLORS.content.primaryInverse},border:"none",backgroundColor:{light:r.COLORS.surface.aiLight,dark:r.COLORS.surface.ai,circle:r.COLORS.surface.ai}}};exports.generateBorder=(r,t)=>"ai"===r&&"light"===t?"rgba(254, 186, 210, 1)":e[r].border,exports.getBackgroundColor=(r,t)=>e[t].backgroundColor[r],exports.getPadding=r=>"regular"===r||"circle"===r?"4px 8px":"2px 6px",exports.getTagIconColor=(r,t)=>e[t].iconColor[r],exports.getTextColor=(r,t)=>e[t].textColor[r];

package/dist/cjs/components/template-context-mapper/Badge/index.js

@@ -0,0 +1,11 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/alert.svg.js"),r=require("styled-components"),n=require("../../TypographyStyle.js"),i=require("../../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(r).default.div`
+	background: ${i.COLORS.background.negative.light};
+	display: flex;
+	align-items: center;
+	padding: ${e=>e.padding?"8px":"0px"} 12px;
+	gap: 8px;
+	border-radius: 4px;
+	margin-right: 12px;
+	color: ${i.COLORS.content.negative};
+	height: 32px;
+`;exports.Badge=r=>{const{errorText:a,padding:o}=r;return e.jsxs(d,{padding:o,children:[e.jsx(t.default,{height:20,width:20,color:i.COLORS.content.negative}),e.jsx(n.BodySecondary,{children:a})]})},exports.BadgeContainer=d;

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.d.ts

@@ -0,0 +1,74 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { VariableListInterfaceV2 } from '../add-variableV2/AddVariableV2.js';
+import { CarouselProduct } from './modalElements/EditWhatsAppCarouselTemplateV2.js';
+import { WhatsAppCarouselTemplateVariables } from '../template-preview/models/WhatsappCarouselTemplate.js';
+import { CHANNEL_TYPE } from '../template-preview/models/Channels.js';
+import { GlobalPlaceholderType, CUSTOM_VARIABLE } from '../template-preview/models/TemplateMeta.js';
+import { NonNullTemplateTypes, AllTemplateTypes, AllTemplateVariables } from '../template-preview/models/types.js';
+import { WebpushTemplateVariables } from '../template-preview/models/WebpushTemplate.js';
+import { WhatsAppTemplateVariables, WhatsAppPickerMeta, POD, ExtrasWhatsapp, TemplateAnalyticsI } from '../template-preview/models/WhatsAppTemplate.js';
+import { VariableV3 } from '../variable-picker-v3/model.js';
+
+interface TemplateContextMapperProps {
+    selectedTemplate: NonNullTemplateTypes;
+    closeDialog?: () => void;
+    showVariableMapping: boolean;
+    channel: CHANNEL_TYPE;
+    globalPlaceholders: GlobalPlaceholderType;
+    /** List of variables being used in this template */
+    templateVariables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables | WhatsAppCarouselTemplateVariables | WebpushTemplateVariables;
+    /** Only for initial-UI-purpose for the modal */
+    htmlContent: string;
+    showOnlyContent?: boolean;
+    onTemplateSelect?(template: AllTemplateTypes, variables: AllTemplateVariables, display_content?: string, carouselProducts?: CarouselProduct[]): {
+        error: string;
+        errorIndexes?: number[];
+        templateErrorIndexes?: {
+            body?: number[];
+            buttons?: number[];
+        };
+    } | void;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+    zIndex?: number;
+    showVariableModal?: boolean;
+    variableList?: VariableListInterfaceV2[];
+    variableListForImage?: VariableListInterfaceV2[];
+    onBackPress?: () => void;
+    discountCode?: string;
+    setDiscountCode?: (code: string) => void;
+    enabledCustomText?: boolean;
+    showSampleValues?: boolean;
+    disableEditVariable?: boolean;
+    pod?: POD;
+    extras?: ExtrasWhatsapp;
+    pickerConf?: {
+        searchInCollection: any;
+        searchProducts: any;
+        fetchCollections: any;
+        fetchProducts: any;
+        storeId: string;
+        appType?: ApplicationType;
+    };
+    selectedCarouselProducts?: CarouselProduct[];
+    disableEditExpiry?: boolean;
+    cardWidth?: number;
+    onDeleteSelectedProducts?: () => void;
+    fileName?: string;
+    setFileName?: (name: string) => void;
+    hideDeviceContainerInPreview?: boolean;
+    maxCharLimit?: number;
+    onDefaultVariableSelect?: (variable: VariableV3) => void;
+    skipDefaultVariableContent?: boolean;
+    disableDatePicker?: boolean;
+    disableCopyCode?: boolean;
+    initialExpiryDateTime?: string;
+    showDiscountCodeExpiryInfo?: boolean;
+    footerButtonText?: string;
+    footerInfoText?: string;
+    templateAnalytics?: TemplateAnalyticsI;
+}
+declare const TemplateContextMapper: (props: TemplateContextMapperProps) => react_jsx_runtime.JSX.Element;
+
+export { TemplateContextMapper };
+export type { TemplateContextMapperProps };