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

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}var a=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},e),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"})));exports.default=a;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}var a=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 20 20"},e),t||(t=r.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"})));exports.default=a;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(a){if("default"!==a){var r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:function(){return e[a]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,a,r,n=e(require("react"));function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},l.apply(this,arguments)}var c=e=>n.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 19 22"},e),t||(t=n.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"})),a||(a=n.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"})),r||(r=n.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"})));exports.default=c;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}var a=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",fill:"currentColor",viewBox:"0 0 24 24"},e),t||(t=r.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"})));exports.default=a;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function l(){return l=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},l.apply(this,arguments)}var a=e=>n.createElement("svg",l({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 16 16"},e),t||(t=n.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"})),r||(r=n.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"})));exports.default=a;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r,n=e(require("react"));function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a.apply(this,arguments)}var l=e=>n.createElement("svg",a({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 20 20"},e),t||(t=n.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"})),r||(r=n.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"})));exports.default=l;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}var a=e=>r.createElement("svg",n({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"})));exports.default=a;

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

@@ -0,0 +1 @@
+"use strict";function e(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}Object.defineProperty(exports,"__esModule",{value:!0});var t,r=e(require("react"));function n(){return n=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}var a=e=>r.createElement("svg",n({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24"},e),t||(t=r.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"})));exports.default=a;

package/dist/cjs/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/cjs/components/dropdown/Common.styled.js

@@ -1,4 +1,4 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("styled-components"));const o=t.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../constants/Theme.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const i=o.default.div`
 	position: absolute;
 	left: 0px;
 	top: 0px;
@@ -6,7 +6,15 @@
 	height: 100%;
 	z-index: 2;
 	cursor: pointer;
-`,r=t.default.div`
+`,d=o.default.div`
 	margin-top: 8px;
 	margin-bottom: 8px;
-`;exports.OpenDropdownContainer=r,exports.OverLapAbs=o;
+`;o.default.div`
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	padding: 6px 8px;
+	background: ${r.COLORS.surface.hovered};
+	border: 1px solid ${r.COLORS.stroke.primary};
+	border-radius: 4px;
+`,exports.OpenDropdownContainer=d,exports.OverLapAbs=i;

package/dist/cjs/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/cjs/components/dropdown/Dropdown.js

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

package/dist/cjs/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/cjs/components/dropdown/UnChildDropdown/UnChildDropdown.js

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

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

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

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

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

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

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

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

@@ -1,8 +1,9 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});const t=e(require("styled-components")).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=n(e).default.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);
-`;exports.BottomBarContainer=t;
+	background: ${t.COLORS.surface.standard};
+`;exports.BottomBarContainer=r;

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

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

package/dist/cjs/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/cjs/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/cjs/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/cjs/components/fab-menu/FABMenu.js

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

package/dist/cjs/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/cjs/components/helpers/FileUploaderHelper.js

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

package/dist/cjs/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/cjs/components/input/Input.js

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

package/dist/cjs/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/cjs/components/list-item/ListItem.js

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

package/dist/cjs/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/cjs/components/template-context-mapper/Badge/index.js

@@ -0,0 +1,10 @@
+"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: 0px 12px;
+	gap: 8px;
+	border-radius: 4px;
+	margin-right: 12px;
+	color: ${i.COLORS.content.negative};
+`;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

@@ -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/cjs/components/template-context-mapper/TemplateContextMapper.js

