@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687-beta.9

package/dist/cjs/components/floating-action-button/FloatingActionButton.styles.js

@@ -0,0 +1,99 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react-bootstrap"),o=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=r(o),n=(t=>(t.TOP_LEFT="top left",t.TOP_RIGHT="top right",t.BOTTOM_LEFT="bottom left",t.BOTTOM_RIGHT="botton right",t))(n||{}),d=(t=>(t.UP="up",t.UP_CENTERED="up-centered",t.START="start",t.END="end",t.DOWN="down",t.DOWN_CENTERED="down-centered",t))(d||{}),p=(t=>(t.START="start",t.END="end",t))(p||{});const a=i.default.div`
+	width: ${t=>t.width}px;
+	height: ${t=>t.height}px;
+	background: ${t=>t.color};
+	${t=>t.isRound?"border-radius: 50%;":"border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;"}
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+	display: flex;
+`,l=i.default.div`
+	display: flex;
+	border-radius: 50%;
+	flex-direction: column;
+	align-items: flex-end;
+	position: fixed;
+	width: ${t=>t.width}px;
+	height: ${t=>t.height}px;
+	z-index: ${t=>t.zIndex};
+	${t=>"botton right"===t.position?`right: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:"bottom left"===t.position?`left: ${t.buttonPaddingHorizontal}px; bottom: ${t.buttonPaddingVertical}px`:"top left"===t.position?`left: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:"top right"===t.position?`right: ${t.buttonPaddingHorizontal}px; top: ${t.buttonPaddingVertical}px`:""};
+`,s=i.default(t.Dropdown)`
+	.filter-container {
+		.single-row {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: flex-start;
+			gap: 8px;
+			padding: 14px;
+			border-bottom: 1px solid ${e.COLORS.stroke.primary};
+
+			:last-child {
+				border-bottom: none !important;
+			}
+		}
+	}
+	button {
+		border: 1px solid
+			${t=>"true"===t.active?e.COLORS.stroke.positive.lightAlt:e.COLORS.stroke.primary};
+		border-radius: 4px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 6px 0px;
+		background: ${t=>"true"===t.active?e.COLORS.background.positive.light:e.COLORS.surface.standard};
+		color: ${t=>"true"===t.active?e.COLORS.content.positive:e.COLORS.content.primary};
+	}
+
+	.btn-primary:hover,
+	.btn-primary:active,
+	.btn-primary:focus,
+	.btn-primary.dropdown-toggle,
+	.show > .btn-primary.dropdown-toggle {
+		color: ${t=>"true"===t.active?e.COLORS.content.positive:e.COLORS.content.primary};
+		background-color: ${t=>"true"===t.active?e.COLORS.background.positive.light:"transparent"};
+		border: none;
+	}
+	.btn:focus {
+		outline: 0;
+		box-shadow: 0 0 0 0.25rem transparent !important;
+	}
+
+	.dropdown-toggle::after {
+		border-top: 0.3em solid ${e.COLORS.content.primary};
+		display: none !important;
+	}
+
+	.dropdown-toggle::before {
+		border-top: 0.3em solid ${e.COLORS.content.primary};
+		display: none !important;
+	}
+	.dropdown-menu {
+		min-width: 12rem;
+		padding: 0 0;
+	}
+	.dropdown-item:active,
+	.dropdown-item:hover {
+		color: ${e.COLORS.content.positive};
+		text-decoration: none;
+		background-color: ${e.COLORS.background.positive.light};
+	}
+`,c=i.default(t.Dropdown.Toggle)`
+	border-radius: 4px;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 8px;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 20px;
+`,u=i.default.div`
+	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	border-radius: 4px;
+	padding: 8px;
+	background-color: ${e.COLORS.content.primary};
+	color: ${e.COLORS.content.primaryInverse};
+	width: ${t=>t.tooltipWidth?t.tooltipWidth+"px":"120px"};
+`;exports.DROP_POSITION=d,exports.DropdownToggleContainer=c,exports.FAB_POSITION=n,exports.FloatingActionButtonContainer=a,exports.FloatingActionButtonOuterContainer=l,exports.MENU_ALIGNMENT=p,exports.StyledDropdown=s,exports.TooltipStyled=u;

package/dist/cjs/components/floating-input-dropdown/FloatingInputDropdown.d.ts

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { Placement } from '../tooltips/Tooltip.js';
+import { DropdownOption, OpenDropdownProps } from '../dropdown/type.js';
+import { FloaterProps } from '../floater/floater.js';
+import { InputProps } from '../input/Input.js';
+
+type DropdownProps = OpenDropdownProps & {
+    isLoading?: boolean;
+    children?: React__default.ReactNode;
+    disabled?: boolean;
+    onDropdownOpen?: () => void;
+    onDropdownVisbilityChange?: (isOpen: boolean) => void;
+    tooltipContent?: string;
+    tooltipDirection?: Placement;
+    showTooltipArrow?: boolean;
+};
+type FloatingInputDropdownProps = {
+    inputProps: InputProps;
+    dropdownProps: DropdownProps;
+    floaterProps: FloaterProps;
+    children?: React__default.ReactNode;
+    isVisible?: boolean;
+    onDropdownOptionClick?: (option: DropdownOption) => void;
+    onChangeText?: (text: string, event?: Event) => void;
+};
+declare const FloatingInputDropdown: React__default.FC<FloatingInputDropdownProps>;
+
+export { FloatingInputDropdown };

package/dist/cjs/components/floating-input-dropdown/FloatingInputDropdown.js

@@ -0,0 +1,5 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),t=require("react-popper"),r=require("styled-components"),n=require("../dropShadow/DropShadow.js"),i=require("../dropdown/Common.styled.js"),s=require("../dropdown/OpenedDropdown/components/OpennedDropdown.js"),l=require("../floater/floater.js"),p=require("../input/Input.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const u=d(r).default(i.OpenDropdownContainer)`
+	opacity: ${({visible:e})=>e?1:0};
+	visibility: ${({visible:e})=>e?"visible":"hidden"};
+	transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
+`;exports.FloatingInputDropdown=({inputProps:r,dropdownProps:i,floaterProps:d,children:a,isVisible:c,onDropdownOptionClick:f,onChangeText:v})=>{const m=o.useRef(null),w=o.useRef(null),[b,h]=o.useState(!1),[j,x]=o.useState(null),[y,S]=o.useState(null),[D,q]=o.useState(!1),{styles:C,attributes:O,update:g,forceUpdate:P}=t.usePopper(y,j,{placement:i.placement,strategy:i.strategy,modifiers:[{name:"offset",options:{offset:[0,0]}},{name:"preventOverflow",options:{padding:{top:0,bottom:10,left:0,right:0}}},{name:"flip",options:{fallbackPlacements:["bottom","top"]}}]});o.useEffect((()=>{if(!b){const e=setTimeout((()=>q(!1)),200);return()=>clearTimeout(e)}q(!0),g&&g()}),[b,g]),o.useEffect((()=>{if(m.current){const e=new ResizeObserver((()=>{g&&g()}));return e.observe(m.current),()=>{e.disconnect()}}}),[m.current,g]);return e.jsxs(e.Fragment,{children:[c&&e.jsxs(l.Floater,{...d,refElement:w,children:[e.jsx("div",{style:{position:"relative"},ref:S,children:e.jsx(n.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:e.jsx(p.Input,{...r,onClick:()=>{i.onDropdownOpen?.(),b?h(!1):i.disabled||h(!0),P?.()},ref:m,onChangeText:(e,o)=>{v?.(e,o),g&&g()}})})}),e.jsx(u,{ref:x,style:{...C.popper,zIndex:3},...O.popper,visible:b||D,children:e.jsx(n.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:e.jsx(s.OpenedDropdown,{...i,onSelect:e=>{"2.0"===i.version&&i.isMultiSelect||(i.onSelect?.(e),h(!1))},onClose:e=>{"2.0"===i.version&&i.isMultiSelect&&e&&i.onSelect?.([...e]),h(!1),i?.onClose?.()},version:i.version,headerRef:m,onDropdownItemClick:e=>{f?.(e)}})})})]}),e.jsx("div",{ref:w,children:a&&e.jsx("div",{children:a})})]})};

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 t="File type not supported",p=e=>`Max file size of ${e}MB is allowed`,i=e=>`Only ${e.toUpperCase()} format allowed`,r={image:5,video:16,application:100},s=["mp4","png","jpeg","jpg","pdf"];exports.FILE_SIZE_REACHED=p,exports.FILE_TYPE_NOT_SUPPORT=t,exports.FileUploaderHelper=class{validate(o){const{file:l,linkData:a}=o;let n=0,f="",u="";if(l)n=l.size,f=l.type.split("/")[0],u=l.type.split("/")[1];else{if(!a)return t;n=a.size,f=a.type.split("/")[0],u=a.type.split("/")[1]}if(!r[f])return t;if(e.bytesToMB(n)>r[f])return p(r[f]);if(!s.includes(u.toLocaleLowerCase())){if("video"===f)return i("mp4");if("image"===f)return i("png, jpeg, jpg");if("application"===f)return i("pdf")}}},exports.SIZE_LIMIT_MAP=r,exports.SUPPORTED_FILE_FORMAT=s,exports.getFileFormatErrorMessage=i;

package/dist/cjs/components/icon-button/IconButton.d.ts

@@ -0,0 +1,6 @@
+import React__default from 'react';
+import { IconButtonProps } from './model.js';
+
+declare const IconButton: React__default.ForwardRefExoticComponent<IconButtonProps & React__default.RefAttributes<HTMLButtonElement>>;
+
+export { IconButton };

package/dist/cjs/components/icon-button/IconButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),o=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),i=require("./theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(t);const n=t.forwardRef((({id:t,iconButtonType:l="default",Icon:n,height:s=20,width:c=20,bordered:u,disabled:a,isSelected:p,style:y,svgStyle:b,iconColor:f,disabledTooltip:h,...j},x)=>{const B=i.getIconColor(l,a,p),I=e.jsx(r.IconButton,{id:t,ref:x,style:y,iconButtonType:l,bordered:u,disabled:a,isSelected:p,...j,children:d.default.createElement(n,{height:s,width:c,color:f||B,style:{display:"block",...b??{}}})});return a&&h?e.jsx(o.Tooltip,{body:h,children:e.jsx("span",{style:{display:"inline-block",cursor:"not-allowed"},children:I})}):I}));n.displayName="IconButton",exports.IconButton=n;

package/dist/cjs/components/icon-button/IconButton.styled.js

@@ -0,0 +1,3 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=r(t).default.button`
+	${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${n.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
+`;exports.IconButton=o;

package/dist/cjs/components/icon-button/model.d.ts

@@ -0,0 +1,45 @@
+type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
+interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Icon to render
+     */
+    Icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * Custom styles which can be added to the icon button
+     * @default default undefined
+     */
+    style?: React.CSSProperties;
+    /**
+     * Custom styles which can be added to the svg
+     * @default default undefined
+     */
+    svgStyle?: React.CSSProperties;
+    /**
+     * Custom height for the svg icon
+     * @default default 20
+     */
+    height?: number;
+    /**
+     * Custom width for the svg icon
+     * @default default 20
+     */
+    width?: number;
+    /**
+     * Custom height for the svg icon
+     * @default default default
+     */
+    iconButtonType?: IconButtonType;
+    /**
+     * Add border to the button
+     * @default default false
+     */
+    bordered?: boolean;
+    /**
+     * Flag to check if icon button is selected/clicked
+     */
+    isSelected?: boolean;
+    iconColor?: string;
+    disabledTooltip?: string;
+}
+
+export type { IconButtonProps, IconButtonType };

package/dist/cjs/components/icon-button/theme.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");exports.generateBackgroundColor=t=>"default"===t?e.COLORS.background.brandLight:"negative"===t?e.COLORS.background.negative.light:"positive"===t?e.COLORS.background.positive.light:"ai"===t?e.COLORS.surface.aiLight:e.COLORS.background.warning.light,exports.getIconColor=(t,n,r)=>{if(n)return e.COLORS.content.inactive;switch(t){case"default":return r?e.COLORS.content.brand:e.COLORS.content.primary;case"negative":return e.COLORS.content.negative;case"positive":return e.COLORS.content.positive;case"warning":return r?e.COLORS.content.warning:e.COLORS.content.primary;default:return e.COLORS.content.primary}};

package/dist/cjs/components/image-compress/ImageCompress.d.ts

@@ -0,0 +1,14 @@
+interface CompressImageOptions {
+    maxSizeMB?: number;
+}
+interface CompressImageReturnType {
+    base64: string;
+    compressedFile: File;
+}
+declare class ImageService {
+    static base64ToImage: (base64String: string) => File;
+    static compressImage: (file: File, options?: CompressImageOptions) => Promise<CompressImageReturnType>;
+}
+
+export { ImageService };
+export type { CompressImageOptions, CompressImageReturnType };

package/dist/cjs/components/image-compress/ImageCompress.js

@@ -0,0 +1 @@
+"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("browser-image-compression")),r=Object.defineProperty,a=(e,t,a)=>((e,t,a)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:a}):e[t]=a)(e,"symbol"!=typeof t?t+"":t,a);class o{}a(o,"base64ToImage",(e=>{const t=atob(e.split(",")[1]),r=e.split(",")[0].split(":")[1].split(";")[0],a=new ArrayBuffer(t.length),o=new Uint8Array(a);for(let e=0;e<t.length;e++)o[e]=t.charCodeAt(e);const s=new Blob([a],{type:r});return new File([s],"image",{type:r})})),a(o,"compressImage",(async(e,r)=>{let a=e,o="";const s=r?r.maxSizeMB:e.size/1024/1024*.8;try{const r={maxSizeMB:s,maxWidthOrHeight:1920,useWebWorker:!0};e.size/1024/1024>.1&&(a=await t.default(e,r)),o=await t.default.getDataUrlFromFile(a)}catch(e){console.error(e)}return{base64:o,compressedFile:a}})),exports.ImageService=o;

package/dist/cjs/components/image-cropper/BikImageCropper.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BikImageCropperProps {
+    aspectRatio?: number;
+    src: string;
+    onCropComplete: (base64String: string, didChange: boolean) => void | Promise<void>;
+    onCancel: () => void;
+}
+declare const BikImageCropper: (props: BikImageCropperProps) => react_jsx_runtime.JSX.Element;
+
+export { BikImageCropper, BikImageCropper as default };
+export type { BikImageCropperProps };

package/dist/cjs/components/image-cropper/BikImageCropper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("react-image-crop"),a=require("../modals/styledModal.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=i(r);const n=r=>{const[i,n]=e.useState(!1),[c,s]=e.useState(void 0),[h,d]=e.useState({width:0,height:0}),[l,g]=e.useState(!1),u=async(t,e,r,a)=>{const i=document.createElement("canvas");i.width=e.width,i.height=e.height;const o=i.getContext("2d");if(!o)throw new Error("Failed to get 2D context of canvas.");o.drawImage(t,e.x*r,e.y*a,e.width*r,e.height*a,0,0,e.width,e.height);try{return i.toDataURL("image/png")}catch(t){throw new Error("Failed to create blob for cropped image.")}};return t.jsx(a.StyledModal,{open:!0,onClose:r.onCancel,centralContainerStyles:{width:700,maxHeight:700},headingTitle:"Crop Image",primaryButton:{buttonText:"Save",isLoading:l,onClick:()=>{(async t=>{if(g(!0),r.src&&t?.width&&t?.height){const e=new Image;e.src=r.src;const a=e.naturalWidth/h.width,o=e.naturalHeight/h.height,n=await u(e,t,a,o);await(r?.onCropComplete?.(n,i))}else await(r?.onCropComplete?.(r.src,i));g(!1)})(c)}},children:t.jsx("div",{style:{width:"100%",height:"100%",display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsx("div",{children:t.jsx(o.default,{crop:c,onChange:t=>{s(t)},circularCrop:!1,onDragStart:()=>{n(!0)},aspect:r.aspectRatio,children:t.jsx("img",{style:{maxWidth:700,maxHeight:550,objectFit:"contain"},src:r.src,alt:"image cropper",onLoad:t=>{const e=t.target,r=e.width;d({width:r,height:e.height})}})})})})})};exports.BikImageCropper=n,exports.default=n;

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { CompressImageOptions } from '../../image-compress/ImageCompress.js';
+import { BikImageCropperProps } from '../BikImageCropper.js';
+
+/**
+ * Todos
+ * 	- Add option to pass https url in the src / edit an image
+ */
+interface BikImagePipelineProps {
+    fileTitle?: string;
+    cropOptions?: Partial<BikImageCropperProps>;
+    compressionOptions?: CompressImageOptions;
+    currentImage: {
+        src?: string;
+    };
+    options: {
+        upload: boolean;
+        crop?: boolean;
+        compress?: boolean;
+        uploadToFirestorage?: boolean;
+    };
+    onCancel: () => void;
+    onFinish: (base64String: string, file?: File, url?: string) => void;
+    fileUploadOptions?: {
+        path: string;
+        uploadProgress: number;
+        uploadFile: (file: File, path: string) => Promise<string>;
+        error?: string;
+        success?: boolean;
+    };
+    loadingStateOptions?: {
+        headerImage?: string;
+    };
+}
+declare const BikImagePipeline: ({ cropOptions, fileTitle, compressionOptions, currentImage, options, onFinish, onCancel, fileUploadOptions, loadingStateOptions, }: BikImagePipelineProps) => react_jsx_runtime.JSX.Element;
+
+export { BikImagePipeline };
+export type { BikImagePipelineProps };

package/dist/cjs/components/image-cropper/BikImagePipeline/BikImagePipeline.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("react"),r=require("../../image-compress/ImageCompress.js"),s=require("../../states/StateComponent.js"),t=require("../../states-modal/StateModalComponent.js");require("../../modals/styledModal.js");var a=require("../BikImageCropper.js");exports.BikImagePipeline=({cropOptions:i,fileTitle:n,compressionOptions:l,currentImage:p,options:c,onFinish:u,onCancel:d,fileUploadOptions:m,loadingStateOptions:g})=>{const h=o.useRef(null),[j,C]=o.useState(),[I,f]=o.useState(p),[x,S]=o.useState(!1);o.useEffect((()=>{c.upload?(C("upload"),setTimeout((()=>{y()}),500)):c.crop?C("crop"):c.compress?C("compress"):c.uploadToFirestorage?C("cloud-upload"):S(!0)}),[c.upload,c.crop,c.compress,c.uploadToFirestorage]);const v=o.useCallback(((e,o)=>{if(!c.uploadToFirestorage)return u(e,o),void S(!0);C("cloud-upload"),m&&m.uploadFile(o,m.path).then((r=>{u(e,o,r),S(!0)})).catch((e=>{console.log("starting err process with ")}))}),[]),F=e=>{e||d();const o=r.ImageService.base64ToImage(e);c.compress?(C("compress"),r.ImageService.compressImage(o,l).then((e=>{if(!e)return S(!0),void d();v(e.base64,e.compressedFile)}))):v(e,o)},y=()=>{h.current.click()};return x?e.jsx(e.Fragment,{}):"cloud-upload"===j?!m||m.success?e.jsx(e.Fragment,{}):m.error?e.jsx("div",{children:e.jsx(t.StateModalComponent,{states:s.StateInterface.ERROR,heading:"Error while uploading",subline:"Please check your image and try again",isButtonEnabled:!1,width:300,onClose:()=>{S(!0),d()}})}):e.jsx("div",{children:e.jsx(t.StateModalComponent,{headerImage:g?.headerImage,states:s.StateInterface.LOADING,heading:`Uploading your ${n||"photo"}`,subline:`Please wait while we upload your ${n||"photo"}`,isButtonEnabled:!1,width:300})}):e.jsxs(e.Fragment,{children:[c.upload&&e.jsx("input",{ref:h,type:"file",accept:"image/*",style:{display:"none"},onChange:e=>{const o=e.target.files[0],r=new FileReader;r.onload=()=>{var e;f({src:r.result}),e=r.result,c.crop?C("crop"):F(e)},o&&r.readAsDataURL(o)}}),"crop"===j&&e.jsx(a.BikImageCropper,{src:I.src,onCropComplete:e=>{f({src:e}),F(e)},aspectRatio:i.aspectRatio,onCancel:d})]})};

package/dist/cjs/components/input/ChipInput.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("react-chips"),n=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),o=require("./ChipInput.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=c(r);var l=({onChipsChange:r,placeholder:c,chips:l,label:s,labelColor:u,hintText:d,hintTextColor:h,error:p,inputHeight:y,createChipKeys:C,chipsContainerCustomStyle:f,nativeID:m})=>{const[v,x]=t.useState(!1);return t.useEffect((()=>{document.querySelector(`#${m} input`)?.addEventListener("focus",(()=>{x(!0)})),document.querySelector(`#${m} input`)?.addEventListener("blur",(()=>{x(!1)}))}),[]),e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},id:m,children:[s&&e.jsx(i.BodySecondary,{style:{color:v?n.COLORS.content.brand:p?n.COLORS.content.negative:u||n.COLORS.content.primary},children:s}),e.jsx(a.default,{value:l,theme:o.theme(!!p,y,f,v),chipTheme:o.chipTheme,placeholder:0===l.length&&!!c&&!v&&c,onChange:e=>{r(e)},createChipKeys:C||","}),(!!d||!!p)&&e.jsx(i.BodyCaption,{style:{color:p?n.COLORS.content.negative:h||n.COLORS.content.secondary},children:p||d})]})};exports.default=l;

package/dist/cjs/components/input/ChipInput.styled.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../constants/Theme.js");const r={chip:{padding:"0px 8px 0px 8px",background:e.COLORS.surface.subdued,border:`1px solid ${e.COLORS.stroke.primary}`,fontSize:12,color:e.COLORS.content.secondary,fontWeight:400,borderRadius:4,alignItems:"center",alignContent:"center",justifyContent:"center",cursor:"default",margin:"0px 8px 0px 0px",fontFamily:"Inter"},chipRemove:{fontSize:12,fontFamily:"Inter",cursor:"pointer",fontWeight:"normal",color:e.COLORS.content.secondary,marginLeft:6,":hover":{color:e.COLORS.content.secondary}}};exports.chipTheme=r,exports.theme=(r,o,n,t)=>({chipsContainer:{display:"flex",position:"relative",border:`${t?2:1}px solid ${t?e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary}`,backgroundColor:e.COLORS.surface.standard,alignItems:"center",flexWrap:"wrap",padding:"3px 8px 3px 8px",borderRadius:4,":hover":{border:`2px solid ${e.COLORS.stroke.brand}`},...n??{}},container:{flex:1},containerOpen:{},input:{border:"none",outline:"none",boxSizing:"border-box",fontSize:14,fontFamily:"Inter",fontWeight:400,height:o||32,width:"100%",paddingTop:0,paddingBottom:0}});

package/dist/cjs/components/input/Input-helper.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("phone");exports.isFunction=e=>e&&"function"==typeof e,exports.validateInput=(n,r,t={})=>{let i;const a=["phonenumber","zip","number"].includes(r),u=a?n?Number(n):null:n;if(null==u||""===u)return[!0,""];if(a&&String(u).length&&(t.min&&u<t.min||t.max&&u>t.max))return[!1,`Enter valid number between ${t.min} and ${t.max}`];if("email"===r)return i=/(.+)@(.+){2,}\.(.+){2,}/,u.match(i)?[!0,""]:[!1,"Enter a valid email id"];if("url"===r)return i=/^https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)$/,u.match(i)?[!0,""]:[!1,"Enter a valid url"];if("number"===r)return u>=0?[!0,""]:[!1,"Enter a valid number"];if("zip"===r)return 6===String(u).trim().length?[!0,""]:[!1,"Enter a valid zip code"];if("phonenumber"===r){const{isValid:n}=e.phone("+"+String(u));return n?[!0,""]:[!1,"Enter a valid phonenumber"]}return u?.trim().length>0?[!0,""]:[!1,"Enter a valid data"]};

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

@@ -0,0 +1,76 @@
+import React__default from 'react';
+import { ButtonProps } from '../button/model.js';
+
+type InputVariant = 'default' | 'small' | 'x-small';
+type InputStateI = 'invalid' | 'active' | 'read-only' | 'disabled' | 'disabled-invalid' | 'none';
+type InputTypeI = 'number' | 'email' | 'text' | 'multiline' | 'url' | 'zip' | 'phonenumber' | 'password';
+interface InputProps {
+    'data-test'?: string;
+    noErrorHint?: boolean;
+    placeholder?: string;
+    variant?: InputVariant;
+    width?: string;
+    height?: string;
+    leftIcon?: {
+        icon: React__default.FC;
+        callback?: () => void;
+    };
+    rightIcon?: {
+        icon: React__default.FC;
+        callback?: () => void;
+    };
+    labelElement?: React__default.ReactNode;
+    labelText?: string;
+    maxCharLimit?: number;
+    isRequired?: boolean;
+    errorMessage?: string;
+    hintText?: string;
+    state?: InputStateI;
+    type?: InputTypeI;
+    /**
+        validate:  function takes the input and returns boolean + string (error message in case of invalid input)
+     **/
+    validate?: (input?: string | number) => [boolean, string];
+    onChangeText: (input: string, event?: Event) => void;
+    button?: {
+        text: string;
+        onClick?: () => void;
+        buttonProps?: ButtonProps;
+    };
+    suffixText?: string;
+    prefixText?: string;
+    value?: string;
+    reset?: boolean;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+    onClick?: (e: any) => void;
+    isActive?: boolean;
+    id?: string;
+    onReferenceInit?: (element: HTMLInputElement | HTMLTextAreaElement) => void;
+    rangeValidation?: {
+        min: number;
+        max: number;
+    };
+    noKeyDownChange?: boolean;
+    skipFocus?: boolean;
+    version?: '1.0' | '2.0';
+    textControl?: boolean;
+    noMaxCharCheck?: boolean;
+    tooltipText?: string;
+    autoGrow?: boolean;
+    minHeight?: string;
+    maxHeight?: string;
+    labelTextBold?: boolean;
+    truncateText?: boolean;
+    maxCharLimitPosition?: 'TOP' | 'BOTTOM';
+    hightlightInputColor?: string;
+    onKeyDownEvent?: (e: Event) => void;
+    hideInputHeader?: boolean;
+    hideBorder?: boolean;
+    inputWrapperStyles?: React__default.CSSProperties;
+    minCharsToTrigger?: number;
+}
+declare const Input: React__default.ForwardRefExoticComponent<InputProps & React__default.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>>;
+
+export { Input };
+export type { InputProps, InputStateI, InputTypeI, InputVariant };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),r=require("./Input-helper.js"),s=require("../tooltips/Tooltip.js"),a=require("../TypographyStyle.js"),o=require("../../constants/Theme.js"),l=require("../../assets/icons/errorInfo.svg.js"),c=require("./context/InputStyleProvider.js"),u=require("./Input.styled.js");const h=n.forwardRef(((h,d)=>{const{placeholder:p,leftIcon:x,rightIcon:g,labelText:f,maxCharLimit:v,isRequired:j,hintText:m,type:y,state:C,validate:T,variant:I,button:b,suffixText:S,prefixText:w,onChangeText:E,value:k,noErrorHint:H,reset:q,rangeValidation:B,noKeyDownChange:L,version:O,noMaxCharCheck:M,labelElement:F,autoGrow:P,minHeight:R,maxHeight:D,labelTextBold:z,truncateText:A,maxCharLimitPosition:K,hightlightInputColor:N,onKeyDownEvent:_,hideInputHeader:W,hideBorder:G,inputWrapperStyles:V,minCharsToTrigger:$}={maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0,...h},J=x?.icon,Q=g?.icon,[U,X]=n.useState(!1),[Y,Z]=n.useState(!1),[ee,te]=n.useState(),ne="x-small"===I?"12px":"small"===I?"18px":"22px",ie=n.useContext(c.InputStyleContext),[re,se]=n.useState(),ae=n.useRef(null),oe=d??ae;n.useEffect((()=>{se(k),!k&&P&&(oe.current.style.height=R||"48px")}),[k]),n.useEffect((()=>{oe.current&&h.onReferenceInit?.(oe.current)}),[oe]),n.useEffect((()=>{const e=oe.current;if(e&&["phonenumber","zip","number"].includes(y))return e.addEventListener("wheel",he,{passive:!1}),()=>{e.removeEventListener("wheel",he)}}),[]),n.useEffect((()=>{q&&se("")}),[q]),n.useEffect((()=>{Z(!!h.isActive),h.isActive&&oe.current?.focus()}),[h.isActive]),n.useEffect((()=>{te(h.errorMessage)}),[h.errorMessage]),n.useEffect((()=>{X(!1),("invalid"===h.state||ee||"disabled-invalid"===h.state)&&X(!0),"active"===h.state&&oe.current?.focus()}),[h.state,ee]),n.useEffect((()=>{X(!!ee||"invalid"===h.state)}),[ee,h.state]);const le=(e,...t)=>{r.isFunction(e)&&e(...t)},ce=()=>"zip"===y?6:2e3,ue=e=>{const t=0!==v?v:ce(),n=$,i=e.target.value;_&&(!i.length||i.length>=n)&&_(e),L||i.length&&!(i.length>=n)||E(k||"",e),M||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},he=e=>{e.preventDefault()},de=e=>{let t=e.target.value;const n=0!==v?v+1:ce(),i=$;if(!M&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),h.textControl||se(t),i&&t&&t.length<i)return;E(t,e),P&&(oe.current.style.height=`${oe.current.scrollHeight}px`,t||(oe.current.style.height=R||"48px"));const s=T||r.validateInput;if(!s||!r.isFunction(s))return;const[a,o]=s(t,y,B);X(!a),te(h.errorMessage?h.errorMessage:o)},pe=e=>{h.skipFocus||Z(!0),le(h.onFocus?.(e))},xe=e=>{h.skipFocus||Z(!1),le(h.onBlur?.(e))},ge=()=>e.jsxs(e.Fragment,{children:["multiline"!==y&&e.jsx("input",{className:A?"truncate-class":"","data-test":h["data-test"],id:h.id,style:ie?.input??{},ref:oe,type:["phonenumber","zip","number"].includes(y)?"number":y,value:re,onFocus:e=>pe(e),onBlur:e=>xe(e),placeholder:p||"Enter here",onChange:de,onClick:e=>le(h.onClick),onKeyDown:e=>ue(e)}),"multiline"===y&&e.jsx("textarea",{"data-test":h["data-test"],value:re,ref:oe,onFocus:e=>pe(e),onBlur:e=>xe(e),onClick:e=>le(h.onClick),placeholder:p||"Enter here",onChange:de,onKeyDown:e=>ue(e),maxLength:v>0?v:void 0})]});return e.jsxs(u.RootContainer,{width:h.width,height:h.height,state:C,type:y,style:ie?.RootContainer??{},children:[e.jsxs("div",{className:"flex-align-center",children:[!H&&(!!m||!!ee)&&e.jsxs(u.InputFooter,{invalid:!!ee,children:[!!ee&&e.jsx(l.default,{width:16,height:16}),ee||m]}),v>0&&"BOTTOM"===K&&e.jsxs(u.MaxCharStyle,{position:"BOTTOM",children:[(k??"").toString()?.length??0,"/",v]})]}),e.jsxs(u.InputWrapper,{variant:I,state:C,width:h.width,isActive:"active"===C||Y,isInvalid:U,style:ie?.InputWrapper??V??{},version:O,height:h.height,hightlightInputColor:N,hideBorder:G,children:[!!J&&e.jsx(u.IconHolder,{variant:I,iconSize:ne,onClick:()=>le(x?.callback),isLeft:!0,style:ie?.IconHolder??{},children:e.jsx(J,{})}),!!w&&e.jsx(u.PrefixHolder,{variant:I,children:w}),"default"===I&&e.jsx(u.InputContainer,{height:h.height,type:h.type,minHeight:R,maxHeight:D,autoGrow:P,children:ge()}),["x-small","small"].includes(I)&&e.jsx(u.InputContainerSmall,{height:h.height,type:h.type,children:ge()}),!!Q&&e.jsx(u.IconHolder,{variant:I,iconSize:ne,onClick:()=>le(g?.callback),isLeft:!1,children:e.jsx(Q,{})}),!!S&&e.jsx(u.SuffixHolder,{variant:I,children:S}),b&&b.text&&e.jsx(i.Button,{buttonText:b.text,onClick:()=>le(b?.onClick)}),b&&b.buttonProps&&e.jsx(i.Button,{...b.buttonProps})]}),!W&&(!!f||!!v)&&e.jsxs(u.InputHeader,{invalid:U,children:[F&&F,e.jsxs("div",{className:"label__container",children:[z?e.jsxs(a.TitleSmall,{children:[f,j?e.jsx("span",{children:"*"}):""]}):e.jsxs(a.BodySecondary,{children:[f,j?e.jsx("span",{children:"*"}):""]}),h.tooltipText&&e.jsx(s.Tooltip,{body:h.tooltipText,placement:"top",children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:U?o.COLORS.content.negative:o.COLORS.content.primary})})})]}),v>0&&"TOP"===K&&e.jsxs(u.MaxCharStyle,{children:[(k??"").toString()?.length??0,"/",v]})]})]})}));h.displayName="Input",exports.Input=h;

