@bikdotai/bik-component-library 0.0.21 → 0.0.22-beta.1

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./utils/StringUtils.js"),t=require("./constants/Theme.js"),o=require("./components/checkBox/CheckBox.js"),r=require("./components/list-item/ListItem.js"),n=require("./components/pagination/Pagination.js"),s=require("./components/radioButton/RadioButton.js"),p=require("./components/toaster/Toaster.js"),i=require("./components/tooltips/Tooltip.js"),a=require("./components/tooltips/CustomisedTooltip.js"),u=require("./components/spinner/Spinner.js"),l=require("./components/stepper/Stepper.js"),m=require("./components/tag/Tag.js"),c=require("./components/icon-button/IconButton.js"),x=require("./components/template-preview/constants/regexPatterns.js"),d=require("./components/template-preview/TemplatePreview.js"),g=require("./components/template-preview/WhatsApp/WhatsAppLikePreview.js"),B=require("./components/template-preview/helpers/SmsTemplateHelper.js"),T=require("./components/template-preview/helpers/WhatsAppFormatToHTML.js"),y=require("./components/fab-menu/FABMenu.js"),S=require("./components/floating-action-button/FloatingActionButton.js"),P=require("./components/floating-action-button/FloatingActionButton.styles.js"),j=require("./components/image-compress/ImageCompress.js"),q=require("./components/TypographyStyle.js"),C=require("./components/button/Button.js"),L=require("./components/progress-bar/ProgressBarComponent.js"),O=require("./components/modals/styledModal.js");require("react/jsx-runtime"),require("react");var A=require("./components/input/Input.js");require("./components/dropdown/UnChildDropdown/UnChildDropdown.js"),exports.StringUtils=e.default,exports.BASE_COLORS=t.BASE_COLORS,exports.COLORS=t.COLORS,exports.DEFAULT_THEME=t.DEFAULT_THEME,exports.FONTS=t.FONTS,exports.CheckBox=o.CheckBox,exports.ListItem=r.ListItem,exports.Pagination=n.Pagination,exports.RadioButton=s.RadioButton,exports.Toaster=p.Toaster,exports.Tooltip=i.Tooltip,exports.CustomisedTooltip=a.CustomisedTooltip,Object.defineProperty(exports,"TooltipPlacement",{enumerable:!0,get:function(){return a.TooltipPlacement}}),exports.Spinner=u.Spinner,exports.Stepper=l.Stepper,exports.Tag=m.Tag,exports.IconButton=c.IconButton,exports.regexPatterns=x,exports.TemplatePreview=d.TemplatePreview,exports.WhatsappLikePreview=g.WhatsappLikePreview,exports.renderVariableUIForPreview=B.renderVariableUIForPreview,exports.WhatsAppFormatToHTML=T.WhatsAppFormatToHTML,exports.FABMenu=y.FABMenu,exports.FloatingActionButton=S.FloatingActionButton,Object.defineProperty(exports,"DROP_POSITION",{enumerable:!0,get:function(){return P.DROP_POSITION}}),exports.DropdownToggleContainer=P.DropdownToggleContainer,Object.defineProperty(exports,"FAB_POSITION",{enumerable:!0,get:function(){return P.FAB_POSITION}}),exports.FloatingActionButtonContainer=P.FloatingActionButtonContainer,exports.FloatingActionButtonOuterContainer=P.FloatingActionButtonOuterContainer,Object.defineProperty(exports,"MENU_ALIGNMENT",{enumerable:!0,get:function(){return P.MENU_ALIGNMENT}}),exports.StyledDropdown=P.StyledDropdown,exports.ImageService=j.ImageService,exports.BodyCaption=q.BodyCaption,exports.BodyLarge=q.BodyLarge,exports.BodyPrimary=q.BodyPrimary,exports.BodyPrimaryLink=q.BodyPrimaryLink,exports.BodyRegular=q.BodyRegular,exports.BodySecondary=q.BodySecondary,exports.BodySecondaryLink=q.BodySecondaryLink,exports.BodyTiny=q.BodyTiny,exports.ButtonLarge=q.ButtonLarge,exports.ButtonRegular=q.ButtonRegular,exports.Caption=q.Caption,exports.Display=q.Display,exports.SubHeading=q.SubHeading,exports.TitleLarge=q.TitleLarge,exports.TitleMedium=q.TitleMedium,exports.TitleRegular=q.TitleRegular,exports.TitleSmall=q.TitleSmall,exports.Button=C.Button,exports.ProgressBarComponent=L.ProgressBarComponent,exports.ProgressCompletedBar=L.ProgressCompletedBar,exports.StyledModal=O.StyledModal,exports.Input=A.Input;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./components/template-preview/constants/regexPatterns.js"),o=require("./utils/StringUtils.js"),t=require("./constants/Theme.js"),r=require("./components/checkBox/CheckBox.js"),n=require("./components/list-item/ListItem.js"),p=require("./components/pagination/Pagination.js"),s=require("./components/radioButton/RadioButton.js"),i=require("./components/toaster/Toaster.js"),a=require("./components/tooltips/Tooltip.js"),u=require("./components/tooltips/CustomisedTooltip.js"),l=require("./components/spinner/Spinner.js"),m=require("./components/stepper/Stepper.js"),d=require("./components/tag/Tag.js"),c=require("./components/icon-button/IconButton.js"),x=require("./components/template-preview/TemplatePreview.js"),g=require("./components/template-preview/WhatsApp/WhatsAppLikePreview.js"),B=require("./components/template-preview/helpers/SmsTemplateHelper.js"),T=require("./components/template-preview/helpers/WhatsAppFormatToHTML.js"),y=require("./components/template-context-mapper/TemplateContextMapper.js"),j=require("./components/fab-menu/FABMenu.js"),S=require("./components/floating-action-button/FloatingActionButton.js"),P=require("./components/floating-action-button/FloatingActionButton.styles.js"),C=require("./components/image-compress/ImageCompress.js"),q=require("./components/TypographyStyle.js"),w=require("./components/button/Button.js"),O=require("./components/progress-bar/ProgressBarComponent.js"),L=require("./components/modals/styledModal.js"),A=require("./components/dropdown/Dropdown.js"),I=require("./components/dropdown/UnChildDropdown/UnChildDropdown.js"),F=require("./components/dropdown/opennedDropdown/components/OpennedDropdown.js"),D=require("./components/input/Input.js");exports.regexPatterns=e,exports.StringUtils=o.default,exports.BASE_COLORS=t.BASE_COLORS,exports.COLORS=t.COLORS,exports.DEFAULT_THEME=t.DEFAULT_THEME,exports.FONTS=t.FONTS,exports.CheckBox=r.CheckBox,exports.ListItem=n.ListItem,exports.Pagination=p.Pagination,exports.RadioButton=s.RadioButton,exports.Toaster=i.Toaster,exports.Tooltip=a.Tooltip,exports.CustomisedTooltip=u.CustomisedTooltip,Object.defineProperty(exports,"TooltipPlacement",{enumerable:!0,get:function(){return u.TooltipPlacement}}),exports.Spinner=l.Spinner,exports.Stepper=m.Stepper,exports.Tag=d.Tag,exports.IconButton=c.IconButton,exports.TemplatePreview=x.TemplatePreview,exports.WhatsappLikePreview=g.WhatsappLikePreview,exports.renderVariableUIForPreview=B.renderVariableUIForPreview,exports.WhatsAppFormatToHTML=T.WhatsAppFormatToHTML,exports.TemplateContextMapper=y.TemplateContextMapper,exports.FABMenu=j.FABMenu,exports.FloatingActionButton=S.FloatingActionButton,Object.defineProperty(exports,"DROP_POSITION",{enumerable:!0,get:function(){return P.DROP_POSITION}}),exports.DropdownToggleContainer=P.DropdownToggleContainer,Object.defineProperty(exports,"FAB_POSITION",{enumerable:!0,get:function(){return P.FAB_POSITION}}),exports.FloatingActionButtonContainer=P.FloatingActionButtonContainer,exports.FloatingActionButtonOuterContainer=P.FloatingActionButtonOuterContainer,Object.defineProperty(exports,"MENU_ALIGNMENT",{enumerable:!0,get:function(){return P.MENU_ALIGNMENT}}),exports.StyledDropdown=P.StyledDropdown,exports.ImageService=C.ImageService,exports.BodyCaption=q.BodyCaption,exports.BodyLarge=q.BodyLarge,exports.BodyPrimary=q.BodyPrimary,exports.BodyPrimaryLink=q.BodyPrimaryLink,exports.BodyRegular=q.BodyRegular,exports.BodySecondary=q.BodySecondary,exports.BodySecondaryLink=q.BodySecondaryLink,exports.BodyTiny=q.BodyTiny,exports.ButtonLarge=q.ButtonLarge,exports.ButtonRegular=q.ButtonRegular,exports.Caption=q.Caption,exports.Display=q.Display,exports.SubHeading=q.SubHeading,exports.TitleLarge=q.TitleLarge,exports.TitleMedium=q.TitleMedium,exports.TitleRegular=q.TitleRegular,exports.TitleSmall=q.TitleSmall,exports.Button=w.Button,exports.ProgressBarComponent=O.ProgressBarComponent,exports.ProgressCompletedBar=O.ProgressCompletedBar,exports.StyledModal=L.StyledModal,exports.Dropdown=A.Dropdown,exports.UnChildDropdown=I.UnChildDropdown,exports.OpennedDropdown=F.OpennedDropdown,exports.Input=D.Input;

