@bikdotai/bik-component-library 0.0.814 → 0.0.815

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

@@ -1 +1 @@
-{"version":3,"file":"InputWithVariables.js","sources":["../../../../src/components/input-with-vars/InputWithVariables.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 } from 'uuid';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddVariableStyled } from '../add-variableV2/AddVariableBox.styled';\nimport { Variable } from '../add-variableV2/AddVariableV2';\nimport { SelectedVariable } from '../add-variableV2/types';\nimport { Floater } from '../floater';\nimport { Input } from '../input';\nimport { InputTypeI } from '../input/Input.model';\nimport { BodyCaption } from '../TypographyStyle';\nimport { VariablePicker } from '../variable-picker-v3';\nimport { PickerType } from '../variable-picker-v3/model';\nimport { CustomPortal } from './customPortal';\n\nexport interface InputWithVariablesProps {\n\ttype?: InputTypeI;\n\tvariablesList: any;\n\tonChange: (val: SelectedVariable) => void;\n\tonBlur?: (e: Event, val?: SelectedVariable | Variable) => void;\n\tallowMix: boolean;\n\tprevVariable: SelectedVariable;\n\tshowHelp?: boolean;\n\tonlyVariables?: boolean;\n\tplaceHolder?: string;\n\tshowAddButton?: boolean;\n\terrorMessage?: string;\n\tnoMaxCharCheck?: boolean;\n\tmaxCharLimit?: number;\n\tlabelText?: string;\n\tlabelElement?: React.ReactNode;\n\tisRequired?: boolean;\n\thintText?: string;\n\tonEnterPress?: (input: string) => void;\n\tpickerType?: PickerType;\n\tportalElement?: HTMLElement;\n\tshowVarHeader?: boolean;\n\tvarHeaderText?: string;\n\tonPickerToggle?: (isOpen: boolean) => void;\n}\n\nexport const InputWithVariables: React.FC<InputWithVariablesProps> = ({\n\ttype,\n\tallowMix,\n\tonChange,\n\tprevVariable,\n\tvariablesList,\n\tonBlur,\n\tonlyVariables,\n\tplaceHolder,\n\tshowAddButton = true,\n\tshowHelp,\n\terrorMessage,\n\tmaxCharLimit,\n\tnoMaxCharCheck,\n\tlabelText,\n\tlabelElement,\n\tisRequired = false,\n\thintText,\n\tonEnterPress,\n\tpickerType = PickerType.FLOATER,\n\tportalElement,\n\tshowVarHeader,\n\tvarHeaderText,\n\tonPickerToggle,\n}: InputWithVariablesProps) => {\n\tconst superRef = useRef<any>();\n\tconst initialRender = useRef(true);\n\tconst inputRef = useRef(null);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst [id] = useState<string>(v4());\n\tconst [selectedVariable, setSelectedVariable] = useState<SelectedVariable>();\n\tconst [displayValue, setDisplayValue] =\n\t\tuseState<SelectedVariable>(prevVariable);\n\tconst [varModalVisible, setVarModalVisible] = useState<boolean>(false);\n\tconst [addVarRefVisible, setAddVarRefVisible] = useState<boolean>(false);\n\tconst [curCursorPosition, setCurCursorPosition] = useState<number>(0);\n\n\tfunction insertString(originalString, stringToInsert, position) {\n\t\tconst modifiedString =\n\t\t\toriginalString.slice(0, position) +\n\t\t\tstringToInsert +\n\t\t\toriginalString.slice(position);\n\t\treturn modifiedString;\n\t}\n\n\tuseEffect(() => {\n\t\tif (!selectedVariable || !selectedVariable.actualValue) {\n\t\t\treturn;\n\t\t}\n\t\tif (allowMix) {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: insertString(\n\t\t\t\t\tprev.actualValue,\n\t\t\t\t\tselectedVariable.actualValue,\n\t\t\t\t\tcurCursorPosition,\n\t\t\t\t),\n\t\t\t\tvariableType: 'string',\n\t\t\t}));\n\t\t\tif (inputRef.current) {\n\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\tconst newPos =\n\t\t\t\t\tcurCursorPosition + selectedVariable.actualValue.length + 2;\n\t\t\t\t(inputRef.current as any).setSelectionRange(newPos, newPos);\n\t\t\t\tsetCurCursorPosition(newPos);\n\t\t\t}\n\t\t} else {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: selectedVariable.actualValue,\n\t\t\t\tvariableType: selectedVariable.variableType,\n\t\t\t\tneedsFetching: selectedVariable.needsFetching,\n\t\t\t}));\n\t\t}\n\t}, [selectedVariable]);\n\n\tuseEffect(() => {\n\t\t// don't call onChange on initial render\n\t\tif (initialRender.current) {\n\t\t\tinitialRender.current = false;\n\t\t} else {\n\t\t\tonChange(displayValue);\n\t\t}\n\t}, [displayValue]);\n\n\treturn (\n\t\t<>\n\t\t\t<StyledInput\n\t\t\t\tisVar={/^{{.*}}$/.test(displayValue.actualValue)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\tonEnterPress?.(displayValue.actualValue);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\thintText={hintText}\n\t\t\t\t\ttype={type ?? 'text'}\n\t\t\t\t\tid={id}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tskipFocus={true}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tvalue={displayValue.actualValue}\n\t\t\t\t\tvalidate={(_) => [true, '']}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tnoMaxCharCheck={noMaxCharCheck}\n\t\t\t\t\tmaxCharLimit={maxCharLimit}\n\t\t\t\t\tlabelText={labelText}\n\t\t\t\t\tlabelElement={labelElement}\n\t\t\t\t\tplaceholder={placeHolder || 'Add a value'}\n\t\t\t\t\tonClick={(event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonChangeText={(input: string, event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (onlyVariables) {\n\t\t\t\t\t\t\tconst key = (event as any)?.keyCode || (event as any)?.charCode;\n\n\t\t\t\t\t\t\tif (key === 8 || key === 46) {\n\t\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\t\tactualValue: '',\n\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!allowMix) {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input.replace(/{{.*}}/, ''),\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input,\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonReferenceInit={() => {\n\t\t\t\t\t\t/* Bypass eslint */\n\t\t\t\t\t}}\n\t\t\t\t\tonFocus={(e: any) => {\n\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\tsetAddVarRefVisible(true);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\tonBlur?.(e, displayValue);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\te.relatedTarget?.id === 'addVar' ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'variable-picker-v3' ||\n\t\t\t\t\t\t\te.relatedTarget?.className?.includes('accordion') ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'back-btn-v3'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\t\t(inputRef.current as any).focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else if (e.relatedTarget?.id === 'search-bar-v3-picker') {\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsActive(false);\n\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\tsetAddVarRefVisible(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{displayValue.actualValue && showHelp && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyCaption>{`This value is of type ${displayValue.variableType}`}</BodyCaption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddButton && addVarRefVisible && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ marginTop: errorMessage || hintText ? '-24px' : '0px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\t\tref={superRef}\n\t\t\t\t\t\t\t\tid={`addVar`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(!varModalVisible);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(!varModalVisible);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t\t<PlusIcon color=\"white\" />\n\t\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</StyledInput>\n\t\t\t{varModalVisible && (\n\t\t\t\t<>\n\t\t\t\t\t{pickerType === PickerType.EMBEDDED ? (\n\t\t\t\t\t\t<CustomPortal zIndex={101} element={portalElement ?? document.body}>\n\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\twidth={'344px'}\n\t\t\t\t\t\t\t\tshowHeader={showVarHeader}\n\t\t\t\t\t\t\t\theaderText={varHeaderText}\n\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CustomPortal>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div style={{ zIndex: 101, position: 'relative' }}>\n\t\t\t\t\t\t\t<Floater refElement={superRef}>\n\t\t\t\t\t\t\t\t<div style={{ height: 500 }}>\n\t\t\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Floater>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst StyledInput = styled.div<{ isVar: boolean }>`\n\tposition: relative;\n\tmargin-bottom: 12px;\n\tinput {\n\t\tcolor: ${(props) => (props.isVar ? COLORS.stroke.brand : 'black')};\n\t}\n`;\n"],"names":["InputWithVariables","type","allowMix","onChange","prevVariable","variablesList","onBlur","onlyVariables","placeHolder","showAddButton","showHelp","errorMessage","maxCharLimit","noMaxCharCheck","labelText","labelElement","isRequired","hintText","onEnterPress","pickerType","PickerType","portalElement","showVarHeader","varHeaderText","onPickerToggle","superRef","useRef","initialRender","inputRef","isActive","setIsActive","useState","id","v4","selectedVariable","setSelectedVariable","displayValue","setDisplayValue","varModalVisible","setVarModalVisible","addVarRefVisible","setAddVarRefVisible","curCursorPosition","setCurCursorPosition","insertString","originalString","stringToInsert","position","useEffect","prev","newPos","jsxs","Fragment","StyledInput","jsx","Input","_","event","input","key","BodyCaption","AddVariableStyled","PlusIcon","CustomPortal","VariablePicker","variable","Floater","styled","props","COLORS"],"mappings":"0iBA0CaA,GAAwD,CAAC,CACrE,KAAAC,EACA,SAAAC,EACA,SAAAC,EACA,aAAAC,EACA,cAAAC,EACA,OAAAC,EACA,cAAAC,EACA,YAAAC,EACA,cAAAC,EAAgB,GAChB,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,EACA,UAAAC,EACA,aAAAC,EACA,WAAAC,EAAa,GACb,SAAAC,EACA,aAAAC,EACA,WAAAC,EAAaC,EAAAA,WAAW,QACxB,cAAAC,EACA,cAAAC,EACA,cAAAC,EACA,eAAAC,CACD,IAA+B,CAC9B,MAAMC,EAAWC,EAAAA,OAAA,EACXC,EAAgBD,EAAAA,OAAO,EAAI,EAC3BE,EAAWF,EAAAA,OAAO,IAAI,EACtB,CAACG,EAAUC,CAAW,EAAIC,EAAAA,SAAkB,EAAK,EACjD,CAACC,CAAE,EAAID,EAAAA,SAAiBE,EAAAA,IAAI,EAC5B,CAACC,EAAkBC,CAAmB,EAAIJ,WAAA,EAC1C,CAACK,EAAcC,CAAe,EACnCN,EAAAA,SAA2B3B,CAAY,EAClC,CAACkC,EAAiBC,CAAkB,EAAIR,EAAAA,SAAkB,EAAK,EAC/D,CAACS,EAAkBC,CAAmB,EAAIV,EAAAA,SAAkB,EAAK,EACjE,CAACW,EAAmBC,CAAoB,EAAIZ,EAAAA,SAAiB,CAAC,EAEpE,SAASa,EAAaC,EAAgBC,EAAgBC,EAAU,CAK/D,OAHCF,EAAe,MAAM,EAAGE,CAAQ,EAChCD,EACAD,EAAe,MAAME,CAAQ,CAE/B,CAEAC,OAAAA,EAAAA,UAAU,IAAM,CACf,GAAI,GAACd,GAAoB,CAACA,EAAiB,aAG3C,GAAIhC,GASH,GARAmC,EAAiBY,IAAU,CAC1B,YAAaL,EACZK,EAAK,YACLf,EAAiB,YACjBQ,CAAA,EAED,aAAc,QAAA,EACb,EACEd,EAAS,QAAS,CACrBe,EAAsBf,EAAS,QAAgB,cAAc,EAC7D,MAAMsB,EACLR,EAAoBR,EAAiB,YAAY,OAAS,EAC1DN,EAAS,QAAgB,kBAAkBsB,EAAQA,CAAM,EAC1DP,EAAqBO,CAAM,CAC5B,OAEAb,EAAiBY,IAAU,CAC1B,YAAaf,EAAiB,YAC9B,aAAcA,EAAiB,aAC/B,cAAeA,EAAiB,aAAA,EAC/B,CAEJ,EAAG,CAACA,CAAgB,CAAC,EAErBc,EAAAA,UAAU,IAAM,CAEXrB,EAAc,QACjBA,EAAc,QAAU,GAExBxB,EAASiC,CAAY,CAEvB,EAAG,CAACA,CAAY,CAAC,EAGhBe,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAACE,GAAA,CACA,MAAO,WAAW,KAAKjB,EAAa,WAAW,EAC/C,UAAY,GAAM,CACb,EAAE,MAAQ,SACblB,IAAekB,EAAa,WAAW,CAEzC,EAEA,SAAA,CAAAkB,EAAAA,IAACC,GAAAA,MAAA,CACA,WAAAvC,EACA,SAAAC,EACA,KAAMhB,GAAQ,OACd,GAAA+B,EACA,IAAKJ,EACL,UAAW,GACX,SAAAC,EACA,MAAOO,EAAa,YACpB,SAAWoB,GAAM,CAAC,GAAM,EAAE,EAC1B,aAAA7C,EACA,eAAAE,EACA,aAAAD,EACA,UAAAE,EACA,aAAAC,EACA,YAAaP,GAAe,cAC5B,QAAUiD,GAA8B,CACnC7B,EAAS,SACZe,EAAsBf,EAAS,QAAgB,cAAc,CAE/D,EACA,aAAc,CAAC8B,EAAeD,IAA8B,CAK3D,GAJI7B,EAAS,SACZe,EAAsBf,EAAS,QAAgB,cAAc,EAG1DrB,EAAe,CAClB,MAAMoD,EAAOF,GAAe,SAAYA,GAAe,UAEnDE,IAAQ,GAAKA,IAAQ,KACxBtB,EAAgB,CACf,YAAa,GACb,aAAc,QAAA,CACd,EAEF,MACD,CAQCA,EANInC,EAMY,CACf,YAAawD,EACb,aAAc,QAAA,EAPC,CACf,YAAaA,EAAM,QAAQ,SAAU,EAAE,EACvC,aAAc,QAAA,CAMd,CAEH,EACA,gBAAiB,IAAM,CAEvB,EACA,QAAU,GAAW,CACpB5B,EAAY,EAAI,EAChBW,EAAoB,EAAI,CACzB,EACA,OAAS,GAAM,CACdnC,IAAS,EAAG8B,CAAY,EAEvB,EAAE,eAAe,KAAO,UACxB,EAAE,eAAe,KAAO,sBACxB,EAAE,eAAe,WAAW,SAAS,WAAW,GAChD,EAAE,eAAe,KAAO,eAEpBR,EAAS,SACXA,EAAS,QAAgB,MAAA,EAE3BE,EAAY,EAAI,GACN,EAAE,eAAe,KAAO,uBAClCA,EAAY,EAAI,GAEhBA,EAAY,EAAK,EACjBS,EAAmB,EAAK,EACxBf,IAAiB,EAAK,EACtBiB,EAAoB,EAAK,EAE3B,CAAA,CAAA,EAGDU,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAe,MACf,eAAgB,eAAA,EAGhB,SAAA,CAAAf,EAAa,aAAe1B,GAC5B4C,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,UAAW,CAAA,EAGZ,SAAAA,EAAAA,IAACM,EAAAA,YAAA,CAAa,SAAA,yBAAyBxB,EAAa,YAAY,EAAA,CAAG,CAAA,CAAA,EAGpE3B,GAAiB+B,GACjBc,EAAAA,IAAC,MAAA,CACA,MAAO,CAAE,UAAW3C,GAAgBM,EAAW,QAAU,KAAA,EAEzD,SAAAqC,EAAAA,IAACO,EAAAA,kBAAA,CACA,IAAKpC,EACL,GAAI,SACJ,QAAS,IAAM,CACdc,EAAmB,CAACD,CAAe,EACnCd,IAAiB,CAACc,CAAe,CAClC,EAEA,SAAAa,EAAAA,KAAC,MAAA,CAAI,UAAU,MACd,SAAA,CAAAG,EAAAA,IAACQ,EAAAA,QAAA,CAAS,MAAM,OAAA,CAAQ,EACxBR,EAAAA,IAAC,MAAA,CAAI,UAAU,WAAW,SAAA,cAAA,CAAY,CAAA,CAAA,CACvC,CAAA,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAEF,CAAA,CAAA,EAEAhB,GACAgB,EAAAA,IAAAF,WAAA,CACE,SAAAjC,IAAeC,EAAAA,WAAW,SAC1BkC,EAAAA,IAACS,EAAAA,aAAA,CAAa,OAAQ,IAAK,QAAS1C,GAAiB,SAAS,KAC7D,SAAAiC,EAAAA,IAACU,EAAAA,eAAA,CACA,MAAO,QACP,WAAY1C,EACZ,WAAYC,EACZ,QAAS,IAAM,CACdgB,EAAmB,EAAK,EACxBf,IAAiB,EAAK,CACvB,EACA,KAAMJ,EAAAA,WAAW,SACjB,KAAMf,EACN,SAAW4D,GAAkB,CAC5B9B,EAAoB8B,CAAQ,EAE5B1B,EAAmB,EAAK,EACxBf,IAAiB,EAAK,CACvB,CAAA,CAAA,CACD,CACD,EAEA8B,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,OAAQ,IAAK,SAAU,UAAA,EACpC,SAAAA,EAAAA,IAACY,WAAA,CAAQ,WAAYzC,EACpB,SAAA6B,EAAAA,IAAC,OAAI,MAAO,CAAE,OAAQ,GAAA,EACrB,SAAAA,EAAAA,IAACU,EAAAA,eAAA,CACA,QAAS,IAAM,CACdzB,EAAmB,EAAK,EACxBf,IAAiB,EAAK,CACvB,EACA,KAAMJ,EAAAA,WAAW,QACjB,KAAMf,EACN,SAAW4D,GAAkB,CAC5B9B,EAAoB8B,CAAQ,EAE5B1B,EAAmB,EAAK,EACxBf,IAAiB,EAAK,CACvB,CAAA,CAAA,EAEF,CAAA,CACD,CAAA,CACD,CAAA,CAEF,CAAA,EAEF,CAEF,EAEM6B,GAAcc,EAAO;AAAA;AAAA;AAAA;AAAA,WAIfC,GAAWA,EAAM,MAAQC,EAAAA,OAAO,OAAO,MAAQ,OAAQ;AAAA;AAAA"}
+{"version":3,"file":"InputWithVariables.js","sources":["../../../../src/components/input-with-vars/InputWithVariables.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/PlusIcon';\nimport { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { v4 } from 'uuid';\nimport { COLORS } from '@src/constants/Theme';\nimport { AddVariableStyled } from '../add-variableV2/AddVariableBox.styled';\nimport { Variable } from '../add-variableV2/AddVariableV2';\nimport { SelectedVariable } from '../add-variableV2/types';\nimport { Floater } from '../floater';\nimport { Input } from '../input';\nimport { InputTypeI } from '../input/Input.model';\nimport { BodyCaption } from '../TypographyStyle';\nimport { VariablePicker } from '../variable-picker-v3';\nimport { PickerType } from '../variable-picker-v3/model';\nimport { CustomPortal } from './customPortal';\n\nexport interface InputWithVariablesProps {\n\ttype?: InputTypeI;\n\tvariablesList: any;\n\tonChange: (val: SelectedVariable) => void;\n\tonBlur?: (e: Event, val?: SelectedVariable | Variable) => void;\n\tallowMix: boolean;\n\tprevVariable: SelectedVariable;\n\tshowHelp?: boolean;\n\tonlyVariables?: boolean;\n\tplaceHolder?: string;\n\tshowAddButton?: boolean;\n\terrorMessage?: string;\n\tnoMaxCharCheck?: boolean;\n\tmaxCharLimit?: number;\n\tlabelText?: string;\n\tlabelElement?: React.ReactNode;\n\tisRequired?: boolean;\n\thintText?: string;\n\tonEnterPress?: (input: string) => void;\n\tpickerType?: PickerType;\n\tportalElement?: HTMLElement;\n\tshowVarHeader?: boolean;\n\tvarHeaderText?: string;\n\tonPickerToggle?: (isOpen: boolean) => void;\n}\n\nexport const InputWithVariables: React.FC<InputWithVariablesProps> = ({\n\ttype,\n\tallowMix,\n\tonChange,\n\tprevVariable,\n\tvariablesList,\n\tonBlur,\n\tonlyVariables,\n\tplaceHolder,\n\tshowAddButton = true,\n\tshowHelp,\n\terrorMessage,\n\tmaxCharLimit,\n\tnoMaxCharCheck,\n\tlabelText,\n\tlabelElement,\n\tisRequired = false,\n\thintText,\n\tonEnterPress,\n\tpickerType = PickerType.FLOATER,\n\tportalElement,\n\tshowVarHeader,\n\tvarHeaderText,\n\tonPickerToggle,\n}: InputWithVariablesProps) => {\n\tconst superRef = useRef<any>();\n\tconst initialRender = useRef(true);\n\tconst inputRef = useRef(null);\n\tconst [isActive, setIsActive] = useState<boolean>(false);\n\tconst [id] = useState<string>(v4());\n\tconst [selectedVariable, setSelectedVariable] = useState<SelectedVariable>();\n\tconst [displayValue, setDisplayValue] =\n\t\tuseState<SelectedVariable>(prevVariable);\n\tconst [varModalVisible, setVarModalVisible] = useState<boolean>(false);\n\tconst [addVarRefVisible, setAddVarRefVisible] = useState<boolean>(false);\n\tconst [curCursorPosition, setCurCursorPosition] = useState<number>(0);\n\n\tfunction insertString(originalString, stringToInsert, position) {\n\t\tconst modifiedString =\n\t\t\toriginalString.slice(0, position) +\n\t\t\tstringToInsert +\n\t\t\toriginalString.slice(position);\n\t\treturn modifiedString;\n\t}\n\n\tuseEffect(() => {\n\t\tif (!selectedVariable || !selectedVariable.actualValue) {\n\t\t\treturn;\n\t\t}\n\t\tif (allowMix) {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: insertString(\n\t\t\t\t\tprev.actualValue,\n\t\t\t\t\tselectedVariable.actualValue,\n\t\t\t\t\tcurCursorPosition,\n\t\t\t\t),\n\t\t\t\tvariableType: 'string',\n\t\t\t}));\n\t\t\tif (inputRef.current) {\n\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\tconst newPos =\n\t\t\t\t\tcurCursorPosition + selectedVariable.actualValue.length + 2;\n\t\t\t\t(inputRef.current as any).setSelectionRange(newPos, newPos);\n\t\t\t\tsetCurCursorPosition(newPos);\n\t\t\t}\n\t\t} else {\n\t\t\tsetDisplayValue((prev) => ({\n\t\t\t\tactualValue: selectedVariable.actualValue,\n\t\t\t\tvariableType: selectedVariable.variableType,\n\t\t\t\tneedsFetching: selectedVariable.needsFetching,\n\t\t\t}));\n\t\t}\n\t}, [selectedVariable]);\n\n\tuseEffect(() => {\n\t\t// don't call onChange on initial render\n\t\tif (initialRender.current) {\n\t\t\tinitialRender.current = false;\n\t\t} else {\n\t\t\tonChange(displayValue);\n\t\t}\n\t}, [displayValue]);\n\n\treturn (\n\t\t<>\n\t\t\t<StyledInput\n\t\t\t\tisVar={/^{{.*}}$/.test(displayValue.actualValue)}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === 'Enter') {\n\t\t\t\t\t\tonEnterPress?.(displayValue.actualValue);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Input\n\t\t\t\t\tisRequired={isRequired}\n\t\t\t\t\thintText={hintText}\n\t\t\t\t\ttype={type ?? 'text'}\n\t\t\t\t\tid={id}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tskipFocus={true}\n\t\t\t\t\tisActive={isActive}\n\t\t\t\t\tvalue={displayValue.actualValue}\n\t\t\t\t\tvalidate={(_) => [true, '']}\n\t\t\t\t\terrorMessage={errorMessage}\n\t\t\t\t\tnoMaxCharCheck={noMaxCharCheck}\n\t\t\t\t\tmaxCharLimit={maxCharLimit}\n\t\t\t\t\tlabelText={labelText}\n\t\t\t\t\tlabelElement={labelElement}\n\t\t\t\t\tplaceholder={placeHolder || 'Add a value'}\n\t\t\t\t\tonClick={(event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonChangeText={(input: string, event?: Event | undefined) => {\n\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\tsetCurCursorPosition((inputRef.current as any).selectionStart);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (onlyVariables) {\n\t\t\t\t\t\t\tconst key = (event as any)?.keyCode || (event as any)?.charCode;\n\n\t\t\t\t\t\t\tif (key === 8 || key === 46) {\n\t\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\t\tactualValue: '',\n\t\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t\t});\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif (!allowMix) {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input.replace(/{{.*}}/, ''),\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetDisplayValue({\n\t\t\t\t\t\t\t\tactualValue: input,\n\t\t\t\t\t\t\t\tvariableType: 'string',\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tonReferenceInit={() => {\n\t\t\t\t\t\t/* Bypass eslint */\n\t\t\t\t\t}}\n\t\t\t\t\tonFocus={(e: any) => {\n\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\tsetAddVarRefVisible(true);\n\t\t\t\t\t}}\n\t\t\t\t\tonBlur={(e) => {\n\t\t\t\t\t\tonBlur?.(e, displayValue);\n\t\t\t\t\t\tif (\n\t\t\t\t\t\t\te.relatedTarget?.id === 'addVar' ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'variable-picker-v3' ||\n\t\t\t\t\t\t\te.relatedTarget?.className?.includes('accordion') ||\n\t\t\t\t\t\t\te.relatedTarget?.id === 'back-btn-v3'\n\t\t\t\t\t\t) {\n\t\t\t\t\t\t\tif (inputRef.current) {\n\t\t\t\t\t\t\t\t(inputRef.current as any).focus();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else if (e.relatedTarget?.id === 'search-bar-v3-picker') {\n\t\t\t\t\t\t\tsetIsActive(true);\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tsetIsActive(false);\n\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\tsetAddVarRefVisible(false);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t/>\n\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{displayValue.actualValue && showHelp && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tmarginTop: 4,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BodyCaption>{`This value is of type ${displayValue.variableType}`}</BodyCaption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{showAddButton && addVarRefVisible && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ marginTop: errorMessage || hintText ? '-24px' : '0px' }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<AddVariableStyled\n\t\t\t\t\t\t\t\tref={superRef}\n\t\t\t\t\t\t\t\tid={`addVar`}\n\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(!varModalVisible);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(!varModalVisible);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"add\">\n\t\t\t\t\t\t\t\t\t<PlusIcon color=\"white\" />\n\t\t\t\t\t\t\t\t\t<div className=\"variable\">Add variable</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</AddVariableStyled>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</StyledInput>\n\t\t\t{varModalVisible && (\n\t\t\t\t<>\n\t\t\t\t\t{pickerType === PickerType.EMBEDDED ? (\n\t\t\t\t\t\t<CustomPortal zIndex={101} element={portalElement ?? document.body}>\n\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\twidth={'344px'}\n\t\t\t\t\t\t\t\tshowHeader={showVarHeader}\n\t\t\t\t\t\t\t\theaderText={varHeaderText}\n\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttype={PickerType.EMBEDDED}\n\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</CustomPortal>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div style={{ zIndex: 101, position: 'relative' }}>\n\t\t\t\t\t\t\t<Floater refElement={superRef}>\n\t\t\t\t\t\t\t\t<div style={{ height: 500 }}>\n\t\t\t\t\t\t\t\t\t<VariablePicker\n\t\t\t\t\t\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\ttype={PickerType.FLOATER}\n\t\t\t\t\t\t\t\t\t\tdata={variablesList}\n\t\t\t\t\t\t\t\t\t\tonSelect={(variable: any) => {\n\t\t\t\t\t\t\t\t\t\t\tsetSelectedVariable(variable);\n\t\t\t\t\t\t\t\t\t\t\t// this can be conditional also via a prop\n\t\t\t\t\t\t\t\t\t\t\tsetVarModalVisible(false);\n\t\t\t\t\t\t\t\t\t\t\tonPickerToggle?.(false);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Floater>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst StyledInput = styled.div<{ isVar: boolean }>`\n\tposition: relative;\n\tmargin-bottom: 12px;\n\tinput {\n\t\tcolor: ${(props) => (props.isVar ? COLORS.stroke.brand : 'black')};\n\t}\n`;\n"],"names":["InputWithVariables","type","allowMix","onChange","prevVariable","variablesList","onBlur","onlyVariables","placeHolder","showAddButton","showHelp","errorMessage","maxCharLimit","noMaxCharCheck","labelText","labelElement","isRequired","hintText","onEnterPress","pickerType","PickerType","portalElement","showVarHeader","varHeaderText","onPickerToggle","superRef","useRef","initialRender","inputRef","isActive","setIsActive","useState","id","v4","selectedVariable","setSelectedVariable","displayValue","setDisplayValue","varModalVisible","setVarModalVisible","addVarRefVisible","setAddVarRefVisible","curCursorPosition","setCurCursorPosition","insertString","originalString","stringToInsert","position","useEffect","prev","newPos","jsxs","Fragment","StyledInput","jsx","Input","_","event","input","key","BodyCaption","AddVariableStyled","PlusIcon","CustomPortal","VariablePicker","variable","Floater","styled","props","COLORS"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react-dom"),r=e=>o.createPortal(t.jsx("div",{style:{zIndex:e.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:t.jsx("div",{style:{height:"100%",display:"flex",flexDirection:"column"},children:e.children})}),e.element);exports.CustomPortal=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react-dom"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=l(o),r=t=>n.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);exports.CustomPortal=r;
 //# sourceMappingURL=customPortal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"customPortal.js","sources":["../../../../src/components/input-with-vars/customPortal.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\n\ninterface CustomPortalProps {\n\tchildren: React.ReactNode;\n\telement: HTMLElement;\n\tzIndex?: number;\n}\n\nexport const CustomPortal = (props: CustomPortalProps) => {\n\treturn ReactDOM.createPortal(\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tzIndex: props.zIndex ?? 2,\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tbackgroundColor: 'rgba(0, 0, 0, 0.7)',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\tborderRadius: 4,\n\t\t\t\tborder: '1px solid #9E9E9E',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</div>,\n\t\tprops.element,\n\t);\n};\n"],"names":["CustomPortal","props","ReactDOM","jsx"],"mappings":"4IAQaA,EAAgBC,GACrBC,EAAS,aACfC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,OAAQF,EAAM,QAAU,EACxB,SAAU,WACV,IAAK,EACL,KAAM,EACN,MAAO,EACP,OAAQ,EACR,gBAAiB,qBACjB,QAAS,OACT,WAAY,SACZ,eAAgB,WAChB,aAAc,EACd,OAAQ,mBAAA,EAGT,SAAAE,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,OAAQ,OACR,QAAS,OACT,cAAe,QAAA,EAGf,SAAAF,EAAM,QAAA,CAAA,CACR,CAAA,EAEDA,EAAM,OAAA"}
+{"version":3,"file":"customPortal.js","sources":["../../../../src/components/input-with-vars/customPortal.tsx"],"sourcesContent":["import ReactDOM from 'react-dom';\n\ninterface CustomPortalProps {\n\tchildren: React.ReactNode;\n\telement: HTMLElement;\n\tzIndex?: number;\n}\n\nexport const CustomPortal = (props: CustomPortalProps) => {\n\treturn ReactDOM.createPortal(\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tzIndex: props.zIndex ?? 2,\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tbackgroundColor: 'rgba(0, 0, 0, 0.7)',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\tborderRadius: 4,\n\t\t\t\tborder: '1px solid #9E9E9E',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</div>\n\t\t</div>,\n\t\tprops.element,\n\t);\n};\n"],"names":["CustomPortal","props","ReactDOM","jsx"],"mappings":"2MAQaA,EAAgBC,GACrBC,EAAAA,QAAS,aACfC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,OAAQF,EAAM,QAAU,EACxB,SAAU,WACV,IAAK,EACL,KAAM,EACN,MAAO,EACP,OAAQ,EACR,gBAAiB,qBACjB,QAAS,OACT,WAAY,SACZ,eAAgB,WAChB,aAAc,EACd,OAAQ,mBAAA,EAGT,SAAAE,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,OAAQ,OACR,QAAS,OACT,cAAe,QAAA,EAGf,SAAAF,EAAM,QAAA,CAAA,CACR,CAAA,EAEDA,EAAM,OAAA"}

package/dist/cjs/components/list-item/ListItem.styled.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),r=require("../../constants/Theme.js"),i=require("./themes.js"),o=t.div`
-	border-bottom: ${e=>e.borderBottom||`${e.version==="2.0"?0:1}px solid ${r.COLORS.stroke.primary}`};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=require("../../constants/Theme.js"),r=require("./themes.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},s=i(e),n=s.default.div`
+	border-bottom: ${t=>t.borderBottom||`${t.version==="2.0"?0:1}px solid ${o.COLORS.stroke.primary}`};
 	display: flex;
 	align-items: center;
 	justify-content: start;
 	column-gap: 12px;
