@bikdotai/bik-component-library 1.1.1-beta.53 → 1.1.1-beta.54

package/dist/cjs/components/postPicker/PostPicker.styled.js

@@ -30,7 +30,7 @@
 	padding: 6px 6px 20px 6px;
 `,o.default.div`
 	padding: 6px 6px 20px 6px;
-`;const p=o.default.div`
+`;const r=o.default.div`
 	display: grid;
 	grid-template-columns: repeat(
 		${e=>e.mediaType==d.POST?6:8},
@@ -50,7 +50,7 @@
 	&:hover::-webkit-scrollbar {
 		width: 0.5em;
 	}
-`,r=o.default.div`
+`,p=o.default.div`
 	position: relative;
 	cursor: pointer;
 	height: ${e=>e.mediaType==d.POST?155:180}px;
@@ -59,8 +59,6 @@
 	border: 2px solid transparent;
 
 	img {
-		width: ${e=>e.mediaType==d.POST?148:104}px;
-		height: ${e=>e.mediaType==d.POST?148:172}px;
 		object-fit: cover;
 		border-radius: 4px;
 	}
@@ -127,4 +125,4 @@
 	flex-direction: row;
 	justify-content: flex-end;
 	gap: 10px;
-`,exports.StyledProduct=r,exports.StyledProductGrid=p;
+`,exports.StyledProduct=p,exports.StyledProductGrid=r;

package/dist/cjs/components/postPicker/postPicker.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),s=require("react"),i=require("./PostPicker.styled.js"),r=require("../tag/Tag.js"),n=require("../TypographyStyle.js"),a=require("../../utils/unCamelCase.js"),l=require("../../constants/colors.js"),o=require("../../constants/Theme.js"),d=require("../../assets/icons/instagram.svg.js"),c=require("../../assets/icons/warning.svg.js"),u=require("../modals/styledModal.js"),y=require("../states/StateComponent.js");exports.MEDIA_TYPES=void 0,(e=exports.MEDIA_TYPES||(exports.MEDIA_TYPES={})).STORY="story",e.POST="post",e.REEL="reel";exports.PostPicker=e=>{var g;const[m,j]=s.useState(null!==(g=e.previouslySelected)&&void 0!==g?g:[]),[h,p]=s.useState("");s.useEffect((()=>{j(e.selected||[])}),[]),s.useEffect((()=>{m.length>0&&p("")}),[m.length]);return t.jsx(t.Fragment,{children:t.jsx(u.StyledModal,Object.assign({zIndex:201,open:e.showModal,headingTitle:e.title,onClose:e.onClose,centralContainerStyles:{width:1071,height:564},primaryButton:{disabled:!e.media.length,buttonType:"primary",buttonText:`Select ${a.unCamelCase(e.mediaType)}`,onClick:()=>{m.length?e.onSelect(m):p(`Please select a ${e.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>e.onClose()},footerLeftCustomElement:h?t.jsx(r.Tag,{tagText:h,type:"negative",LeadingIcon:c.default}):m.length?t.jsxs(n.BodySecondary,{children:[m.length," selected"]}):null},{children:e.media&&e.media.length?t.jsx(i.StyledProductGrid,Object.assign({mediaType:e.mediaType},{children:e.media.map((s=>{return t.jsxs(i.StyledProduct,Object.assign({mediaType:e.mediaType,className:""+(r=s,a=m,a.some((e=>e.id===r.id))?"selected":""),onClick:()=>{return t=s,void j((()=>m.includes(t)?m.filter((e=>e!==t)):!e.limit||m.length<e.limit?[...m,t]:(p(`Only ${e.limit} ${e.mediaType}s can be selected`),m)));var t}},{children:[t.jsx("img",{src:s.imageUrl,alt:s.overlayCaption}),t.jsxs("div",Object.assign({className:"overlay"},{children:[t.jsx("a",Object.assign({target:"_blank",rel:"noreferrer",href:s.redirectionUrl},{children:t.jsxs("div",Object.assign({className:"overlay__redirection"},{children:[t.jsx(d.default,{height:22,width:22}),t.jsx(n.BodyPrimary,Object.assign({color:l.PRIMARY,style:{fontWeight:500}},{children:"View"}))]}))})),t.jsx("div",Object.assign({className:"overlay__caption"},{children:t.jsx(n.BodyCaption,Object.assign({color:o.COLORS.content.placeholder},{children:s.overlayCaption}))}))]}))]}),s.id);var r,a}))})):t.jsx("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:t.jsx(y.StateComponent,{states:y.StateInterface.WARNING,heading:`No ${e.mediaType}s on your account`,subline:`There seems to be no ${e.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))}))})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react/jsx-runtime"),s=require("react"),i=require("./PostPicker.styled.js"),r=require("../tag/Tag.js"),a=require("../TypographyStyle.js"),n=require("../../utils/unCamelCase.js"),l=require("../../constants/colors.js"),o=require("../../constants/Theme.js"),d=require("../../assets/icons/instagram.svg.js"),c=require("../../assets/icons/warning.svg.js"),m=require("../modals/styledModal.js"),u=require("../shimmer-image/ShimmerImage.js"),y=require("../states/StateComponent.js");exports.MEDIA_TYPES=void 0,(e=exports.MEDIA_TYPES||(exports.MEDIA_TYPES={})).STORY="story",e.POST="post",e.REEL="reel";exports.PostPicker=e=>{var g;const[h,j]=s.useState(null!==(g=e.previouslySelected)&&void 0!==g?g:[]),[p,T]=s.useState("");s.useEffect((()=>{j(e.selected||[])}),[]),s.useEffect((()=>{h.length>0&&T("")}),[h.length]);return t.jsx(t.Fragment,{children:t.jsx(m.StyledModal,Object.assign({zIndex:201,open:e.showModal,headingTitle:e.title,onClose:e.onClose,centralContainerStyles:{width:1071,height:564},primaryButton:{disabled:!e.media.length,buttonType:"primary",buttonText:`Select ${n.unCamelCase(e.mediaType)}`,onClick:()=>{h.length?e.onSelect(h):T(`Please select a ${e.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>e.onClose()},footerLeftCustomElement:p?t.jsx(r.Tag,{tagText:p,type:"negative",LeadingIcon:c.default}):h.length?t.jsxs(a.BodySecondary,{children:[h.length," selected"]}):null},{children:e.media&&e.media.length?t.jsx(i.StyledProductGrid,Object.assign({mediaType:e.mediaType},{children:e.media.map((s=>{return t.jsxs(i.StyledProduct,Object.assign({mediaType:e.mediaType,className:""+(r=s,n=h,n.some((e=>e.id===r.id))?"selected":""),onClick:()=>{return t=s,void j((()=>h.includes(t)?h.filter((e=>e!==t)):!e.limit||h.length<e.limit?[...h,t]:(T(`Only ${e.limit} ${e.mediaType}s can be selected`),h)));var t}},{children:[t.jsx(u.ShimmerImage,{imageUrl:s.imageUrl,width:e.mediaType==exports.MEDIA_TYPES.POST?148:104,height:e.mediaType==exports.MEDIA_TYPES.POST?148:172,alt:s.overlayCaption}),t.jsxs("div",Object.assign({className:"overlay"},{children:[t.jsx("a",Object.assign({target:"_blank",rel:"noreferrer",href:s.redirectionUrl},{children:t.jsxs("div",Object.assign({className:"overlay__redirection"},{children:[t.jsx(d.default,{height:22,width:22}),t.jsx(a.BodyPrimary,Object.assign({color:l.PRIMARY,style:{fontWeight:500}},{children:"View"}))]}))})),t.jsx("div",Object.assign({className:"overlay__caption"},{children:t.jsx(a.BodyCaption,Object.assign({color:o.COLORS.content.placeholder},{children:s.overlayCaption}))}))]}))]}),s.id);var r,n}))})):t.jsx("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:t.jsx(y.StateComponent,{states:y.StateInterface.WARNING,heading:`No ${e.mediaType}s on your account`,subline:`There seems to be no ${e.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))}))})};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputVariant } from '../input/Input';
 export interface SearchBarProps {
     width: string;

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

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

package/dist/cjs/components/shimmer-image/ShimmerImage.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../shimmer/ShimmerComponent/BikShimmer.js");exports.ShimmerImage=r=>{let{imageUrl:s,width:n,height:h,alt:l}=r;const[m,o]=t.useState(!0);return t.useEffect((()=>{const e=new Image;return e.src=s,e.onload=()=>{o(!1)},()=>{e.onload=null}}),[s]),e.jsxs("div",Object.assign({style:{position:"relative",width:n,height:h}},{children:[m&&e.jsx(i.BikShimmer,{boxes:[{height:`${h}px`,width:`${n}`,marginTop:"0px"}]}),e.jsx("img",{src:s,alt:null!=l?l:"Image",style:{display:m?"none":"block",width:"100%",height:"100%"}})]}))};

package/dist/cjs/components/shimmer-image/ShimmerImage.stories.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
+export default _default;
+export declare const Image: ComponentStory<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const WorkingStepper: () => JSX.Element;
 export declare enum STEPENUM {
     STEP1 = "STEP1",

package/dist/esm/components/postPicker/PostPicker.styled.js

@@ -59,8 +59,6 @@ import e from"styled-components";import{TitleMedium as i}from"../TypographyStyle
 	border: 2px solid transparent;
 
 	img {
-		width: ${e=>e.mediaType==t.POST?148:104}px;
-		height: ${e=>e.mediaType==t.POST?148:172}px;
 		object-fit: cover;
 		border-radius: 4px;
 	}

package/dist/esm/components/postPicker/postPicker.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as n,useEffect as o}from"react";import{StyledProductGrid as s,StyledProduct as r}from"./PostPicker.styled.js";import{Tag as a}from"../tag/Tag.js";import{BodyPrimary as l,BodyCaption as c,BodySecondary as d}from"../TypographyStyle.js";import{unCamelCase as m}from"../../utils/unCamelCase.js";import{PRIMARY as p}from"../../constants/colors.js";import{COLORS as g}from"../../constants/Theme.js";import h from"../../assets/icons/instagram.svg.js";import y from"../../assets/icons/warning.svg.js";import{StyledModal as u}from"../modals/styledModal.js";import{StateComponent as j,StateInterface as f}from"../states/StateComponent.js";var T;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(T||(T={}));const b=T=>{var b;const[v,C]=n(null!==(b=T.previouslySelected)&&void 0!==b?b:[]),[O,S]=n("");o((()=>{C(T.selected||[])}),[]),o((()=>{v.length>0&&S("")}),[v.length]);return e(t,{children:e(u,Object.assign({zIndex:201,open:T.showModal,headingTitle:T.title,onClose:T.onClose,centralContainerStyles:{width:1071,height:564},primaryButton:{disabled:!T.media.length,buttonType:"primary",buttonText:`Select ${m(T.mediaType)}`,onClick:()=>{v.length?T.onSelect(v):S(`Please select a ${T.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>T.onClose()},footerLeftCustomElement:O?e(a,{tagText:O,type:"negative",LeadingIcon:y}):v.length?i(d,{children:[v.length," selected"]}):null},{children:T.media&&T.media.length?e(s,Object.assign({mediaType:T.mediaType},{children:T.media.map((t=>{return i(r,Object.assign({mediaType:T.mediaType,className:""+(n=t,o=v,o.some((e=>e.id===n.id))?"selected":""),onClick:()=>{return e=t,void C((()=>v.includes(e)?v.filter((t=>t!==e)):!T.limit||v.length<T.limit?[...v,e]:(S(`Only ${T.limit} ${T.mediaType}s can be selected`),v)));var e}},{children:[e("img",{src:t.imageUrl,alt:t.overlayCaption}),i("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:t.redirectionUrl},{children:i("div",Object.assign({className:"overlay__redirection"},{children:[e(h,{height:22,width:22}),e(l,Object.assign({color:p,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(c,Object.assign({color:g.content.placeholder},{children:t.overlayCaption}))}))]}))]}),t.id);var n,o}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:e(j,{states:f.WARNING,heading:`No ${T.mediaType}s on your account`,subline:`There seems to be no ${T.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))}))})};export{T as MEDIA_TYPES,b as PostPicker};
+import{jsx as e,Fragment as t,jsxs as i}from"react/jsx-runtime";import{useState as o,useEffect as n}from"react";import{StyledProductGrid as s,StyledProduct as r}from"./PostPicker.styled.js";import{Tag as a}from"../tag/Tag.js";import{BodyPrimary as l,BodyCaption as m,BodySecondary as c}from"../TypographyStyle.js";import{unCamelCase as d}from"../../utils/unCamelCase.js";import{PRIMARY as h}from"../../constants/colors.js";import{COLORS as p}from"../../constants/Theme.js";import g from"../../assets/icons/instagram.svg.js";import y from"../../assets/icons/warning.svg.js";import{StyledModal as u}from"../modals/styledModal.js";import{ShimmerImage as T}from"../shimmer-image/ShimmerImage.js";import{StateComponent as j,StateInterface as f}from"../states/StateComponent.js";var b;!function(e){e.STORY="story",e.POST="post",e.REEL="reel"}(b||(b={}));const v=v=>{var O;const[C,S]=o(null!==(O=v.previouslySelected)&&void 0!==O?O:[]),[w,x]=o("");n((()=>{S(v.selected||[])}),[]),n((()=>{C.length>0&&x("")}),[C.length]);return e(t,{children:e(u,Object.assign({zIndex:201,open:v.showModal,headingTitle:v.title,onClose:v.onClose,centralContainerStyles:{width:1071,height:564},primaryButton:{disabled:!v.media.length,buttonType:"primary",buttonText:`Select ${d(v.mediaType)}`,onClick:()=>{C.length?v.onSelect(C):x(`Please select a ${v.mediaType} to proceed`)}},secondaryButton:{buttonType:"secondary",buttonText:"Back",onClick:()=>v.onClose()},footerLeftCustomElement:w?e(a,{tagText:w,type:"negative",LeadingIcon:y}):C.length?i(c,{children:[C.length," selected"]}):null},{children:v.media&&v.media.length?e(s,Object.assign({mediaType:v.mediaType},{children:v.media.map((t=>{return i(r,Object.assign({mediaType:v.mediaType,className:""+(o=t,n=C,n.some((e=>e.id===o.id))?"selected":""),onClick:()=>{return e=t,void S((()=>C.includes(e)?C.filter((t=>t!==e)):!v.limit||C.length<v.limit?[...C,e]:(x(`Only ${v.limit} ${v.mediaType}s can be selected`),C)));var e}},{children:[e(T,{imageUrl:t.imageUrl,width:v.mediaType==b.POST?148:104,height:v.mediaType==b.POST?148:172,alt:t.overlayCaption}),i("div",Object.assign({className:"overlay"},{children:[e("a",Object.assign({target:"_blank",rel:"noreferrer",href:t.redirectionUrl},{children:i("div",Object.assign({className:"overlay__redirection"},{children:[e(g,{height:22,width:22}),e(l,Object.assign({color:h,style:{fontWeight:500}},{children:"View"}))]}))})),e("div",Object.assign({className:"overlay__caption"},{children:e(m,Object.assign({color:p.content.placeholder},{children:t.overlayCaption}))}))]}))]}),t.id);var o,n}))})):e("div",Object.assign({style:{justifyContent:"center",alignItems:"center",display:"flex",height:422}},{children:e(j,{states:f.WARNING,heading:`No ${v.mediaType}s on your account`,subline:`There seems to be no ${v.mediaType}s on your account`,isButtonEnabled:!1,width:400})}))}))})};export{b as MEDIA_TYPES,v as PostPicker};

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputVariant } from '../input/Input';
 export interface SearchBarProps {
     width: string;

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

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

package/dist/esm/components/shimmer-image/ShimmerImage.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as i,useEffect as r}from"react";import{BikShimmer as o}from"../shimmer/ShimmerComponent/BikShimmer.js";const m=m=>{let{imageUrl:n,width:h,height:l,alt:s}=m;const[a,c]=i(!0);return r((()=>{const t=new Image;return t.src=n,t.onload=()=>{c(!1)},()=>{t.onload=null}}),[n]),t("div",Object.assign({style:{position:"relative",width:h,height:l}},{children:[a&&e(o,{boxes:[{height:`${l}px`,width:`${h}`,marginTop:"0px"}]}),e("img",{src:n,alt:null!=s?s:"Image",style:{display:a?"none":"block",width:"100%",height:"100%"}})]}))};export{m as ShimmerImage};

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;
+export default _default;
+export declare const Image: ComponentStory<import("react").FC<import("./ShimmerImage").ShimmerImageProps>>;

package/dist/esm/components/stepper/WorkingStepper.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const WorkingStepper: () => JSX.Element;
 export declare enum STEPENUM {
     STEP1 = "STEP1",

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "1.1.1-beta.53",
+	"version": "1.1.1-beta.54",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",