package/dist/cjs/utils/StringUtils.d.ts

@@ -7,4 +7,5 @@ export default class StringUtils {
     static detectUrl: (str: string) => RegExpMatchArray | null;
     static getAvatarText(name: string): string;
     static firstLetters: (string: string) => string;
+    static capitaliseFirstLetterOfString(string: string): string;
 }

package/dist/cjs/utils/StringUtils.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}}),exports.default=e;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});class e{static convertToTitleCase(e){const t=(e=e.toLowerCase()).split(" ");for(let e=0;e<t.length;e++)t[e]=t[e].charAt(0).toUpperCase()+t[e].slice(1);return t.join(" ")}static getAvatarText(e){if(e){const t=e.match(/\b(\w)/g),r=null==t?void 0:t.join("");return r?r.substring(0,2).toUpperCase():"C"}return""}static capitaliseFirstLetterOfString(e){return e.charAt(0).toUpperCase()+e.slice(1).toLowerCase()}}Object.defineProperty(e,"normalizeName",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>{const r=e.split(t).join(" ");return r[0].toUpperCase()+r.slice(1)}}),Object.defineProperty(e,"capitalize",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var t;return e.charAt(0).toUpperCase()+(null===(t=e.slice(1))||void 0===t?void 0:t.toLowerCase())}}),Object.defineProperty(e,"pluralize",{enumerable:!0,configurable:!0,writable:!0,value:(e,t)=>0===t||t>1?e+"s":e}),Object.defineProperty(e,"getFullPhoneNumber",{enumerable:!0,configurable:!0,writable:!0,value:e=>e?"+91"+e.slice(e.length-10):""}),Object.defineProperty(e,"detectUrl",{enumerable:!0,configurable:!0,writable:!0,value:e=>e.match(/(((https?:\/\/)|(www\.))[^\s]+)/g)}),Object.defineProperty(e,"firstLetters",{enumerable:!0,configurable:!0,writable:!0,value:e=>{let t="";return e.split(" ").forEach((e=>{e.length&&(t+=e[0])})),t.substr(0,2)}}),exports.default=e;

package/dist/cjs/utils/bytesToMB.d.ts

@@ -0,0 +1 @@
+export declare const bytesToMB: (bytes: number) => number;

package/dist/cjs/utils/bytesToMB.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});exports.bytesToMB=e=>e/Math.pow(1024,2);

package/dist/esm/assets/icons/chevronDown.svg.js

@@ -0,0 +1 @@
+import*as r from"react";var t;function e(){return e=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(r[a]=e[a])}return r},e.apply(this,arguments)}var a=a=>r.createElement("svg",e({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},a),t||(t=r.createElement("path",{fill:"currentColor",d:"M7.707 10.707C7.077 10.077 7.523 9 8.414 9h7.172c.89 0 1.337 1.077.707 1.707l-3.586 3.586a1 1 0 0 1-1.414 0l-3.586-3.586Z"})));export{a as default};

package/dist/esm/assets/icons/desktop_custom.svg.js

@@ -0,0 +1 @@
+import*as e from"react";var a;function r(){return r=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(this,arguments)}var t=t=>e.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 20 20"},t),a||(a=e.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M.833 5.833a2.5 2.5 0 0 1 2.5-2.5h13.334a2.5 2.5 0 0 1 2.5 2.5V12.5a2.5 2.5 0 0 1-2.5 2.5h-5.834v1.666h3.334a.833.833 0 0 1 0 1.667H5.833a.833.833 0 1 1 0-1.667h3.334V15H3.333a2.5 2.5 0 0 1-2.5-2.5V5.833ZM3.333 5a.833.833 0 0 0-.833.833V12.5c0 .46.373.833.833.833h13.334c.46 0 .833-.373.833-.833V5.833A.833.833 0 0 0 16.667 5H3.333Z",clipRule:"evenodd"})));export{t as default};

package/dist/esm/assets/icons/document_pdf.svg.js

@@ -0,0 +1 @@
+import*as a from"react";var e,r,t;function l(){return l=Object.assign?Object.assign.bind():function(a){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(a[t]=r[t])}return a},l.apply(this,arguments)}var n=n=>a.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 19 22"},n),e||(e=a.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M3.98 16.9a.1.1 0 0 0 .1.1h.722a.1.1 0 0 0 .1-.1v-1.215a.1.1 0 0 1 .1-.1h.675c1.004 0 1.588-.599 1.588-1.47 0-.867-.573-1.479-1.564-1.479H4.079a.1.1 0 0 0-.1.1V16.9Zm1.022-2.054a.1.1 0 0 1-.1-.1V13.49a.1.1 0 0 1 .1-.1h.522c.533 0 .79.29.79.724 0 .433-.257.73-.786.73h-.526ZM9.41 17c1.33 0 2.136-.823 2.136-2.186 0-1.36-.806-2.178-2.122-2.178h-1.46a.1.1 0 0 0-.1.1V16.9a.1.1 0 0 0 .1.1h1.447Zm-.523-.79a.1.1 0 0 1-.1-.1v-2.583a.1.1 0 0 1 .1-.1h.488c.818 0 1.25.417 1.25 1.387 0 .974-.432 1.395-1.252 1.395h-.486Z",clipRule:"evenodd"})),r||(r=a.createElement("path",{fill:"currentColor",d:"M12.33 17a.1.1 0 0 1-.1-.1v-4.164a.1.1 0 0 1 .1-.1h2.688a.1.1 0 0 1 .1.1v.561a.1.1 0 0 1-.1.1h-1.766a.1.1 0 0 0-.1.1v.84a.1.1 0 0 0 .1.1h1.575a.1.1 0 0 1 .1.1v.56a.1.1 0 0 1-.1.1h-1.575a.1.1 0 0 0-.1.1V16.9a.1.1 0 0 1-.1.1h-.723Z"})),t||(t=a.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M3.6 0a3 3 0 0 0-3 3v16a3 3 0 0 0 3 3h12a3 3 0 0 0 3-3V7.586L11.014 0H3.6Zm-1 3a1 1 0 0 1 1-1h6v4a3 3 0 0 0 3 3h4v10a1 1 0 0 1-1 1h-12a1 1 0 0 1-1-1V3Zm12.586 4L11.6 3.414V6a1 1 0 0 0 1 1h2.586Z",clipRule:"evenodd"})));export{n as default};

package/dist/esm/assets/icons/edit.svg.js

@@ -0,0 +1 @@
+import*as e from"react";var a;function r(){return r=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(this,arguments)}var t=t=>e.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 24 24"},t),a||(a=e.createElement("path",{fillRule:"evenodd",d:"M17.718 5a1.282 1.282 0 0 0-.907.376L6.105 16.08l-.68 2.494 2.494-.68L18.624 7.189a1.281 1.281 0 0 0-.906-2.19Zm-1.256-1.75a3.282 3.282 0 0 1 3.577 5.353L9.145 19.497a1 1 0 0 1-.444.257l-4.438 1.21a1 1 0 0 1-1.228-1.227l1.21-4.438a1 1 0 0 1 .258-.444L15.397 3.96a3.281 3.281 0 0 1 1.065-.711Z",clipRule:"evenodd"})));export{t as default};

package/dist/esm/assets/icons/info.svg.js

@@ -0,0 +1 @@
+import*as e from"react";var r,t;function a(){return a=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},a.apply(this,arguments)}var l=l=>e.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16"},l),r||(r=e.createElement("path",{fill:"currentColor",d:"M8 7.333c.368 0 .667.299.667.667v2.666a.667.667 0 1 1-1.334 0V8c0-.368.299-.667.667-.667ZM8 6a.667.667 0 1 0 0-1.334A.667.667 0 0 0 8 6Z"})),t||(t=e.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M.667 8a7.333 7.333 0 1 1 14.666 0A7.333 7.333 0 0 1 .667 8ZM8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2Z",clipRule:"evenodd"})));export{l as default};