package/dist/cjs/components/input/Input.styled.js

@@ -0,0 +1,144 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@emotion/react"),t=require("@emotion/styled"),i=require("../TypographyStyle.js"),n=require("../../constants/Theme.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(t);const o=r.default.div`
+	border-radius: ${e=>"2.0"===e.version?8:4}px;
+	background: ${e=>["disabled","read-only","disabled-invalid"].includes(e.state)?n.COLORS.background.base:"#fff"};
+	border: ${e=>(e=>e.hideBorder?0:"2.0"===e.version?.5:1)(e)}px solid
+		${e=>(({isActive:e,isInvalid:t,hightlightInputColor:i})=>e?i||n.COLORS.stroke.brand:t?n.COLORS.stroke.negative.vibrant:n.COLORS.stroke.primary)({isActive:e.isActive,isInvalid:e.isInvalid,hightlightInputColor:e.hightlightInputColor})};
+	${e=>e.isActive?`box-shadow: inset 0px 0px 0px 1px ${e.hightlightInputColor?e.hightlightInputColor:n.COLORS.stroke.brand};`:""};
+	padding: ${e=>"small"===e.variant?"6px":"8px"};
+	height: ${e=>e.height||"100%"};
+	${e=>e.variant&&["small","x-small"].includes(e.variant)?"max-height: 44px":"min-height: 48px"};
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+	gap: 8px;
+	overflow: hidden;
+
+	${e=>"read-only"===e.state?"opacity: 0.7":""};
+	${e=>"read-only"===e.state?"pointer-events: none":""};
+`,l=r.default.div`
+	min-height: ${e=>e.iconSize};
+	min-width: ${e=>e.iconSize};
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden;
+	${e=>e.isLeft?"margin-left:"+(e.variant&&["small","x-small"].includes(e.variant)?"0px":"8px"):"margin-right: "+(e.variant&&["small","x-small"].includes(e.variant)?"0px":"8px")};
+`,p=e.css`
+	flex-grow: 1;
+	overflow: hidden;
+	height: 100%;
+
+	input,
+	textarea {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border: none;
+		min-height: 24px;
+		outline: none;
+		font-size: inherit;
+		line-height: inherit;
+		font-weight: inherit;
+		padding: 0px;
+		margin: 0px;
+		background: transparent;
+		&::placeholder {
+			font-family: Inter;
+			color: ${n.COLORS.content.placeholder};
+		}
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+
+	textarea {
+		height: 100%;
+		font-family: Inter;
+		min-height: 100px;
+		resize: none;
+	}
+`,s=r.default(i.BodyPrimary)`
+	${p};
+	${e=>e.height&&"multiline"!==e.type?{height:e.height}:{}};
+
+	${e=>e.autoGrow&&e.minHeight&&`\n\ttextarea {\n\t\theight: ${e.minHeight};\n\t\tmin-height: ${e.minHeight};\n\t\tmax-height: ${e.maxHeight||"100px"};\n\t}\n\t`}
+`,d=r.default(i.BodySecondary)`
+	${p};
+	input {
+		min-height: 20px;
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+	${e=>e.height&&"multiline"!==e.type?{height:e.height}:{}};
+`,h=r.default.div`
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 8px;
+	.label__container {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		> div:first-child {
+			${e=>e.invalid?`color: ${n.COLORS.content.negative} !important`:""};
+		}
+	}
+
+	span {
+		color: ${n.COLORS.content.negative};
+		padding-left: 4px;
+	}
+`,x=r.default(i.BodySecondary)`
+	color: ${n.COLORS.content.secondary} !important;
+	margin-top: ${e=>"BOTTOM"===e.position?"8px":"0px"};
+`,g=r.default(i.BodyCaption)`
+	white-space: pre-wrap;
+	margin-top: 8px;
+	color: ${e=>e.invalid?n.COLORS.content.negative:n.COLORS.content.secondary} !important;
+	/* position: absolute; */
+	/* left: 0px;
+	top: 100%; */
+	display: flex !important;
+	gap: 6px;
+	min-height: 16px;
+	> svg {
+		width: 16px;
+		height: 16px;
+	}
+`,m=r.default.div`
+	${e=>e.width?`width: ${e.width}`:""};
+	${e=>e.height&&"multiline"==e.type?`height: ${e.height}`:""};
+	${t=>"disabled"===t.state||"disabled-invalid"===t.state?e.css`
+					opacity: 0.5;
+					pointer-events: none;
+			  `:""};
+	display: flex;
+	flex-direction: column-reverse;
+	position: relative;
+	.truncate-class {
+		max-width: 180px;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.flex-align-center {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+`,c=r.default(i.BodyPrimary)`
+	overflow: unset;
+	margin-left: ${e=>e.variant&&["small","x-small"].includes(e.variant)?"":"16px"};
+	font-size: ${e=>"x-small"===e.variant?"12px":"small"===e.variant?"14px":"16px"};
+	line-height: ${e=>"x-small"===e.variant?"16px":"small"===e.variant?"20px":"24px"};
+`,u=r.default(i.BodyPrimary)`
+	overflow: unset;
+	margin-right: ${e=>e.variant&&["small","x-small"].includes(e.variant)?"":"16px"};
+	font-size: ${e=>"x-small"===e.variant?"12px":"small"===e.variant?"14px":"16px"};
+	line-height: ${e=>"x-small"===e.variant?"16px":"small"===e.variant?"20px":"24px"};
+`;exports.IconHolder=l,exports.InputContainer=s,exports.InputContainerSmall=d,exports.InputFooter=g,exports.InputHeader=h,exports.InputWrapper=o,exports.MaxCharStyle=x,exports.PrefixHolder=c,exports.RootContainer=m,exports.SuffixHolder=u;