-	padding: ${e=>e.version==="2.0"?"8px 12px":"12px 16px"};
-	${e=>i.getTheme(e.variant,e.version)};
-	border-radius: ${e=>e.version==="2.0"?8:0}px;
-`;exports.ListItem=o;
+	padding: ${t=>t.version==="2.0"?"8px 12px":"12px 16px"};
+	${t=>r.getTheme(t.variant,t.version)};
+	border-radius: ${t=>t.version==="2.0"?8:0}px;
+`;exports.ListItem=n;
 //# sourceMappingURL=ListItem.styled.js.map

package/dist/cjs/components/list-item/ListItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0';\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' ? 0 : 1}px solid ${COLORS.stroke.primary}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version)};\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 0)}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":"oLAKaA,EAAWC,EAAO;AAAA,kBAKZC,GACjBA,EAAM,cACN,GAAGA,EAAM,UAAY,MAAQ,EAAI,CAAC,YAAYC,EAAAA,OAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1DD,GAAWA,EAAM,UAAY,MAAQ,WAAa,WAAY;AAAA,GACvEA,GAAUE,WAASF,EAAM,QAASA,EAAM,OAAO,CAAC;AAAA,kBACjCA,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA"}
+{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0';\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' ? 0 : 1}px solid ${COLORS.stroke.primary}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version)};\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 0)}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":"mPAKaA,EAAWC,EAAAA,QAAO;AAAA,kBAKZC,GACjBA,EAAM,cACN,GAAGA,EAAM,UAAY,MAAQ,EAAI,CAAC,YAAYC,EAAAA,OAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAK1DD,GAAWA,EAAM,UAAY,MAAQ,WAAa,WAAY;AAAA,GACvEA,GAAUE,WAASF,EAAM,QAASA,EAAM,OAAO,CAAC;AAAA,kBACjCA,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA"}