package/dist/esm/assets/icons/mobile_custom.svg.js

@@ -0,0 +1 @@
+import*as e from"react";var r,t;function a(){return a=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},a.apply(this,arguments)}var l=l=>e.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 20 20"},l),r||(r=e.createElement("path",{fill:"currentColor",d:"M10 14.166a.833.833 0 0 0 0 1.667h.008a.833.833 0 0 0 0-1.667H10Z"})),t||(t=e.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M5.833.833a2.5 2.5 0 0 0-2.5 2.5v13.333a2.5 2.5 0 0 0 2.5 2.5h8.334a2.5 2.5 0 0 0 2.5-2.5V3.333a2.5 2.5 0 0 0-2.5-2.5H5.833ZM5 3.333c0-.46.373-.833.833-.833h8.334c.46 0 .833.373.833.833v13.333c0 .46-.373.834-.833.834H5.833A.833.833 0 0 1 5 16.666V3.333Z",clipRule:"evenodd"})));export{l as default};

package/dist/esm/assets/icons/refresh.svg.js

@@ -0,0 +1 @@
+import*as r from"react";var t;function a(){return a=Object.assign?Object.assign.bind():function(r){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var e in a)Object.prototype.hasOwnProperty.call(a,e)&&(r[e]=a[e])}return r},a.apply(this,arguments)}var e=e=>r.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 24 24"},e),t||(t=r.createElement("path",{d:"M17.407 1.506a1 1 0 0 0-1.783-.1l-1.123 1.946a9 9 0 1 0 6.501 8.647 1 1 0 0 0-2 .002 7 7 0 1 1-5.54-6.849l-.666 1.152a1 1 0 0 0 .979 1.494l4.73-.535a1 1 0 0 0 .804-1.393l-1.902-4.364Z"})));export{e as default};

package/dist/esm/assets/icons/video_camcorder.svg.js

@@ -0,0 +1 @@
+import*as e from"react";var a;function r(){return r=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var r=arguments[a];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(e[t]=r[t])}return e},r.apply(this,arguments)}var t=t=>e.createElement("svg",r({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},t),a||(a=e.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M17 10.057V7a3 3 0 0 0-3-3H3a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h11a3 3 0 0 0 3-3v-3.057l5.419 3.87A1 1 0 0 0 24 17V7a1 1 0 0 0-1.581-.814L17 10.056ZM2 7a1 1 0 0 1 1-1h11a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V7Zm20 8.057L17.72 12 22 8.943v6.114Z",clipRule:"evenodd"})));export{t as default};

package/dist/esm/components/dropdown/Common.styled.d.ts

@@ -1,2 +1,3 @@
 export declare const OverLapAbs: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OpenDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dropdown/Common.styled.js

@@ -1,4 +1,4 @@
-import o from"styled-components";const t=o.div`
+import o from"styled-components";import{COLORS as r}from"../../constants/Theme.js";const e=o.div`
 	position: absolute;
 	left: 0px;
 	top: 0px;
@@ -9,4 +9,12 @@ import o from"styled-components";const t=o.div`
 `,i=o.div`
 	margin-top: 8px;
 	margin-bottom: 8px;
-`;export{i as OpenDropdownContainer,t as OverLapAbs};
+`;o.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 6px 8px;
+	background: ${r.surface.hovered};
+	border: 1px solid ${r.stroke.primary};
+	border-radius: 4px;
+`;export{i as OpenDropdownContainer,e as OverLapAbs};

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -3,6 +3,6 @@ import { OpenDropdownProps } from './type';
 export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small';
+    disabled?: boolean;
 };
-declare const Dropdown: React.FC<DropdownProps>;
-export default Dropdown;
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/esm/components/dropdown/Dropdown.js

@@ -0,0 +1 @@
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{useRef as t,useState as n,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{UnChildDropdown as d}from"./UnChildDropdown/UnChildDropdown.js";function p(){}const c=c=>{var u,m,{placeHolder:h,size:v,onSelect:f,defaultOptions:g,disabled:b}=c,j=o(c,["placeHolder","size","onSelect","defaultOptions","disabled"]);const w=null!=v?v:"default",x=t(),[O,y]=n(null!=g?g:[]);r((()=>{var o;const e=[];null===(o=null==j?void 0:j.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&e.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&e.push(o)})),y([...e])}),[j.options]),r((()=>{g&&y([...g])}),[g]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return e(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===w?32:48,width:null!==(u=j.width)&&void 0!==u?u:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:e(d,Object.assign({ref:x,onSelect:function(o){Array.isArray(o)?y([...o]):y([o]),null==f||f(o)},disabled:b},j,{children:e(s,{state:b?"disabled":"none",value:I,errorMessage:j.error,variant:w,placeholder:null!=h?h:"Select an option",width:null!==(m=j.width)&&void 0!==m?m:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return e(l,{style:{transform:(null===(o=null==x?void 0:x.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===w?20:24,height:"small"===w?20:24,color:i.content.primary})}}})}))}))};export{c as Dropdown};

package/dist/esm/components/dropdown/UnChildDropdown/UnChildDropdown.d.ts

@@ -1,12 +1,9 @@
 import React from 'react';
 import { OpenDropdownProps } from '../type';
