@bikdotai/bik-component-library 0.0.152 → 0.0.153-beta0.2

package/dist/esm/components/product-picker-hackathon/picker.d.ts

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+export interface ProductVariant {
+    name: string;
+    price: string;
+    image: string;
+}
+export interface Product {
+    name: string;
+    image: string;
+    variants?: {
+        [key: string]: ProductVariant;
+    };
+}
+export interface Collection {
+    name: string;
+    image: string;
+    isSmartCollection: boolean;
+    products?: {
+        [key: string]: Product;
+    };
+}
+export type SelectedItems = {
+    [key: string]: Collection;
+};
+export type CollectionFetcherReturn = Promise<{
+    collections: {
+        [key: string]: {
+            image: string;
+            name: string;
+            isSmartCollection: string;
+        };
+    };
+}>;
+export type ProductFetcherReturn = Promise<{
+    [key: string]: Product;
+}>;
+export interface ProductPickerInterface {
+    collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    storeId: string;
+    selectedItems: SelectedItems;
+    onAdd: (items: SelectedItems) => void;
+    onClose: () => void;
+    visible: boolean;
+    zIndex?: number;
+    previewElement?: boolean;
+    onCancel: () => void;
+    onProceed: (payload: ProductPost) => void;
+}
+export interface ProductPost {
+    selectedProduct?: Product;
+    selectedUrl?: string;
+}
+export declare const Picker: (props: ProductPickerInterface) => JSX.Element;

package/dist/esm/components/product-picker-hackathon/picker.js

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useReducer as c,useState as o,useEffect as l}from"react";import{CheckMark as i}from"../checkBox/CheckBox.js";import{Button as r}from"../button/Button.js";import{CollectionsScreen as s}from"./collectionScreen.js";import{ProductsScreen as n}from"./productScreen.js";import{collectionsReducer as d,selectedColectionsReducer as a,CollectionIdContext as p}from"./reducers.js";import{SelectedScreen as u}from"./selectedScreen.js";import{PickerStyle as h,ListContainerStyle as m,ScrollContainerStyle as v,PreviewContainerStyle as f,ProductCard as x,FooterStyle as b}from"./style.js";const y=y=>{const{storeId:g,selectedItems:j}=y,[C,D]=c(d,{}),[O,k]=o("collections"),[w,S]=o(""),[F,P]=o(0),[I,G]=c(a,Object.keys(j).length?j:{}),T=Object.keys(I||[]).flatMap((e=>{var t;return Object.keys((null===(t=I[e])||void 0===t?void 0:t.products)||[]).map((t=>{var c;return null===(c=I[e].products)||void 0===c?void 0:c[t]}))}))||[],[B,z]=o(),[W,A]=o(),[,M]=o(!1);l((()=>{M(!0),y.collectionFetcher(F,g).then((e=>{D({type:"fetched",data:(null==e?void 0:e.collections)||{}}),M(!1),P((e=>e+1))})).catch()}),[]),l((()=>{var e;w&&!(null===(e=null==C?void 0:C[w])||void 0===e?void 0:e.products)&&(M(!0),y.productFetcher(w,g).then((e=>{Object.keys(e).length&&(D({type:"productsFetched",data:{collectionId:w,products:e}}),M(!1))})).catch())}),[w]);return e("div",Object.assign({style:{display:"flex",flexDirection:"column",flex:1}},{children:[e(h,{children:[t(m,{children:e(v,{children:["collections"===O&&t(s,{collections:C,selectedCollectionsDispatch:G,setCollectionId:S,setScreen:k,selectedCollections:I,collectionFetcher:y.collectionFetcher,storeId:g,collectionsDispatch:D,setSaveDisabled:M,pagingControls:{curPage:F,setCurPage:P}}),"products"===O&&w&&t(p.Provider,Object.assign({value:w},{children:t(n,{productFetcher:y.productFetcher,setScreen:k,storeId:g,data:C[w],collectionsDispatch:D,selectedCollectionsDispatch:G,selectedData:I,setSaveDisabled:M})})),"view"===O&&t(u,{selectedCollections:I||{},selectedCollectionsDispatch:G,upliftAdditions:null,setScreen:k,collections:C})]})}),t(f,{children:T.length?t("div",Object.assign({style:{display:"flex",flexDirection:"row",flexWrap:"wrap",rowGap:"12px",columnGap:"16px"}},{children:T.map((c=>t("div",Object.assign({style:{display:"flex",flexDirection:"row",flexWrap:"wrap",rowGap:"12px",columnGap:"16px"}},{children:c.image&&e(x,Object.assign({onClick:()=>{return e=c,t=c.image,z(e),void A(t);var e,t}},{children:[t("img",{height:160,width:160,src:c.image,style:{borderRadius:"4px"}}),W===c.image&&t("div",Object.assign({style:{position:"absolute",top:"8px",left:"8px"}},{children:t(i,{isPartial:!1,isDisabled:!1})}))]}))}),c.name)))})):t("div",{})})]}),e(b,{children:[t(r,{onClick:y.onCancel,buttonText:"Cancel",buttonType:"tertiaryGray",size:"small"}),t(r,{buttonText:"Proceed",buttonType:"primary",size:"small",onClick:()=>y.onProceed({selectedProduct:B,selectedUrl:W})})]})]}))};export{y as Picker};