package/dist/cjs/components/input/context/InputStyleProvider.js

@@ -0,0 +1 @@
+"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("react")).default.createContext({});exports.InputStyleContext=t;

package/dist/cjs/components/input-with-vars/InputWithVariables.d.ts

@@ -0,0 +1,34 @@
+import { Variable } from '../add-variableV2/AddVariableV2.js';
+import { SelectedVariable } from '../add-variableV2/types.js';
+import { InputTypeI } from '../input/Input.js';
+import { PickerType } from '../variable-picker-v3/model.js';
+
+interface InputWithVariablesProps {
+    type?: InputTypeI;
+    variablesList: any;
+    onChange: (val: SelectedVariable) => void;
+    onBlur?: (e: Event, val?: SelectedVariable | Variable) => void;
+    allowMix: boolean;
+    prevVariable: SelectedVariable;
+    showHelp?: boolean;
+    onlyVariables?: boolean;
+    placeHolder?: string;
+    showAddButton?: boolean;
+    errorMessage?: string;
+    noMaxCharCheck?: boolean;
+    maxCharLimit?: number;
+    labelText?: string;
+    labelElement?: React.ReactNode;
+    isRequired?: boolean;
+    hintText?: string;
+    onEnterPress?: (input: string) => void;
+    pickerType?: PickerType;
+    portalElement?: HTMLElement;
+    showVarHeader?: boolean;
+    varHeaderText?: string;
+    onPickerToggle?: (isOpen: boolean) => void;
+}
+declare const InputWithVariables: React.FC<InputWithVariablesProps>;
+
+export { InputWithVariables };
+export type { InputWithVariablesProps };