-export type DropdownProps = OpenDropdownProps & {
-    isLoading?: boolean;
-    children?: React.ReactNode;
-};
 export declare const UnChildDropdown: React.ForwardRefExoticComponent<OpenDropdownProps & {
     isLoading?: boolean | undefined;
     children?: React.ReactNode;
+    disabled?: boolean | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

package/dist/esm/components/dropdown/UnChildDropdown/UnChildDropdown.js

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsxs as e,Fragment as n,jsx as r}from"react/jsx-runtime";import t,{useState as l,useImperativeHandle as i,useEffect as p}from"react";import{usePopper as s}from"react-popper";import{OverLapAbs as c,OpenDropdownContainer as d}from"../Common.styled.js";import{OpennedDropdown as a}from"../opennedDropdown/components/OpennedDropdown.js";const m=t.forwardRef(((t,m)=>{var{children:u}=t,f=o(t,["children"]);const v=m,[j,b]=l(!1),[h,w]=l(null),[D,O]=l(null),{styles:g,attributes:y}=s(h,D,{});return i(v,(()=>({openDropdown:j})),[]),p((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),e(n,{children:[e("div",Object.assign({style:{position:"relative"},ref:w},{children:[r(c,{onClick:o=>{j?o.preventDefault():b(!0)}}),u]})),j&&r(d,Object.assign({ref:O,style:Object.assign(Object.assign({},g.popper),{zIndex:3})},y.popper,{children:r(a,Object.assign({},f,{onSelect:o=>{var e;null===(e=f.onSelect)||void 0===e||e.call(f,o),b(!1)},onClose:function(){var o;b(!1),null===(o=null==f?void 0:f.onClose)||void 0===o||o.call(f)}}))}))]})}));m.displayName="UnChildDropdown";export{m as UnChildDropdown};
+import{__rest as e}from"../../../_virtual/_tslib.js";import{jsxs as o,Fragment as n,jsx as r}from"react/jsx-runtime";import t,{useState as l,useImperativeHandle as i,useEffect as p}from"react";import{usePopper as s}from"react-popper";import{OverLapAbs as c,OpenDropdownContainer as d}from"../Common.styled.js";import{OpennedDropdown as a}from"../opennedDropdown/components/OpennedDropdown.js";const m=t.forwardRef(((t,m)=>{var{children:u}=t,f=e(t,["children"]);const v=m,[j,b]=l(!1),[h,w]=l(null),[D,O]=l(null),{styles:g,attributes:y}=s(h,D,{});return i(v,(()=>({openDropdown:j})),[]),p((()=>{(null==v?void 0:v.current)&&(v.current.openDropdown=j)}),[j]),o(n,{children:[o("div",Object.assign({style:{position:"relative"},ref:w},{children:[r(c,{onClick:e=>{j?e.preventDefault():f.disabled||b(!0)}}),u]})),j&&r(d,Object.assign({ref:O,style:Object.assign(Object.assign({},g.popper),{zIndex:3})},y.popper,{children:r(a,Object.assign({},f,{onSelect:e=>{var o;null===(o=f.onSelect)||void 0===o||o.call(f,e),b(!1)},onClose:function(){var e;b(!1),null===(e=null==f?void 0:f.onClose)||void 0===e||e.call(f)}}))}))]})}));m.displayName="UnChildDropdown";export{m as UnChildDropdown};

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

@@ -1 +1,3 @@
 export * from './Dropdown';
+export * from './UnChildDropdown/UnChildDropdown';
+export * from './opennedDropdown';

package/dist/esm/components/dropdown/opennedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useRef as o,useEffect as n}from"react";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as s}from"../utils/iterationOnOptions.js";import{Description as r}from"./description/Description.js";import{FreeFormMenu as c}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as d,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as h}from"./searchbox/SearchZeroState.js";const b=304,j=290,S=S=>{let{options:g,isSearchable:v,isMultiSelect:O,width:x,allowFreeForm:F,height:w,onClose:y,onSelect:M}=S;const[D,A]=l(null!=g?g:[]),[B,C]=l(null!=x?x:j),[k,E]=l(""),[H,L]=l(null),W=o(null);i(W,(()=>{L(null),null==y||y()}));const Z=null!=w?w:b,q="number"==typeof Z?v&&O?Z-96:v&&!O||!v&&O?Z-48:Z:Z;function z(e){if(O){const t=s(D,{selected:e.selected},(t=>t.value===e.value));A([...t])}else null==M||M(e)}n((()=>{const e=null!=x?x:j;null===H?C(e):"number"==typeof e&&C(2*e)}),[H]);const G=D.map((e=>{var t;if(k){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(k))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(k))?e:null}return e})).filter((e=>null!==e)),I=!!v&&k&&0===G.length;return e(d,Object.assign({ref:W,style:{maxWidth:H?800:400,width:B,height:Z}},{children:[e("div",Object.assign({style:{width:H?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!v&&t(f,{onSearch:function(e){E(e)}}),e(m,Object.assign({maxHeight:q},{children:[!!O&&!I&&t(a,{options:D,onSelect:function(e){if("selectAll"===e){const e=s(D,{selected:!0},(e=>!e.disabled));A([...e])}else if("notSelected"===e){const e=s(D,{selected:!1},(e=>!e.disabled));A([...e])}}}),!F&&I&&t(h,{searchedString:k}),F&&I&&t(c,{isMultiSelect:O,onSelect:function(e){if(!O)return void z({label:k,value:k,isFreeForm:!0,selected:!0});const t=D.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===k&&t.value===k&&e})));e&&(t.some((e=>e.label===k&&e.value===k))||t.unshift({label:k,value:k,isFreeForm:!0,selected:!0})),A([...t])},searchedString:k}),t(u,{onSelect:z,showDescription:function(e,t){L(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:G})]})),!!O&&t(p,{onClear:function(){const e=s(D,{selected:!1});A([...e])},onApply:function(){const e=[];D.forEach((t=>{if(t.options){const l=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...l]}))}else t.selected&&e.push(Object.assign({},t))})),null==M||M([...e])},list:D})]})),!!H&&t(r,{title:H.title,description:H.description})]}))};export{S as OpennedDropdown};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useRef as n,useEffect as o}from"react";import{useOutside as i}from"../../../../hooks/useOutside.js";import{iterateOnOptions as s}from"../utils/iterationOnOptions.js";import{Description as r}from"./description/Description.js";import{FreeFormMenu as c}from"./menu/FreeFormMenu.js";import{MenuList as u}from"./menu/MenuList.js";import{SelectAllMenu as a}from"./menu/SelectAllMenu.js";import p from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as d,MenuListContainer as m}from"./OpennedDropdown.styled.js";import{SearchBox as f}from"./searchbox/SearchBox.js";import{SearchZeroState as h}from"./searchbox/SearchZeroState.js";const b=304,j=290,S=S=>{let{options:g,isSearchable:v,isMultiSelect:O,width:x,allowFreeForm:y,height:F,onClose:w,onSelect:M}=S;const[D,A]=l(null!=g?g:[]),[B,C]=l(null!=x?x:j),[W,k]=l(""),[E,H]=l(null),I=n(null);i(I,(()=>{H(null),null==w||w()}));const L=null!=F?F:b,Z="number"==typeof L?v&&O?L-96:v&&!O||!v&&O?L-48:L:L;function q(e){if(O){const t=s(D,{selected:e.selected},(t=>t.value===e.value));A([...t])}else null==M||M(e)}o((()=>{const e=null!=x?x:j;if(null===E)C(e);else if("number"==typeof e)C(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));C(t)}}),[E]);const z=D.map((e=>{var t;if(W){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.includes(W))})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.includes(W))?e:null}return e})).filter((e=>null!==e)),G=!!v&&W&&0===z.length;return e(d,Object.assign({ref:I,style:{maxWidth:E?800:400,width:B}},{children:[e("div",Object.assign({style:{width:E?"50%":"100%",display:"flex",flexDirection:"column"}},{children:[!!v&&t(f,{onSearch:function(e){k(e)}}),e(m,Object.assign({maxHeight:Z},{children:[!!O&&!G&&t(a,{options:D,onSelect:function(e){if("selectAll"===e){const e=s(D,{selected:!0},(e=>!e.disabled));A([...e])}else if("notSelected"===e){const e=s(D,{selected:!1},(e=>!e.disabled));A([...e])}}}),!y&&G&&t(h,{searchedString:W}),y&&G&&t(c,{isMultiSelect:O,onSelect:function(e){if(!O)return void q({label:W,value:W,isFreeForm:!0,selected:!0});const t=D.map((t=>t.options?t:Object.assign(Object.assign({},t),{selected:t.label===W&&t.value===W&&e})));e&&(t.some((e=>e.label===W&&e.value===W))||t.unshift({label:W,value:W,isFreeForm:!0,selected:!0})),A([...t])},searchedString:W}),t(u,{onSelect:q,showDescription:function(e,t){H(e&&t?{title:e,description:t}:null)},isMultiSelect:O,options:z})]})),!!O&&t(p,{onClear:function(){const e=s(D,{selected:!1});A([...e])},onApply:function(){const e=[];D.forEach((t=>{if(t.options){const l=t.options.filter((e=>!0===e.selected));e.push(Object.assign(Object.assign({},t),{options:[...l]}))}else t.selected&&e.push(Object.assign({},t))})),null==M||M([...e])},list:D})]})),!!E&&t(r,{title:E.title,description:E.description})]}))};export{S as OpennedDropdown};

package/dist/esm/components/dropdown/opennedDropdown/components/menu/MenuItem.js

