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

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

@@ -1,36 +1,36 @@
-export declare const ContainerStyle: import("styled-components").StyledComponent<"div", any, {
-    renderWithoutModal?: boolean | undefined;
-}, never>;
-export declare const ScrollContainerStyle: import("styled-components").StyledComponent<"div", any, {
-    screenName: string;
-}, never>;
-export declare const CollectionCardStyle: import("styled-components").StyledComponent<"div", any, {
-    isDisabled: boolean;
-    isActive: boolean;
-    usedInSearch: 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;
-    isActive: 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 VariantCardListStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VariantCardGridStyle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledHeaderRightIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledFooterForNonModal: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SKUIDBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const EllipsedBodyTiny: import("styled-components").StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
-export declare const ProductSubTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ProductInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledTitleSmall: import("styled-components").StyledComponent<"div", any, {
-    numberOfLines?: number | undefined;
-    color?: string | undefined;
-}, never>;
+export declare const ContainerStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    renderWithoutModal?: boolean;
+}>> & string;
+export declare const ScrollContainerStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    screenName: string;
+}>> & string;
+export declare const CollectionCardStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isDisabled: boolean;
+    isActive: boolean;
+    usedInSearch: boolean;
+}>> & string;
+export declare const CollectionCardInfoStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CollectionCardDetailStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProductScreenHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProductScreenCollectionCardStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProductCardStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    isVariant: boolean;
+    isActive: boolean;
+}>> & string;
+export declare const SelectedScreenHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CollectionNameHolder: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VariantCardListStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const VariantCardGridStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledHeaderRightIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledFooterForNonModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SKUIDBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EllipsedBodyTiny: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
+    numberOfLines?: number;
+    color?: string;
+}, never>> & string;
+export declare const ProductSubTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ProductInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTitleSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "color" | "numberOfLines"> & {
+    numberOfLines?: number;
+    color?: string;
+}, never>> & string;

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

@@ -1,19 +1,19 @@
-export declare enum OUT_OF_STOCK_ACTION {
-    HIDE = "HIDE",
-    NORMAL = "NORMAL",
-    /** @description shows OOS label  */
-    BLUR = "BLUR"
-}
-export interface FooterForNonModalI {
-    renderFooter?: boolean;
-    primaryButtonText?: string;
-    primaryButtonDisabled?: boolean;
-    isLoading?: boolean;
-}
-export declare enum ScreenName {
-    Collections = "collections",
-    RearrangeProducts = "rearrange",
-    SelectedProducts = "view",
-    SearchProducts = "searchProducts",
-    Products = "products"
-}
+export declare enum OUT_OF_STOCK_ACTION {
+    HIDE = "HIDE",
+    NORMAL = "NORMAL",
+    /** @description shows OOS label  */
+    BLUR = "BLUR"
+}
+export interface FooterForNonModalI {
+    renderFooter?: boolean;
+    primaryButtonText?: string;
+    primaryButtonDisabled?: boolean;
+    isLoading?: boolean;
+}
+export declare enum ScreenName {
+    Collections = "collections",
+    RearrangeProducts = "rearrange",
+    SelectedProducts = "view",
+    SearchProducts = "searchProducts",
+    Products = "products"
+}

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