package/dist/esm/components/product-picker-hackathon/productScreen.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+interface ProductsScreenInterface {
+    data: Collection;
+    collectionsDispatch: React.Dispatch<CollectionsActions>;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    storeId: string;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const ProductsScreen: (props: ProductsScreenInterface) => JSX.Element;
+interface ProductGroupInterface {
+    collectionId: string;
+    productId: string;
+    data: Product;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    upliftAdditions: any;
+    viewOnly: boolean;
+    isProductPartiallyChecked?: boolean;
+}
+export declare const ProductGroup: (props: ProductGroupInterface) => JSX.Element;
+interface ProductCardInterface {
+    isVariant: boolean;
+    data: Product | ProductVariant;
+    productId: string;
+    collectionId: string;
+    variantId?: string;
+    isSelected: boolean;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    upliftAdditions: any;
+    viewOnly: boolean;
+    isPartiallyChecked?: boolean;
+}
+export declare const ProductCard: (props: ProductCardInterface) => JSX.Element;
+export {};

package/dist/esm/components/product-picker-hackathon/productScreen.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as e,Fragment as o}from"react/jsx-runtime";import i from"../../assets/icons/arrow_left.svg.js";import{useContext as c,useState as d,useEffect as l}from"react";import{COLORS as n}from"../../constants/Theme.js";import{CheckBox as r}from"../checkBox/CheckBox.js";import{IconButton as s}from"../icon-button/IconButton.js";import{BikShimmer as a}from"../shimmer/ShimmerComponent/BikShimmer.js";import{BodyCaption as p,TitleRegular as u}from"../TypographyStyle.js";import{truncate as v}from"./collectionScreen.js";import{CollectionIdContext as h}from"./reducers.js";import{ProductScreenHeader as m,ProductCardStyle as y}from"./style.js";import{cloneDeep as I}from"lodash";const j=o=>{const r=c(h),{data:u,collectionsDispatch:v,selectedData:y,selectedCollectionsDispatch:j,productFetcher:O,storeId:g,setScreen:b,setSaveDisabled:C}=o,[k]=d(u),D=u.isSmartCollection||!1,S=t=>{var e,o,i,c,d,l,n,s;let a=0,p=0;return!!((null===(o=null===(e=null==y?void 0:y[r])||void 0===e?void 0:e.products)||void 0===o?void 0:o[t])&&(null===(d=Object.keys((null===(c=null===(i=null==u?void 0:u.products)||void 0===i?void 0:i[t])||void 0===c?void 0:c.variants)||[]))||void 0===d||d.forEach((()=>p++)),Object.keys((null===(s=null===(n=null===(l=null==y?void 0:y[r])||void 0===l?void 0:l.products)||void 0===n?void 0:n[t])||void 0===s?void 0:s.variants)||[]).forEach((()=>a++)),a>0&&p!==a))};l((()=>{(null==u?void 0:u.products)||(C(!0),O(r,g).then((t=>{Object.keys(t).length&&v({type:"productsFetched",data:{collectionId:r,products:t}}),C(!1)})).catch())}),[]);const x=(t,e)=>{const o=I(u);if(delete o.products,(e=Object.assign(Object.assign({},e),{catalogOnlyData:o})).productId&&u.products){const t=I(u.products[e.productId]);(null==t?void 0:t.variants)&&delete t.variants,e=Object.assign(Object.assign({},e),{catalogOnlyData:o,productOnlyData:t})}j({type:t,data:e})};return t("div",{children:[t(m,{children:[e(s,{Icon:i,height:16,onClick:()=>{b("collections")}}),e(p,Object.assign({style:{color:n.content.secondary}},{children:u.name}))]}),e("div",{children:Object.keys((null==k?void 0:k.products)||[]).length?Object.keys(k.products||[]).map((t=>e(f,{collectionId:r,isProductPartiallyChecked:S(t),productId:t,data:k.products[t],selectedData:y,selectedCollectionsDispatch:j,upliftAdditions:x,viewOnly:!!D},t))):[1,2,3,4,5,6,7,8,9,10].map(((t,o)=>e("div",Object.assign({style:{borderBottom:"1px solid #E0E0E0"}},{children:e(a,{boxes:[{height:"64px",width:"100%",marginTop:"0px"}]})}),o)))})]})},f=t=>{const{collectionId:o,productId:i,data:c,selectedData:d,selectedCollectionsDispatch:l,upliftAdditions:n,viewOnly:r,isProductPartiallyChecked:s}=t;return e("div",{children:e(O,{isVariant:!1,data:c,productId:i,collectionId:o,isSelected:!!(null===(p=null===(a=null==d?void 0:d[o])||void 0===a?void 0:a.products)||void 0===p?void 0:p[i]),isPartiallyChecked:s,selectedCollectionsDispatch:l,upliftAdditions:n,viewOnly:r},i)});var a,p},O=i=>{const{isVariant:c,data:d,productId:l,collectionId:n,variantId:s,isSelected:a,selectedCollectionsDispatch:p,upliftAdditions:h,viewOnly:m,isPartiallyChecked:I}=i;return t(y,Object.assign({isVariant:c},{children:[m?e(o,{}):e(r,{isChecked:a,isPartiallyChecked:I||!1,onValueChange:function(t){c?t?h("variantSelected",{productId:l,variantId:s,collectionId:n,variant:d}):p({type:"variantUnselected",data:{productId:l,variantId:s,collectionId:n}}):t?h("productSelected",{productId:l,collectionId:n,product:d}):p({type:"productUnselected",data:{productId:l,collectionId:n}})}}),e(u,{children:v(d.name,40,!0)})]}))};export{O as ProductCard,f as ProductGroup,j as ProductsScreen};