@@ -1 +1,3 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{CheckBox as i}from"../../../../checkBox/CheckBox.js";import{ListItem as o}from"../../../../list-item/ListItem.js";import{BodyCaption as s}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{FreeFormContainer as n}from"./FreeFormMenu.styled.js";const c=c=>{let{option:l,isMultiSelect:a,showDescription:d,onSelect:m}=c;var p;function f(e){l.disabled||m(Object.assign(Object.assign({},l),{selected:e}))}return e(o,{onClick:e=>{e.preventDefault(),f(!l.selected)},onMouseOver:function(){l.descriptions?d(l.label,l.descriptions):d()},listItem:l,trailingIcon:a?e(i,{isDisabled:null!==(p=l.disabled)&&void 0!==p&&p,isChecked:!!l.selected,onValueChange:f}):e(t,{}),leadingIcon:l.isFreeForm?e(n,{children:e(s,Object.assign({style:{color:r.content.secondary}},{children:"Freeform"}))}):e(t,{}),variant:l.disabled?"inactive":"default"})};export{c as MenuItem};
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import o from"styled-components";import{CheckBox as i}from"../../../../checkBox/CheckBox.js";import{ListItem as n}from"../../../../list-item/ListItem.js";import{BodyCaption as s}from"../../../../TypographyStyle.js";import{COLORS as r}from"../../../../../constants/Theme.js";import{FreeFormContainer as l}from"./FreeFormMenu.styled.js";const c=o(n)`
+	padding: 14px 16px !important;
+`,a=o=>{let{option:n,isMultiSelect:a,showDescription:m,onSelect:d}=o;var p;function u(e){n.disabled||d(Object.assign(Object.assign({},n),{selected:e}))}return e(c,{onClick:e=>{e.preventDefault(),u(!n.selected)},onMouseOver:function(){n.descriptions?m(n.label,n.descriptions):m()},listItem:{value:n.value,label:n.label},subText:n.subText,leadingIcon:a?e(i,{isDisabled:null!==(p=n.disabled)&&void 0!==p&&p,isChecked:!!n.selected,onValueChange:u}):e(t,{}),customComponent:n.customComponent,trailingIcon:n.isFreeForm?e(l,{children:e(s,Object.assign({style:{color:r.content.secondary}},{children:"Freeform"}))}):n.trailingIcon?e(t,{children:n.trailingIcon}):e(t,{}),variant:n.disabled?"inactive":n.selected?"selected":"default"})};export{a as MenuItem};

package/dist/esm/components/dropdown/opennedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js

@@ -1,8 +1,9 @@
-import e from"styled-components";const o=e.div`
+import o from"styled-components";import{COLORS as t}from"../../../../../constants/Theme.js";const e=o.div`
 	display: flex;
 	padding: 8px 16px;
 	flex-direction: row;
 	align-items: center;
 	justify-content: end;
 	box-shadow: 0px -2px 8px rgba(0, 0, 0, 0.12);
-`;export{o as BottomBarContainer};
+	background: ${t.surface.standard};
+`;export{e as BottomBarContainer};

package/dist/esm/components/dropdown/opennedDropdown/components/searchbox/SearchBox.js

@@ -1 +1 @@
-import{jsx as r,Fragment as o}from"react/jsx-runtime";import{createRef as t}from"react";import{Input as e}from"../../../../input/Input.js";import{InputStyleContext as n}from"../../../../input/context/InputStyleProvider.js";import{COLORS as i}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import s from"../../../../../assets/icons/search.svg.js";const p=p=>{let{onSearch:a}=p;const l=t();return r(n.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+i.stroke.primary,padding:"12px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:r(e,{ref:l,placeholder:"Search",leftIcon:{icon:()=>r(s,{width:24,height:24,color:i.content.placeholder})},rightIcon:{icon:()=>{var t;return(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.value)?r(c,{onClick:()=>{l.current&&(l.current.value=""),a("")},width:24,height:24,color:i.content.placeholder}):r(o,{})}},onChangeText:a})}))};export{p as SearchBox};
+import{jsx as r,Fragment as o}from"react/jsx-runtime";import{createRef as t}from"react";import{Input as e}from"../../../../input/Input.js";import{InputStyleContext as n}from"../../../../input/context/InputStyleProvider.js";import{COLORS as i}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import s from"../../../../../assets/icons/search.svg.js";const p=p=>{let{onSearch:a}=p;const l=t();return r(n.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:"1px solid "+i.stroke.primary,padding:"14px 16px"},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:r(e,{ref:l,placeholder:"Search",leftIcon:{icon:()=>r(s,{width:24,height:24,color:i.content.placeholder})},rightIcon:{icon:()=>{var t;return(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.value)?r(c,{onClick:()=>{l.current&&(l.current.value=""),a("")},width:24,height:24,color:i.content.placeholder}):r(o,{})}},onChangeText:a})}))};export{p as SearchBox};

package/dist/esm/components/dropdown/opennedDropdown/utils/iterationOnOptions.d.ts

@@ -1,24 +1,24 @@
+/// <reference types="react" />
 import { DropdownOption, SingleOption } from '../../type';
-export declare function iterateOnOptions(options: DropdownOption[], newVal: SingleOption, checkCB?: (optionForValidation: SingleOption) => boolean): ({
-    options: {
-        label?: string | undefined;
-        value?: string | undefined;
-        descriptions?: string | undefined;
-        selected?: boolean | undefined;
-        disabled?: boolean | undefined;
-        isFreeForm?: boolean | undefined;
-    }[];
-    label?: string | undefined;
-    value?: string | undefined;
-    descriptions?: string | undefined;
+export declare function iterateOnOptions(options: DropdownOption[], newVal: Partial<SingleOption>, checkCB?: (optionForValidation: SingleOption) => boolean): ({
+    label: string;
+    value: string;
+    descriptions?: string | null | undefined;
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
 } | {
     label?: string | undefined;
     value?: string | undefined;
-    descriptions?: string | undefined;
+    descriptions?: string | null | undefined;
     selected?: boolean | undefined;
     disabled?: boolean | undefined;
     isFreeForm?: boolean | undefined;
+    subText?: string | undefined;
+    trailingIcon?: JSX.Element | undefined;
+    customComponent?: JSX.Element | undefined;
+    options: SingleOption[];
 })[];

package/dist/esm/components/dropdown/type.d.ts

@@ -1,25 +1,30 @@
+/// <reference types="react" />
 export interface OpenDropdownProps {
+    defaultOptions?: DropdownOption[];
     options: DropdownOption[];
     isSearchable?: boolean;
     error?: string;
     isMultiSelect?: boolean;
-    width?: number | string;
+    width?: string;
     height?: number | string;
     allowFreeForm?: boolean;
     onClose?: () => void;
-    onSelect?: (option: SingleOption | SingleOption[]) => void;
+    onSelect?: (option: DropdownOption | DropdownOption[]) => void;
 }
 export type GroupedOption = {
     label?: string;
     options: (SingleOption | MultiSelectOption)[];
 };
 export type SingleOption = {
-    label?: string;
-    value?: string;
-    descriptions?: string;
+    label: string;
+    value: string;
+    descriptions?: string | null;
     selected?: boolean;
     disabled?: boolean;
     isFreeForm?: boolean;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
 };
 export type MultiSelectOption = SingleOption;
 export type DropdownOption = MultiSelectOption | SingleOption | GroupedOption;

package/dist/esm/components/fab-menu/FABMenu.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { DropdownOption, SingleOption } from '../dropdown/type';
+import { DropdownOption } from '../dropdown/type';
 import { DROP_POSITION, FAB_POSITION, MENU_ALIGNMENT } from '../floating-action-button/FloatingActionButton.styles';
 import { TooltipPlacement } from '../tooltips';
 export declare const FABMenu: React.FC<{
-    onSelect: (selected: SingleOption | SingleOption[]) => void;
+    onSelect: (selected: DropdownOption | DropdownOption[]) => void;
     menuOptions: DropdownOption[];
     buttonWidth?: number;
     buttonHeight?: number;

package/dist/esm/components/fab-menu/FABMenu.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:u,buttonPosition:c,menuWidth:p,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:u,position:c,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j},{children:t(o,{options:d,height:s||90,width:p,onSelect:e})}))})};export{i as FABMenu};
+import{jsx as t}from"react/jsx-runtime";import{OpennedDropdown as o}from"../dropdown/opennedDropdown/components/OpennedDropdown.js";import{FloatingActionButton as n}from"../floating-action-button/FloatingActionButton.js";import"../floating-action-button/FloatingActionButton.styles.js";const i=i=>{const{onSelect:e,menuOptions:d,buttonWidth:r,buttonHeight:l,buttonColor:u,buttonPosition:p,menuWidth:c,menuHeight:s,buttonIcon:a,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j}=i;return t("div",{children:t(n,Object.assign({icon:a,width:r,height:l,color:u,position:p,buttonPaddingHorizontal:m,buttonPaddingVertical:g,tooltipPlacement:b,tooltipText:h,zIndex:P,isRound:x,dropPosition:f,menuAligment:j},{children:t(o,{options:d,height:s||90,width:`${c}px`,onSelect:e})}))})};export{i as FABMenu};

package/dist/esm/components/helpers/FileUploaderHelper.d.ts