@@ -1,52 +1,52 @@
-import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
-import { Collection, FbStatusFetcherReturn, Product, ProductVariant, SearchedItems, SelectedItems } from './modal';
-import { CollectionsActions } from './reducers';
-export declare const liftTheStateUp: (payload: any, data: any) => any;
-export declare function paginateSelectedItems(selectedItems: SelectedItems, limit: number, offset: number): {
-    [key: string]: Collection;
-};
-/**
- * 3 scenarios.
- * 1. If no api is provided -> marks everything as approved.
- * 2. If api is success -> sets the status
- * 3. If api is failure -> marks everything as approved.
- *
- * We first get the variant ids to fetch and only if we have variant ids, we call api.
- */
-export declare const fetchFbStatusCollection: (data: SelectedItems, storeId: string, appType: ApplicationType, dispatcher: any, fbStatusFetcher?: ((storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn) | undefined, dispatchType?: string) => void;
-/**
- * Instead of collection level, we do it product level.
- *
- * For more info refer @function getVariantIdsToFetch
- */
-export declare const getVariantIdsToFetchAtProductLevel: (products: {
-    [key: string]: Product;
-}, globalData?: Collection) => string[];
-/**
- * Instead of collection level, we do it product level.
- *
- * For more info refer @function markVariantsAsApproved
- */
-export declare const markVariantsAsApprovedProductsLevel: (products: {
-    [key: string]: Product;
-}, dispatcher: React.Dispatch<CollectionsActions>, collectionId: string, curScreenData?: Collection, setCurScreenData?: React.Dispatch<React.SetStateAction<Collection>>) => void;
-/**
- * If product has only one variant and variant name has product name, returns false.
- * Other cases returns true.
- */
-export declare const shouldShowVariant: (data: Product) => boolean;
-export declare const isProductPartiallyChecked: (collectionId: string, productId: string, selectedData: SelectedItems, currentCollection: Collection, hideProductVariants?: boolean) => boolean;
-export declare const isCollectionPartiallyChecked: (collectionId: string, collection: Collection, selectedCollections: SelectedItems, hideProductVariants?: boolean) => boolean;
-export declare const updateAllVariantsForSelectedProducts: (selectedItems: {
-    [key: string]: {
-        name: string;
-        image: string;
-        isSmartCollection: boolean;
-        products?: {
-            [key: string]: Product & {
-                allVariants?: ProductVariant | undefined;
-            };
-        } | undefined;
-    };
-}, collections: Collection, searchedProducts: SearchedItems) => Record<string, any>;
-export declare const getSkuId: (product: Product | ProductVariant, isVariant: boolean) => string | undefined;
+import { ApplicationType } from '@bikdotai/bik-models/growth/models/bik-store';
+import { Collection, FbStatusFetcherReturn, Product, ProductVariant, SearchedItems, SelectedItems } from './modal';
+import { CollectionsActions } from './reducers';
+export declare const liftTheStateUp: (payload: any, data: any) => any;
+export declare function paginateSelectedItems(selectedItems: SelectedItems, limit: number, offset: number): {
+    [key: string]: Collection;
+};
+/**
+ * 3 scenarios.
+ * 1. If no api is provided -> marks everything as approved.
+ * 2. If api is success -> sets the status
+ * 3. If api is failure -> marks everything as approved.
+ *
+ * We first get the variant ids to fetch and only if we have variant ids, we call api.
+ */
+export declare const fetchFbStatusCollection: (data: SelectedItems, storeId: string, appType: ApplicationType, dispatcher: any, fbStatusFetcher?: (storeId: string, variantIds: string[], appType: ApplicationType) => FbStatusFetcherReturn, dispatchType?: string) => void;
+/**
+ * Instead of collection level, we do it product level.
+ *
+ * For more info refer @function getVariantIdsToFetch
+ */
+export declare const getVariantIdsToFetchAtProductLevel: (products: {
+    [key: string]: Product;
+}, globalData?: Collection) => string[];
+/**
+ * Instead of collection level, we do it product level.
+ *
+ * For more info refer @function markVariantsAsApproved
+ */
+export declare const markVariantsAsApprovedProductsLevel: (products: {
+    [key: string]: Product;
+}, dispatcher: React.Dispatch<CollectionsActions>, collectionId: string, curScreenData?: Collection, setCurScreenData?: React.Dispatch<React.SetStateAction<Collection>>) => void;
+/**
+ * If product has only one variant and variant name has product name, returns false.
+ * Other cases returns true.
+ */
+export declare const shouldShowVariant: (data: Product) => boolean;
+export declare const isProductPartiallyChecked: (collectionId: string, productId: string, selectedData: SelectedItems, currentCollection: Collection, hideProductVariants?: boolean) => boolean;
+export declare const isCollectionPartiallyChecked: (collectionId: string, collection: Collection, selectedCollections: SelectedItems, hideProductVariants?: boolean) => boolean;
+export declare const updateAllVariantsForSelectedProducts: (selectedItems: {
+    [key: string]: {
+        name: string;
+        image: string;
+        isSmartCollection: boolean;
+        products?: {
+            [key: string]: Product & {
+                allVariants?: ProductVariant;
+            };
+        };
+    };
+}, collections: Collection, searchedProducts: SearchedItems) => Record<string, any>;
+export declare const getSkuId: (product: Product | ProductVariant, isVariant: boolean) => string | undefined;

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

@@ -1,32 +1,31 @@
-/// <reference types="react" />
-import { ProductVariant } from './modal';
-import { SelectedCollectionsActions } from './reducers';
-import { OUT_OF_STOCK_ACTION } from './type';
-/**
- * Extended type from Product Variant, which contains ids and name.
- */
-export type ProductVariantForRearrange = ProductVariant & {
-    variantId: string;
-    productId: string;
-    collectionId: string;
-    productName: string;
-};
-/**
- * Props type for variant card in rearrange screen
- */
-export interface VariantCardInterface {
-    data: ProductVariantForRearrange;
-    selectedCollectionsDispatch?: React.Dispatch<SelectedCollectionsActions>;
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-    onDelete?: () => void;
-}
-/**
- * Variant card in list view format.
- * Displays image, name and delete icon
- */
-export declare const VariantCardListView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;
-/**
- * Variant card in grid view format.
- * Displays only image
- */
-export declare const VariantCardGridView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;
+import { ProductVariant } from './modal';
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+/**
+ * Extended type from Product Variant, which contains ids and name.
+ */
+export type ProductVariantForRearrange = ProductVariant & {
+    variantId: string;
+    productId: string;
+    collectionId: string;
+    productName: string;
+};
+/**
+ * Props type for variant card in rearrange screen
+ */
+export interface VariantCardInterface {
+    data: ProductVariantForRearrange;
+    selectedCollectionsDispatch?: React.Dispatch<SelectedCollectionsActions>;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+    onDelete?: () => void;
+}
+/**
+ * Variant card in list view format.
+ * Displays image, name and delete icon
+ */
+export declare const VariantCardListView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Variant card in grid view format.
+ * Displays only image
+ */
+export declare const VariantCardGridView: (props: VariantCardInterface) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/product-picker-v2/variant.js

@@ -1 +1 @@
-import{j as t}from"../../node_modules/react/jsx-runtime.js";import e from"../../assets/icons/delete.svg.js";import s from"../../assets/icons/drag_handle.svg.js";import{Tooltip as i}from"../tooltips/Tooltip.js";import{COLORS as o}from"../../constants/Theme.js";import{IconButton as r}from"../icon-button/IconButton.js";import{ShimmerImage as a}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as n,BodyCaption as c}from"../TypographyStyle.js";import{CurrencySymbols as l}from"./constants.js";import{ProductHelper as d}from"./helpers/ProductHelper.js";import{ProductPickerTag as m}from"./ProductPickerTag.js";import{VariantCardListStyle as j,ProductInfo as h,ProductSubTitle as p,SKUIDBadge as g,EllipsedBodyTiny as u,VariantCardGridStyle as x}from"./style.js";const b=x=>{var b,f,v;const{data:y,selectedCollectionsDispatch:I,outOfStockAction:O}=x,T=()=>{let t;return t=y.name.includes(y.productName)?y.name:`${y.productName} ${y.name}`,t},{dataForProductPickerTag:P,tagText:k,tagType:w}=d.getDataForProductPickerTag(y,!0,O),D=`${y.currency&&null!==(b=l[y.currency])&&void 0!==b?b:""}${null!==(v=null!==(f=y.price)&&void 0!==f?f:y.actualPrice)&&void 0!==v?v:""}`,N=y.skuId;return t.jsx(j,{children:t.jsxs("div",Object.assign({className:"text-container"},{children:[t.jsx(s,{width:24,height:24,color:o.content.placeholder}),t.jsx("div",{children:t.jsx(a,{width:40,height:40,imageUrl:y.image,alt:"Item",borderRadius:4},y.variantId)}),t.jsxs("div",Object.assign({className:"info-container"},{children:[t.jsxs("div",Object.assign({className:"tooltip-title-tag"},{children:[t.jsx(i,Object.assign({body:T(),placement:"bottom",delay:400,variant:"light"},{children:t.jsx(n,Object.assign({numberOfLines:1,style:{flex:1,minWidth:0}},{children:T()}))})),t.jsxs(h,{children:[t.jsx(m,{isVariant:!0,data:P,tagText:k,tagType:w}),t.jsx(r,{Icon:()=>t.jsx(e,{width:24,height:24,color:o.content.placeholder}),onClick:()=>{I&&I({type:"variantUnselected",data:{productId:y.productId,variantId:y.variantId,collectionId:y.collectionId}}),x.onDelete&&x.onDelete()}})]})]})),t.jsxs(p,{children:[t.jsx(c,Object.assign({color:o.content.secondary},{children:!(null==P?void 0:P.fbStatus)||k?null:D})),N&&t.jsx(i,Object.assign({body:N,placement:"top"},{children:t.jsx(g,{children:t.jsx(u,{children:`SKU ID: ${N}`})})}))]})]}))]}))})},f=e=>{const{data:s}=e;return t.jsx(x,{children:t.jsx(i,Object.assign({body:s.name,alwaysVisible:!1,variant:"dark",placement:"bottom"},{children:t.jsx(a,{width:72,height:72,imageUrl:s.image,alt:"Item",borderRadius:4})}))})};export{f as VariantCardGridView,b as VariantCardListView};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import r from"../../assets/icons/delete.svg.js";import o from"../../assets/icons/drag_handle.svg.js";import{Tooltip as i}from"../tooltips/Tooltip.js";import{COLORS as a}from"../../constants/Theme.js";import{IconButton as n}from"../icon-button/IconButton.js";import{ShimmerImage as c}from"../shimmer-image/ShimmerImage.js";import{TitleSmall as l,BodyCaption as d}from"../TypographyStyle.js";import{CurrencySymbols as m}from"./constants.js";import{ProductHelper as s}from"./helpers/ProductHelper.js";import{ProductPickerTag as h}from"./ProductPickerTag.js";import{VariantCardListStyle as p,ProductInfo as u,ProductSubTitle as g,SKUIDBadge as f,EllipsedBodyTiny as v,VariantCardGridStyle as y}from"./style.js";const I=y=>{var I,j,b;const{data:T,selectedCollectionsDispatch:P,outOfStockAction:k}=y,x=()=>{let t;return t=T.name.includes(T.productName)?T.name:`${T.productName} ${T.name}`,t},{dataForProductPickerTag:w,tagText:D,tagType:N}=s.getDataForProductPickerTag(T,!0,k),S=`${T.currency&&null!==(I=m[T.currency])&&void 0!==I?I:""}${null!==(b=null!==(j=T.price)&&void 0!==j?j:T.actualPrice)&&void 0!==b?b:""}`,$=T.skuId;return t(p,{children:e("div",{className:"text-container",children:[t(o,{width:24,height:24,color:a.content.placeholder}),t("div",{children:t(c,{width:40,height:40,imageUrl:T.image,alt:"Item",borderRadius:4},T.variantId)}),e("div",{className:"info-container",children:[e("div",{className:"tooltip-title-tag",children:[t(i,{body:x(),placement:"bottom",delay:400,variant:"light",children:t(l,{numberOfLines:1,style:{flex:1,minWidth:0},children:x()})}),e(u,{children:[t(h,{isVariant:!0,data:w,tagText:D,tagType:N}),t(n,{Icon:()=>t(r,{width:24,height:24,color:a.content.placeholder}),onClick:()=>{P&&P({type:"variantUnselected",data:{productId:T.productId,variantId:T.variantId,collectionId:T.collectionId}}),y.onDelete&&y.onDelete()}})]})]}),e(g,{children:[t(d,{color:a.content.secondary,children:!(null==w?void 0:w.fbStatus)||D?null:S}),$&&t(i,{body:$,placement:"top",children:t(f,{children:t(v,{children:`SKU ID: ${$}`})})})]})]})]})})},j=e=>{const{data:r}=e;return t(y,{children:t(i,{body:r.name,alwaysVisible:!1,variant:"dark",placement:"bottom",children:t(c,{width:72,height:72,imageUrl:r.image,alt:"Item",borderRadius:4})})})};export{j as VariantCardGridView,I as VariantCardListView};

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

