@bikdotai/bik-component-library 0.0.64-0.beta.help-attr-2 → 0.0.64

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

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

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

@@ -7,9 +7,4 @@ export declare const Tag: import("@emotion/styled").StyledComponent<{
     theme: TagTheme;
     type: TagType;
     variant: TagVariant;
-    version?: "1.0" | "2.0" | undefined;
-    cursor?: string | undefined;
-    alignIcon?: string | undefined;
-    noBorder?: boolean | undefined;
-    contentPadding?: number | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),l=require("./themes.js");function e(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const d=e(c).default("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:",(c=>{var l;return null!==(l=c.cursor)&&void 0!==l?l:"default"}),";",(c=>"regular"===c.variant?"display: block;\n\t\t     min-height: 26px;\n\t\t":"min-height: 20px;")," .container{display:flex;align-items:",(c=>c.alignIcon?c.alignIcon:"center"),";gap:6px;padding:",(c=>l.getPadding(c.variant)),";padding:",(c=>c.contentPadding?c.contentPadding:l.getPadding(c.variant)),"px;background:",(c=>l.getBackgroundColor(c.theme,c.type)),";border-radius:",(c=>"regular"===c.variant?"4px":"12px"),";",(c=>!c.noBorder&&"light"===c.theme&&`border: ${"2.0"===c.version?.5:1}px solid ${l.generateBorder(c.type,c.theme)};`)," .text{color:",(c=>l.getTextColor(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6ICR7KHByb3BzKSA9PiB7IHZhciBfYTsgcmV0dXJuIChfYSA9IHByb3BzLmN1cnNvcikgIT09IG51bGwgJiYgX2EgIT09IHZvaWQgMCA/IF9hIDogJ2RlZmF1bHQnOyB9fTtcblx0JHsocHJvcHMpID0+IHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJ1xyXG4gICAgPyBgZGlzcGxheTogYmxvY2s7XG5cdFx0ICAgICBtaW4taGVpZ2h0OiAyNnB4O1xuXHRcdGBcclxuICAgIDogYG1pbi1oZWlnaHQ6IDIwcHg7YH1cblx0LmNvbnRhaW5lciB7XG5cdFx0ZGlzcGxheTogZmxleDtcblx0XHRhbGlnbi1pdGVtczogJHsocHJvcHMpID0+IChwcm9wcy5hbGlnbkljb24gPyBwcm9wcy5hbGlnbkljb24gOiAnY2VudGVyJyl9O1xuXHRcdGdhcDogNnB4O1xuXHRcdHBhZGRpbmc6ICR7KHByb3BzKSA9PiBnZXRQYWRkaW5nKHByb3BzLnZhcmlhbnQpfTtcblx0XHRwYWRkaW5nOiAkeyhwcm9wcykgPT4gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgID8gcHJvcHMuY29udGVudFBhZGRpbmdcclxuICAgIDogZ2V0UGFkZGluZyhwcm9wcy52YXJpYW50KX1weDtcblx0XHRiYWNrZ3JvdW5kOiAkeyhwcm9wcykgPT4gZ2V0QmFja2dyb3VuZENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cblx0XHRib3JkZXItcmFkaXVzOiAkeyhwcm9wcykgPT4gKHByb3BzLnZhcmlhbnQgPT09ICdyZWd1bGFyJyA/ICc0cHgnIDogJzEycHgnKX07XG5cblx0XHQkeyhwcm9wcykgPT4gIXByb3BzLm5vQm9yZGVyICYmXHJcbiAgICBwcm9wcy50aGVtZSA9PT0gJ2xpZ2h0JyAmJlxyXG4gICAgYGJvcmRlcjogJHtwcm9wcy52ZXJzaW9uID09PSAnMi4wJyA/IDAuNSA6IDF9cHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlLCBwcm9wcy50aGVtZSl9O2B9XG5cblx0XHQudGV4dCB7XG5cdFx0XHRjb2xvcjogJHsocHJvcHMpID0+IGdldFRleHRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSl9O1xuXHRcdH1cblxuXHRcdC5pY29uLXRyYWlsaW5nIHtcblx0XHRcdGFsbDogdW5zZXQ7XG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdH1cblxuXHRcdC5pY29uLWxlYWRpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXHR9XG5gO1xyXG4vLyMgc291cmNlTWFwcGluZ1VSTD1UYWcuc3R5bGVkLmpzLm1hcCJdfQ== */"));exports.Tag=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var c=require("@emotion/styled/base"),e=require("./themes.js");function d(c){return c&&"object"==typeof c&&"default"in c?c:{default:c}}const l=d(c).default("div","production"===process.env.NODE_ENV?{target:"e930jd90"}:{target:"e930jd90",label:"Tag"})("cursor:default;",(c=>"regular"===c.variant?"display: block;\n\t\t     height: 26px;\n\t\t":"height: 20px;")," .container{display:flex;align-items:center;gap:6px;padding:",(c=>e.getPadding(c.variant)),";background-color:",(c=>e.getBackgroundColor(c.theme,c.type)),";border-radius:",(c=>"regular"===c.variant?"4px":"12px"),";",(c=>"light"===c.theme&&`border: 1px solid ${e.generateBorder(c.type)};`)," .text{color:",(c=>e.getTextColor(c.theme,c.type)),";}.icon-trailing{all:unset;display:flex;}.icon-leading{all:unset;display:flex;}}"+("production"===process.env.NODE_ENV?"":"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlRhZy5zdHlsZWQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUU4QiIsImZpbGUiOiJUYWcuc3R5bGVkLnRzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcclxuaW1wb3J0IHsgZ2VuZXJhdGVCb3JkZXIsIGdldEJhY2tncm91bmRDb2xvciwgZ2V0UGFkZGluZywgZ2V0VGV4dENvbG9yLCB9IGZyb20gJy4vdGhlbWVzJztcclxuZXhwb3J0IGNvbnN0IFRhZyA9IHN0eWxlZC5kaXYgYFxuXHRjdXJzb3I6IGRlZmF1bHQ7XG5cdCR7KHByb3BzKSA9PiBwcm9wcy52YXJpYW50ID09PSAncmVndWxhcidcclxuICAgID8gYGRpc3BsYXk6IGJsb2NrO1xuXHRcdCAgICAgaGVpZ2h0OiAyNnB4O1xuXHRcdGBcclxuICAgIDogYGhlaWdodDogMjBweDtgfVxuXHQuY29udGFpbmVyIHtcblx0XHRkaXNwbGF5OiBmbGV4O1xuXHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XG5cdFx0Z2FwOiA2cHg7XG5cdFx0cGFkZGluZzogJHsocHJvcHMpID0+IGdldFBhZGRpbmcocHJvcHMudmFyaWFudCl9O1xuXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogJHsocHJvcHMpID0+IGdldEJhY2tncm91bmRDb2xvcihwcm9wcy50aGVtZSwgcHJvcHMudHlwZSl9O1xuXG5cdFx0Ym9yZGVyLXJhZGl1czogJHsocHJvcHMpID0+IChwcm9wcy52YXJpYW50ID09PSAncmVndWxhcicgPyAnNHB4JyA6ICcxMnB4Jyl9O1xuXG5cdFx0JHsocHJvcHMpID0+IHByb3BzLnRoZW1lID09PSAnbGlnaHQnICYmXHJcbiAgICBgYm9yZGVyOiAxcHggc29saWQgJHtnZW5lcmF0ZUJvcmRlcihwcm9wcy50eXBlKX07YH1cblxuXHRcdC50ZXh0IHtcblx0XHRcdGNvbG9yOiAkeyhwcm9wcykgPT4gZ2V0VGV4dENvbG9yKHByb3BzLnRoZW1lLCBwcm9wcy50eXBlKX07XG5cdFx0fVxuXG5cdFx0Lmljb24tdHJhaWxpbmcge1xuXHRcdFx0YWxsOiB1bnNldDtcblx0XHRcdGRpc3BsYXk6IGZsZXg7XG5cdFx0fVxuXG5cdFx0Lmljb24tbGVhZGluZyB7XG5cdFx0XHRhbGw6IHVuc2V0O1xuXHRcdFx0ZGlzcGxheTogZmxleDtcblx0XHR9XG5cdH1cbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVRhZy5zdHlsZWQuanMubWFwIl19 */"));exports.Tag=l;

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { MouseEventHandler } from 'react';
 export type TagTheme = 'light' | 'dark';
-export type TagVariant = 'regular' | 'circle' | 'compressed';
-export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey' | 'ai';
+export type TagVariant = 'regular' | 'circle';
+export type TagType = 'negative' | 'warning' | 'positive' | 'neutral' | 'white' | 'purple' | 'blue' | 'grey';
 export declare const ValidTagTypeMap: {
     regular: {
         negative: boolean;
@@ -12,7 +12,6 @@ export declare const ValidTagTypeMap: {
         white: boolean;
         purple: boolean;
         blue: boolean;
-        ai: boolean;
     };
     circle: {
         negative: boolean;
@@ -21,17 +20,6 @@ export declare const ValidTagTypeMap: {
         neutral: boolean;
         blue: boolean;
         grey: boolean;
-        ai: boolean;
-    };
-    compressed: {
-        negative: boolean;
-        warning: boolean;
-        positive: boolean;
-        neutral: boolean;
-        white: boolean;
-        purple: boolean;
-        blue: boolean;
-        ai: boolean;
     };
 };
 export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
@@ -81,10 +69,4 @@ export interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {
      */
     leadingIconId?: string;
     tagText: string | number;
-    version?: '1.0' | '2.0';
-    cursor?: string;
-    alignIcon?: string;
-    noBorder?: boolean;
-    tagHtmlText?: JSX.Element;
-    contentPadding?: number;
 }

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

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

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

@@ -1,6 +1,6 @@
 import { TagTheme, TagType, TagVariant } from './model';
 export declare const getTagIconColor: (theme: TagTheme, type: TagType) => string;
 export declare const getTextColor: (theme: TagTheme, type: TagType) => string;
-export declare const generateBorder: (type: TagType, theme: TagTheme) => string;
+export declare const generateBorder: (type: TagType) => string;
 export declare const getBackgroundColor: (theme: TagTheme | 'circle', type: TagType) => string;
 export declare const getPadding: (variant: TagVariant) => "4px 8px" | "2px 6px";

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

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

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

@@ -1,8 +1,6 @@
-export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {
-    padding?: string | undefined;
-}, never>;
+/// <reference types="react" />
+export declare const BadgeContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export interface BadgeProps {
     errorText: string;
-    padding?: string;
 }
-export declare const Badge: (props: BadgeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Badge: (props: BadgeProps) => JSX.Element;

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

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

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

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

package/dist/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("lodash"),l=require("react"),o=require("../../utils/StringUtils.js"),a=require("../../constants/Theme.js"),i=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),s=require("../template-preview/models/WhatsAppTemplate.js"),n=require("./context/templateModalContext.js"),d=require("./modalElements/Footer.js"),u=require("./modalElements/TemplateAnalyticsComponent.js"),c=require("./modalElements/TemplateSelectModalContent.js"),p=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=v=>{var m,C,h,b,S,E,f,x,P,T;const{selectedTemplate:g,closeDialog:y,showVariableMapping:I,channel:L,htmlContent:A,templateVariables:D,onTemplateSelect:j,globalPlaceholders:w,showOnlyContent:k,whatsappSpecificPickerMeta:H,zIndex:N,showVariableModal:V,variableList:M,discountCode:O,setDiscountCode:B,onBackPress:q,enabledCustomText:F,variableListForImage:_,showSampleValues:W,disableEditVariable:Y,pod:R,extras:$,pickerConf:U,selectedCarouselProducts:z,disableEditExpiry:Q,cardWidth:G,onDeleteSelectedProducts:J,fileName:K,setFileName:X,hideDeviceContainerInPreview:Z,maxCharLimit:ee,onDefaultVariableSelect:te,skipDefaultVariableContent:le,disableDatePicker:oe,disableCopyCode:ae,initialExpiryDateTime:ie,showDiscountCodeExpiryInfo:re,footerButtonText:se,footerInfoText:ne,templateAnalytics:de}=v;l.useEffect((()=>{be(A)}),[A]);const ue=L===r.CHANNEL_TYPE.WHATSAPP&&"CAROUSEL"===(null===(C=null===(m=null==g?void 0:g.components)||void 0===m?void 0:m[1])||void 0===C?void 0:C.type),ce=null==g?void 0:g.isProductCarouselType,[pe,ve]=l.useState(L===r.CHANNEL_TYPE.EMAIL||L==r.CHANNEL_TYPE.WEBPUSH||ue?"desktop":"mobile"),[me,Ce]=l.useState(!1),[he,be]=l.useState(A),[Se,Ee]=l.useState(!1),[fe,xe]=l.useState([]),[Pe,Te]=l.useState({}),[ge,ye]=l.useState(g),[Ie,Le]=l.useState([]),[Ae,De]=l.useState(null),[je,we]=l.useState(!1),[ke,He]=l.useState(null!=D?D:[]),[Ne,Ve]=l.useState(!1),[Me,Oe]=l.useState(ue?(null===(b=null===(h=null==ge?void 0:ge.mapping)||void 0===h?void 0:h.body)||void 0===b?void 0:b.length)?-1:0:-1),[Be,qe]=l.useState([]),[Fe,_e]=l.useState(void 0),We=l.useRef(null),[Ye,Re]=l.useState(!1),[$e,Ue]=l.useState(!1),[ze,Qe]=l.useState(!1),[Ge,Je]=l.useState(!0),[Ke,Xe]=l.useState(!0),[Ze,et]=l.useState({});l.useEffect((()=>{z?qe(z):ce&&qe([])}),[z]),l.useEffect((()=>{var e;if(!je&&ce&&(!z||0===qe.length)){const t=null===(e=null==ge?void 0:ge.components)||void 0===e?void 0:e[1].cards,l=[];null==t||t.forEach((e=>{var t;null===(t=null==e?void 0:e.components)||void 0===t||t.forEach((e=>{var t,o,a;"HEADER"===e.type&&l.push(null!==(a=null===(o=null===(t=e.example)||void 0===t?void 0:t.header_handle)||void 0===o?void 0:o[0])&&void 0!==a?a:"")}))})),Le(l),we(!0)}}),[je]);const tt=l.useMemo((()=>p.convertPlaceholdersToBikDropdown(w)),[w]);return l.useEffect((()=>{_e(t.cloneDeep(M))}),[M]),(null==de?void 0:de.show)&&Ge&&de.templateQuality&&Object.values(s.TEMPLATE_QUALITY).find((e=>e===String(de.templateQuality)))?e.jsx(u.TemplateAnalyticsComponent,{headingTitle:null==ge?void 0:ge.label,headingSubtitle:L===r.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(S=null==ge?void 0:ge.category)&&void 0!==S?S:"")} • ${null!==(E=null==ge?void 0:ge.templateCategory)&&void 0!==E?E:""}`:"",templateAnalytics:de,onClose:()=>{null==y||y(),Je(!1),Xe(!1)},onCancel:()=>{Je(!1),Xe(!1)},onProceed:()=>{Je(!1),Xe(!0)},templateId:(null==ge?void 0:ge.templateId)||""}):e.jsx(n.TemplateModalContext.Provider,Object.assign({value:{hideFooterButton:ze,setHideFooterButton:Qe,hideCrossButton:$e,setHideCrossButton:Ue,variableList:Fe,setVariableList:_e,variableCallback:Ae,setVariableCallback:De,showVariablePicker:me,setShowVariablePicker:Ce,template:ge,setTemplate:ye,device:pe,setDevice:ve,display_content:he,setDisplayContent:be,originalVariableList:ke,setOriginalVariableList:He,isError:Se,setIsError:Ee,channel:L,globalNormalizedPlaceholders:tt,templateSelectionTriggered:Ne,setTemplateSelectionTriggered:Ve,enabledCustomText:F,disableEditVariable:Y,pod:R,extras:$,isWhatsappCarousel:ue,selectedCarouselIndex:Me,setSelectedCarouselIndex:Oe,isProductCarouselType:ce,templateErrorIndexes:Pe,cardCount:ue?null===(x=null===(f=g.components)||void 0===f?void 0:f[1].cards)||void 0===x?void 0:x.length:void 0,errorIndexes:fe,setErrorIndexes:xe,pickerConf:U,carouselProducts:Be,setCarouselProducts:qe,disableEditExpiry:Q,cardWidth:G,cardImages:Ie,onDeleteSelectedProducts:J,hideDeviceContainerInPreview:Z,sliderRef:We,isCarouselHovered:Ye,setIsCarouselHovered:Re,maxCharLimit:ee,ctaOptionsErrors:Ze,setCtaOptionsErrors:et,onDefaultVariableSelect:te,disableDatePicker:oe,disableCopyCode:ae,initialExpiryDateTime:ie,showDiscountCodeExpiryInfo:re}},{children:k?e.jsx(c.default,{variableListFromProps:M,channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(i.StyledModal,Object.assign({hideCrossButton:$e,zIndex:N,centralContainerStyles:{width:ue?900:L===r.CHANNEL_TYPE.EMAIL&&I?1e3:800},open:Ke,onClose:()=>{Xe(!1),null==y||y()},headingTitle:null==ge?void 0:ge.label,headingSubtitle:L===r.CHANNEL_TYPE.WHATSAPP?`${o.default.capitaliseFirstLetterOfString(null!==(P=null==ge?void 0:ge.category)&&void 0!==P?P:"")} • ${null!==(T=null==ge?void 0:ge.templateCategory)&&void 0!==T?T:""}`:"",onBackPress:()=>{if(null==de?void 0:de.show)return Je(!0),void Xe(!1);null==q||q()},modalHeaderStyles:{borderBottom:`1px solid ${a.COLORS.stroke.primary}`}},{children:[e.jsx(c.default,{variableListFromProps:M,showSampleValues:W,showVariableMapping:I,channel:L,whatsappSpecificPickerMeta:H,showVariableModal:V,discountCode:O,setDiscountCode:B,variableListForImage:_&&(null==_?void 0:_.length)>0?_:Fe,fileName:K,setFileName:e=>{null==X||X(e)},skipDefaultVariableContent:le}),j?e.jsx(d.default,{isWhatsappCarousel:null!=ue&&ue,onSelect:function(){var e;if((null==Be?void 0:Be.length)<1&&ce)return void Ee(!0);if(Object.keys(Ze).length>0&&R!==s.POD.CHATBOT)return void Ee(!0);const t=null==j?void 0:j(ge,ke,null!=he?he:"",Be);Te(null!==(e=null==t?void 0:t.templateErrorIndexes)&&void 0!==e?e:{body:[],buttons:[]}),(null==t?void 0:t.errorIndexes)||(null==t?void 0:t.error)?((null==t?void 0:t.errorIndexes)&&xe(t.errorIndexes),(null==t?void 0:t.error)&&Ee(!!(null==t?void 0:t.error))):Ve(!0)},footerButtonText:se,footerInfoText:ne}):e.jsx(e.Fragment,{})]}))}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("../../utils/StringUtils.js"),a=require("../modals/styledModal.js"),r=require("../template-preview/models/Channels.js"),i=require("./context/templateModalContext.js"),s=require("./modalElements/Footer.js"),o=require("./modalElements/TemplateSelectModalContent.js"),n=require("./utils/convertPlaceholdersToBikDropdown.js");exports.TemplateContextMapper=d=>{let{selectedTemplate:c,closeDialog:u,showVariableMapping:p,channel:m,htmlContent:h,templateVariables:g,onTemplateSelect:S,globalPlaceholders:j,showOnlyContent:T,whatsappSpecificPickerMeta:v}=d;var E,C;t.useEffect((()=>{x(h)}),[h]);const[M,P]=t.useState(m===r.CHANNEL_TYPE.EMAIL?"desktop":"mobile"),[b,x]=t.useState(h),[f,L]=t.useState(!1),[q,w]=t.useState(c),[y,A]=t.useState(null!=g?g:[]),[N,_]=t.useState(!1);const H=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(j)),[j]);return e.jsx(i.TemplateModalContext.Provider,Object.assign({value:{template:q,setTemplate:w,device:M,setDevice:P,display_content:b,setDisplayContent:x,originalVariableList:y,setOriginalVariableList:A,isError:f,setIsError:L,channel:m,globalNormalizedPlaceholders:H,templateSelectionTriggered:N,setTemplateSelectionTriggered:_}},{children:T?e.jsx(o.default,{channel:r.CHANNEL_TYPE.EMAIL,hideHeader:!0}):e.jsxs(a.StyledModal,Object.assign({centralContainerStyles:{width:m===r.CHANNEL_TYPE.EMAIL&&p?1e3:650},open:!0,onClose:()=>{null==u||u()},headingTitle:null==q?void 0:q.label,headingSubtitle:m===r.CHANNEL_TYPE.WHATSAPP?`${l.default.capitaliseFirstLetterOfString(null!==(E=null==q?void 0:q.category)&&void 0!==E?E:"")} • ${null!==(C=null==q?void 0:q.templateCategory)&&void 0!==C?C:""}`:""},{children:[e.jsx(o.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:v}),S?e.jsx(s.default,{onSelect:function(){const e=null==S?void 0:S(q,y,null!=b?b:"");e?L(!!e):_(!0)}}):e.jsx(e.Fragment,{})]}))}))};

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

@@ -1,152 +1,41 @@
-import { VariableV3 } from "../../../helpers";
-import React, { LegacyRef } from 'react';
-import Slider from 'react-slick';
-import { VariableListInterfaceV2 } from "../../add-variableV2";
-import { CarouselProduct } from "../modalElements/EditWhatsAppCarouselTemplateV2";
+import React from 'react';
 import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
-import { globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
-import { AllTemplateTypes, AllTemplateVariables } from "../../template-preview/models/types";
-import { ExtrasWhatsapp } from "../../template-preview/models/WhatsAppTemplate";
+import { EmailTemplateType } from "../../template-preview/models/EmailTemplate";
+import { SMSTemplateType } from "../../template-preview/models/SmsTemplate";
+import { CUSTOM_VARIABLE, globalNormalizedPlaceholdersType } from "../../template-preview/models/TemplateMeta";
+import { WhatsAppTemplate, WhatsAppTemplateVariables } from "../../template-preview/models/WhatsAppTemplate";
 export type DEVICE_TYPES = 'desktop' | 'mobile';
 export declare const TemplateModalContext: React.Context<{
-    showDiscountCodeExpiryInfo?: boolean | undefined;
-    initialExpiryDateTime?: string | undefined;
-    disableDatePicker?: boolean | undefined;
-    disableCopyCode?: boolean | undefined;
-    hideFooterButton: boolean;
-    setHideFooterButton: React.Dispatch<React.SetStateAction<boolean>>;
-    hideCrossButton: boolean;
-    setHideCrossButton: React.Dispatch<React.SetStateAction<boolean>>;
-    variableList: VariableListInterfaceV2[] | undefined;
-    setVariableList: React.Dispatch<React.SetStateAction<VariableListInterfaceV2[] | undefined>>;
-    variableCallback: any;
-    setVariableCallback: any;
-    showVariablePicker: boolean;
-    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: AllTemplateVariables;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<AllTemplateVariables>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
     channel: CHANNEL_TYPE;
     setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
-    template: AllTemplateTypes;
-    setTemplate?: React.Dispatch<React.SetStateAction<AllTemplateTypes>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | undefined;
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
-    enabledCustomText?: boolean | undefined;
-    disableEditVariable?: boolean | undefined;
-    pod?: string | undefined;
-    extras?: ExtrasWhatsapp | undefined;
-    isWhatsappCarousel?: boolean | undefined;
-    selectedCarouselIndex?: number | undefined;
-    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
-    isProductCarouselType?: boolean | undefined;
-    cardCount?: number | undefined;
-    errorIndexes?: number[] | undefined;
-    setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
-    pickerConf?: {
-        searchInCollection: any;
-        searchProducts: any;
-        fetchCollections: any;
-        fetchProducts: any;
-        storeId: string;
-    } | undefined;
-    carouselProducts?: CarouselProduct[] | undefined;
-    setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
-    disableEditExpiry?: boolean | undefined;
-    cardWidth?: number | undefined;
-    cardImages?: string[] | undefined;
-    onDeleteSelectedProducts?: (() => void) | undefined;
-    hideDeviceContainerInPreview?: boolean | undefined;
-    templateErrorIndexes?: {
-        body?: number[] | undefined;
-        buttons?: number[] | undefined;
-    } | undefined;
-    sliderRef?: LegacyRef<Slider> | undefined;
-    isCarouselHovered?: boolean | undefined;
-    setIsCarouselHovered?: ((value: boolean) => void) | undefined;
-    maxCharLimit?: number | undefined;
-    ctaOptionsErrors?: {
-        [key: string]: string;
-    } | undefined;
-    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
-        [key: string]: string;
-    }>> | undefined;
-    onDefaultVariableSelect?: ((variable: VariableV3) => void) | undefined;
 }>;
 export declare const useTemplateModalContext: () => {
-    showDiscountCodeExpiryInfo?: boolean | undefined;
-    initialExpiryDateTime?: string | undefined;
-    disableDatePicker?: boolean | undefined;
-    disableCopyCode?: boolean | undefined;
-    hideFooterButton: boolean;
-    setHideFooterButton: React.Dispatch<React.SetStateAction<boolean>>;
-    hideCrossButton: boolean;
-    setHideCrossButton: React.Dispatch<React.SetStateAction<boolean>>;
-    variableList: VariableListInterfaceV2[] | undefined;
-    setVariableList: React.Dispatch<React.SetStateAction<VariableListInterfaceV2[] | undefined>>;
-    variableCallback: any;
-    setVariableCallback: any;
-    showVariablePicker: boolean;
-    setShowVariablePicker: React.Dispatch<React.SetStateAction<boolean>>;
     device: DEVICE_TYPES;
     setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
     display_content: string | null;
     setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | undefined;
-    originalVariableList: AllTemplateVariables;
-    setOriginalVariableList?: React.Dispatch<React.SetStateAction<AllTemplateVariables>> | undefined;
+    originalVariableList: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables;
+    setOriginalVariableList?: React.Dispatch<React.SetStateAction<WhatsAppTemplateVariables | CUSTOM_VARIABLE[]>> | undefined;
     channel: CHANNEL_TYPE;
     setChannel?: React.Dispatch<React.SetStateAction<CHANNEL_TYPE>> | undefined;
-    template: AllTemplateTypes;
-    setTemplate?: React.Dispatch<React.SetStateAction<AllTemplateTypes>> | undefined;
+    template: WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null;
+    setTemplate?: React.Dispatch<React.SetStateAction<WhatsAppTemplate | EmailTemplateType | SMSTemplateType | null>> | undefined;
     isError: boolean;
     setIsError?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
     globalNormalizedPlaceholders?: globalNormalizedPlaceholdersType[] | undefined;
     templateSelectionTriggered: boolean;
     setTemplateSelectionTriggered?: React.Dispatch<React.SetStateAction<boolean>> | undefined;
-    enabledCustomText?: boolean | undefined;
-    disableEditVariable?: boolean | undefined;
-    pod?: string | undefined;
-    extras?: ExtrasWhatsapp | undefined;
-    isWhatsappCarousel?: boolean | undefined;
-    selectedCarouselIndex?: number | undefined;
-    setSelectedCarouselIndex?: React.Dispatch<React.SetStateAction<number>> | undefined;
-    isProductCarouselType?: boolean | undefined;
-    cardCount?: number | undefined;
-    errorIndexes?: number[] | undefined;
-    setErrorIndexes?: React.Dispatch<React.SetStateAction<number[]>> | undefined;
-    pickerConf?: {
-        searchInCollection: any;
-        searchProducts: any;
-        fetchCollections: any;
-        fetchProducts: any;
-        storeId: string;
-    } | undefined;
-    carouselProducts?: CarouselProduct[] | undefined;
-    setCarouselProducts?: React.Dispatch<React.SetStateAction<CarouselProduct[]>> | undefined;
-    disableEditExpiry?: boolean | undefined;
-    cardWidth?: number | undefined;
-    cardImages?: string[] | undefined;
-    onDeleteSelectedProducts?: (() => void) | undefined;
-    hideDeviceContainerInPreview?: boolean | undefined;
-    templateErrorIndexes?: {
-        body?: number[] | undefined;
-        buttons?: number[] | undefined;
-    } | undefined;
-    sliderRef?: LegacyRef<Slider> | undefined;
-    isCarouselHovered?: boolean | undefined;
-    setIsCarouselHovered?: ((value: boolean) => void) | undefined;
-    maxCharLimit?: number | undefined;
-    ctaOptionsErrors?: {
-        [key: string]: string;
-    } | undefined;
-    setCtaOptionsErrors?: React.Dispatch<React.SetStateAction<{
-        [key: string]: string;
-    }>> | undefined;
-    onDefaultVariableSelect?: ((variable: VariableV3) => void) | undefined;
 };

package/dist/cjs/components/template-context-mapper/context/templateModalContext.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const l=a(e).default.createContext({hideFooterButton:!1,setHideFooterButton:()=>{},hideCrossButton:!1,setHideCrossButton:()=>{},variableList:[],setVariableList:()=>{},variableCallback:null,setVariableCallback:null,showVariablePicker:!1,setShowVariablePicker:()=>{},device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1,enabledCustomText:!1,disableEditVariable:!1,disableEditExpiry:!1,disableDatePicker:!1,showDiscountCodeExpiryInfo:!1});exports.TemplateModalContext=l,exports.useTemplateModalContext=()=>e.useContext(l);
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=l(e).default.createContext({device:"desktop",templateSelectionTriggered:!1,display_content:null,originalVariableList:[],channel:t.CHANNEL_TYPE.EMAIL,template:null,isError:!1});exports.TemplateModalContext=r,exports.useTemplateModalContext=()=>e.useContext(r);

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

@@ -1,6 +1,3 @@
 export * from './TemplateContextMapper';
 export * from './utils/getDataFromTemplateComponent';
 export * from './utils/validateIsUrl';
-export * from './helpers/WebpushTemplateHelper';
-export * from './modalElements/TemplateAnalyticsSkeleton';
-export * from './modalElements/TemplateAnalyticsComponent';

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

@@ -1,18 +1,9 @@
-import { VariableListInterfaceV2 } from "../../add-variableV2/AddVariableV2";
+/// <reference types="react" />
 import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
 export interface BodyProps {
     showVariableMapping: boolean;
     showOnlyContent?: boolean;
     whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
-    showVariableModal?: boolean;
-    variableListForImage?: VariableListInterfaceV2[];
-    discountCode?: string;
-    setDiscountCode?: (code: string) => void;
-    showSampleValues?: boolean;
-    fileName?: string;
-    setFileName?: (name: string) => void;
-    variableListFromProps?: VariableListInterfaceV2[];
-    skipDefaultVariableContent?: boolean;
 }
-declare const Body: (props: BodyProps) => import("react/jsx-runtime").JSX.Element;
+declare const Body: (props: BodyProps) => JSX.Element;
 export default Body;

package/dist/cjs/components/template-context-mapper/modalElements/Body.js

@@ -1,22 +1,18 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("../../curtain/CurtainHelper.js");var a=require("../../variable-picker-v3/model.js"),t=require("lodash"),i=require("react"),l=require("styled-components"),r=require("../../carousel-preview/CarouselPreview.js"),s=require("./EditWhatsAppCarouselTemplateV2.js"),o=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var n=require("../../../constants/Theme.js");require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js"),d=require("../../TypographyStyle.js"),u=require("../../variable-picker-v3/VariablePicker.js"),c=require("../context/templateModalContext.js"),h=require("../utils/constants.js"),m=require("../utils/getVariableNameEmail.js"),v=require("../utils/highlightFor.js"),w=require("./DesktopPreview.js"),C=require("./EditWebpushTemplate.js"),P=require("./EditWhatsAppTemplateV2.js"),b=require("./MobilePreview.js"),E=require("./VariableConnectorsPanel.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=f(l);const j=x.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("../../template-preview/models/Channels.js"),o=require("../../../constants/Theme.js"),i=require("../context/templateModalContext.js"),r=require("../utils/getVariableNameEmail.js"),a=require("../utils/highlightFor.js"),s=require("./DesktopPreview.js"),d=require("./EditWhatsAppTemplateV2.js"),u=require("./MobilePreview.js"),p=require("./VariableConnectorsPanel.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=c(l);const m=h.default.div`
 	display: flex;
 	//	height: 100%;
-`,g=x.default.div`
-	max-width: 450px;
-	max-width: ${e=>e.channel===p.CHANNEL_TYPE.EMAIL?"400px":"450px"};
+`,f=h.default.div`
+	padding: 16px 14px;
+	border-left-width: 1px;
+	border-left-color: ${o.COLORS.stroke.primary};
+	max-width: 350px;
 
-	height: ${e=>e.channel===p.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
-	overflow-y: auto;
+	height: ${e=>e.channel===n.CHANNEL_TYPE.WHATSAPP?"500px":"475px"};
+	overflow-y: 'auto';
 	padding-bottom: 24px;
-	border-left: ${n.COLORS.stroke.primary} 1px solid;
-	border-top: ${e=>e.isWhatsappCarousel?`${n.COLORS.stroke.primary} 1px solid`:void 0};
-	${e=>!e.showVariableMapping&&"width: 340px; height: 500px"};
-`,A=x.default.div`
-	padding: ${e=>e.isWhatsappCarousel?void 0:e.showOnlyContent?"16px 14px":"16px 32px"};
+`,x=h.default.div`
+	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
 	flex: 1;
-	height: ${e=>e.isWhatsappCarousel||e.hideDeviceContainerInPreview?"500px":"475px"};
+	height: 475px;
 	overflow-y: auto;
-	background-image: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.CHANNEL_TYPE.WHATSAPP?`url(${h.BACKGROUND_PREVIEW_IMAGE});`:"none"};
-	display: ${e=>e.hideDeviceContainerInPreview&&e.channel===p.CHANNEL_TYPE.WHATSAPP?"flex":"initial"};
-	align-items: flex-start;
-`;exports.default=l=>{const{showVariableMapping:h,showOnlyContent:f,whatsappSpecificPickerMeta:x,showVariableModal:T,discountCode:N,setDiscountCode:S,variableListForImage:y,showSampleValues:k,variableListFromProps:L,fileName:V,setFileName:H,skipDefaultVariableContent:W}=l,q=i.useRef(),M=i.useRef(),{variableList:_,setVariableList:D,variableCallback:O,showVariablePicker:I,setShowVariablePicker:Y,device:B,display_content:F,channel:$,template:R,setTemplate:G,isWhatsappCarousel:U,isProductCarouselType:K,hideDeviceContainerInPreview:z,onDefaultVariableSelect:J}=c.useTemplateModalContext();const Q=e=>{let a=0;for(;e;)a+=e.offsetTop,e=e.offsetParent;return a};return e.jsxs(j,{children:[e.jsx(A,Object.assign({showOnlyContent:f,showVariableMapping:h,isWhatsappCarousel:U,hideDeviceContainerInPreview:z,channel:$,skipDefaultVariableContent:W},{children:"mobile"===B?e.jsx(b.default,{ref:M,display_content:null!=F?F:"",channel:$,template:R,showSampleValues:k}):$===p.CHANNEL_TYPE.WHATSAPP&&U?e.jsx(r.CarouselPreview,{ref:q,channel:$,template:R,showSampleValues:k,isPreview:!1,showArrows:!0}):$===p.CHANNEL_TYPE.WEBPUSH?e.jsx(o.TemplatePreview,{showSampleValues:k,channel:$,hideHeader:!0,template:R}):$!==p.CHANNEL_TYPE.MESSAGE?e.jsx(w.default,{ref:q,channel:$,display_content:null!=F?F:"",showSampleValues:k}):e.jsx(e.Fragment,{})})),(K||h)&&e.jsxs(g,Object.assign({channel:$,isWhatsappCarousel:U,showVariableMapping:!0},{children:[e.jsx("div",Object.assign({style:{height:"100%",width:"whatsapp"===$?428:400,display:I?"block":"none"}},{children:e.jsx(u.VariablePicker,{hideHeaderCross:!0,showHeader:!0,showBackButton:!0,onBackButtonClick:()=>{D(t.cloneDeep(L)),Y(!1)},onSelect:e=>{O(e),D(t.cloneDeep(L)),Y(!1)},type:a.PickerType.EMBEDDED,data:null!=_?_:[],onDefaultVariableSelect:J,skipDefaultVariableContent:W},Math.random())})),e.jsx("div",Object.assign({style:{padding:"16px 14px",width:"whatsapp"===$||"webpush"==$?428:400,display:I?"none":"block"}},{children:$!==p.CHANNEL_TYPE.WHATSAPP?$==p.CHANNEL_TYPE.WEBPUSH?e.jsx(C.default,{whatsappSpecificPickerMeta:x,template:R,onTemplateChange:e=>{null==G||G(e)},showVariableModal:T}):e.jsx(E.default,{onFocus:$===p.CHANNEL_TYPE.EMAIL?function(e){var a,t,i;const l=null===document||void 0===document?void 0:document.getElementById("mobile"===B?"template_html_mobile":"template_html_desktop"),r=m.getVariableNameForEmailByIndex(e+1),s=$===p.CHANNEL_TYPE.EMAIL?null===(a=null==l?void 0:l.contentWindow)||void 0===a?void 0:a.document.getElementById(r):document.getElementById(r),o=Q(s),d=null==s?void 0:s.offsetLeft;"desktop"===B?o&&q.current&&(null===(t=null==l?void 0:l.contentWindow)||void 0===t||t.scrollTo(null!=d?d:0,o),v.highlightFor(r,n.COLORS.background.warning.light,2,$,B)):o&&M.current&&(null===(i=null==l?void 0:l.contentWindow)||void 0===i||i.scrollTo(null!=d?d:0,o),v.highlightFor(r,n.COLORS.background.warning.light,2,$,B))}:void 0,showVariableModal:T,discountCode:N,setDiscountCode:S}):$===p.CHANNEL_TYPE.WHATSAPP&&U?e.jsx(s.default,{whatsappSpecificPickerMeta:x,template:R,showVariableModal:T,variableListForImage:y,discountCode:N,setDiscountCode:S}):e.jsx(P.default,{whatsappSpecificPickerMeta:x,template:R,onTemplateChange:e=>{null==G||G(e)},showVariableModal:T,variableListForImage:y,discountCode:N,setDiscountCode:S,fileName:V,setFileName:H})}))]})),[p.CHANNEL_TYPE.WHATSAPP,p.CHANNEL_TYPE.SMS].includes($)&&!h&&!K&&e.jsx(g,{children:e.jsx(d.BodySecondary,Object.assign({color:n.COLORS.content.secondary,style:{fontStyle:"italic"}},{children:"Click on ‘Select template’ below to use it"}))})]})};
+`;exports.default=l=>{const{showVariableMapping:c,showOnlyContent:h,whatsappSpecificPickerMeta:g}=l,v=t.useRef(),j=t.useRef(),{device:E,display_content:w,channel:b,template:y,setTemplate:C}=i.useTemplateModalContext();const P=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e.jsxs(m,{children:[e.jsx(x,Object.assign({showOnlyContent:h,showVariableMapping:c},{children:"mobile"===E?e.jsx(u.default,{ref:j,display_content:null!=w?w:"",channel:b,template:y}):b!==n.CHANNEL_TYPE.MESSAGE?e.jsx(s.default,{ref:v,channel:b,display_content:null!=w?w:""}):e.jsx(e.Fragment,{})})),c&&e.jsx(f,Object.assign({channel:b},{children:b!==n.CHANNEL_TYPE.WHATSAPP?e.jsx(p.default,{onFocus:b===n.CHANNEL_TYPE.EMAIL?function(e){var t,l,i;const s=null===document||void 0===document?void 0:document.getElementById("mobile"===E?"template_html_mobile":"template_html_desktop"),d=r.getVariableNameForEmailByIndex(e+1),u=b===n.CHANNEL_TYPE.EMAIL?null===(t=null==s?void 0:s.contentWindow)||void 0===t?void 0:t.document.getElementById(d):document.getElementById(d),p=P(u),c=null==u?void 0:u.offsetLeft;"desktop"===E?p&&v.current&&(null===(l=null==s?void 0:s.contentWindow)||void 0===l||l.scrollTo(null!=c?c:0,p),a.highlightFor(d,o.COLORS.background.warning.light,2,b,E)):p&&j.current&&(null===(i=null==s?void 0:s.contentWindow)||void 0===i||i.scrollTo(null!=c?c:0,p),a.highlightFor(d,o.COLORS.background.warning.light,2,b,E))}:void 0}):e.jsx(d.default,{whatsappSpecificPickerMeta:g,template:y,onTemplateChange:e=>{null==C||C(e)}})}))]})};

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

@@ -3,6 +3,5 @@ import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
 declare const DesktopPreview: React.ForwardRefExoticComponent<{
     display_content: string;
     channel: CHANNEL_TYPE;
-    showSampleValues?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default DesktopPreview;

package/dist/cjs/components/template-context-mapper/modalElements/DesktopPreview.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js"),require("../../template-preview/WhatsApp/WhatsAppLikePreviewV2.js");var s=require("../../../constants/Theme.js");require("../../curtain/CurtainHelper.js"),require("../../variable-picker-v3/model.js"),require("../../template-preview/models/TemplateMeta.js"),require("../../template-preview/models/WhatsAppTemplate.js");var p=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(r),o=l(t);const n=o.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("styled-components"),i=require("../../spinner/Spinner.js"),a=require("../../template-preview/TemplatePreview.js");require("../../template-preview/WhatsApp/WhatsAppLikePreview.js");var s=require("../../../constants/Theme.js"),d=require("../../template-preview/models/Channels.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(r),p=l(t);const n=p.default.div`
 	background: ${s.COLORS.surface.standard};
 	border: 1px solid ${s.COLORS.stroke.primary};
 	border-radius: 8px;
@@ -6,15 +6,15 @@
 	/* max-height: 420px; */
 	scroll-behavior: smooth;
 	height: 100%;
-`,u=o.default.div`
+`,u=p.default.div`
 	padding: 18px 24px 12px;
 	display: flex;
 	gap: 4px;
 	border-bottom-width: 1px;
 	border-bottom-color: ${s.COLORS.stroke.primary};
-`,m=o.default.div`
+`,h=p.default.div`
 	width: 6px;
 	height: 6px;
 	background: #d9d9d9;
 	border-radius: 3px;
-`,h=d.default.forwardRef(((r,t)=>{let{display_content:s,showSampleValues:l}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(m,{}),e.jsx(m,{}),e.jsx(m,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{showSampleValues:l,channel:p.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{height:441},templateContainerStyles:{height:"100%"}},hidePointerEvents:!0}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));h.displayName="DesktopPreview",exports.default=h;
+`,c=o.default.forwardRef(((r,t)=>{let{display_content:s}=r;return e.jsxs(n,Object.assign({ref:t},{children:[e.jsxs(u,{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}),e.jsx("div",{children:s?e.jsx(a.TemplatePreview,{channel:d.CHANNEL_TYPE.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:s,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):e.jsx("div",Object.assign({style:{padding:20}},{children:e.jsx(i.Spinner,{size:"small"})}))})]}))}));c.displayName="DesktopPreview",exports.default=c;

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

@@ -2,13 +2,11 @@
 import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
 export interface EditMediaV2Props {
     imageName: string[];
-    selectedVariable?: string;
     errorSecondaryText?: string;
     error?: string;
     isLoading?: boolean;
     mediaType?: HEADER_TYPES;
     handleImageChange?: () => void;
-    setOpenEditMedia?: React.Dispatch<React.SetStateAction<boolean>>;
 }
-declare const EditMediaV2: (props: EditMediaV2Props) => import("react/jsx-runtime").JSX.Element;
+declare const EditMediaV2: (props: EditMediaV2Props) => JSX.Element;
 export default EditMediaV2;

package/dist/cjs/components/template-context-mapper/modalElements/EditMediaV2.js

@@ -1,9 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/broken_media_image.svg.js"),t=require("../../../assets/icons/document_pdf.svg.js"),s=require("../../../assets/icons/edit.svg.js"),r=require("../../../assets/icons/refresh.svg.js"),n=require("styled-components"),a=require("../../shimmer-image/ShimmerImage.js"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),c=require("../../../utils/StringUtils.js"),g=require("../../../constants/Theme.js"),h=require("../context/templateModalContext.js"),u=require("./EditMediaV2.style.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const m=j(n).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../assets/icons/document_pdf.svg.js"),i=require("../../../assets/icons/edit.svg.js"),s=require("../../../assets/icons/refresh.svg.js"),r=require("../../../assets/icons/video_camcorder.svg.js"),n=require("styled-components"),o=require("../../spinner/Spinner.js"),l=require("../../template-preview/models/TemplateMeta.js"),d=require("../../TypographyStyle.js"),a=require("../../../utils/StringUtils.js"),c=require("../../../constants/Theme.js"),h=require("./EditMediaV2.style.js");function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const j=g(n).default.div`
 	padding-left: 14px;
 	padding-right: 6px;
-	height: 100%;
-	border-left: 1px solid ${g.COLORS.stroke.primary};
+	width: 44px;
+	height: 24px;
+	border-left: 1px solid ${c.COLORS.stroke.primary};
 	cursor: pointer;
-	display: flex;
-	align-items: center;
-`;exports.default=n=>{const{imageName:j,error:p,isLoading:x,mediaType:f,selectedVariable:y,setOpenEditMedia:O}=n,b=null==j?void 0:j[0].split("/"),v=null==b?void 0:b[b.length-1],{disableEditVariable:C}=h.useTemplateModalContext();return e.jsxs(u.Container,{children:[e.jsx(u.ImageContainer,Object.assign({error:!!p,onClick:()=>null==O?void 0:O(!0)},{children:p?e.jsx(i.default,{width:56,height:56}):x?e.jsx(o.Spinner,{size:"small"}):y?e.jsx(a.ShimmerImage,{imageUrl:"https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F629bff40-6405-4514-9203-029bca59a7b0?alt=media&token=228e2231-176e-46d8-b29f-532d72592f51",width:56,height:56}):f===l.HEADER_TYPES.IMAGE?e.jsx(a.ShimmerImage,{imageUrl:null==j?void 0:j[0],width:56,height:56}):f===l.HEADER_TYPES.VIDEO?e.jsx("video",Object.assign({src:j[0],style:{width:56,height:56}},{children:e.jsx("track",{default:!0,kind:"captions",srcLang:"en",src:j[0]})})):e.jsx(t.default,{width:18,height:22,color:g.COLORS.content.placeholder})})),e.jsxs(u.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:p?"unset":1}},{children:j&&p?e.jsx(e.Fragment,{}):x?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:g.COLORS.content.primary,marginLeft:8}},{children:y||c.default.toCapitilize(null==f?void 0:f.toLowerCase())||v}))})),!!p&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8,gap:"2px"}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:g.COLORS.content.negative}},{children:["Error loading this ",null==f?void 0:f.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:g.COLORS.content.secondary}},{children:p}))]}))]}),!C&&!x&&e.jsx(m,Object.assign({onClick:()=>null==O?void 0:O(!0),onKeyDown:()=>null==O?void 0:O(!0),role:"presentation"},{children:p?e.jsx(r.default,{color:g.COLORS.content.brand,width:24,height:24}):e.jsx(s.default,{width:24,height:24,color:g.COLORS.content.placeholder})}))]})};
+`;exports.default=n=>{const{imageName:g,error:u,isLoading:p,mediaType:x,handleImageChange:y}=n,O=null==g?void 0:g[0].split("/"),m=null==O?void 0:O[O.length-1];return e.jsxs(h.Container,{children:[e.jsx(h.ImageContainer,Object.assign({error:!!u,onClick:u?y:void 0},{children:u?e.jsx(s.default,{color:c.COLORS.content.brand,width:32,height:32}):p?e.jsx(o.Spinner,{size:"small"}):x===l.HEADER_TYPES.IMAGE?e.jsx("img",{alt:"",src:null==g?void 0:g[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):x===l.HEADER_TYPES.VIDEO?e.jsx(r.default,{width:18,height:22,color:c.COLORS.content.placeholder}):e.jsx(t.default,{width:18,height:22,color:c.COLORS.content.placeholder})})),e.jsxs(h.RightComponent,{children:[e.jsx("div",Object.assign({style:{flex:1}},{children:g&&u?e.jsx(e.Fragment,{}):p?e.jsx(d.BodyCaption,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):e.jsx(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.primary,marginLeft:8}},{children:a.default.toCapitilize(null==x?void 0:x.toLowerCase())||m}))})),!!u&&e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e.jsxs(d.BodySecondary,Object.assign({style:{color:c.COLORS.content.negative}},{children:["Error loading this ",null==x?void 0:x.toLowerCase(),". Retry"]})),e.jsx(d.Caption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:u}))]})),!u&&!p&&e.jsx(j,Object.assign({onClick:y,onKeyDown:y,role:"presentation"},{children:e.jsx(i.default,{width:24,height:24,color:c.COLORS.content.placeholder})}))]})]})};