@@ -0,0 +1,12 @@
+export declare const FILE_TYPE_NOT_SUPPORT = "File type no supported";
+export declare const FILE_SIZE_REACHED: (size: number) => string;
+export declare const getFileFormatErrorMessage: (format: string) => string;
+export declare const SIZE_LIMIT_MAP: {
+    image: number;
+    video: number;
+    application: number;
+};
+export declare const SUPPORTED_FILE_FORMAT: string[];
+export declare class FileUploaderHelper {
+    validate(file: Blob): string | undefined;
+}

package/dist/esm/components/helpers/FileUploaderHelper.js

@@ -0,0 +1 @@
+import{bytesToMB as e}from"../../utils/bytesToMB.js";const i="File type no supported",p=e=>`Max file size of ${e}mb is allowed`,t=e=>`Only ${e.toUpperCase()} format allowed`,o={image:5,video:16,application:100},r=["mp4","png","jpeg","jpg","pdf"];class a{validate(a){const l=a.size,[s,n]=a.type.split("/");if(!o[s])return i;if(e(l)>o[s])return p(o[s]);if(!r.includes(n.toLocaleLowerCase())){if("video"===s)return t("mp4");if("image"===s)return t("png, jpeg, jpg");if("application"===s)return t("pdf")}}}export{p as FILE_SIZE_REACHED,i as FILE_TYPE_NOT_SUPPORT,a as FileUploaderHelper,o as SIZE_LIMIT_MAP,r as SUPPORTED_FILE_FORMAT,t as getFileFormatErrorMessage};

package/dist/esm/components/input/Input.d.ts

@@ -34,7 +34,8 @@ export interface InputProps {
     suffixText?: string;
     prefixText?: string;
     value?: string;
-    onBlur?: () => void;
+    id?: string;
+    onBlur?: (e: any) => void;
     onFocus?: () => void;
 }
 export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/esm/components/input/Input.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as h,InputWrapper as v,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=i(((i,C)=>{var I,O,w;const{placeholder:T,leftIcon:k,rightIcon:B,labelText:L,maxCharLimit:S,isRequired:D,hintText:F,type:z,state:A,validate:E,variant:K,button:M,suffixText:R,prefixText:q,onChangeText:H,value:N}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),P=null==k?void 0:k.icon,W=null==B?void 0:B.icon,[G,J]=l(""),[Q,U]=l(!1),[V,X]=l(!1),[Y,Z]=l(),$="small"===K?"18px":"22px",_=r(d);o((()=>{Z(i.errorMessage)}),[i.errorMessage]),o((()=>{U(!1),("invalid"===i.state||Y)&&U(!0)}),[i.state,Y]),o((()=>{U(!!Y)}),[Y]),o((()=>{if(H(G),!E||!j(E))return;const[e,t]=E(G);U(!e),Z(t)}),[G]);const ee=function(e){if(j(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},te=e=>{![8].includes(e.which)&&S>0&&e.target.value.length===S&&e.preventDefault()},ne=e=>{J(e.target.value)},ie=()=>{var l;return e(n,{children:["multiline"!==z&&t("input",{style:null!==(l=null==_?void 0:_.input)&&void 0!==l?l:{},ref:C,type:z,value:N,onFocus:()=>(X(!0),void ee(i.onFocus)),onBlur:()=>(X(!1),void ee(i.onBlur)),placeholder:T||"Enter here",onChange:ne,onKeyDown:e=>te(e)}),"multiline"===z&&t("textarea",{value:N,ref:C,onFocus:()=>X(!0),onBlur:()=>X(!1),placeholder:T||"Enter here",onChange:ne,onKeyDown:e=>te(e)})]})};return e(u,Object.assign({width:i.width,height:i.height,state:A,type:z,style:null!==(I=null==_?void 0:_.RootContainer)&&void 0!==I?I:{}},{children:[(!!F||!!Y)&&e(h,Object.assign({invalid:!!Y},{children:[!!Y&&t(c,{}),Y||F]})),e(v,Object.assign({variant:K,state:A,width:i.width,isActive:"active"===A||V,isInvalid:Q,style:null!==(O=null==_?void 0:_.InputWrapper)&&void 0!==O?O:{}},{children:[!!P&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==k?void 0:k.callback),isLeft:!0,style:null!==(w=null==_?void 0:_.IconHolder)&&void 0!==w?w:{}},{children:t(P,{})})),!!q&&t(f,Object.assign({variant:K},{children:q})),"default"===K&&t(g,{children:ie()}),"small"===K&&t(m,{children:ie()}),!!W&&t(p,Object.assign({variant:K,iconSize:$,onClick:()=>ee(null==k?void 0:k.callback),isLeft:!1},{children:t(W,{})})),!!R&&t(x,Object.assign({variant:K},{children:R})),M&&M.text&&t(a,{buttonText:M.text,onClick:()=>ee(null==M?void 0:M.onClick)})]})),(!!L||!!S)&&"default"===K&&e(y,Object.assign({invalid:Q},{children:[e(s,{children:[L,D?t("span",{children:"*"}):""]}),S>0&&e(b,{children:[G.length,"/",S]})]}))]}))}));C.displayName="Input";export{C as Input};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as i,useState as l,useContext as r,useEffect as o}from"react";import{Button as a}from"../button/Button.js";import{BodySecondary as s}from"../TypographyStyle.js";import c from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as d}from"./context/InputStyleProvider.js";import{RootContainer as u,InputFooter as v,InputWrapper as h,IconHolder as p,PrefixHolder as f,InputContainer as g,InputContainerSmall as m,SuffixHolder as x,InputHeader as y,MaxCharStyle as b}from"./Input.styled.js";const j=e=>e&&"function"==typeof e,C=i(((i,C)=>{var I,O,w,T;const{placeholder:k,leftIcon:B,rightIcon:L,labelText:S,maxCharLimit:D,isRequired:F,hintText:z,type:A,state:E,validate:K,variant:M,button:R,suffixText:q,prefixText:H,onChangeText:N,value:P,id:W}=Object.assign({maxCharLimit:0,type:"text",variant:"default"},i),G=null==B?void 0:B.icon,J=null==L?void 0:L.icon,[Q,U]=l(null!==(I=i.value)&&void 0!==I?I:""),[V,X]=l(!1),[Y,Z]=l(!1),[$,_]=l(),ee="small"===M?"18px":"22px",te=r(d);o((()=>{var e;U(null!==(e=i.value)&&void 0!==e?e:"")}),[i.value]),o((()=>{_(i.errorMessage)}),[i.errorMessage]),o((()=>{X(!1),("invalid"===i.state||$)&&X(!0)}),[i.state,$]),o((()=>{X(!!$)}),[$]),o((()=>{if(N(Q),!K||!j(K))return;const[e,t]=K(Q);X(!e),_(t)}),[Q]);const ne=function(e){if(j(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},ie=e=>{![8].includes(e.which)&&D>0&&e.target.value.length===D&&e.preventDefault()},le=e=>{U(e.target.value)},re=()=>{var l;return e(n,{children:["multiline"!==A&&t("input",{id:W,style:null!==(l=null==te?void 0:te.input)&&void 0!==l?l:{},ref:C,type:A,value:P,onFocus:()=>(Z(!0),void ne(i.onFocus)),onBlur:e=>(e=>{var t;Z(!1),ne(null===(t=i.onBlur)||void 0===t?void 0:t.call(i,e))})(e),placeholder:k||"Enter here",onChange:le,onKeyDown:e=>ie(e)}),"multiline"===A&&t("textarea",{value:P,ref:C,onFocus:()=>Z(!0),onBlur:()=>Z(!1),placeholder:k||"Enter here",onChange:le,onKeyDown:e=>ie(e)})]})};return e(u,Object.assign({width:i.width,height:i.height,state:E,type:A,style:null!==(O=null==te?void 0:te.RootContainer)&&void 0!==O?O:{}},{children:[(!!z||!!$)&&e(v,Object.assign({invalid:!!$},{children:[!!$&&t(c,{}),$||z]})),e(h,Object.assign({variant:M,state:E,width:i.width,isActive:"active"===E||Y,isInvalid:V,style:null!==(w=null==te?void 0:te.InputWrapper)&&void 0!==w?w:{}},{children:[!!G&&t(p,Object.assign({variant:M,iconSize:ee,onClick:()=>ne(null==B?void 0:B.callback),isLeft:!0,style:null!==(T=null==te?void 0:te.IconHolder)&&void 0!==T?T:{}},{children:t(G,{})})),!!H&&t(f,Object.assign({variant:M},{children:H})),"default"===M&&t(g,{children:re()}),"small"===M&&t(m,{children:re()}),!!J&&t(p,Object.assign({variant:M,iconSize:ee,onClick:()=>ne(null==B?void 0:B.callback),isLeft:!1},{children:t(J,{})})),!!q&&t(x,Object.assign({variant:M},{children:q})),R&&R.text&&t(a,{buttonText:R.text,onClick:()=>ne(null==R?void 0:R.onClick)})]})),(!!S||!!D)&&"default"===M&&e(y,Object.assign({invalid:V},{children:[e(s,{children:[S,F?t("span",{children:"*"}):""]}),D>0&&e(b,{children:[Q.length,"/",D]})]}))]}))}));C.displayName="Input";export{C as Input};

package/dist/esm/components/list-item/ListItem.d.ts

@@ -12,5 +12,6 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     leadingIcon?: JSX.Element;
     trailingIcon?: JSX.Element;
     borderBottom?: string;
+    customComponent?: JSX.Element;
 }
 export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/esm/components/list-item/ListItem.js

@@ -1 +1 @@
-import{__rest as t}from"../../_virtual/_tslib.js";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{forwardRef as r}from"react";import{getColor as o}from"./themes.js";import{BodySecondary as s,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as n}from"../../constants/Theme.js";import{ListItem as a}from"./ListItem.styled.js";const m=r(((r,m)=>{var{id:c,onSelect:d,variant:p="default",trailingIcon:f,leadingIcon:b,subText:y,listItem:g,borderBottom:j}=r,x=t(r,["id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom"]);return e(a,Object.assign({ref:m,id:c,variant:p,onClick:()=>d&&d(g),borderBottom:j},x,{children:[!!f&&f,e("div",Object.assign({style:{display:"flex",rowGap:"4px",flexDirection:"column"}},{children:[!!g&&i(s,Object.assign({style:{color:o(p)}},{children:g.label})),!!y&&i(l,Object.assign({style:{color:n.text.secondary}},{children:y}))]})),!!b&&i("div",Object.assign({style:{display:"flex",marginLeft:"auto"}},{children:b}))]}))}));m.displayName="ListItem";export{m as ListItem};
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e,Fragment as o,jsxs as i}from"react/jsx-runtime";import{forwardRef as r}from"react";import{getColor as s}from"./themes.js";import{BodySecondary as n,BodyCaption as l}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";import{ListItem as m}from"./ListItem.styled.js";const c=r(((r,c)=>{var{id:d,onSelect:p,variant:f="default",trailingIcon:b,leadingIcon:y,subText:g,listItem:j,borderBottom:h,customComponent:u}=r,x=t(r,["id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent"]);return e(m,Object.assign({ref:c,id:d,variant:f,onClick:()=>p&&p(j),borderBottom:h},x,{children:u?e(o,{children:u}):i(o,{children:[!!y&&y,i("div",Object.assign({style:{display:"flex",rowGap:"4px",flexDirection:"column"}},{children:[!!j&&e(n,Object.assign({style:{color:s(f)}},{children:j.label})),!!g&&e(l,Object.assign({style:{color:a.text.secondary}},{children:g}))]})),!!b&&e("div",Object.assign({style:{display:"flex",marginLeft:"auto"}},{children:b}))]})}))}));c.displayName="ListItem";export{c as ListItem};

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

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

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