@@ -1,21 +1,20 @@
-/// <reference types="react" />
-import { SelectedCollectionsActions } from './reducers';
-import { OUT_OF_STOCK_ACTION } from './type';
-import { ProductVariantForRearrange } from './variant';
-/**
- * Props for list of variants - applicable both in list and grid view
- */
-export type VariantsComponentProps = {
-    selectedVariants: ProductVariantForRearrange[];
-    setSelectedVariants: React.Dispatch<React.SetStateAction<ProductVariantForRearrange[]>>;
-    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
-    outOfStockAction?: OUT_OF_STOCK_ACTION;
-};
-/**
- * Returns a react component of variants list, which are eligible to drag and drop.
- */
-export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, outOfStockAction, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * Returns a react component of variants grid, which are eligible to drag and drop.
- */
-export declare const VariantsGrid: ({ selectedVariants }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
+import { SelectedCollectionsActions } from './reducers';
+import { OUT_OF_STOCK_ACTION } from './type';
+import { ProductVariantForRearrange } from './variant';
+/**
+ * Props for list of variants - applicable both in list and grid view
+ */
+export type VariantsComponentProps = {
+    selectedVariants: ProductVariantForRearrange[];
+    setSelectedVariants: React.Dispatch<React.SetStateAction<ProductVariantForRearrange[]>>;
+    selectedCollectionsDispatch: React.Dispatch<SelectedCollectionsActions>;
+    outOfStockAction?: OUT_OF_STOCK_ACTION;
+};
+/**
+ * Returns a react component of variants list, which are eligible to drag and drop.
+ */
+export declare const VariantsList: ({ selectedVariants, setSelectedVariants, selectedCollectionsDispatch, outOfStockAction, }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns a react component of variants grid, which are eligible to drag and drop.
+ */
+export declare const VariantsGrid: ({ selectedVariants }: VariantsComponentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/product-picker-v2/variantComponents.js

@@ -1 +1 @@
-import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as r}from"react";import{Droppable as s,Draggable as a}from"react-beautiful-dnd";import{COLORS as t}from"../../constants/Theme.js";import{VariantCardListView as n,VariantCardGridView as d}from"./variant.js";const i=d=>{let{selectedVariants:i,setSelectedVariants:o,selectedCollectionsDispatch:l,outOfStockAction:c}=d;const[p,g]=r(-1);function b(e){if(null==e?void 0:e.transform){const r=`translate(0px, ${e.transform.split(",").pop()}`;return Object.assign(Object.assign({},e),{transform:r})}return e}return e.jsx(s,Object.assign({droppableId:"droppable-list"},{children:(r,s)=>e.jsxs("div",Object.assign({},r.droppableProps,{ref:r.innerRef,style:Object.assign({backgroundColor:t.surface.subdued,padding:"0.05px",height:i.length<8?"550px":"100%",overflow:"auto"},r.droppableProps.style)},{children:[i.map(((r,s)=>e.jsx("div",Object.assign({style:{background:t.surface.hovered,margin:"5px",boxShadow:s===p?"0px 4px 12px rgba(0, 0, 0, 0.12)":""},onMouseEnter:()=>g(s),onMouseLeave:()=>g(-1)},{children:e.jsx(a,Object.assign({draggableId:`${r.productId}-${r.variantId}`,index:s},{children:(a,t)=>e.jsx("div",Object.assign({ref:a.innerRef},a.draggableProps,a.dragHandleProps,{style:b(Object.assign(Object.assign({},a.draggableProps.style),a.draggableSnapshot))},{children:e.jsx(n,{data:r,selectedCollectionsDispatch:l,onDelete:()=>{const e=i.slice();e[s].displayOrder=null,e.splice(s,1),o(e)},outOfStockAction:c},`${r.productId}-${r.variantId}`)}))}),`${r.productId}-${r.variantId}`)}),`${r.productId}-${r.variantId}`))),r.placeholder&&s.isDraggingOver?e.jsx("div",Object.assign({style:{background:t.surface.hovered,margin:"5px"}},{children:r.placeholder})):null]}))}))},o=r=>{let{selectedVariants:t}=r;return e.jsx(s,Object.assign({droppableId:"droppable-horizontal"},{children:r=>e.jsxs("div",Object.assign({},r.droppableProps,{ref:r.innerRef,style:Object.assign(Object.assign({},r.droppableProps.style),{display:"flex"})},{children:[e.jsx(s,Object.assign({droppableId:"droppable-vertical",direction:"horizontal"},{children:r=>e.jsxs("div",Object.assign({},r.droppableProps,{ref:r.innerRef,style:Object.assign(Object.assign({},r.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"})},{children:[t.map(((r,s)=>e.jsx(a,Object.assign({draggableId:`${r.productId}-${r.variantId}`,index:s},{children:(s,a)=>e.jsxs("div",Object.assign({ref:s.innerRef},s.draggableProps,s.dragHandleProps,{children:[e.jsx(d,{data:r}),s.placeholder]}))}),`${r.productId}-${r.variantId}`))),r.placeholder]}))})),r.placeholder]}))}))};export{o as VariantsGrid,i as VariantsList};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useState as a}from"react";import{Droppable as t,Draggable as d}from"react-beautiful-dnd";import{COLORS as n}from"../../constants/Theme.js";import{VariantCardListView as o,VariantCardGridView as l}from"./variant.js";const s=l=>{let{selectedVariants:s,setSelectedVariants:i,selectedCollectionsDispatch:p,outOfStockAction:c}=l;const[g,b]=a(-1);function f(e){if(null==e?void 0:e.transform){const r=`translate(0px, ${e.transform.split(",").pop()}`;return Object.assign(Object.assign({},e),{transform:r})}return e}return e(t,{droppableId:"droppable-list",children:(a,t)=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign({backgroundColor:n.surface.subdued,padding:"0.05px",height:s.length<8?"550px":"100%",overflow:"auto"},a.droppableProps.style),children:[s.map(((r,a)=>e("div",{style:{background:n.surface.hovered,margin:"5px",boxShadow:a===g?"0px 4px 12px rgba(0, 0, 0, 0.12)":""},onMouseEnter:()=>b(a),onMouseLeave:()=>b(-1),children:e(d,{draggableId:`${r.productId}-${r.variantId}`,index:a,children:(t,d)=>e("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{style:f(Object.assign(Object.assign({},t.draggableProps.style),t.draggableSnapshot)),children:e(o,{data:r,selectedCollectionsDispatch:p,onDelete:()=>{const e=s.slice();e[a].displayOrder=null,e.splice(a,1),i(e)},outOfStockAction:c},`${r.productId}-${r.variantId}`)}))},`${r.productId}-${r.variantId}`)},`${r.productId}-${r.variantId}`))),a.placeholder&&t.isDraggingOver?e("div",{style:{background:n.surface.hovered,margin:"5px"},children:a.placeholder}):null]}))})},i=a=>{let{selectedVariants:n}=a;return e(t,{droppableId:"droppable-horizontal",children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex"}),children:[e(t,{droppableId:"droppable-vertical",direction:"horizontal",children:a=>r("div",Object.assign({},a.droppableProps,{ref:a.innerRef,style:Object.assign(Object.assign({},a.droppableProps.style),{display:"flex",flexWrap:"wrap",flexDirection:"row"}),children:[n.map(((a,t)=>e(d,{draggableId:`${a.productId}-${a.variantId}`,index:t,children:(t,d)=>r("div",Object.assign({ref:t.innerRef},t.draggableProps,t.dragHandleProps,{children:[e(l,{data:a}),t.placeholder]}))},`${a.productId}-${a.variantId}`))),a.placeholder]}))}),a.placeholder]}))})};export{i as VariantsGrid,s as VariantsList};

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

@@ -1,7 +1,7 @@
-import React from 'react';
-declare const CircularProgressBar: React.FC<{
-    percentage: number;
-    width?: number;
-    containerStyle?: React.CSSProperties;
-}>;
-export default CircularProgressBar;
+import React from 'react';
+declare const CircularProgressBar: React.FC<{
+    percentage: number;
+    width?: number;
+    containerStyle?: React.CSSProperties;
+}>;
+export default CircularProgressBar;

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

@@ -1 +1 @@
-import{j as s}from"../../node_modules/react/jsx-runtime.js";import e from"../../assets/icons/checklistIcon.svg.js";const t=t=>{let{percentage:r,width:o=200,containerStyle:i}=t;const n=r<0?0:r>100?100:r,c=o/2-o/10,a=c*Math.PI*2,l=a-a*n/100,d=o/10,f=o/3;return s.jsx("div",Object.assign({style:i},{children:s.jsxs("svg",Object.assign({width:o,height:o,viewBox:`0 0 ${o} ${o}`},{children:[s.jsx("defs",{children:s.jsxs("linearGradient",Object.assign({id:"gradientStroke",x1:"0%",y1:"0%",x2:"100%",y2:"0%"},{children:[s.jsx("stop",{offset:"0%",stopColor:"#7000FF"}),s.jsx("stop",{offset:"100%",stopColor:"#AD00FF"})]}))}),s.jsx("circle",{cx:o/2,cy:o/2,strokeWidth:d,r:c,strokeOpacity:.8,fill:"none",style:{stroke:"#ffffff"}}),s.jsx("circle",{cx:o/2,cy:o/2,strokeWidth:d,r:c,style:{stroke:"url(#gradientStroke)",strokeDasharray:a,strokeDashoffset:l},transform:`rotate(-90 ${o/2} ${o/2})`,fill:"none",strokeLinecap:"round",strokeLinejoin:"round"}),s.jsx(e,{x:o/2-f/2,width:f})]}))}))};export{t as default};
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import r from"../../assets/icons/checklistIcon.svg.js";const o=o=>{let{percentage:s,width:i=200,containerStyle:n}=o;const c=s<0?0:s>100?100:s,l=i/2-i/10,a=l*Math.PI*2,f=a-a*c/100,d=i/10,h=i/3;return t("div",{style:n,children:e("svg",{width:i,height:i,viewBox:`0 0 ${i} ${i}`,children:[t("defs",{children:e("linearGradient",{id:"gradientStroke",x1:"0%",y1:"0%",x2:"100%",y2:"0%",children:[t("stop",{offset:"0%",stopColor:"#7000FF"}),t("stop",{offset:"100%",stopColor:"#AD00FF"})]})}),t("circle",{cx:i/2,cy:i/2,strokeWidth:d,r:l,strokeOpacity:.8,fill:"none",style:{stroke:"#ffffff"}}),t("circle",{cx:i/2,cy:i/2,strokeWidth:d,r:l,style:{stroke:"url(#gradientStroke)",strokeDasharray:a,strokeDashoffset:f},transform:`rotate(-90 ${i/2} ${i/2})`,fill:"none",strokeLinecap:"round",strokeLinejoin:"round"}),t(r,{x:i/2-h/2,width:h})]})})};export{o as default};

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

@@ -1,14 +1,13 @@
-/// <reference types="react" />
-export interface ProgressBarProps {
-    completed: number;
-    isAnimated: boolean;
-    color?: string;
-    height?: number;
-}
-export declare const ProgressBarComponent: (props: ProgressBarProps) => import("react/jsx-runtime").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>, {}>;
+export interface ProgressBarProps {
+    completed: number;
+    isAnimated: boolean;
+    color?: string;
+    height?: number;
+}
+export declare const ProgressBarComponent: (props: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ProgressCompletedBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    color: string;
+}, JSX.IntrinsicElements, {}>;

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

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

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

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

package/dist/esm/components/progress-bar-v2/ProgressBarV2.d.ts

@@ -1,22 +1,22 @@
-export declare enum TextAlignment {
-    RIGHT = "right",
-    LEFT = "left",
-    TOP = "top",
-    BOTTOM = "bottom"
-}
-export declare enum ProgressBarType {
-    CIRCLE = "circle",
-    LINE = "line"
-}
-export interface ProgressBarV2Props {
-    progress: number;
-    type: ProgressBarType;
-    showProgress?: boolean;
-    text?: string;
-    size?: number;
-    progressBarThickness?: number;
-    color?: string;
-    textPosition?: TextAlignment;
-    matchParentWidth?: boolean;
-}
-export declare const ProgressBarV2: (props: ProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;
+export declare enum TextAlignment {
+    RIGHT = "right",
+    LEFT = "left",
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export declare enum ProgressBarType {
+    CIRCLE = "circle",
+    LINE = "line"
+}
+export interface ProgressBarV2Props {
+    progress: number;
+    type: ProgressBarType;
+    showProgress?: boolean;
+    text?: string;
+    size?: number;
+    progressBarThickness?: number;
+    color?: string;
+    textPosition?: TextAlignment;
+    matchParentWidth?: boolean;
+}
+export declare const ProgressBarV2: (props: ProgressBarV2Props) => import("react/jsx-runtime").JSX.Element;