package/dist/cjs/components/modals/modal.styled.js

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("../../constants/Theme.js"),o=require("../../constants/zindex.js"),i=r.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),e=require("../../constants/Theme.js"),n=require("../../constants/zindex.js"),i=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=i(r),a=o.default.div`
 	position: fixed;
 	top: 0;
 	left: 0;
-	z-index: ${t=>t.zIndex||o.ComponentZindex.MODAL};
+	z-index: ${t=>t.zIndex||n.ComponentZindex.MODAL};
 	height: 100%;
 	width: 100%;
 	background-color: rgba(0, 0, 0, 0.6);
 	display: flex;
 	align-items: center;
 	justify-content: center;
-`,n=r.div`
+`,s=o.default.div`
 	width: ${t=>t.width??"640px"};
 	background-color: ${e.COLORS.surface.standard};
 	border-radius: 4px;
 	position: relative;
 	display: flex;
-`,s=r.div`
+`,d=o.default.div`
 	height: 36px;
 	width: 36px;
 	border-radius: 50%;
@@ -30,7 +30,7 @@
 	border: 1px solid ${e.COLORS.stroke.primary};
 	cursor: pointer;
 	z-index: 2;
-`,a=r.div`
+`,l=o.default.div`
 	border-radius: 24px;
 	position: absolute;
 	right: 0;
@@ -44,5 +44,5 @@
 	cursor: ${t=>t.timerExists?"not-allowed":"pointer"};
 	z-index: 2;
 	padding: 8px;
-`;exports.CentralContainer=n;exports.CloseButtonContainer=s;exports.CloseButtonWithTimer=a;exports.RootContainer=i;
+`;exports.CentralContainer=s;exports.CloseButtonContainer=d;exports.CloseButtonWithTimer=l;exports.RootContainer=a;
 //# sourceMappingURL=modal.styled.js.map

package/dist/cjs/components/modals/modal.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styled.js","sources":["../../../../src/components/modals/modal.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const RootContainer = styled.div<{ zIndex?: number }>`\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.MODAL};\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const CentralContainer = styled.div<{ width?: string }>`\n\twidth: ${(props) => props.width ?? '640px'};\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-radius: 4px;\n\tposition: relative;\n\tdisplay: flex;\n`;\n\nexport const CloseButtonContainer = styled.div`\n\theight: 36px;\n\twidth: 36px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\ttranslate: 50% -50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcursor: pointer;\n\tz-index: 2;\n`;\n\nexport const CloseButtonWithTimer = styled.div<{ timerExists?: boolean }>`\n\tborder-radius: 24px;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\ttransform: ${(props) =>\n\t\tprops.timerExists ? 'translate(20%, -50%)' : 'translate(50%, -50%)'};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcursor: ${(props) => (props.timerExists ? 'not-allowed' : 'pointer')};\n\tz-index: 2;\n\tpadding: 8px;\n`;\n"],"names":["RootContainer","styled","props","ComponentZindex","CentralContainer","COLORS","CloseButtonContainer","CloseButtonWithTimer"],"mappings":"kMAIaA,EAAgBC,EAAO;AAAA;AAAA;AAAA;AAAA,YAIvBC,GAAUA,EAAM,QAAUC,EAAAA,gBAAgB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/CC,EAAmBH,EAAO;AAAA,UAC5BC,GAAUA,EAAM,OAAS,OAAO;AAAA,qBACtBG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,EAM/BC,EAAuBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtBI,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACvBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAK7BE,EAAuBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5BC,GACbA,EAAM,YAAc,uBAAyB,sBAAsB;AAAA;AAAA;AAAA;AAAA,qBAIhDG,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACvBA,EAAAA,OAAO,OAAO,OAAO;AAAA,WAC9BH,GAAWA,EAAM,YAAc,cAAgB,SAAU;AAAA;AAAA;AAAA"}
+{"version":3,"file":"modal.styled.js","sources":["../../../../src/components/modals/modal.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\n\nexport const RootContainer = styled.div<{ zIndex?: number }>`\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tz-index: ${(props) => props.zIndex || ComponentZindex.MODAL};\n\theight: 100%;\n\twidth: 100%;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const CentralContainer = styled.div<{ width?: string }>`\n\twidth: ${(props) => props.width ?? '640px'};\n\tbackground-color: ${COLORS.surface.standard};\n\tborder-radius: 4px;\n\tposition: relative;\n\tdisplay: flex;\n`;\n\nexport const CloseButtonContainer = styled.div`\n\theight: 36px;\n\twidth: 36px;\n\tborder-radius: 50%;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\ttranslate: 50% -50%;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcursor: pointer;\n\tz-index: 2;\n`;\n\nexport const CloseButtonWithTimer = styled.div<{ timerExists?: boolean }>`\n\tborder-radius: 24px;\n\tposition: absolute;\n\tright: 0;\n\ttop: 0;\n\ttransform: ${(props) =>\n\t\tprops.timerExists ? 'translate(20%, -50%)' : 'translate(50%, -50%)'};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tbackground-color: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcursor: ${(props) => (props.timerExists ? 'not-allowed' : 'pointer')};\n\tz-index: 2;\n\tpadding: 8px;\n`;\n"],"names":["RootContainer","styled","props","ComponentZindex","CentralContainer","COLORS","CloseButtonContainer","CloseButtonWithTimer"],"mappings":"iQAIaA,EAAgBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,YAIvBC,GAAUA,EAAM,QAAUC,EAAAA,gBAAgB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/CC,EAAmBH,EAAAA,QAAO;AAAA,UAC5BC,GAAUA,EAAM,OAAS,OAAO;AAAA,qBACtBG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA,EAM/BC,EAAuBL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAWtBI,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACvBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA,EAK7BE,EAAuBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAK5BC,GACbA,EAAM,YAAc,uBAAyB,sBAAsB;AAAA;AAAA;AAAA;AAAA,qBAIhDG,EAAAA,OAAO,QAAQ,QAAQ;AAAA,qBACvBA,EAAAA,OAAO,OAAO,OAAO;AAAA,WAC9BH,GAAWA,EAAM,YAAc,cAAgB,SAAU;AAAA;AAAA;AAAA"}