@@ -0,0 +1,10 @@
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import e from"../../../assets/icons/alert.svg.js";import o from"styled-components";import{BodySecondary as n}from"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";const s=o.div`
+	background: ${i.background.negative.light};
+	display: flex;
+	align-items: center;
+	padding: 0px 12px;
+	gap: 8px;
+	border-radius: 4px;
+	margin-right: 12px;
+	color: ${i.content.negative};
+`,p=o=>{const{errorText:p}=o;return r(s,{children:[t(e,{height:20,width:20,color:i.content.negative}),t(n,{children:p})]})};export{p as Badge,s as BadgeContainer};

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

@@ -0,0 +1,21 @@
+/// <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 { WhatsAppPickerMeta, WhatsAppTemplate, WhatsAppTemplateVariables } from '../template-preview/models/WhatsAppTemplate';
+export interface TemplateContextMapperProps {
+    selectedTemplate: WhatsAppTemplate | EmailTemplateType | SMSTemplateType;
+    closeDialog?: () => void;
+    showVariableMapping: boolean;
+    channel: CHANNEL_TYPE;
+    globalPlaceholders: GlobalPlaceholderType;
+    /** List of variables being used in this template */
+    templateVariables: CUSTOM_VARIABLE[];
+    /** Only for initial-UI-purpose for the modal */
+    htmlContent: string;
+    showOnlyContent?: boolean;
+    onTemplateSelect?(template: EmailTemplateType | SMSTemplateType | WhatsAppTemplate, variables: CUSTOM_VARIABLE[] | WhatsAppTemplateVariables, display_content?: string): string | void;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+}
+export declare const TemplateContextMapper: ({ selectedTemplate, closeDialog, showVariableMapping, channel, htmlContent, templateVariables, onTemplateSelect, globalPlaceholders, showOnlyContent, whatsappSpecificPickerMeta, }: TemplateContextMapperProps) => JSX.Element;

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

@@ -0,0 +1 @@
+import{jsx as e,jsxs as t,Fragment as l}from"react/jsx-runtime";import{useEffect as o,useState as i,useMemo as a}from"react";import n from"../../utils/StringUtils.js";import{StyledModal as r}from"../modals/styledModal.js";import{CHANNEL_TYPE as s}from"../template-preview/models/Channels.js";import{TemplateModalContext as c}from"./context/templateModalContext.js";import m from"./modalElements/Footer.js";import p from"./modalElements/TemplateSelectModalContent.js";import{convertPlaceholdersToBikDropdown as d}from"./utils/convertPlaceholdersToBikDropdown.js";const h=h=>{let{selectedTemplate:u,closeDialog:g,showVariableMapping:f,channel:v,htmlContent:b,templateVariables:j,onTemplateSelect:M,globalPlaceholders:S,showOnlyContent:C,whatsappSpecificPickerMeta:w}=h;var P,y;o((()=>{A(b)}),[b]);const[E,T]=i(v===s.EMAIL?"desktop":"mobile"),[L,A]=i(b),[O,V]=i(!1),[k,x]=i(u),[D,I]=i(null!=j?j:[]);const F=a((()=>d(S)),[S]);return e(c.Provider,Object.assign({value:{template:k,setTemplate:x,device:E,setDevice:T,display_content:L,setDisplayContent:A,originalVariableList:D,setOriginalVariableList:I,isError:O,setIsError:V,channel:v,globalNormalizedPlaceholders:F}},{children:C?e(p,{channel:s.EMAIL,hideHeader:!0}):t(r,Object.assign({centralContainerStyles:{width:v===s.EMAIL&&f?1e3:650},open:!0,onClose:()=>{null==g||g()},headingTitle:null==k?void 0:k.label,headingSubtitle:v===s.WHATSAPP?`${n.capitaliseFirstLetterOfString(null!==(P=null==k?void 0:k.category)&&void 0!==P?P:"")} • ${null!==(y=null==k?void 0:k.templateCategory)&&void 0!==y?y:""}`:""},{children:[e(p,{showVariableMapping:f,channel:v,whatsappSpecificPickerMeta:w}),M?e(m,{onSelect:function(){const e=null==M?void 0:M(k,D,null!=L?L:"");e&&V(!!e)}}):e(l,{})]}))}))};export{h as TemplateContextMapper};

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

@@ -0,0 +1,37 @@
+import React from '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, 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<{
+    device: DEVICE_TYPES;
+    setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
+    display_content: string | null;
+    setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | 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: 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;
+}>;
+export declare const useTemplateModalContext: () => {
+    device: DEVICE_TYPES;
+    setDevice?: React.Dispatch<React.SetStateAction<DEVICE_TYPES>> | undefined;
+    display_content: string | null;
+    setDisplayContent?: React.Dispatch<React.SetStateAction<string | null>> | 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: 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;
+};

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