package/dist/cjs/components/input-with-vars/InputWithVariables.js

@@ -0,0 +1,7 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),a=require("../../assets/icons/PlusIcon.js"),r=require("react"),t=require("styled-components"),l=require("uuid"),i=require("../../constants/Theme.js"),s=require("../add-variableV2/AddVariableBox.styled.js"),n=require("../floater/floater.js"),c=require("../input/Input.js"),u=require("../TypographyStyle.js"),o=require("../variable-picker-v3/VariablePicker.js"),d=require("../variable-picker-v3/model.js"),p=require("./customPortal.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const x=h(t).default.div`
+	position: relative;
+	margin-bottom: 12px;
+	input {
+		color: ${e=>e.isVar?i.COLORS.stroke.brand:"black"};
+	}
+`;exports.InputWithVariables=({type:t,allowMix:i,onChange:h,prevVariable:v,variablesList:y,onBlur:b,onlyVariables:T,placeHolder:j,showAddButton:f=!0,showHelp:V,errorMessage:g,maxCharLimit:m,noMaxCharCheck:k,labelText:C,labelElement:E,isRequired:S=!1,hintText:q,onEnterPress:P,pickerType:w=d.PickerType.FLOATER,portalElement:R,showVarHeader:F,varHeaderText:A,onPickerToggle:D})=>{const M=r.useRef(),B=r.useRef(!0),I=r.useRef(null),[L,H]=r.useState(!1),[O]=r.useState(l.v4()),[N,$]=r.useState(),[z,_]=r.useState(v),[K,W]=r.useState(!1),[G,J]=r.useState(!1),[Q,U]=r.useState(0);return r.useEffect((()=>{if(N&&N.actualValue)if(i){if(_((e=>{return{actualValue:(a=e.actualValue,r=N.actualValue,t=Q,a.slice(0,t)+r+a.slice(t)),variableType:"string"};var a,r,t})),I.current){U(I.current.selectionStart);const e=Q+N.actualValue.length+2;I.current.setSelectionRange(e,e),U(e)}}else _((e=>({actualValue:N.actualValue,variableType:N.variableType,needsFetching:N.needsFetching})))}),[N]),r.useEffect((()=>{B.current?B.current=!1:h(z)}),[z]),e.jsxs(e.Fragment,{children:[e.jsxs(x,{isVar:/^{{.*}}$/.test(z.actualValue),onKeyDown:e=>{"Enter"===e.key&&P?.(z.actualValue)},children:[e.jsx(c.Input,{isRequired:S,hintText:q,type:t??"text",id:O,ref:I,skipFocus:!0,isActive:L,value:z.actualValue,validate:e=>[!0,""],errorMessage:g,noMaxCharCheck:k,maxCharLimit:m,labelText:C,labelElement:E,placeholder:j||"Add a value",onClick:e=>{I.current&&U(I.current.selectionStart)},onChangeText:(e,a)=>{if(I.current&&U(I.current.selectionStart),T){const e=a?.keyCode||a?.charCode;8!==e&&46!==e||_({actualValue:"",variableType:"string"})}else _(i?{actualValue:e,variableType:"string"}:{actualValue:e.replace(/{{.*}}/,""),variableType:"string"})},onReferenceInit:()=>{},onFocus:e=>{H(!0),J(!0)},onBlur:e=>{b?.(e,z),"addVar"===e.relatedTarget?.id||"variable-picker-v3"===e.relatedTarget?.id||e.relatedTarget?.className?.includes("accordion")||"back-btn-v3"===e.relatedTarget?.id?(I.current&&I.current.focus(),H(!0)):"search-bar-v3-picker"===e.relatedTarget?.id?H(!0):(H(!1),W(!1),D?.(!1),J(!1))}}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"space-between"},children:[z.actualValue&&V&&e.jsx("div",{style:{marginTop:4},children:e.jsx(u.BodyCaption,{children:`This value is of type ${z.variableType}`})}),f&&G&&e.jsx("div",{style:{marginTop:g||q?"-24px":"0px"},children:e.jsx(s.AddVariableStyled,{ref:M,id:"addVar",onClick:()=>{W(!K),D?.(!K)},children:e.jsxs("div",{className:"add",children:[e.jsx(a.default,{color:"white"}),e.jsx("div",{className:"variable",children:"Add variable"})]})})})]})]}),K&&e.jsx(e.Fragment,{children:w===d.PickerType.EMBEDDED?e.jsx(p.CustomPortal,{zIndex:101,element:R??document.body,children:e.jsx(o.VariablePicker,{width:"344px",showHeader:F,headerText:A,onClose:()=>{W(!1),D?.(!1)},type:d.PickerType.EMBEDDED,data:y,onSelect:e=>{$(e),W(!1),D?.(!1)}})}):e.jsx("div",{style:{zIndex:101,position:"relative"},children:e.jsx(n.Floater,{refElement:M,children:e.jsx("div",{style:{height:500},children:e.jsx(o.VariablePicker,{onClose:()=>{W(!1),D?.(!1)},type:d.PickerType.FLOATER,data:y,onSelect:e=>{$(e),W(!1),D?.(!1)}})})})})})]})};

package/dist/cjs/components/input-with-vars/customPortal.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from 'react';
+
+interface CustomPortalProps {
+    children: React.ReactNode;
+    element: HTMLElement;
+    zIndex?: number;
+}
+declare const CustomPortal: (props: CustomPortalProps) => React$1.ReactPortal;
+
+export { CustomPortal };

package/dist/cjs/components/input-with-vars/customPortal.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(require("react-dom"));exports.CustomPortal=t=>r.default.createPortal(e.jsx("div",{style:{zIndex:t.zIndex??2,position:"absolute",top:0,left:0,right:0,bottom:0,backgroundColor:"rgba(0, 0, 0, 0.7)",display:"flex",alignItems:"center",justifyContent:"flex-end",borderRadius:4,border:"1px solid #9E9E9E"},children:e.jsx("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:t.children})}),t.element);

package/dist/cjs/components/keywords-input/KeywordsInput.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare const KeywordsInput: (props: {
+    keywords: string[];
+    onDeleteKeyword: (name: string) => void;
+    onSelectKeyword?: ((kwd: string) => void) | undefined;
+    placeHolder?: string | undefined;
+    error?: boolean | undefined;
+    errorMessage?: string | undefined;
+    hint?: string | undefined;
+    width?: string | undefined;
+    'data-test'?: string | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+export { KeywordsInput };