@@ -0,0 +1 @@
+"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"),s=require("./context/templateModalContext.js"),i=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:j,onTemplateSelect:g,globalPlaceholders:v,showOnlyContent:E,whatsappSpecificPickerMeta:S}=d;var C,M;t.useEffect((()=>{x(h)}),[h]);const[P,T]=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!=j?j:[]);const N=t.useMemo((()=>n.convertPlaceholdersToBikDropdown(v)),[v]);return e.jsx(s.TemplateModalContext.Provider,Object.assign({value:{template:q,setTemplate:w,device:P,setDevice:T,display_content:b,setDisplayContent:x,originalVariableList:y,setOriginalVariableList:A,isError:f,setIsError:L,channel:m,globalNormalizedPlaceholders:N}},{children:E?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!==(C=null==q?void 0:q.category)&&void 0!==C?C:"")} • ${null!==(M=null==q?void 0:q.templateCategory)&&void 0!==M?M:""}`:""},{children:[e.jsx(o.default,{showVariableMapping:p,channel:m,whatsappSpecificPickerMeta:S}),g?e.jsx(i.default,{onSelect:function(){const e=null==g?void 0:g(q,y,null!=b?b:"");e&&L(!!e)}}):e.jsx(e.Fragment,{})]}))}))};

package/dist/cjs/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/cjs/components/template-context-mapper/context/templateModalContext.js

@@ -0,0 +1 @@
+"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",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

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

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/Body.js

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

package/dist/cjs/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/cjs/components/template-context-mapper/modalElements/DesktopPreview.js

@@ -0,0 +1,20 @@
+"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;
+	overflow-y: auto;
+	/* max-height: 420px; */
+	scroll-behavior: smooth;
+	height: 100%;
+`,u=p.default.div`
+	padding: 18px 24px 12px;
+	display: flex;
+	gap: 4px;
+	border-bottom-width: 1px;
+	border-bottom-color: ${s.COLORS.stroke.primary};
+`,h=p.default.div`
+	width: 6px;
+	height: 6px;
+	background: #d9d9d9;
+	border-radius: 3px;
+`,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

@@ -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/cjs/components/template-context-mapper/modalElements/EditMediaV2.js

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

package/dist/cjs/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>;

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

@@ -0,0 +1,30 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=r(e);const i=o.default.div`
+	display: flex;
+	align-items: center;
+	gap: 12px;
+	/* justify-content: center; */
+	flex: 1;
+`,n=o.default.div`
+	width: 56px;
+	height: 56px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-self: center;
+	background-color: ${t.COLORS.surface.hovered};
+	border-radius: 4px;
+	border: 1px solid ${t.COLORS.stroke.primary};
+	box-sizing: content-box;
+	cursor: ${e=>e.error?"pointer":"default"};
+`,d=o.default.div`
+	padding: 8px;
+	flex-direction: row;
+	display: flex;
+	justify-content: space-between;
+	background: ${t.COLORS.surface.subdued};
+	border: 1px solid ${t.COLORS.stroke.primary};
+	border-radius: 4px;
+	margin-left: 8px;
+`,a=o.default.div`
+	padding-bottom: 0px;
+`;exports.Container=d,exports.EditTemplateMediaContainer=a,exports.ImageContainer=n,exports.RightComponent=i;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WhatsAppPickerMeta, WhatsAppTemplate } from "../../template-preview/models/WhatsAppTemplate";
+declare const EditMediaTemplateMediaV2: React.FC<{
+    mediaComponent: WhatsAppTemplate['components'][0];
+    template: WhatsAppTemplate;
+    whatsappSpecificPickerMeta: WhatsAppPickerMeta;
+    updateTemplateImageUrl(url: string, format: WhatsAppTemplate['components'][0]['format']): void;
+}>;
+export default EditMediaTemplateMediaV2;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("react"),a=require("../../helpers/FileUploaderHelper.js"),r=require("../../template-preview/models/TemplateMeta.js"),l=require("./EditMediaV2.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(i);exports.default=n=>{let{mediaComponent:u,template:d,updateTemplateImageUrl:s,whatsappSpecificPickerMeta:c}=n;var p,f;const m=o.default.createRef(),[v,E]=i.useState(!1),[g,_]=i.useState("");let h;return h=u.format===r.HEADER_TYPES.IMAGE?"image/png, image/jpeg":u.format===r.HEADER_TYPES.VIDEO?"video/mp4":"application/pdf",t.jsxs(t.Fragment,{children:[t.jsx("input",{ref:m,style:{display:"none"},type:"file",onChange:function(t){var i,l;return e.__awaiter(this,void 0,void 0,(function*(){_(""),E(!0);const e=new a.FileUploaderHelper,n=null===(i=t.target.files)||void 0===i?void 0:i[0];if(n instanceof Blob){const t=e.validate(n);if(t)_(t),E(!1);else{const e=u.format===r.HEADER_TYPES.IMAGE,t=yield c.uploadMediaFiles({file:n,fileName:n.name,isImage:e});if(t.success){const[e]=n.type.split("/");s(null!==(l=t.url)&&void 0!==l?l:"","application"===e?r.HEADER_TYPES.DOCUMENT:r.HEADER_TYPES[e.toUpperCase()])}else _("An unknown technical error occured");E(!1)}}else _("An unknown technical error occured"),E(!1)}))},accept:h}),t.jsx(l.default,{imageName:null!==(f=null===(p=null==u?void 0:u.example)||void 0===p?void 0:p.header_handle)&&void 0!==f?f:[],handleImageChange:function(){var e;(null===(e=null==m?void 0:m.current)||void 0===e?void 0:e.click)&&m.current.click()},mediaType:null==u?void 0:u.format,error:g,isLoading:v})]})};