@@ -0,0 +1 @@
+import e,{useContext as t}from"react";import{CHANNEL_TYPE as r}from"../../template-preview/models/Channels.js";const l=e.createContext({device:"desktop",display_content:null,originalVariableList:[],channel:r.EMAIL,template:null,isError:!1}),o=()=>t(l);export{l as TemplateModalContext,o as useTemplateModalContext};

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

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

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { WhatsAppPickerMeta } from "../../template-preview/models/WhatsAppTemplate";
+export interface BodyProps {
+    showVariableMapping: boolean;
+    showOnlyContent?: boolean;
+    whatsappSpecificPickerMeta?: WhatsAppPickerMeta;
+}
+declare const Body: (props: BodyProps) => JSX.Element;
+export default Body;

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

@@ -0,0 +1,18 @@
+import{jsxs as e,jsx as t,Fragment as o}from"react/jsx-runtime";import{useRef as n}from"react";import r from"styled-components";import{CHANNEL_TYPE as l}from"../../template-preview/models/Channels.js";import{COLORS as i}from"../../../constants/Theme.js";import{useTemplateModalContext as a}from"../context/templateModalContext.js";import{getVariableNameForEmailByIndex as p}from"../utils/getVariableNameEmail.js";import{highlightFor as s}from"../utils/highlightFor.js";import m from"./DesktopPreview.js";import c from"./EditWhatsAppTemplateV2.js";import d from"./MobilePreview.js";import f from"./VariableConnectorsPanel.js";const h=r.div`
+	display: flex;
+	//	height: 100%;
+`,u=r.div`
+	padding: 16px 14px;
+	border-left-width: 1px;
+	border-left-color: ${i.stroke.primary};
+	max-width: 350px;
+
+	height: ${e=>e.channel===l.WHATSAPP?"500px":"475px"};
+	overflow-y: 'auto';
+	padding-bottom: 24px;
+`,g=r.div`
+	padding: ${e=>e.showOnlyContent?"16px 14px":"16px 32px"};
+	flex: 1;
+	height: 475px;
+	overflow-y: auto;
+`,x=r=>{const{showVariableMapping:x,showOnlyContent:w,whatsappSpecificPickerMeta:b}=r,y=n(),j=n(),{device:v,display_content:P,channel:T,template:k,setTemplate:C}=a();const M=e=>{let t=0;for(;e;)t+=e.offsetTop,e=e.offsetParent;return t};return e(h,{children:[t(g,Object.assign({showOnlyContent:w,showVariableMapping:x},{children:"mobile"===v?t(d,{ref:j,display_content:null!=P?P:"",channel:T,template:k}):T!==l.MESSAGE?t(m,{ref:y,channel:T,display_content:null!=P?P:""}):t(o,{})})),x&&t(u,Object.assign({channel:T},{children:T!==l.WHATSAPP?t(f,{onFocus:function(e){var t;const o=p(e+1),n=M(document.getElementById(o)),r=null===(t=document.getElementById(o))||void 0===t?void 0:t.offsetLeft;"desktop"===v?n&&y.current&&(y.current.scrollTo(null!=r?r:0,n-253),s(o,i.background.warning.light,2)):n&&j.current&&(j.current.scrollTo(null!=r?r:0,n-253),s(o,i.background.warning.light,2))}}):t(c,{whatsappSpecificPickerMeta:b,template:k,onTemplateChange:e=>{null==C||C(e)}})}))]})};export{x as default};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CHANNEL_TYPE } from "../../template-preview/models/Channels";
+declare const DesktopPreview: React.ForwardRefExoticComponent<{
+    display_content: string;
+    channel: CHANNEL_TYPE;
+} & React.RefAttributes<HTMLDivElement>>;
+export default DesktopPreview;

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

@@ -0,0 +1,20 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"react";import i from"styled-components";import{Spinner as o}from"../../spinner/Spinner.js";import{TemplatePreview as a}from"../../template-preview/TemplatePreview.js";import"../../template-preview/WhatsApp/WhatsAppLikePreview.js";import{COLORS as p}from"../../../constants/Theme.js";import{CHANNEL_TYPE as d}from"../../template-preview/models/Channels.js";const s=i.div`
+	background: ${p.surface.standard};
+	border: 1px solid ${p.stroke.primary};
+	border-radius: 8px;
+	overflow-y: auto;
+	/* max-height: 420px; */
+	scroll-behavior: smooth;
+	height: 100%;
+`,m=i.div`
+	padding: 18px 24px 12px;
+	display: flex;
+	gap: 4px;
+	border-bottom-width: 1px;
+	border-bottom-color: ${p.stroke.primary};
+`,l=i.div`
+	width: 6px;
+	height: 6px;
+	background: #d9d9d9;
+	border-radius: 3px;
+`,n=r.forwardRef(((r,i)=>{let{display_content:p}=r;return e(s,Object.assign({ref:i},{children:[e(m,{children:[t(l,{}),t(l,{}),t(l,{})]}),t("div",{children:p?t(a,{channel:d.EMAIL,hideHeader:!0,emailSpecificMeta:{emailDisplayContent:p,hideViewButtonForEmail:!0,emailHtmlContainerId:"template_html_desktop",containerStyle:{width:584,height:441},templateContainerStyles:{height:"100%"}}}):t("div",Object.assign({style:{padding:20}},{children:t(o,{size:"small"})}))})]}))}));n.displayName="DesktopPreview";export{n as default};

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { HEADER_TYPES } from "../../template-preview/models/TemplateMeta";
+export interface EditMediaV2Props {
+    imageName: string[];
+    errorSecondaryText?: string;
+    error?: string;
+    isLoading?: boolean;
+    mediaType?: HEADER_TYPES;
+    handleImageChange?: () => void;
+}
+declare const EditMediaV2: (props: EditMediaV2Props) => JSX.Element;
+export default EditMediaV2;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import o from"../../../assets/icons/document_pdf.svg.js";import r from"../../../assets/icons/edit.svg.js";import s from"../../../assets/icons/refresh.svg.js";import n from"../../../assets/icons/video_camcorder.svg.js";import{Spinner as l}from"../../spinner/Spinner.js";import{HEADER_TYPES as d}from"../../template-preview/models/TemplateMeta.js";import{BodyCaption as c,BodySecondary as a,Caption as m}from"../../TypographyStyle.js";import{COLORS as h}from"../../../constants/Theme.js";import{toCapitilize as g}from"../utils/toCapitilize.js";import{Container as p,ImageContainer as f,RightComponent as j}from"./EditMediaV2.style.js";const y=y=>{const{imageName:v,error:u,isLoading:b,mediaType:w,handleImageChange:O}=y,L=null==v?void 0:v[0].split("/"),x=null==L?void 0:L[L.length-1];return e(p,{children:[t(f,Object.assign({error:!!u,onClick:u?O:void 0},{children:u?t(s,{color:h.content.brand,width:32,height:32}):b?t(l,{size:"small"}):w===d.IMAGE?t("img",{alt:"",src:null==v?void 0:v[0],style:{width:"100%",height:"56px",borderRadius:8,objectFit:"cover"}}):w===d.VIDEO?t(n,{width:18,height:22,color:h.content.placeholder}):t(o,{width:18,height:22,color:h.content.placeholder})})),e(j,{children:[t("div",Object.assign({style:{flex:1}},{children:v&&u?t(i,{}):b?t(c,Object.assign({style:{marginLeft:8}},{children:"Your media is getting loaded..."})):t(a,Object.assign({style:{color:h.content.primary,marginLeft:8}},{children:g(null==w?void 0:w.toLowerCase())||x}))})),!!u&&e("div",Object.assign({style:{display:"flex",flexDirection:"column",marginLeft:8}},{children:[e(a,Object.assign({style:{color:h.content.negative}},{children:["Error loading this ",null==w?void 0:w.toLowerCase(),". Retry"]})),t(m,Object.assign({style:{color:h.content.secondary}},{children:u}))]})),!u&&!b&&t("div",Object.assign({style:{paddingLeft:14,paddingRight:6,width:44,height:24,borderLeft:`1px solid ${h.stroke.primary}`},onClick:O,onKeyDown:O,role:"presentation"},{children:t(r,{width:24,height:24,color:h.content.placeholder})}))]})]})};export{y as default};

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

@@ -0,0 +1,6 @@
+export declare const RightComponent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ImageContainer: import("styled-components").StyledComponent<"div", any, {
+    error: boolean;
+}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditTemplateMediaContainer: import("styled-components").StyledComponent<"div", any, {}, never>;