package/dist/esm/components/product-picker-hackathon/reducers.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+export interface SelectedCollectionsActions {
+    type: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export declare function selectedColectionsReducer(collections: SelectedItems, action: SelectedCollectionsActions): SelectedItems;
+export interface CollectionsActions {
+    type: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export declare function collectionsReducer(collections: Collection, action: CollectionsActions): any;
+export declare const CollectionIdContext: import("react").Context<string>;

package/dist/esm/components/product-picker-hackathon/reducers.js

@@ -0,0 +1 @@
+import{cloneDeep as t}from"lodash";import{createContext as a}from"react";function d(a,d){var e,o,c,l,s,r;let u={},n="",i="",p="";switch(d.type){case"selected":return u=t(a),d.data.val.isSmartCollection&&(u={},u.isCustom=!0),u[d.data.id]=d.data.val,u;case"unselected":return u=t(a),(null==u?void 0:u.isCustom)&&(u.isCustom=!1),delete u[d.data.id],u;case"productUnselected":return u=t(a),n=d.data.productId,i=d.data.collectionId,delete u[i].products[n],Object.keys(u[i].products).length||((null==u?void 0:u.isCustom)&&(u.isCustom=!1),delete u[i]),u;case"productSelected":return u=t(a),n=d.data.productId,i=d.data.collectionId,(null==u?void 0:u[i])||(u[i]=d.data.catalogOnlyData,(null===(e=d.data.catalogOnlyData)||void 0===e?void 0:e.isSmartCollection)&&(u={},u.isCustom=!0),u[i].products={}),u[i].products[n]=d.data.product,u;case"variantSelected":return u=t(a),n=d.data.productId,i=d.data.collectionId,p=d.data.variantId,(null==u?void 0:u[i])||((null===(o=d.data.catalogOnlyData)||void 0===o?void 0:o.isSmartCollection)&&(u={},u.isCustom=!0),u[i]=d.data.catalogOnlyData,u[i].products={},u[i].products[n]=d.data.productOnlyData,u[i].products[n].variants={}),(null===(l=null===(c=null==u?void 0:u[i])||void 0===c?void 0:c.products)||void 0===l?void 0:l[n])||((null===(s=null==u?void 0:u[i])||void 0===s?void 0:s.products)||(u[i].products={}),u[i].products[n]=d.data.productOnlyData,u[i].products[n].variants={}),u[i].products[n].variants[p]=d.data.variant,u;case"variantUnselected":return u=t(a),n=d.data.productId,i=d.data.collectionId,p=d.data.variantId,delete u[i].products[n].variants[p],Object.keys(u[i].products[n].variants).length||(delete u[i].products[n],Object.keys(u[i].products).length||((null===(r=u[i])||void 0===r?void 0:r.isSmartCollection)&&(u.isCustom=!1),delete u[i])),u;default:return a}}function e(t,a){let d={};switch(a.type){case"fetched":return d=Object.assign({},a.data),d;case"productsFetched":return d=Object.assign({},t),d[a.data.collectionId].products=a.data.products,d;case"paged":return d=Object.assign(Object.assign({},t),a.data),d;default:return{}}}const o=a("");export{o as CollectionIdContext,e as collectionsReducer,d as selectedColectionsReducer};

package/dist/esm/components/product-picker-hackathon/selectedScreen.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+import { SelectedCollectionsActions } from './reducers';
+interface SelectedScreenInterface {
+    selectedCollections: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    upliftAdditions: any;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collections: {
+        [key: string]: Collection;
+    };
+}
+export declare const SelectedScreen: (props: SelectedScreenInterface) => JSX.Element;
+export {};

package/dist/esm/components/product-picker-hackathon/selectedScreen.js

@@ -0,0 +1 @@
+import{jsxs as o,jsx as l}from"react/jsx-runtime";import t from"../../assets/icons/arrow_left.svg.js";import{IconButton as i}from"../icon-button/IconButton.js";import{BodyCaption as e}from"../TypographyStyle.js";import{ProductGroup as d}from"./productScreen.js";import{SelectedScreenHeader as r}from"./style.js";const c=c=>{const{selectedCollections:n,selectedCollectionsDispatch:s,upliftAdditions:u,setScreen:v,collections:a}=c,p=(o,l)=>{var t,i,e,d,r,c,s,u,v;let p=0,m=0;return!!((null===(i=null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||void 0===i?void 0:i[l])&&(null===(c=Object.keys((null===(r=null===(d=null===(e=null==a?void 0:a[o])||void 0===e?void 0:e.products)||void 0===d?void 0:d[l])||void 0===r?void 0:r.variants)||[]))||void 0===c||c.forEach((()=>m++)),Object.keys((null===(v=null===(u=null===(s=null==n?void 0:n[o])||void 0===s?void 0:s.products)||void 0===u?void 0:u[l])||void 0===v?void 0:v.variants)||[]).forEach((()=>p++)),p>0&&m!==p))};return o("div",{children:[o(r,{children:[l(i,{Icon:t,onClick:()=>{v("collections")}}),l(e,{children:"Selected Products"})]}),l("div",{children:Object.keys(n).map((o=>{var t;return Object.keys((null===(t=null==n?void 0:n[o])||void 0===t?void 0:t.products)||[]).map((t=>{let i=!1;return(null==n?void 0:n.isCustom)&&(i=!0),l(d,{collectionId:o,productId:t,data:n[o].products[t],isProductPartiallyChecked:p(o,t),selectedData:n,selectedCollectionsDispatch:s,upliftAdditions:u,viewOnly:i},t)}))}))})]})};export{c as SelectedScreen};

package/dist/esm/components/product-picker-hackathon/style.d.ts

@@ -0,0 +1,18 @@
+export declare const PickerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ListContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FooterStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const PreviewContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isDisabled: boolean;
+}, never>;
+export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenCollectionCardStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isVariant: boolean;
+}, never>;
+export declare const SelectedScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionNameHolder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductCard: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/product-picker-hackathon/style.js

@@ -0,0 +1,101 @@
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const o=e.div`
+	display: flex;
+	background-color: white;
+	flex-direction: row;
+`,t=e.div`
+	// display: flex;
+	// background-color: white;
+	// flex-direction: column;
+	width: 368px;
+	border-right: 1px solid ${i.stroke.primary};
+	display: flex;
+	background-color: white;
+	max-height: 536px;
+	min-height: 536px;
+	flex-direction: column;
+`,d=e.div`
+	display: flex;
+	flex-direction: row;
+	background-color: white;
+	column-gap: 8px;
+	padding: 16px 24px;
+	align-items: center;
+	justify-content: end;
+	border-top: 1px solid ${i.stroke.primary};
+`,r=e.div`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	background-color: ${i.surface.subdued};
+	padding: 24px;
+`,n=e.div`
+	overflow-y: scroll;
+	overflow-x: hidden;
+`,l=e.div`
+	height: 64px;
+	background-color: ${e=>e.isDisabled?"#F0F0F0":"white"};
+	border-bottom: 1px solid #e0e0e0;
+	padding: 12px 24px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	justify-content: space-between;
+	align-items: center;
+`,p=e.div`
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	column-gap: 18px;
+`,x=e.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+`,c=e.div`
+	display: flex;
+	flex-direction: row;
+	max-height: 32px;
+	min-height: 32px;
+	background-color: ${i.background.base};
+	justify-content: flex-start;
+	align-items: center;
+	padding: 8px 16px;
+`;e.div`
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	padding: 12px 16px;
+	border-bottom: 1px solid #e0e0e0;
+	align-items: center;
+`;const a=e.div`
+	height: 64px;
+	background-color: white;
+	border-bottom: 1px solid #e0e0e0;
+	padding: 12px 16px;
+	display: flex;
+	flex-direction: row;
+	column-gap: 16px;
+	justify-content: flex-start;
+	align-items: center;
+	padding-left: ${e=>e.isVariant?"42px":"16px"};
+`,s=e.div`
+	display: flex;
+	flex-direction: row;
+	max-height: 32px;
+	min-height: 32px;
+	background-color: ${i.background.base};
+	justify-content: flex-start;
+	align-items: center;
+	padding: 8px 16px;
+`,f=e.div`
+	display: flex;
+	flex-direction: column;
+`,g=e.div`
+	display: flex;
+	flex-direction: column;
+	border: 1px solid ${i.stroke.primary};
+	position: relative;
+	border-radius: 4px;
+	:hover {
+	}
+`;export{x as CollectionCardDetailStyle,p as CollectionCardInfoStyle,l as CollectionCardStyle,f as CollectionNameHolder,d as FooterStyle,t as ListContainerStyle,o as PickerStyle,r as PreviewContainerStyle,g as ProductCard,a as ProductCardStyle,c as ProductScreenHeader,n as ScrollContainerStyle,s as SelectedScreenHeader};

package/dist/esm/components/product-picker-v2/collectionScreen.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Collection, CollectionFetcherReturn, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+export declare const truncate: (str: string, n: number, useWordBoundary: boolean) => string;
+interface CollectionsScreenInterface {
+    collections: {
+        [key: string]: Collection;
+    };
+    selectedCollections: SelectedItems;
+    collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
+    storeId: string;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    setCollectionId: React.Dispatch<React.SetStateAction<string>>;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collectionsDispatch: React.Dispatch<CollectionsActions>;
+    setSaveDisabled: React.Dispatch<boolean>;
+    pagingControls: {
+        curPage: number;
+        setCurPage: React.Dispatch<React.SetStateAction<number>>;
+    };
+}
+export declare const CollectionsScreen: (props: CollectionsScreenInterface) => JSX.Element;
+export {};

package/dist/esm/components/product-picker-v2/index.d.ts

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

package/dist/esm/components/product-picker-v2/modal.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+export interface ProductVariant {
+    name: string;
+    price: string;
+    image: string;
+}
+export interface Product {
+    name: string;
+    image: string;
+    variants?: {
+        [key: string]: ProductVariant;
+    };
+}
+export interface Collection {
+    name: string;
+    image: string;
+    isSmartCollection: boolean;
+    products?: {
+        [key: string]: Product;
+    };
+}
+export type SelectedItems = {
+    [key: string]: Collection;
+};
+export type CollectionFetcherReturn = Promise<{
+    collections: {
+        [key: string]: {
+            image: string;
+            name: string;
+            isSmartCollection: string;
+        };
+    };
+}>;
+export type ProductFetcherReturn = Promise<{
+    [key: string]: Product;
+}>;
+export interface ProductPickerInterface {
+    collectionFetcher: (offset: number, storeId: string) => CollectionFetcherReturn;
+    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    storeId: string;
+    selectedItems: SelectedItems;
+    onAdd: (items: SelectedItems) => void;
+    onClose: () => void;
+    visible: boolean;
+    zIndex?: number;
+}
+export declare const ProductPickerModal: (props: ProductPickerInterface) => JSX.Element;

package/dist/esm/components/product-picker-v2/productScreen.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Collection, Product, ProductFetcherReturn, ProductVariant, SelectedItems } from '.';
+import { CollectionsActions, SelectedCollectionsActions } from './reducers';
+interface ProductsScreenInterface {
+    data: Collection;
+    collectionsDispatch: React.Dispatch<CollectionsActions>;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    productFetcher: (collectionId: string, storeId: string) => ProductFetcherReturn;
+    storeId: string;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    setSaveDisabled: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const ProductsScreen: (props: ProductsScreenInterface) => JSX.Element;
+interface ProductGroupInterface {
+    collectionId: string;
+    productId: string;
+    data: Product;
+    selectedData: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    upliftAdditions: any;
+    viewOnly: boolean;
+    isProductPartiallyChecked?: boolean;
+}
+export declare const ProductGroup: (props: ProductGroupInterface) => JSX.Element;
+interface ProductCardInterface {
+    isVariant: boolean;
+    data: Product | ProductVariant;
+    productId: string;
+    collectionId: string;
+    variantId?: string;
+    isSelected: boolean;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    upliftAdditions: any;
+    viewOnly: boolean;
+    isPartiallyChecked?: boolean;
+}
+export declare const ProductCard: (props: ProductCardInterface) => JSX.Element;
+export {};

package/dist/esm/components/product-picker-v2/reducers.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+export interface SelectedCollectionsActions {
+    type: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export declare function selectedColectionsReducer(collections: SelectedItems, action: SelectedCollectionsActions): SelectedItems;
+export interface CollectionsActions {
+    type: string;
+    data: {
+        [key: string]: any;
+    };
+}
+export declare function collectionsReducer(collections: Collection, action: CollectionsActions): any;
+export declare const CollectionIdContext: import("react").Context<string>;

package/dist/esm/components/product-picker-v2/selectedScreen.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Collection, SelectedItems } from '.';
+import { SelectedCollectionsActions } from './reducers';
+interface SelectedScreenInterface {
+    selectedCollections: SelectedItems;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    upliftAdditions: any;
+    setScreen: React.Dispatch<React.SetStateAction<string>>;
+    collections: {
+        [key: string]: Collection;
+    };
+}
+export declare const SelectedScreen: (props: SelectedScreenInterface) => JSX.Element;
+export {};

package/dist/esm/components/product-picker-v2/style.d.ts

@@ -0,0 +1,14 @@
+export declare const ContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isDisabled: boolean;
+}, never>;
+export declare const CollectionCardInfoStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionCardDetailStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductScreenCollectionCardStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductCardStyle: import("styled-components").StyledComponent<"div", any, {
+    isVariant: boolean;
+}, never>;
+export declare const SelectedScreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CollectionNameHolder: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/progress-bar/ProgressBarComponent.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+export interface ProgressBarProps {
+    completed: number;
+    isAnimated: boolean;
+    color?: string;
+    height?: number;
+}
+export declare const ProgressBarComponent: (props: ProgressBarProps) => JSX.Element;
+export declare const ProgressCompletedBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    color: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/progress-bar/ProgressBarComponent.js

@@ -0,0 +1 @@
+import c from"@emotion/styled/base";import{jsx as b}from"react/jsx-runtime";import{ProgressBar as o}from"react-bootstrap";import{COLORS as t}from"../../constants/Theme.js";const l=c=>b(I,Object.assign({color:c.color?c.color:t.content.brand},{children:b(o,{animated:c.isAnimated,now:c.completed,style:{height:`${c.height?c.height:8}px`}})})),I=c("div","production"===process.env.NODE_ENV?{target:"e17nsuvt0"}:{target:"e17nsuvt0",label:"ProgressCompletedBar"})("flex:50%;.progress-bar{background-color:",(c=>c.color),";}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlByb2dyZXNzQmFyQ29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPK0MiLCJmaWxlIjoiUHJvZ3Jlc3NCYXJDb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsganN4IGFzIF9qc3ggfSBmcm9tIFwicmVhY3QvanN4LXJ1bnRpbWVcIjtcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5pbXBvcnQgeyBQcm9ncmVzc0JhciB9IGZyb20gJ3JlYWN0LWJvb3RzdHJhcCc7XHJcbmltcG9ydCB7IENPTE9SUyB9IGZyb20gXCIuLi8uLi9jb25zdGFudHMvVGhlbWVcIjtcclxuZXhwb3J0IGNvbnN0IFByb2dyZXNzQmFyQ29tcG9uZW50ID0gKHByb3BzKSA9PiB7XHJcbiAgICByZXR1cm4gKF9qc3goUHJvZ3Jlc3NDb21wbGV0ZWRCYXIsIE9iamVjdC5hc3NpZ24oeyBjb2xvcjogcHJvcHMuY29sb3IgPyBwcm9wcy5jb2xvciA6IENPTE9SUy5jb250ZW50LmJyYW5kIH0sIHsgY2hpbGRyZW46IF9qc3goUHJvZ3Jlc3NCYXIsIHsgYW5pbWF0ZWQ6IHByb3BzLmlzQW5pbWF0ZWQsIG5vdzogcHJvcHMuY29tcGxldGVkLCBzdHlsZTogeyBoZWlnaHQ6IGAke3Byb3BzLmhlaWdodCA/IHByb3BzLmhlaWdodCA6IDh9cHhgIH0gfSkgfSkpKTtcclxufTtcclxuZXhwb3J0IGNvbnN0IFByb2dyZXNzQ29tcGxldGVkQmFyID0gc3R5bGVkLmRpdiBgXG5cdGZsZXg6IDUwJTtcblx0LnByb2dyZXNzLWJhciB7XG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IHByb3BzLmNvbG9yfTtcblx0fVxuYDtcclxuLy8jIHNvdXJjZU1hcHBpbmdVUkw9UHJvZ3Jlc3NCYXJDb21wb25lbnQuanMubWFwIl19 */"));export{l as ProgressBarComponent,I as ProgressCompletedBar};

package/dist/esm/components/progress-bar/index.d.ts

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

package/dist/esm/components/radioButton/RadioButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type RadioButtonProps = {
+    isActive: boolean;
+    isDisabled?: boolean;
+    value?: string;
+    onValueChange: (checked: boolean, value?: string) => void;
+};
+export declare const RadioButton: React.FC<RadioButtonProps>;

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

@@ -0,0 +1 @@
+import{jsx as i,jsxs as e}from"react/jsx-runtime";import{useState as t,useEffect as s}from"react";import{RadioButtonContainer as n,RadioButtonIcon as o}from"./RadioButton.styled.js";import{COLORS as c}from"../../constants/Theme.js";const r=t=>{const s=t.isDisabled?c.content.inactive:t.isActive?c.background.positive.vibrant:c.content.primary;return e("svg",Object.assign({width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg"},{children:[i("circle",{cx:"10",cy:"10",r:"9",stroke:s,strokeWidth:"2"}),t.isActive&&i("circle",{cx:"10",cy:"10",r:"5",fill:t.isDisabled?c.content.inactive:c.background.positive.vibrant})]}))},a=e=>{const[c,a]=t(e.isActive||!1),[l,d]=t(!1),[v,b]=t(!1);return s((()=>{a(e.isActive)}),[e.isActive]),i(n,Object.assign({onClick:()=>{var i;if(!e.isDisabled){const t=!c;a(t),null===(i=e.onValueChange)||void 0===i||i.call(e,t,e.value)}},onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1),onMouseDown:()=>b(!0),onMouseUp:()=>b(!1)},{children:i(o,Object.assign({checked:c,hovered:l,clicked:v,isDisabled:e.isDisabled||!1},{children:i(r,{isActive:c,isDisabled:e.isDisabled||!1})}))}))};export{a as RadioButton};

package/dist/esm/components/radioButton/RadioButton.styled.d.ts

@@ -0,0 +1,7 @@
+export declare const RadioButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RadioButtonIcon: import("styled-components").StyledComponent<"div", any, {
+    checked: boolean;
+    hovered: boolean;
+    clicked: boolean;
+    isDisabled: boolean;
+}, never>;

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

@@ -0,0 +1,20 @@
+import e,{css as i}from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const o=e.div`
+	display: inline-flex;
+	align-items: center;
+	cursor: pointer;
+`,s=e.div`
+	width: 20px;
+	height: 20px;
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	${e=>e.hovered&&i`
+			outline: 3px solid ${t.surface.hovered};
+		`}
+	${e=>e.clicked&&!e.isDisabled&&i`
+			outline: 3px solid
+				${e.checked?t.stroke.positive.lightAlt:t.surface.hovered};
+			outline-offset: 2px;
+		`}
+`;export{o as RadioButtonContainer,s as RadioButtonIcon};

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

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

package/dist/esm/components/sample-button/SampleButton.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type Color = 'primary' | 'secondary' | 'success' | 'error' | 'warn';
+export type Variant = 'solid' | 'outline' | 'text';
+export interface SampleButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The color of the Button.
+     *
+     * @default 'primary'
+     */
+    color?: Color;
+    /**
+     * The visual style of the Button.
+     *
+     * @default 'solid'
+     */
+    variant?: Variant;
+}
+export declare const SampleButton: import("react").ForwardRefExoticComponent<SampleButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/sample-button/SampleButton.styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { Color, Variant } from './SampleButton';
+export declare const SampleButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    $color: Color;
+    variant: Variant;
+}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/dist/esm/components/sample-button/index.d.ts

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

package/dist/esm/components/sample-button/themes.d.ts

@@ -0,0 +1,2 @@
+import type { Color, Variant } from './SampleButton';
+export declare function getTheme(color: Color, variant: Variant): import("@emotion/utils").SerializedStyles;

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

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

package/dist/esm/components/searchBar/searchBar.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { InputVariant } from '../input/Input';
+export interface SearchBarProps {
+    width: string;
+    isEnabled: boolean;
+    onChange: (searchText: string) => void;
+    onEnter: (searchText: string) => void;
+    placeholder: string;
+    variant: InputVariant;
+    validate?: (input?: string | number) => [boolean, string];
+    initialValue?: string;
+}
+export declare const SearchBar: (props: SearchBarProps) => JSX.Element;

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

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

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

@@ -0,0 +1,13 @@
+import { FunctionComponent } from 'react';
+interface ShimmerBox {
+    height: string;
+    width: string;
+    marginTop?: string;
+}
+interface OwnProps {
+    boxes: ShimmerBox[];
+    isBrand?: boolean;
+}
+type Props = OwnProps;
+export declare const BikShimmer: FunctionComponent<Props>;
+export default BikShimmer;

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

@@ -0,0 +1 @@
+import{jsx as i}from"react/jsx-runtime";import{ShimmerStyled as e}from"./ShimmerStyled.js";const t=t=>i(e,Object.assign({isBrand:t.isBrand},{children:t.boxes.map(((e,t)=>i("div",{className:"shine",style:{width:e.width,height:e.height,marginTop:e.marginTop||"16px"}},t)))}));export{t as BikShimmer,t as default};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ShimmerStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    isBrand?: boolean | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1,9 @@
+import i from"@emotion/styled/base";import{keyframes as t}from"@emotion/react";const l=t`
+  0% {
+    background-position: -468px 0;
+  }
+
+  100% {
+    background-position: 468px 0;
+  }
+`,a=i("div","production"===process.env.NODE_ENV?{target:"eh9q9i90"}:{target:"eh9q9i90",label:"ShimmerStyled"})("display:flex;flex-direction:column;.shine{border-radius:4px;background:",(i=>i.isBrand?"linear-gradient(90deg, rgba(255, 255, 255, 0.30) 0%, rgba(224, 224, 224, 0.00) 100%)":"#f6f7f8 linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #F0F0F0 100%) no-repeat"),";background-size:800px 304px;display:inline-block;position:relative;-webkit-animation-duration:1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;-webkit-animation-name:",l,";-webkit-animation-timing-function:linear;}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlNoaW1tZXJTdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVd3QyIsImZpbGUiOiJTaGltbWVyU3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IGtleWZyYW1lcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcclxuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5jb25zdCBrZXlmcmFtZXNBbmltYXRpb24gPSBrZXlmcmFtZXMgYFxuICAwJSB7XG4gICAgYmFja2dyb3VuZC1wb3NpdGlvbjogLTQ2OHB4IDA7XG4gIH1cblxuICAxMDAlIHtcbiAgICBiYWNrZ3JvdW5kLXBvc2l0aW9uOiA0NjhweCAwO1xuICB9XG5gO1xyXG5leHBvcnQgY29uc3QgU2hpbW1lclN0eWxlZCA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuXG5cdC5zaGluZSB7XG5cdFx0Ym9yZGVyLXJhZGl1czogNHB4O1xuXHRcdGJhY2tncm91bmQ6ICR7KHByb3BzKSA9PiBwcm9wcy5pc0JyYW5kXHJcbiAgICA/ICdsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHJnYmEoMjU1LCAyNTUsIDI1NSwgMC4zMCkgMCUsIHJnYmEoMjI0LCAyMjQsIDIyNCwgMC4wMCkgMTAwJSknXHJcbiAgICA6ICcjZjZmN2Y4IGxpbmVhci1ncmFkaWVudCh0byByaWdodCwgI2Y2ZjdmOCAwJSwgI2VkZWVmMSAyMCUsICNmNmY3ZjggNDAlLCAjRjBGMEYwIDEwMCUpIG5vLXJlcGVhdCd9O1xuXHRcdGJhY2tncm91bmQtc2l6ZTogODAwcHggMzA0cHg7XG5cdFx0ZGlzcGxheTogaW5saW5lLWJsb2NrO1xuXHRcdHBvc2l0aW9uOiByZWxhdGl2ZTtcblxuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWR1cmF0aW9uOiAxcztcblx0XHQtd2Via2l0LWFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzO1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLWl0ZXJhdGlvbi1jb3VudDogaW5maW5pdGU7XG5cdFx0LXdlYmtpdC1hbmltYXRpb24tbmFtZTogJHtrZXlmcmFtZXNBbmltYXRpb259O1xuXHRcdC13ZWJraXQtYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyO1xuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1TaGltbWVyU3R5bGVkLmpzLm1hcCJdfQ== */"));export{a as ShimmerStyled};

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export type ShimmerImageProps = {
+    imageUrl: string;
+    width: number;
+    height: number;
+    alt?: string;
+    borderRadius?: number;
+    defaultImageUrl?: string;
+};
+export declare const ShimmerImage: React.FC<ShimmerImageProps>;