package/dist/cjs/components/modals/styledModal.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../assets/icons/arrow_back.svg.js"),s=require("react-dom"),n=require("styled-components"),c=require("./Modal.js"),i=require("../TypographyStyle.js"),d=require("../../constants/Theme.js"),a=require("../button/Button.js"),u=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("../../assets/icons/arrow_back.svg.js"),c=require("react-dom"),u=require("styled-components"),h=require("./Modal.js"),i=require("../TypographyStyle.js"),d=require("../../constants/Theme.js"),a=require("../button/Button.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},f=o(c),n=o(u),x=n.default.div`
 	display: flex;
 	flex-direction: column;
 	flex: 1;
 	align-items: flex-start;
 	overflow: hidden;
 	max-width: 100%;
-`,h=n.div`
+`,y=n.default.div`
 	padding: 16px 24px;
 	width: 100%;
 	display: flex;
@@ -14,35 +14,35 @@
 	justify-content: center;
 	background-color: ${e=>e.tintedHeader?d.COLORS.background.warning.light:"transparent"};
 	border-top-left-radius: ${e=>e.tintedHeader?"4px":"none"};
-`,l=n.div`
+`,l=n.default.div`
 	display: flex;
 	flex-direction: column;
-`,x=n.div`
+`,m=n.default.div`
 	display: flex;
 	margin-left: auto;
 	justify-content: flex-end;
 	align-items: center;
-`,y=n(i.BodyPrimary)`
+`,g=n.default(i.BodyPrimary)`
 	margin-top: 4px;
 	color: ${d.COLORS.content.secondary} !important;
-`,m=n.div`
+`,j=n.default.div`
 	padding: 16px 24px;
 	display: flex;
 	align-items: center;
 	justify-content: end;
 	margin-top: auto;
 	width: 100%;
-`,f=n.div`
+`,C=n.default.div`
 	margin-right: auto;
 	display: flex;
 	align-items: center;
 	justify-content: flex-end;
 	height: calc(100% - 32px);
-`,g=n.div`
+`,S=n.default.div`
 	width: 100%;
 	z-index: 1;
 	box-shadow: ${e=>e.showShadow?"inset 0 -3px 6px rgba(0, 0, 0, 0.12)":"none"};
-`,j=n(a.Button)`
+`,w=n.default(a.Button)`
 	margin-right: 8px;
-`,C=e=>typeof window>"u"?null:s.createPortal(t.jsx(c.Modal,{"data-test":e["data-test"],id:e.id,zIndex:e.zIndex,open:e.open,onClose:e.onClose,closeOnOutsideClick:e.closeOnOutsideClick,closeOnEscapeKey:e.closeOnEscapeKey,centralContainerStyles:e.centralContainerStyles,hideCrossButton:e.hideCrossButton,width:e.width,skipModalWithTimer:e.skipModalWithTimer,timeOut:e.timeOut,children:t.jsxs(u,{style:e.wrapperStyle??{},id:e.innerModalId,children:[(e.headingTitle||e.headingSubtitle||e.headerRightCustomElement)&&t.jsxs(h,{style:e.modalHeaderStyles??{},tintedHeader:e.tintedHeader??!1,children:[e.onBackPress&&t.jsx("div",{style:{cursor:"pointer"},onClick:o=>{e.onBackPress?e.onBackPress():o.stopPropagation()},children:t.jsx(r.default,{width:18,height:18})}),t.jsxs("div",{style:{flex:1},children:[t.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[t.jsxs(l,{children:[" ",e.headingTitle&&t.jsx(i.TitleMedium,{children:e.headingTitle})," "]}),e.isBeta&&t.jsx("div",{style:{padding:"2px 8px",borderRadius:"16px",backgroundColor:"#1877f2",height:"fit-content",width:"fit-content"},children:t.jsx(i.BodyCaption,{style:{color:d.COLORS.surface.standard},children:"BETA"})}),e.headerLeftCustomElement]}),t.jsxs(l,{children:[" ",e.headingSubtitle&&t.jsx(y,{children:e.headingSubtitle})," "]})]}),e.headerRightCustomElement&&t.jsxs(x,{children:[" ",e.headerRightCustomElement," "]})," "]}),e.children&&t.jsxs(g,{style:e.modalBodyStyles??{},showShadow:e.footerShadow??!1,children:[e.children," "]}),(e.primaryButton||e.secondaryButton||e.footerLeftCustomElement)&&t.jsxs(m,{style:e.footerContainerStyle,children:[e.footerLeftCustomElement&&t.jsx(f,{children:e.footerLeftCustomElement}),e.secondaryButton&&t.jsx(j,{...e.secondaryButton}),e.primaryButton&&t.jsx(a.Button,{...e.primaryButton})]})," "]})}),document.body);exports.StyledModal=C;
+`,B=e=>typeof window>"u"?null:f.default.createPortal(t.jsx(h.Modal,{"data-test":e["data-test"],id:e.id,zIndex:e.zIndex,open:e.open,onClose:e.onClose,closeOnOutsideClick:e.closeOnOutsideClick,closeOnEscapeKey:e.closeOnEscapeKey,centralContainerStyles:e.centralContainerStyles,hideCrossButton:e.hideCrossButton,width:e.width,skipModalWithTimer:e.skipModalWithTimer,timeOut:e.timeOut,children:t.jsxs(x,{style:e.wrapperStyle??{},id:e.innerModalId,children:[(e.headingTitle||e.headingSubtitle||e.headerRightCustomElement)&&t.jsxs(y,{style:e.modalHeaderStyles??{},tintedHeader:e.tintedHeader??!1,children:[e.onBackPress&&t.jsx("div",{style:{cursor:"pointer"},onClick:r=>{e.onBackPress?e.onBackPress():r.stopPropagation()},children:t.jsx(s.default,{width:18,height:18})}),t.jsxs("div",{style:{flex:1},children:[t.jsxs("div",{style:{display:"flex",gap:"8px",alignItems:"center"},children:[t.jsxs(l,{children:[" ",e.headingTitle&&t.jsx(i.TitleMedium,{children:e.headingTitle})," "]}),e.isBeta&&t.jsx("div",{style:{padding:"2px 8px",borderRadius:"16px",backgroundColor:"#1877f2",height:"fit-content",width:"fit-content"},children:t.jsx(i.BodyCaption,{style:{color:d.COLORS.surface.standard},children:"BETA"})}),e.headerLeftCustomElement]}),t.jsxs(l,{children:[" ",e.headingSubtitle&&t.jsx(g,{children:e.headingSubtitle})," "]})]}),e.headerRightCustomElement&&t.jsxs(m,{children:[" ",e.headerRightCustomElement," "]})," "]}),e.children&&t.jsxs(S,{style:e.modalBodyStyles??{},showShadow:e.footerShadow??!1,children:[e.children," "]}),(e.primaryButton||e.secondaryButton||e.footerLeftCustomElement)&&t.jsxs(j,{style:e.footerContainerStyle,children:[e.footerLeftCustomElement&&t.jsx(C,{children:e.footerLeftCustomElement}),e.secondaryButton&&t.jsx(w,{...e.secondaryButton}),e.primaryButton&&t.jsx(a.Button,{...e.primaryButton})]})," "]})}),document.body);exports.StyledModal=B;
 //# sourceMappingURL=styledModal.js.map

package/dist/cjs/components/modals/styledModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle ||\n\t\t\t\t\tprops.headingSubtitle ||\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton ||\n\t\t\t\t\tprops.secondaryButton ||\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}
+{"version":3,"file":"styledModal.js","sources":["../../../../src/components/modals/styledModal.tsx"],"sourcesContent":["import BackIcon from '@src/assets/icons/arrow_back.svg';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { Modal } from '@src/components/modals/Modal';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleMedium,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonProps } from '../button/model';\n\nconst ModalWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\talign-items: flex-start;\n\toverflow: hidden;\n\tmax-width: 100%;\n`;\nconst ModalHeader = styled.div<{\n\ttintedHeader: boolean;\n}>`\n\tpadding: 16px 24px;\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 12px;\n\tjustify-content: center;\n\tbackground-color: ${(props) =>\n\t\tprops.tintedHeader ? COLORS.background.warning.light : 'transparent'};\n\tborder-top-left-radius: ${(props) => (props.tintedHeader ? '4px' : 'none')};\n`;\n\nconst ModalTitles = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nconst ModalCustomisation = styled.div`\n\tdisplay: flex;\n\tmargin-left: auto;\n\tjustify-content: flex-end;\n\talign-items: center;\n`;\n\nconst ModalSubtitle = styled(BodyPrimary)`\n\tmargin-top: 4px;\n\tcolor: ${COLORS.content.secondary} !important;\n`;\n\nconst ModalFooter = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: end;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nconst ModalFooterRightCustomisation = styled.div`\n\tmargin-right: auto;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\theight: calc(100% - 32px);\n`;\n\nconst ModalBody = styled.div<{\n\tshowShadow: boolean;\n}>`\n\twidth: 100%;\n\tz-index: 1;\n\tbox-shadow: ${(props) =>\n\t\tprops.showShadow ? 'inset 0 -3px 6px rgba(0, 0, 0, 0.12)' : 'none'};\n`;\nconst SecondaryButtonWrapper = styled(Button)`\n\tmargin-right: 8px;\n`;\nexport const StyledModal: React.FC<{\n\t'data-test'?: string;\n\topen: boolean;\n\tonClose?: () => void;\n\tchildren?: React.ReactNode;\n\tcentralContainerStyles?: React.CSSProperties;\n\tcloseOnOutsideClick?: boolean;\n\tcloseOnEscapeKey?: boolean;\n\theadingTitle?: string;\n\theadingSubtitle?: string;\n\ttintedHeader?: boolean;\n\tprimaryButton?: ButtonProps;\n\tsecondaryButton?: ButtonProps;\n\tfooterShadow?: boolean;\n\tfooterLeftCustomElement?: React.ReactNode;\n\theaderLeftCustomElement?: React.ReactNode;\n\theaderRightCustomElement?: React.ReactNode;\n\tzIndex?: number;\n\thideCrossButton?: boolean;\n\twidth?: string;\n\twrapperStyle?: React.CSSProperties;\n\tonBackPress?: () => void;\n\tfooterContainerStyle?: React.CSSProperties;\n\tid?: string;\n\tmodalHeaderStyles?: React.CSSProperties;\n\tinnerModalId?: string;\n\tisBeta?: boolean;\n\tmodalBodyStyles?: React.CSSProperties;\n\tskipModalWithTimer?: boolean;\n\ttimeOut?: number;\n}> = (props) => {\n\tif (typeof window === 'undefined') return null;\n\n\treturn ReactDOM.createPortal(\n\t\t<Modal\n\t\t\tdata-test={props['data-test']}\n\t\t\tid={props.id}\n\t\t\tzIndex={props.zIndex}\n\t\t\topen={props.open}\n\t\t\tonClose={props.onClose}\n\t\t\tcloseOnOutsideClick={props.closeOnOutsideClick}\n\t\t\tcloseOnEscapeKey={props.closeOnEscapeKey}\n\t\t\tcentralContainerStyles={props.centralContainerStyles}\n\t\t\thideCrossButton={props.hideCrossButton}\n\t\t\twidth={props.width}\n\t\t\tskipModalWithTimer={props.skipModalWithTimer}\n\t\t\ttimeOut={props.timeOut}\n\t\t>\n\t\t\t<ModalWrapper style={props.wrapperStyle ?? {}} id={props.innerModalId}>\n\t\t\t\t{(props.headingTitle ||\n\t\t\t\t\tprops.headingSubtitle ||\n\t\t\t\t\tprops.headerRightCustomElement) && (\n\t\t\t\t\t<ModalHeader\n\t\t\t\t\t\tstyle={props.modalHeaderStyles ?? {}}\n\t\t\t\t\t\ttintedHeader={props.tintedHeader ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.onBackPress && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tprops.onBackPress ? props.onBackPress() : e.stopPropagation();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BackIcon width={18} height={18} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div style={{ flex: 1 }}>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\tgap: '8px',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t\t{props.headingTitle && (\n\t\t\t\t\t\t\t\t\t\t<TitleMedium>{props.headingTitle}</TitleMedium>\n\t\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t\t\t{props.isBeta && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\t\t\t\t\t\tbackgroundColor: '#1877f2',\n\t\t\t\t\t\t\t\t\t\t\theight: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.surface.standard }}>\n\t\t\t\t\t\t\t\t\t\t\tBETA\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t{props.headerLeftCustomElement}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<ModalTitles>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headingSubtitle && (\n\t\t\t\t\t\t\t\t\t<ModalSubtitle>{props.headingSubtitle}</ModalSubtitle>\n\t\t\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t\t\t</ModalTitles>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{props.headerRightCustomElement && (\n\t\t\t\t\t\t\t<ModalCustomisation>\n\t\t\t\t\t\t\t\t{' '}\n\t\t\t\t\t\t\t\t{props.headerRightCustomElement}{' '}\n\t\t\t\t\t\t\t</ModalCustomisation>\n\t\t\t\t\t\t)}{' '}\n\t\t\t\t\t</ModalHeader>\n\t\t\t\t)}\n\t\t\t\t{props.children && (\n\t\t\t\t\t<ModalBody\n\t\t\t\t\t\tstyle={props.modalBodyStyles ?? {}}\n\t\t\t\t\t\tshowShadow={props.footerShadow ?? false}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.children}{' '}\n\t\t\t\t\t</ModalBody>\n\t\t\t\t)}\n\t\t\t\t{(props.primaryButton ||\n\t\t\t\t\tprops.secondaryButton ||\n\t\t\t\t\tprops.footerLeftCustomElement) && (\n\t\t\t\t\t<ModalFooter style={props.footerContainerStyle}>\n\t\t\t\t\t\t{props.footerLeftCustomElement && (\n\t\t\t\t\t\t\t<ModalFooterRightCustomisation>\n\t\t\t\t\t\t\t\t{props.footerLeftCustomElement}\n\t\t\t\t\t\t\t</ModalFooterRightCustomisation>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.secondaryButton && (\n\t\t\t\t\t\t\t<SecondaryButtonWrapper {...props.secondaryButton} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.primaryButton && <Button {...props.primaryButton} />}\n\t\t\t\t\t</ModalFooter>\n\t\t\t\t)}{' '}\n\t\t\t</ModalWrapper>\n\t\t</Modal>,\n\t\tdocument.body,\n\t);\n};\n"],"names":["ModalWrapper","styled","ModalHeader","props","COLORS","ModalTitles","ModalCustomisation","ModalSubtitle","BodyPrimary","ModalFooter","ModalFooterRightCustomisation","ModalBody","SecondaryButtonWrapper","Button","StyledModal","ReactDOM","jsx","Modal","jsxs","e","BackIcon","TitleMedium","BodyCaption"],"mappings":"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"}

package/dist/cjs/components/multi-level-dropdown/MenuItem.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),I=require("../../assets/icons/chevronRight2.svg.js"),i=require("react"),t=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),L=({width:u,onDropdownItemClick:o,option:e,parents:h,allowParentSelection:m,maxLevels:S,currentLevel:b,renderNestedMenu:x})=>{const[f,C]=i.useState(!1),[l,O]=i.useState(!1),[g,j]=i.useState({top:0,left:0}),y=i.useRef({top:0,left:0}),a=!!e.children&&e.children.length>0,d=a&&(S===void 0||b<S),R=()=>{!o||(e.disabled??!1)||(!a||m)&&o(e,h)},v=r=>{const c=r.currentTarget.getBoundingClientRect();j({top:c.top,left:c.right}),y.current={top:c.top,left:c.right}};return n.jsxs(s.MenuItemWrapper,{onMouseEnter:r=>{d&&(C(!0),v(r))},onMouseLeave:()=>{C(!1)},onClick:r=>{r.stopPropagation(),R()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?t.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:n.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:f,isHovered:l,isDisabled:e.disabled??!1,children:[n.jsxs(s.ContentContainer,{children:[e.leadingIcon&&n.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),n.jsxs("div",{children:[n.jsx(M.BodyCaption,{style:{color:e.disabled??!1?t.COLORS.content.inactive:e.selected||l?t.COLORS.content.positive:t.COLORS.content.primary},children:e.label}),e.subText&&n.jsx(M.BodyTiny,{style:{color:e.disabled??!1?t.COLORS.content.inactive:e.selected||l?t.COLORS.content.positive:t.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),a?n.jsx(s.TrailingIconContainer,{children:n.jsx(I.default,{width:16,height:16,color:!d||(e.disabled??!1)?t.COLORS.content.inactive:e.selected||l?t.COLORS.content.positive:t.COLORS.content.primary})}):e.trailingIcon?n.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):n.jsx(n.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&d&&f&&n.jsx(s.SubMenuContainer,{width:u,className:"submenu",onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),children:n.jsx(s.StyledSubMenuWrapper,{width:u,top:g.top,left:g.left,children:n.jsx(s.SubMenuListContainer,{children:x(e.children,[...h,e],b+1)})})})]})};exports.MenuItem=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),L=require("../../assets/icons/chevronRight2.svg.js"),m=require("react"),n=require("../../constants/Theme.js"),M=require("../TypographyStyle.js"),s=require("./MultiLevelDropdown.styled.js"),p=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},u=p(m),T=({width:r,onDropdownItemClick:o,option:e,parents:f,allowParentSelection:j,maxLevels:h,currentLevel:b,renderNestedMenu:x})=>{const[S,C]=u.default.useState(!1),[a,O]=u.default.useState(!1),[g,y]=u.default.useState({top:0,left:0}),R=m.useRef({top:0,left:0}),i=!!e.children&&e.children.length>0,d=i&&(h===void 0||b<h),v=()=>{!o||(e.disabled??!1)||(!i||j)&&o(e,f)},I=l=>{const c=l.currentTarget.getBoundingClientRect();y({top:c.top,left:c.right}),R.current={top:c.top,left:c.right}};return t.jsxs(s.MenuItemWrapper,{onMouseEnter:l=>{d&&(C(!0),I(l))},onMouseLeave:()=>{C(!1)},onClick:l=>{l.stopPropagation(),v()},id:"menuItemWrapper",style:{cursor:e.disabled??!1?"not-allowed":"pointer",backgroundColor:e.disabled??!1?n.COLORS.surface.standard:"transparent"},children:[e.customComponent?e.customComponent:t.jsxs(s.MenuItemContainer,{isSelected:e.selected,isSubMenuOpen:S,isHovered:a,isDisabled:e.disabled??!1,children:[t.jsxs(s.ContentContainer,{children:[e.leadingIcon&&t.jsx(s.LeadingIconContainer,{children:e.leadingIcon}),t.jsxs("div",{children:[t.jsx(M.BodyCaption,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.primary},children:e.label}),e.subText&&t.jsx(M.BodyTiny,{style:{color:e.disabled??!1?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.secondary,marginTop:"2px"},children:e.subText})]})]}),i?t.jsx(s.TrailingIconContainer,{children:t.jsx(L.default,{width:16,height:16,color:!d||(e.disabled??!1)?n.COLORS.content.inactive:e.selected||a?n.COLORS.content.positive:n.COLORS.content.primary})}):e.trailingIcon?t.jsx(s.TrailingIconContainer,{children:e.trailingIcon}):t.jsx(t.Fragment,{})]}),!(e.disabled??!1)&&e.children&&e.children.length>0&&d&&S&&t.jsx(s.SubMenuContainer,{width:r,className:"submenu",onMouseEnter:()=>O(!0),onMouseLeave:()=>O(!1),children:t.jsx(s.StyledSubMenuWrapper,{width:r,top:g.top,left:g.left,children:t.jsx(s.SubMenuListContainer,{children:x(e.children,[...f,e],b+1)})})})]})};exports.MenuItem=T;
 //# sourceMappingURL=MenuItem.js.map

package/dist/cjs/components/multi-level-dropdown/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined || currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick || (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren || allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu || (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"kTAoBaA,EAYR,CAAC,CACL,MAAAC,EACA,oBAAAC,EACA,OAAAC,EACA,QAAAC,EACA,qBAAAC,EACA,UAAAC,EACA,aAAAC,EACA,iBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAeC,CAAgB,EAAIC,EAAM,SAAS,EAAK,EACxD,CAACC,EAAkBC,CAAmB,EAAIF,EAAM,SAAS,EAAK,EAC9D,CAACG,EAAiBC,CAAkB,EAAIJ,EAAM,SAAS,CAC5D,IAAK,EACL,KAAM,CAAA,CACN,EACKK,EAAcC,EAAAA,OAAY,CAAE,IAAK,EAAG,KAAM,EAAG,EAC7CC,EAAc,CAAC,CAACf,EAAO,UAAYA,EAAO,SAAS,OAAS,EAC5DgB,EACLD,IAAgBZ,IAAc,QAAaC,EAAeD,GAErDc,EAA4B,IAAM,CACnC,CAAClB,IAAwBC,EAAO,UAAY,MAI5C,CAACe,GAAeb,IACnBH,EAAoBC,EAAQC,CAAO,CAErC,EAEMiB,EAA4BC,GAA4B,CAC7D,MAAMC,EAAQD,EAAM,cAA8B,sBAAA,EAClDP,EAAmB,CAClB,IAAKQ,EAAK,IACV,KAAMA,EAAK,KAAA,CACX,EACDP,EAAY,QAAU,CACrB,IAAKO,EAAK,IACV,KAAMA,EAAK,KAAA,CAEb,EAEA,OACCC,EAAAA,KAACC,EAAAA,gBAAA,CACA,aAAeH,GAAU,CACpBH,IACHT,EAAiB,EAAI,EACrBW,EAAyBC,CAAK,EAEhC,EACA,aAAc,IAAM,CACnBZ,EAAiB,EAAK,CACvB,EACA,QAAUgB,GAAM,CACfA,EAAE,gBAAA,EACFN,EAAA,CACD,EACA,GAAG,kBACH,MAAO,CACN,OAAQjB,EAAO,UAAY,GAAQ,cAAgB,UACnD,gBACCA,EAAO,UAAY,GAAQwB,EAAAA,OAAO,QAAQ,SAAW,aAAA,EAGtD,SAAA,CAAAxB,EAAO,gBACPA,EAAO,gBAEPqB,EAAAA,KAACI,EAAAA,kBAAA,CACA,WAAYzB,EAAO,SACnB,cAAAM,EACA,UAAWG,EACX,WAAYT,EAAO,UAAY,GAE/B,SAAA,CAAAqB,OAACK,EAAAA,iBAAA,CACC,SAAA,CAAA1B,EAAO,aACP2B,MAACC,EAAAA,qBAAA,CAAsB,SAAA5B,EAAO,YAAY,SAE1C,MAAA,CACA,SAAA,CAAA2B,EAAAA,IAACE,EAAAA,YAAA,CACA,MAAO,CACN,MACC7B,EAAO,UAAY,GAChBwB,EAAAA,OAAO,QAAQ,SACfxB,EAAO,UAAYS,EACnBe,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,OAAA,EAGnB,SAAAxB,EAAO,KAAA,CAAA,EAERA,EAAO,SACP2B,EAAAA,IAACG,EAAAA,SAAA,CACA,MAAO,CACN,MACC9B,EAAO,UAAY,GAChBwB,EAAAA,OAAO,QAAQ,SACfxB,EAAO,UAAYS,EACnBe,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,UACnB,UAAW,KAAA,EAGX,SAAAxB,EAAO,OAAA,CAAA,CACT,CAAA,CAEF,CAAA,EACD,EACCe,QACCgB,wBAAA,CACA,SAAAJ,EAAAA,IAACK,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MACC,CAAChB,IAAmBhB,EAAO,UAAY,IACpCwB,EAAAA,OAAO,QAAQ,SACfxB,EAAO,UAAYS,EACnBe,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAEpB,CACD,EACGxB,EAAO,mBACT+B,EAAAA,sBAAA,CAAuB,SAAA/B,EAAO,YAAA,CAAa,EAE5C2B,EAAAA,IAAAM,EAAAA,SAAA,CAAA,CAAE,CAAA,CAAA,CAAA,EAKJ,EAAEjC,EAAO,UAAY,KACrBA,EAAO,UACPA,EAAO,SAAS,OAAS,GACzBgB,GACAV,GACCqB,EAAAA,IAACO,EAAAA,iBAAA,CACA,MAAApC,EACA,UAAU,UACV,aAAc,IAAMY,EAAoB,EAAI,EAC5C,aAAc,IAAMA,EAAoB,EAAK,EAE7C,SAAAiB,EAAAA,IAACQ,EAAAA,qBAAA,CACA,MAAArC,EACA,IAAKa,EAAgB,IACrB,KAAMA,EAAgB,KAEtB,eAACyB,uBAAA,CACC,SAAA/B,EACAL,EAAO,SACP,CAAC,GAAGC,EAASD,CAAM,EACnBI,EAAe,CAAA,CAChB,CACD,CAAA,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAIL"}
+{"version":3,"file":"MenuItem.js","sources":["../../../../src/components/multi-level-dropdown/MenuItem.tsx"],"sourcesContent":["import ChevronRightIcon from '@src/assets/icons/chevronRight2.svg';\nimport React, { useRef } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyCaption, BodyTiny } from '../TypographyStyle';\nimport {\n\tContentContainer,\n\tLeadingIconContainer,\n\tMenuItemContainer,\n\tMenuItemWrapper,\n\tStyledSubMenuWrapper,\n\tSubMenuContainer,\n\tSubMenuListContainer,\n\tTrailingIconContainer,\n} from './MultiLevelDropdown.styled';\nimport {\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n\tSingleOption,\n} from './type';\n\nexport const MenuItem: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: SingleOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\tconst [isSubMenuOpen, setIsSubMenuOpen] = React.useState(false);\n\tconst [isSubMenuHovered, setIsSubMenuHovered] = React.useState(false);\n\tconst [subMenuPosition, setSubMenuPosition] = React.useState({\n\t\ttop: 0,\n\t\tleft: 0,\n\t});\n\tconst positionRef = useRef<any>({ top: 0, left: 0 });\n\tconst hasChildren = !!option.children && option.children.length > 0;\n\tconst canOpenSubMenu =\n\t\thasChildren && (maxLevels === undefined || currentLevel < maxLevels);\n\n\tconst handleDropdownOptionClick = () => {\n\t\tif (!onDropdownItemClick || (option.disabled ?? false)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (!hasChildren || allowParentSelection) {\n\t\t\tonDropdownItemClick(option, parents);\n\t\t}\n\t};\n\n\tconst calculateSubMenuPosition = (event: React.MouseEvent) => {\n\t\tconst rect = (event.currentTarget as HTMLElement).getBoundingClientRect();\n\t\tsetSubMenuPosition({\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t});\n\t\tpositionRef.current = {\n\t\t\ttop: rect.top,\n\t\t\tleft: rect.right,\n\t\t};\n\t};\n\n\treturn (\n\t\t<MenuItemWrapper\n\t\t\tonMouseEnter={(event) => {\n\t\t\t\tif (canOpenSubMenu) {\n\t\t\t\t\tsetIsSubMenuOpen(true);\n\t\t\t\t\tcalculateSubMenuPosition(event);\n\t\t\t\t}\n\t\t\t}}\n\t\t\tonMouseLeave={() => {\n\t\t\t\tsetIsSubMenuOpen(false);\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t\thandleDropdownOptionClick();\n\t\t\t}}\n\t\t\tid=\"menuItemWrapper\"\n\t\t\tstyle={{\n\t\t\t\tcursor: option.disabled ?? false ? 'not-allowed' : 'pointer',\n\t\t\t\tbackgroundColor:\n\t\t\t\t\toption.disabled ?? false ? COLORS.surface.standard : 'transparent',\n\t\t\t}}\n\t\t>\n\t\t\t{option.customComponent ? (\n\t\t\t\toption.customComponent\n\t\t\t) : (\n\t\t\t\t<MenuItemContainer\n\t\t\t\t\tisSelected={option.selected}\n\t\t\t\t\tisSubMenuOpen={isSubMenuOpen}\n\t\t\t\t\tisHovered={isSubMenuHovered}\n\t\t\t\t\tisDisabled={option.disabled ?? false}\n\t\t\t\t>\n\t\t\t\t\t<ContentContainer>\n\t\t\t\t\t\t{option.leadingIcon && (\n\t\t\t\t\t\t\t<LeadingIconContainer>{option.leadingIcon}</LeadingIconContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{option.subText && (\n\t\t\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\toption.disabled ?? false\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t\t\tmarginTop: '2px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option.subText}\n\t\t\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ContentContainer>\n\t\t\t\t\t{hasChildren ? (\n\t\t\t\t\t\t<TrailingIconContainer>\n\t\t\t\t\t\t\t<ChevronRightIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t!canOpenSubMenu || (option.disabled ?? false)\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: option.selected || isSubMenuHovered\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</TrailingIconContainer>\n\t\t\t\t\t) : option.trailingIcon ? (\n\t\t\t\t\t\t<TrailingIconContainer>{option.trailingIcon}</TrailingIconContainer>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t</MenuItemContainer>\n\t\t\t)}\n\n\t\t\t{!(option.disabled ?? false) &&\n\t\t\t\toption.children &&\n\t\t\t\toption.children.length > 0 &&\n\t\t\t\tcanOpenSubMenu &&\n\t\t\t\tisSubMenuOpen && (\n\t\t\t\t\t<SubMenuContainer\n\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\tclassName=\"submenu\"\n\t\t\t\t\t\tonMouseEnter={() => setIsSubMenuHovered(true)}\n\t\t\t\t\t\tonMouseLeave={() => setIsSubMenuHovered(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<StyledSubMenuWrapper\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\ttop={subMenuPosition.top}\n\t\t\t\t\t\t\tleft={subMenuPosition.left}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SubMenuListContainer>\n\t\t\t\t\t\t\t\t{renderNestedMenu(\n\t\t\t\t\t\t\t\t\toption.children,\n\t\t\t\t\t\t\t\t\t[...parents, option],\n\t\t\t\t\t\t\t\t\tcurrentLevel + 1,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</SubMenuListContainer>\n\t\t\t\t\t\t</StyledSubMenuWrapper>\n\t\t\t\t\t</SubMenuContainer>\n\t\t\t\t)}\n\t\t</MenuItemWrapper>\n\t);\n};\n"],"names":["MenuItem","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","currentLevel","renderNestedMenu","isSubMenuOpen","setIsSubMenuOpen","React","isSubMenuHovered","setIsSubMenuHovered","subMenuPosition","setSubMenuPosition","positionRef","useRef","hasChildren","canOpenSubMenu","handleDropdownOptionClick","calculateSubMenuPosition","event","rect","jsxs","MenuItemWrapper","e","COLORS","MenuItemContainer","ContentContainer","jsx","LeadingIconContainer","BodyCaption","BodyTiny","TrailingIconContainer","ChevronRightIcon","Fragment","SubMenuContainer","StyledSubMenuWrapper","SubMenuListContainer"],"mappings":"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"}

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),C=require("../zeroState/ZeroState.js"),M=require("../../constants/Theme.js"),E=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),O=require("./MenuList.js"),x=require("./MultiLevelDropdown.styled.js"),T=require("../floater/floater.js"),A=({options:n,width:s,isSearchable:S,onDropdownItemClick:g,refElement:m,topOffset:p,leftOffset:q,isDropdownOpen:o,onDropdownOutsideClick:u,allowParentSelection:b,maxLevels:R,hideGroupLabel:w})=>{const d=l.useRef(null),[a,j]=l.useState(n),v=f=>{const c=Array.isArray(n)?[...n]:[],L=[];for(;c.length>0;){const e=c.shift();e&&e.label.toLowerCase().includes(f.toLowerCase())&&L.push(e),e&&"children"in e&&e.children?c.push(...e.children):e&&"options"in e&&e.options&&c.push(...e.options)}const h=e=>e.map(r=>{if(L.includes(r))return r;if("children"in r&&r.children){const i=h(r.children);if(i.length>0)return{...r,children:i}}if("options"in r&&r.options){const i=h(r.options);if(i.length>0)return{...r,options:i}}return null}).filter(r=>r!==null);j(h(n))},y=f=>{d.current&&!d.current.contains(f.target)?u&&u(!0):u&&u(!1)};return l.useEffect(()=>{o&&v("")},[o]),l.useEffect(()=>(document.addEventListener("mousedown",y),()=>{document.removeEventListener("mousedown",y)}),[]),l.useEffect(()=>{j(n)},[n]),t.jsx(T.Floater,{refElement:m,topOffset:p,leftOffset:q,children:o&&t.jsx("div",{ref:d,style:{backgroundColor:M.COLORS.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"},children:t.jsxs(x.DropdownContainer,{width:s,children:[S&&t.jsx("div",{style:{padding:"4px",width:s??"200px"},children:t.jsx(E.SearchBox,{onSearch:v,version:"2.0"})}),t.jsx(x.OptionsContainer,{width:s,children:(a??[]).length>0&&t.jsx(O.MenuList,{width:s??"200px",onDropdownItemClick:g,options:a,parents:[],allowParentSelection:b,maxLevels:R,hideGroupLabel:w,currentLevel:1})}),(a??[]).length===0&&t.jsx(x.NoResultsContainer,{style:{width:s??"200px"},children:t.jsx(C.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]})})})};exports.MultiLevelDropdown=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),w=require("../zeroState/ZeroState.js"),M=require("../../constants/Theme.js"),E=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),O=require("./MenuList.js"),x=require("./MultiLevelDropdown.styled.js"),_=require("../floater/floater.js"),T=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},A=T(i),B=({options:t,width:s,isSearchable:v,onDropdownItemClick:L,refElement:S,topOffset:g,leftOffset:q,isDropdownOpen:o,onDropdownOutsideClick:u,allowParentSelection:b,maxLevels:R,hideGroupLabel:C})=>{const a=A.default.useRef(null),[d,p]=i.useState(t),j=f=>{const c=Array.isArray(t)?[...t]:[],m=[];for(;c.length>0;){const e=c.shift();e&&e.label.toLowerCase().includes(f.toLowerCase())&&m.push(e),e&&"children"in e&&e.children?c.push(...e.children):e&&"options"in e&&e.options&&c.push(...e.options)}const h=e=>e.map(r=>{if(m.includes(r))return r;if("children"in r&&r.children){const l=h(r.children);if(l.length>0)return{...r,children:l}}if("options"in r&&r.options){const l=h(r.options);if(l.length>0)return{...r,options:l}}return null}).filter(r=>r!==null);p(h(t))},y=f=>{a.current&&!a.current.contains(f.target)?u&&u(!0):u&&u(!1)};return i.useEffect(()=>{o&&j("")},[o]),i.useEffect(()=>(document.addEventListener("mousedown",y),()=>{document.removeEventListener("mousedown",y)}),[]),i.useEffect(()=>{p(t)},[t]),n.jsx(_.Floater,{refElement:S,topOffset:g,leftOffset:q,children:o&&n.jsx("div",{ref:a,style:{backgroundColor:M.COLORS.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"},children:n.jsxs(x.DropdownContainer,{width:s,children:[v&&n.jsx("div",{style:{padding:"4px",width:s??"200px"},children:n.jsx(E.SearchBox,{onSearch:j,version:"2.0"})}),n.jsx(x.OptionsContainer,{width:s,children:(d??[]).length>0&&n.jsx(O.MenuList,{width:s??"200px",onDropdownItemClick:L,options:d,parents:[],allowParentSelection:b,maxLevels:R,hideGroupLabel:C,currentLevel:1})}),(d??[]).length===0&&n.jsx(x.NoResultsContainer,{style:{width:s??"200px"},children:n.jsx(w.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]})})})};exports.MultiLevelDropdown=B;
 //# sourceMappingURL=MultiLevelDropdown.js.map

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div style={{ padding: '4px', width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<SearchBox onSearch={search} version={'2.0'} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer style={{ width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}
+{"version":3,"file":"MultiLevelDropdown.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { ZeroState } from '@src/components/zeroState/ZeroState';\nimport { COLORS } from '@src/constants/Theme';\nimport { SearchBox } from '../dropdown/OpenedDropdown/components/searchbox/SearchBox';\nimport { Floater } from '../floater';\nimport { MenuList } from './MenuList';\nimport {\n\tDropdownContainer,\n\tNoResultsContainer,\n\tOptionsContainer,\n} from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, MultiLevelDropdownProps } from './type';\n\nexport const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({\n\toptions,\n\twidth,\n\tisSearchable,\n\tonDropdownItemClick,\n\trefElement,\n\ttopOffset,\n\tleftOffset,\n\tisDropdownOpen,\n\tonDropdownOutsideClick,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n}) => {\n\tconst dropdownRef = React.useRef<HTMLDivElement>(null);\n\tconst [filteredOptions, setFilteredOptions] =\n\t\tuseState<MultiLevelDropdownOption[]>(options);\n\n\tconst search = (searchString: string) => {\n\t\tconst queue = Array.isArray(options) ? [...options] : [];\n\t\tconst result: MultiLevelDropdownOption[] = [];\n\n\t\twhile (queue.length > 0) {\n\t\t\tconst current = queue.shift();\n\t\t\tif (\n\t\t\t\tcurrent &&\n\t\t\t\tcurrent.label.toLowerCase().includes(searchString.toLowerCase())\n\t\t\t) {\n\t\t\t\tresult.push(current);\n\t\t\t}\n\t\t\tif (current && 'children' in current && current.children) {\n\t\t\t\tqueue.push(...current.children);\n\t\t\t} else if (current && 'options' in current && current.options) {\n\t\t\t\tqueue.push(...current.options);\n\t\t\t}\n\t\t}\n\n\t\tconst filterOptions = (options: MultiLevelDropdownOption[]) => {\n\t\t\treturn options\n\t\t\t\t.map((option: MultiLevelDropdownOption) => {\n\t\t\t\t\tif (result.includes(option)) {\n\t\t\t\t\t\treturn option;\n\t\t\t\t\t}\n\t\t\t\t\tif ('children' in option && option.children) {\n\t\t\t\t\t\tconst filteredChildren = filterOptions(\n\t\t\t\t\t\t\toption.children as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredChildren.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, children: filteredChildren };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tif ('options' in option && option.options) {\n\t\t\t\t\t\tconst filteredOptions = filterOptions(\n\t\t\t\t\t\t\toption.options as MultiLevelDropdownOption[],\n\t\t\t\t\t\t);\n\t\t\t\t\t\tif (filteredOptions.length > 0) {\n\t\t\t\t\t\t\treturn { ...option, options: filteredOptions };\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter((option) => option !== null);\n\t\t};\n\n\t\tsetFilteredOptions(filterOptions(options) as MultiLevelDropdownOption[]);\n\t};\n\n\tconst handleClickOutside = (event: MouseEvent) => {\n\t\tif (\n\t\t\tdropdownRef.current &&\n\t\t\t!dropdownRef.current.contains(event.target as Node)\n\t\t) {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(true);\n\t\t\t}\n\t\t} else {\n\t\t\tif (onDropdownOutsideClick) {\n\t\t\t\tonDropdownOutsideClick(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tif (isDropdownOpen) {\n\t\t\tsearch('');\n\t\t}\n\t}, [isDropdownOpen]);\n\n\tuseEffect(() => {\n\t\tdocument.addEventListener('mousedown', handleClickOutside);\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('mousedown', handleClickOutside);\n\t\t};\n\t}, []);\n\n\tuseEffect(() => {\n\t\tsetFilteredOptions(options);\n\t}, [options]);\n\n\treturn (\n\t\t<Floater\n\t\t\trefElement={refElement}\n\t\t\ttopOffset={topOffset}\n\t\t\tleftOffset={leftOffset}\n\t\t>\n\t\t\t{isDropdownOpen && (\n\t\t\t\t<div\n\t\t\t\t\tref={dropdownRef}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\tzIndex: 99999,\n\t\t\t\t\t\tborderRadius: '8px',\n\t\t\t\t\t\twhiteSpace: 'normal',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<DropdownContainer width={width}>\n\t\t\t\t\t\t{isSearchable && (\n\t\t\t\t\t\t\t<div style={{ padding: '4px', width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<SearchBox onSearch={search} version={'2.0'} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<OptionsContainer width={width}>\n\t\t\t\t\t\t\t{(filteredOptions ?? []).length > 0 && (\n\t\t\t\t\t\t\t\t<MenuList\n\t\t\t\t\t\t\t\t\twidth={width ?? '200px'}\n\t\t\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\t\t\toptions={filteredOptions}\n\t\t\t\t\t\t\t\t\tparents={[]}\n\t\t\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\t\t\tcurrentLevel={1}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</OptionsContainer>\n\n\t\t\t\t\t\t{(filteredOptions ?? []).length === 0 && (\n\t\t\t\t\t\t\t<NoResultsContainer style={{ width: width ?? '200px' }}>\n\t\t\t\t\t\t\t\t<ZeroState\n\t\t\t\t\t\t\t\t\ttitle=\"No results found!\"\n\t\t\t\t\t\t\t\t\tsubTitle={`Sorry, we are unable to find any results for your search.`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NoResultsContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownContainer>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</Floater>\n\t);\n};\n"],"names":["MultiLevelDropdown","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","dropdownRef","React","filteredOptions","setFilteredOptions","useState","search","searchString","queue","result","current","filterOptions","option","filteredChildren","handleClickOutside","event","useEffect","jsx","Floater","COLORS","jsxs","DropdownContainer","SearchBox","OptionsContainer","MenuList","NoResultsContainer","ZeroState"],"mappings":"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"}

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("styled-components"),t=require("../../constants/Theme.js"),p=n.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("styled-components"),n=require("../../constants/Theme.js"),p=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=p(d),s=e.default.div`
 	position: relative;
 	border-radius: 8px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	padding-bottom: 4px;
-`,d=n.div`
-	width: ${({width:e})=>e||"200px"};
+`,u=e.default.div`
+	width: ${({width:t})=>t||"200px"};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
@@ -12,24 +12,24 @@
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`,s=n.div`
+`,l=e.default.div`
 	margin-top: 64px;
 	height: 200px;
-	width: ${({width:e})=>e||"200px"};
-`,c=n.div`
+	width: ${({width:t})=>t||"200px"};
+`,c=e.default.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
 	margin: 4px 0;
-`,u=n.div`
+`,x=e.default.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	width: 100%;
-`,x=n.div`
+`,f=e.default.div`
 	position: relative;
 	padding: 1px 4px;
 	cursor: pointer;
@@ -38,33 +38,33 @@
 	&:focus-within > .submenu {
 		display: block;
 	}
-`,l=n.div`
+`,g=e.default.div`
 	position: relative;
 	padding: 4px 8px 4px 8px;
 	transition: background-color 0.2s;
 	width: 100%;
 	border-radius: 8px;
 	justify-content: center;
-	background-color: ${({isSelected:e,isHovered:i,isSubMenuOpen:r,isDisabled:a})=>a?t.COLORS.surface.standard:e||r?t.COLORS.background.positive.light:i?t.COLORS.surface.hovered:t.COLORS.surface.standard};
-	color: ${({isSelected:e,isSubMenuOpen:i})=>e||i?t.COLORS.content.positive:t.COLORS.content.primary};
+	background-color: ${({isSelected:t,isHovered:i,isSubMenuOpen:r,isDisabled:a})=>a?n.COLORS.surface.standard:t||r?n.COLORS.background.positive.light:i?n.COLORS.surface.hovered:n.COLORS.surface.standard};
+	color: ${({isSelected:t,isSubMenuOpen:i})=>t||i?n.COLORS.content.positive:n.COLORS.content.primary};
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 
 	&:hover {
-		background-color: ${({isSelected:e,isDisabled:i})=>i?t.COLORS.surface.standard:e?t.COLORS.background.positive.light:t.COLORS.surface.hovered};
+		background-color: ${({isSelected:t,isDisabled:i})=>i?n.COLORS.surface.standard:t?n.COLORS.background.positive.light:n.COLORS.surface.hovered};
 	}
-`,g=n.div`
+`,b=e.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,o=n.div`
+`,o=e.default.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,b=n.div`
+`,h=e.default.div`
 	margin: 4px;
-	background-color: ${t.COLORS.surface.standard};
+	background-color: ${n.COLORS.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: 8px;
 	padding-top: 4px;
@@ -75,25 +75,25 @@
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`,h=n.div`
+`,C=e.default.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-right: 4px;
-`,C=n.div`
+`,v=e.default.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`,v=n.div`
-	width: ${e=>e.width};
-`,f=n(o)`
-	width: ${e=>e.width};
-	top: ${e=>e.top}px;
-	left: ${e=>e.left}px;
-`;exports.ContentContainer=g;exports.DropdownContainer=p;exports.GroupedMenuListContainer=c;exports.LeadingIconContainer=h;exports.MenuItemContainer=l;exports.MenuItemWrapper=x;exports.NoResultsContainer=s;exports.OptionsContainer=d;exports.StyledMenuList=u;exports.StyledSubMenuWrapper=f;exports.SubMenuContainer=v;exports.SubMenuListContainer=b;exports.SubMenuWrapper=o;exports.TrailingIconContainer=C;
+`,m=e.default.div`
+	width: ${t=>t.width};
+`,y=e.default(o)`
+	width: ${t=>t.width};
+	top: ${t=>t.top}px;
+	left: ${t=>t.left}px;
+`;exports.ContentContainer=b;exports.DropdownContainer=s;exports.GroupedMenuListContainer=c;exports.LeadingIconContainer=C;exports.MenuItemContainer=g;exports.MenuItemWrapper=f;exports.NoResultsContainer=l;exports.OptionsContainer=u;exports.StyledMenuList=x;exports.StyledSubMenuWrapper=y;exports.SubMenuContainer=m;exports.SubMenuListContainer=h;exports.SubMenuWrapper=o;exports.TrailingIconContainer=v;
 //# sourceMappingURL=MultiLevelDropdown.styled.js.map

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{ width?: string }>`\n\tposition: relative;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: 4px;\n`;\n\nexport const OptionsContainer = styled.div<{ width?: string }>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: 4px 0 0;\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{ width?: string }>`\n\tmargin-top: 64px;\n\theight: 200px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n`;\n\nexport const GroupedMenuListContainer = styled.div`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: 4px 0;\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div`\n\tposition: relative;\n\tpadding: 1px 4px;\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: 4px 8px 4px 8px;\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: 8px;\n\tjustify-content: center;\n\tbackground-color: ${({ isSelected, isHovered, isSubMenuOpen, isDisabled }) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\tpadding-top: 4px;\n\tmax-height: 480px;\n\tpadding-bottom: 4px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","OptionsContainer","width","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"2JAGaA,EAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3BC,EAAmBD,EAAO;AAAA,UAC7B,CAAC,CAAE,MAAAE,CAAA,IAAaA,GAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrCC,EAAqBH,EAAO;AAAA;AAAA;AAAA,UAG/B,CAAC,CAAE,MAAAE,CAAA,IAAaA,GAAgB,OAAQ;AAAA,EAGrCE,EAA2BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlCK,EAAiBL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBM,EAAkBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzBO,EAAoBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOnB,CAAC,CAAE,WAAAQ,EAAY,UAAAC,EAAW,cAAAC,EAAe,WAAAC,KAC5DA,EACGC,EAAAA,OAAO,QAAQ,SACfJ,GAAcE,EACdE,EAAAA,OAAO,WAAW,SAAS,MAC3BH,EACAG,SAAO,QAAQ,QACfA,SAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,CAAE,WAAAJ,EAAY,cAAAE,CAAA,IACvBF,GAAcE,EACXE,EAAAA,OAAO,QAAQ,SACfA,SAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,CAAE,WAAAJ,EAAY,WAAAG,CAAA,IAClCA,EACGC,EAAAA,OAAO,QAAQ,SACfJ,EACAI,EAAAA,OAAO,WAAW,SAAS,MAC3BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfC,EAAmBb,EAAO;AAAA;AAAA;AAAA;AAAA,EAM1Bc,EAAiBd,EAAO;AAAA;AAAA;AAAA;AAAA,EAMxBe,EAAuBf,EAAO;AAAA;AAAA,qBAEtBY,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/BI,EAAuBhB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BiB,EAAwBjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BkB,EAAmBlB,EAAO;AAAA,UAC5BmB,GAAUA,EAAM,KAAK;AAAA,EAGnBC,EAAuBpB,EAAOc,CAAc;AAAA,UAK9CK,GAAUA,EAAM,KAAK;AAAA,QACvBA,GAAUA,EAAM,GAAG;AAAA,SAClBA,GAAUA,EAAM,IAAI;AAAA"}
+{"version":3,"file":"MultiLevelDropdown.styled.js","sources":["../../../../src/components/multi-level-dropdown/MultiLevelDropdown.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div<{ width?: string }>`\n\tposition: relative;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tpadding-bottom: 4px;\n`;\n\nexport const OptionsContainer = styled.div<{ width?: string }>`\n\twidth: ${({ width }) => (width ? width : '200px')};\n\tmax-width: 300px;\n\tmax-height: 280px;\n\toverflow-y: scroll;\n\tpadding: 4px 0 0;\n\t&::-webkit-scrollbar {\n\t\twidth: 0px;\n\t}\n`;\n\nexport const NoResultsContainer = styled.div<{ width?: string }>`\n\tmargin-top: 64px;\n\theight: 200px;\n\twidth: ${({ width }) => (width ? width : '200px')};\n`;\n\nexport const GroupedMenuListContainer = styled.div`\n\twidth: 100%;\n\tjustify-content: center;\n\tcursor: pointer;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin: 4px 0;\n`;\n\nexport const StyledMenuList = styled.div`\n\tz-index: 1000;\n\tposition: relative;\n\tmargin: 0px;\n\tpadding: 0px;\n\twidth: 100%;\n`;\n\nexport const MenuItemWrapper = styled.div`\n\tposition: relative;\n\tpadding: 1px 4px;\n\tcursor: pointer;\n\twidth: 100%;\n\t&:hover > .submenu,\n\t&:focus-within > .submenu {\n\t\tdisplay: block;\n\t}\n`;\n\nexport interface MenuItemContainerProps {\n\tisSelected?: boolean;\n\tisHovered?: boolean;\n\tisSubMenuOpen?: boolean;\n\tisDisabled?: boolean;\n}\n\nexport const MenuItemContainer = styled.div<MenuItemContainerProps>`\n\tposition: relative;\n\tpadding: 4px 8px 4px 8px;\n\ttransition: background-color 0.2s;\n\twidth: 100%;\n\tborder-radius: 8px;\n\tjustify-content: center;\n\tbackground-color: ${({ isSelected, isHovered, isSubMenuOpen, isDisabled }) =>\n\t\tisDisabled\n\t\t\t? COLORS.surface.standard\n\t\t\t: isSelected || isSubMenuOpen\n\t\t\t? COLORS.background.positive.light\n\t\t\t: isHovered\n\t\t\t? COLORS.surface.hovered\n\t\t\t: COLORS.surface.standard};\n\tcolor: ${({ isSelected, isSubMenuOpen }) =>\n\t\tisSelected || isSubMenuOpen\n\t\t\t? COLORS.content.positive\n\t\t\t: COLORS.content.primary};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t&:hover {\n\t\tbackground-color: ${({ isSelected, isDisabled }) =>\n\t\t\tisDisabled\n\t\t\t\t? COLORS.surface.standard\n\t\t\t\t: isSelected\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const ContentContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n`;\n\nexport const SubMenuWrapper = styled.div`\n\tz-index: 1001;\n\tposition: fixed;\n\tborder-left: 4px solid transparent;\n`;\n\nexport const SubMenuListContainer = styled.div`\n\tmargin: 4px;\n\tbackground-color: ${COLORS.surface.standard};\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\tpadding-top: 4px;\n\tmax-height: 480px;\n\tpadding-bottom: 4px;\n\toverflow-y: scroll;\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const LeadingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-right: 4px;\n`;\n\nexport const TrailingIconContainer = styled.div`\n\twidth: 16px;\n\theight: 16px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin-left: 4px;\n`;\n\nexport const SubMenuContainer = styled.div<{ width: string }>`\n\twidth: ${(props) => props.width};\n`;\n\nexport const StyledSubMenuWrapper = styled(SubMenuWrapper)<{\n\twidth: string;\n\ttop: number;\n\tleft: number;\n}>`\n\twidth: ${(props) => props.width};\n\ttop: ${(props) => props.top}px;\n\tleft: ${(props) => props.left}px;\n`;\n"],"names":["DropdownContainer","styled","OptionsContainer","width","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO3BC,EAAmBD,EAAAA,QAAO;AAAA,UAC7B,CAAC,CAAE,MAAAE,CAAA,IAAaA,GAAgB,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUrCC,EAAqBH,EAAAA,QAAO;AAAA;AAAA;AAAA,UAG/B,CAAC,CAAE,MAAAE,CAAA,IAAaA,GAAgB,OAAQ;AAAA,EAGrCE,EAA2BJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASlCK,EAAiBL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxBM,EAAkBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzBO,EAAoBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOnB,CAAC,CAAE,WAAAQ,EAAY,UAAAC,EAAW,cAAAC,EAAe,WAAAC,KAC5DA,EACGC,EAAAA,OAAO,QAAQ,SACfJ,GAAcE,EACdE,EAAAA,OAAO,WAAW,SAAS,MAC3BH,EACAG,SAAO,QAAQ,QACfA,SAAO,QAAQ,QAAQ;AAAA,UAClB,CAAC,CAAE,WAAAJ,EAAY,cAAAE,CAAA,IACvBF,GAAcE,EACXE,EAAAA,OAAO,QAAQ,SACfA,SAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAML,CAAC,CAAE,WAAAJ,EAAY,WAAAG,CAAA,IAClCA,EACGC,EAAAA,OAAO,QAAQ,SACfJ,EACAI,EAAAA,OAAO,WAAW,SAAS,MAC3BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfC,EAAmBb,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAM1Bc,EAAiBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBe,EAAuBf,EAAAA,QAAO;AAAA;AAAA,qBAEtBY,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa/BI,EAAuBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BiB,EAAwBjB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BkB,EAAmBlB,EAAAA,QAAO;AAAA,UAC5BmB,GAAUA,EAAM,KAAK;AAAA,EAGnBC,EAAuBpB,EAAAA,QAAOc,CAAc;AAAA,UAK9CK,GAAUA,EAAM,KAAK;AAAA,QACvBA,GAAUA,EAAM,GAAG;AAAA,SAClBA,GAAUA,EAAM,IAAI;AAAA"}