@bikdotai/bik-component-library 0.0.808-beta.0 → 0.0.809-beta.0

package/dist/esm/components/multi-level-dropdown/MenuList.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{GroupedMenuList as o}from"./GroupedMenuList.js";import{MenuItem as t}from"./MenuItem.js";import{StyledMenuList as n}from"./MultiLevelDropdown.styled.js";const r=({width:l,onDropdownItemClick:i,options:p,parents:a,allowParentSelection:s,maxLevels:d,hideGroupLabel:m,currentLevel:c})=>{const u=(o,t,n)=>e(r,{width:l,onDropdownItemClick:i,options:o,parents:t,allowParentSelection:s,maxLevels:d,hideGroupLabel:m,currentLevel:n});return e(n,{children:p.map(((n,r)=>"value"in n?e(t,{width:l,onDropdownItemClick:i,option:n,parents:a,allowParentSelection:s,maxLevels:d,currentLevel:c,renderNestedMenu:u},r):"options"in n&&n.options.length>0?e(o,{width:l,onDropdownItemClick:i,option:n,parents:a,allowParentSelection:s,maxLevels:d,hideGroupLabel:m,currentLevel:c,renderNestedMenu:u},r):void 0))})};export{r as MenuList};
+import{jsx as e}from"react/jsx-runtime";import{GroupedMenuList as o}from"./GroupedMenuList.js";import{MenuItem as t}from"./MenuItem.js";import{StyledMenuList as n}from"./MultiLevelDropdown.styled.js";const r=l=>{let{width:i,onDropdownItemClick:p,options:a,parents:s,allowParentSelection:d,maxLevels:m,hideGroupLabel:c,currentLevel:u}=l;const w=(o,t,n)=>e(r,{width:i,onDropdownItemClick:p,options:o,parents:t,allowParentSelection:d,maxLevels:m,hideGroupLabel:c,currentLevel:n});return e(n,{children:a.map(((n,r)=>"value"in n?e(t,{width:i,onDropdownItemClick:p,option:n,parents:s,allowParentSelection:d,maxLevels:m,currentLevel:u,renderNestedMenu:w},r):"options"in n&&n.options.length>0?e(o,{width:i,onDropdownItemClick:p,option:n,parents:s,allowParentSelection:d,maxLevels:m,hideGroupLabel:c,currentLevel:u,renderNestedMenu:w},r):void 0))})};export{r as MenuList};
 //# sourceMappingURL=MenuList.js.map

package/dist/esm/components/multi-level-dropdown/MenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuList.js","sources":["../../../../src/components/multi-level-dropdown/MenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { GroupedMenuList } from './GroupedMenuList';\nimport { MenuItem } from './MenuItem';\nimport { StyledMenuList } from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, RenderNestedMenu } from './type';\n\nexport const MenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toptions: MultiLevelDropdownOption[];\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toptions,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n}) => {\n\tconst renderNestedMenu: RenderNestedMenu = (\n\t\tnestedOptions,\n\t\tnestedParents,\n\t\tnestedCurrentLevel,\n\t) => (\n\t\t<MenuList\n\t\t\twidth={width}\n\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\toptions={nestedOptions}\n\t\t\tparents={nestedParents}\n\t\t\tallowParentSelection={allowParentSelection}\n\t\t\tmaxLevels={maxLevels}\n\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\tcurrentLevel={nestedCurrentLevel}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<StyledMenuList>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} else if ('options' in option && option.options.length > 0) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GroupedMenuList\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})}\n\t\t</StyledMenuList>\n\t);\n};\n"],"names":["MenuList","width","onDropdownItemClick","options","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","nestedOptions","nestedParents","nestedCurrentLevel","_jsx","StyledMenuList","children","map","option","index","MenuItem","length","GroupedMenuList"],"mappings":"wMAMO,MAAMA,EAYRA,EACJC,QACAC,sBACAC,UACAC,UACAC,uBACAC,YACAC,iBACAC,mBAEA,MAAMC,EAAqCA,CAC1CC,EACAC,EACAC,IAEAC,EAACb,GACAC,MAAOA,EACPC,oBAAqBA,EACrBC,QAASO,EACTN,QAASO,EACTN,qBAAsBA,EACtBC,UAAWA,EACXC,eAAgBA,EAChBC,aAAcI,IAIhB,OACCC,EAACC,EAAc,CAAAC,SACbZ,EAAQa,KAAI,CAACC,EAAQC,IACjB,UAAWD,EAEbJ,EAACM,EAEA,CAAAlB,MAAOA,EACPC,oBAAqBA,EACrBe,OAAQA,EACRb,QAASA,EACTC,qBAAsBA,EACtBC,UAAWA,EACXE,aAAcA,EACdC,iBAAkBA,GARbS,GAWG,YAAaD,GAAUA,EAAOd,QAAQiB,OAAS,EAExDP,EAACQ,GAEApB,MAAOA,EACPC,oBAAqBA,EACrBe,OAAQA,EACRb,QAASA,EACTC,qBAAsBA,EACtBC,UAAWA,EACXC,eAAgBA,EAChBC,aAAcA,EACdC,iBAAkBA,GATbS,QAHD,KAiBQ"}
+{"version":3,"file":"MenuList.js","sources":["../../../../src/components/multi-level-dropdown/MenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { GroupedMenuList } from './GroupedMenuList';\nimport { MenuItem } from './MenuItem';\nimport { StyledMenuList } from './MultiLevelDropdown.styled';\nimport { MultiLevelDropdownOption, RenderNestedMenu } from './type';\n\nexport const MenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toptions: MultiLevelDropdownOption[];\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toptions,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n}) => {\n\tconst renderNestedMenu: RenderNestedMenu = (\n\t\tnestedOptions,\n\t\tnestedParents,\n\t\tnestedCurrentLevel,\n\t) => (\n\t\t<MenuList\n\t\t\twidth={width}\n\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\toptions={nestedOptions}\n\t\t\tparents={nestedParents}\n\t\t\tallowParentSelection={allowParentSelection}\n\t\t\tmaxLevels={maxLevels}\n\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\tcurrentLevel={nestedCurrentLevel}\n\t\t/>\n\t);\n\n\treturn (\n\t\t<StyledMenuList>\n\t\t\t{options.map((option, index) => {\n\t\t\t\tif ('value' in option) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t} else if ('options' in option && option.options.length > 0) {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<GroupedMenuList\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\twidth={width}\n\t\t\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\tparents={parents}\n\t\t\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\t\t\thideGroupLabel={hideGroupLabel}\n\t\t\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t})}\n\t\t</StyledMenuList>\n\t);\n};\n"],"names":["MenuList","_ref","width","onDropdownItemClick","options","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","nestedOptions","nestedParents","nestedCurrentLevel","_jsx","StyledMenuList","children","map","option","index","MenuItem","length","GroupedMenuList"],"mappings":"wMAMaA,MAAAA,EAYRC,IASA,IATCC,MACLA,EAAKC,oBACLA,EAAmBC,QACnBA,EAAOC,QACPA,EAAOC,qBACPA,EAAoBC,UACpBA,EAASC,eACTA,EAAcC,aACdA,GACAR,EACA,MAAMS,EAAqCA,CAC1CC,EACAC,EACAC,IAEAC,EAACd,GACAE,MAAOA,EACPC,oBAAqBA,EACrBC,QAASO,EACTN,QAASO,EACTN,qBAAsBA,EACtBC,UAAWA,EACXC,eAAgBA,EAChBC,aAAcI,IAIhB,OACCC,EAACC,EAAc,CAAAC,SACbZ,EAAQa,KAAI,CAACC,EAAQC,IACjB,UAAWD,EAEbJ,EAACM,EAEA,CAAAlB,MAAOA,EACPC,oBAAqBA,EACrBe,OAAQA,EACRb,QAASA,EACTC,qBAAsBA,EACtBC,UAAWA,EACXE,aAAcA,EACdC,iBAAkBA,GARbS,GAWG,YAAaD,GAAUA,EAAOd,QAAQiB,OAAS,EAExDP,EAACQ,GAEApB,MAAOA,EACPC,oBAAqBA,EACrBe,OAAQA,EACRb,QAASA,EACTC,qBAAsBA,EACtBC,UAAWA,EACXC,eAAgBA,EAChBC,aAAcA,EACdC,iBAAkBA,GATbS,QAHD,KAiBQ"}

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

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

package/dist/esm/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","useRef","filteredOptions","setFilteredOptions","useState","search","searchString","queue","Array","isArray","result","length","current","shift","label","toLowerCase","includes","push","children","filterOptions","map","option","filteredChildren","Object","assign","filter","handleClickOutside","event","contains","target","useEffect","document","addEventListener","removeEventListener","_jsx","Floater","ref","style","backgroundColor","COLORS","surface","standard","zIndex","borderRadius","whiteSpace","_jsxs","DropdownContainer","padding","SearchBox","onSearch","version","OptionsContainer","MenuList","parents","currentLevel","NoResultsContainer","ZeroState","title","subTitle"],"mappings":"gfAaO,MAAMA,EAAwDA,EACpEC,UACAC,QACAC,eACAC,sBACAC,aACAC,YACAC,aACAC,iBACAC,yBACAC,uBACAC,YACAC,qBAEA,MAAMC,EAAcC,EAAMC,OAAuB,OAC1CC,EAAiBC,GACvBC,EAAqCjB,GAEhCkB,EAAUC,IACf,MAAMC,EAAQC,MAAMC,QAAQtB,GAAW,IAAIA,GAAW,GAChDuB,EAAqC,GAE3C,KAAOH,EAAMI,OAAS,GAAG,CACxB,MAAMC,EAAUL,EAAMM,QAErBD,GACAA,EAAQE,MAAMC,cAAcC,SAASV,EAAaS,gBAElDL,EAAOO,KAAKL,GAETA,GAAW,aAAcA,GAAWA,EAAQM,SAC/CX,EAAMU,QAAQL,EAAQM,UACZN,GAAW,YAAaA,GAAWA,EAAQzB,SACrDoB,EAAMU,QAAQL,EAAQzB,QAEvB,CAED,MAAMgC,EAAiBhC,GACfA,EACLiC,KAAKC,IACL,GAAIX,EAAOM,SAASK,GACnB,OAAOA,EAER,GAAI,aAAcA,GAAUA,EAAOH,SAAU,CAC5C,MAAMI,EAAmBH,EACxBE,EAAOH,UAER,GAAII,EAAiBX,OAAS,EAC7B,OAAAY,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYH,GAAM,CAAEH,SAAUI,GAE/B,CACD,GAAI,YAAaD,GAAUA,EAAOlC,QAAS,CAC1C,MAAMe,EAAkBiB,EACvBE,EAAOlC,SAER,GAAIe,EAAgBS,OAAS,EAC5B,OAAAY,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYH,GAAM,CAAElC,QAASe,GAE9B,CACD,OAAO,IAAI,IAEXuB,QAAQJ,GAAsB,OAAXA,IAGtBlB,EAAmBgB,EAAchC,GAAuC,EAGnEuC,EAAsBC,IAE1B5B,EAAYa,UACXb,EAAYa,QAAQgB,SAASD,EAAME,QAEhClC,GACHA,GAAuB,GAGpBA,GACHA,GAAuB,EAExB,EAoBF,OAjBAmC,GAAU,KACLpC,GACHW,EAAO,GACP,GACC,CAACX,IAEJoC,GAAU,KACTC,SAASC,iBAAiB,YAAaN,GAChC,KACNK,SAASE,oBAAoB,YAAaP,EAAmB,IAE5D,IAEHI,GAAU,KACT3B,EAAmBhB,EAAQ,GACzB,CAACA,IAGH+C,EAACC,EACAZ,OAAAC,OAAA,CAAAjC,WAAYA,EACZC,UAAWA,EACXC,WAAYA,GAEX,CAAAyB,SAAAxB,GACAwC,EACC,MAAAX,OAAAC,OAAA,CAAAY,IAAKrC,EACLsC,MAAO,CACNC,gBAAiBC,EAAOC,QAAQC,SAChCC,OAAQ,MACRC,aAAc,MACdC,WAAY,WACZ,CAAA1B,SAED2B,EAACC,EAAiBvB,OAAAC,OAAA,CAACpC,MAAOA,GACxB,CAAA8B,SAAA,CAAA7B,GACA6C,uBAAKG,MAAO,CAAEU,QAAS,MAAO3D,MAAOA,QAAAA,EAAS,UAC7C,CAAA8B,SAAAgB,EAACc,EAAU,CAAAC,SAAU5C,EAAQ6C,QAAS,WAGxChB,EAACiB,iBAAiB/D,MAAOA,GAAK,CAAA8B,UAC3BhB,QAAAA,EAAmB,IAAIS,OAAS,GACjCuB,EAACkB,EAAQ,CACRhE,MAAOA,QAAAA,EAAS,QAChBE,oBAAqBA,EACrBH,QAASe,EACTmD,QAAS,GACTzD,qBAAsBA,EACtBC,UAAWA,EACXC,eAAgBA,EAChBwD,aAAc,OAKmB,KAAlCpD,QAAAA,EAAmB,IAAIS,QACxBuB,EAACqB,EAAkBhC,OAAAC,OAAA,CAACa,MAAO,CAAEjD,MAAOA,QAAAA,EAAS,UAC5C,CAAA8B,SAAAgB,EAACsB,EACA,CAAAC,MAAM,oBACNC,SAAU,0EAOP"}
+{"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","_ref","options","width","isSearchable","onDropdownItemClick","refElement","topOffset","leftOffset","isDropdownOpen","onDropdownOutsideClick","allowParentSelection","maxLevels","hideGroupLabel","dropdownRef","React","useRef","filteredOptions","setFilteredOptions","useState","search","searchString","queue","Array","isArray","result","length","current","shift","label","toLowerCase","includes","push","children","filterOptions","map","option","filteredChildren","Object","assign","filter","handleClickOutside","event","contains","target","useEffect","document","addEventListener","removeEventListener","_jsx","Floater","ref","style","backgroundColor","COLORS","surface","standard","zIndex","borderRadius","whiteSpace","_jsxs","DropdownContainer","padding","SearchBox","onSearch","version","OptionsContainer","MenuList","parents","currentLevel","NoResultsContainer","ZeroState","title","subTitle"],"mappings":"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"}

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

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

package/dist/esm/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","div","OptionsContainer","width","NoResultsContainer","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","surface","standard","background","positive","light","hovered","content","primary","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper","top","left"],"mappings":"mFAGaA,MAAAA,EAAoBC,EAAOC,GAAuB;;;;;EAOlDC,EAAmBF,EAAOC,GAAuB;UACpD,EAAGE,WAAaA,GAAgB;;;;;;;;EAU7BC,EAAqBJ,EAAOC,GAAuB;;;UAGtD,EAAGE,WAAaA,GAAgB;EAG7BE,EAA2BL,EAAOC,GAAG;;;;;;;EASrCK,EAAiBN,EAAOC,GAAG;;;;;;EAQ3BM,EAAkBP,EAAOC,GAAG;;;;;;;;;EAkB5BO,EAAoBR,EAAOC,GAA2B;;;;;;;qBAO9C,EAAGQ,aAAYC,YAAWC,gBAAeC,gBAC5DA,EACGC,EAAOC,QAAQC,SACfN,GAAcE,EACdE,EAAOG,WAAWC,SAASC,MAC3BR,EACAG,EAAOC,QAAQK,QACfN,EAAOC,QAAQC;UACV,EAAGN,aAAYE,mBACvBF,GAAcE,EACXE,EAAOO,QAAQH,SACfJ,EAAOO,QAAQC;;;;;;sBAME,EAAGZ,aAAYG,gBAClCA,EACGC,EAAOC,QAAQC,SACfN,EACAI,EAAOG,WAAWC,SAASC,MAC3BL,EAAOC,QAAQK;;EAIRG,EAAmBtB,EAAOC,GAAG;;;;EAM7BsB,EAAiBvB,EAAOC,GAAG;;;;EAM3BuB,EAAuBxB,EAAOC,GAAG;;qBAEzBY,EAAOC,QAAQC;;;;;;;;;;;EAavBU,EAAuBzB,EAAOC,GAAG;;;;;;;EASjCyB,EAAwB1B,EAAOC,GAAG;;;;;;;EASlC0B,EAAmB3B,EAAOC,GAAsB;UAClD2B,GAAUA,EAAMzB;EAGd0B,EAAuB7B,EAAOuB,EAIzC;UACSK,GAAUA,EAAMzB;QAClByB,GAAUA,EAAME;SACfF,GAAUA,EAAMG;"}
+{"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","div","OptionsContainer","_ref","width","NoResultsContainer","_ref2","GroupedMenuListContainer","StyledMenuList","MenuItemWrapper","MenuItemContainer","_ref3","isSelected","isHovered","isSubMenuOpen","isDisabled","COLORS","surface","standard","background","positive","light","hovered","_ref4","content","primary","_ref5","ContentContainer","SubMenuWrapper","SubMenuListContainer","LeadingIconContainer","TrailingIconContainer","SubMenuContainer","props","StyledSubMenuWrapper","top","left"],"mappings":"mFAGaA,MAAAA,EAAoBC,EAAOC,GAAuB;;;;;EAOlDC,EAAmBF,EAAOC,GAAuB;UACpDE,IAAA,IAACC,MAAEA,GAAOD,EAAA,OAAMC,GAAgB,OAAO;;;;;;;;EAUpCC,EAAqBL,EAAOC,GAAuB;;;UAGtDK,IAAA,IAACF,MAAEA,GAAOE,EAAA,OAAMF,GAAgB,OAAO;EAGpCG,EAA2BP,EAAOC,GAAG;;;;;;;EASrCO,EAAiBR,EAAOC,GAAG;;;;;;EAQ3BQ,EAAkBT,EAAOC,GAAG;;;;;;;;;EAkB5BS,EAAoBV,EAAOC,GAA2B;;;;;;;qBAO9CU,IAAA,IAACC,WAAEA,EAAUC,UAAEA,EAASC,cAAEA,EAAaC,WAAEA,GAAYJ,EAAA,OACxEI,EACGC,EAAOC,QAAQC,SACfN,GAAcE,EACdE,EAAOG,WAAWC,SAASC,MAC3BR,EACAG,EAAOC,QAAQK,QACfN,EAAOC,QAAQC,QAAQ;UAClBK,IAAA,IAACX,WAAEA,EAAUE,cAAEA,GAAeS,EAAA,OACtCX,GAAcE,EACXE,EAAOQ,QAAQJ,SACfJ,EAAOQ,QAAQC,OAAO;;;;;;sBAMLC,IAAA,IAACd,WAAEA,EAAUG,WAAEA,GAAYW,EAAA,OAC9CX,EACGC,EAAOC,QAAQC,SACfN,EACAI,EAAOG,WAAWC,SAASC,MAC3BL,EAAOC,QAAQK,OAAO;;EAIfK,EAAmB3B,EAAOC,GAAG;;;;EAM7B2B,EAAiB5B,EAAOC,GAAG;;;;EAM3B4B,EAAuB7B,EAAOC,GAAG;;qBAEzBe,EAAOC,QAAQC;;;;;;;;;;;EAavBY,EAAuB9B,EAAOC,GAAG;;;;;;;EASjC8B,EAAwB/B,EAAOC,GAAG;;;;;;;EASlC+B,EAAmBhC,EAAOC,GAAsB;UAClDgC,GAAUA,EAAM7B;EAGd8B,EAAuBlC,EAAO4B,EAIzC;UACSK,GAAUA,EAAM7B;QAClB6B,GAAUA,EAAME;SACfF,GAAUA,EAAMG;"}

package/dist/esm/components/navigation-hyperlink/NavigationHyperlink.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationHyperlink.js","sources":["../../../../src/components/navigation-hyperlink/NavigationHyperlink.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport interface NavigationHyperlinkProps {\n\trouter: any;\n\thref: string;\n\tchildren?: ReactNode;\n\tnewTab?: boolean;\n}\n\nexport const NavigationHyperlink: React.FC<NavigationHyperlinkProps> = (\n\tnavigationHyperlinkProps,\n) => {\n\tconst { router, href, newTab } = navigationHyperlinkProps;\n\n\tconst onNavigation = (event) => {\n\t\tconst isExternal = href.includes('http');\n\t\tif (isExternal) {\n\t\t\tconst openInNewTab = newTab || event.metaKey ? '_blank' : '_self';\n\t\t\twindow.open(href, openInNewTab);\n\t\t} else {\n\t\t\tconst formattedHref = `${href.startsWith('/') ? '' : '/'}${href}`;\n\t\t\tif (!event.metaKey) {\n\t\t\t\tif (router) {\n\t\t\t\t\trouter.push(window.location.origin + formattedHref);\n\t\t\t\t} else {\n\t\t\t\t\twindow.open(window.location.origin + formattedHref, '_self');\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\twindow.open(window.location.origin + formattedHref, '_blank');\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<NaLinkWrapper onClick={onNavigation}>\n\t\t\t{navigationHyperlinkProps.children}\n\t\t</NaLinkWrapper>\n\t);\n};\n\nexport const NaLinkWrapper = styled.div`\n\t//\tdisplay: inline-block;\n`;\n"],"names":["NavigationHyperlink","navigationHyperlinkProps","router","href","newTab","_jsx","NaLinkWrapper","Object","assign","onClick","event","includes","openInNewTab","metaKey","window","open","formattedHref","startsWith","location","origin","push","children","styled","div"],"mappings":"yEAUaA,MAAAA,EACZC,IAEA,MAAMC,OAAEA,EAAMC,KAAEA,EAAIC,OAAEA,GAAWH,EAqBjC,OACCI,EAACC,EAAaC,OAAAC,OAAA,CAACC,QApBMC,IAErB,GADmBP,EAAKQ,SAAS,QACjB,CACf,MAAMC,EAAeR,GAAUM,EAAMG,QAAU,SAAW,QAC1DC,OAAOC,KAAKZ,EAAMS,EAClB,KAAM,CACN,MAAMI,EAAgB,GAAGb,EAAKc,WAAW,KAAO,GAAK,MAAMd,IACtDO,EAAMG,QAOVC,OAAOC,KAAKD,OAAOI,SAASC,OAASH,EAAe,UANhDd,EACHA,EAAOkB,KAAKN,OAAOI,SAASC,OAASH,GAErCF,OAAOC,KAAKD,OAAOI,SAASC,OAASH,EAAe,QAKtD,IAImC,CAAAK,SAClCpB,EAAyBoB,WACX,EAILf,EAAgBgB,EAAOC,GAAG;;"}
+{"version":3,"file":"NavigationHyperlink.js","sources":["../../../../src/components/navigation-hyperlink/NavigationHyperlink.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport interface NavigationHyperlinkProps {\n\trouter: any;\n\thref: string;\n\tchildren?: ReactNode;\n\tnewTab?: boolean;\n}\n\nexport const NavigationHyperlink: React.FC<NavigationHyperlinkProps> = (\n\tnavigationHyperlinkProps,\n) => {\n\tconst { router, href, newTab } = navigationHyperlinkProps;\n\n\tconst onNavigation = (event) => {\n\t\tconst isExternal = href.includes('http');\n\t\tif (isExternal) {\n\t\t\tconst openInNewTab = newTab || event.metaKey ? '_blank' : '_self';\n\t\t\twindow.open(href, openInNewTab);\n\t\t} else {\n\t\t\tconst formattedHref = `${href.startsWith('/') ? '' : '/'}${href}`;\n\t\t\tif (!event.metaKey) {\n\t\t\t\tif (router) {\n\t\t\t\t\trouter.push(window.location.origin + formattedHref);\n\t\t\t\t} else {\n\t\t\t\t\twindow.open(window.location.origin + formattedHref, '_self');\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\twindow.open(window.location.origin + formattedHref, '_blank');\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<NaLinkWrapper onClick={onNavigation}>\n\t\t\t{navigationHyperlinkProps.children}\n\t\t</NaLinkWrapper>\n\t);\n};\n\nexport const NaLinkWrapper = styled.div`\n\t//\tdisplay: inline-block;\n`;\n"],"names":["NavigationHyperlink","navigationHyperlinkProps","router","href","newTab","_jsx","NaLinkWrapper","Object","assign","onClick","event","includes","openInNewTab","metaKey","window","open","formattedHref","startsWith","location","origin","push","children","styled","div"],"mappings":"yEAUaA,MAAAA,EACZC,IAEA,MAAMC,OAAEA,EAAMC,KAAEA,EAAIC,OAAEA,GAAWH,EAqBjC,OACCI,EAACC,EAAaC,OAAAC,OAAA,CAACC,QApBMC,IAErB,GADmBP,EAAKQ,SAAS,QACjB,CACf,MAAMC,EAAeR,GAAUM,EAAMG,QAAU,SAAW,QAC1DC,OAAOC,KAAKZ,EAAMS,EAClB,KAAM,CACN,MAAMI,EAAmB,GAAAb,EAAKc,WAAW,KAAO,GAAK,MAAMd,IACtDO,EAAMG,QAOVC,OAAOC,KAAKD,OAAOI,SAASC,OAASH,EAAe,UANhDd,EACHA,EAAOkB,KAAKN,OAAOI,SAASC,OAASH,GAErCF,OAAOC,KAAKD,OAAOI,SAASC,OAASH,EAAe,QAKtD,IAImC,CAAAK,SAClCpB,EAAyBoB,WACX,EAILf,EAAgBgB,EAAOC,GAAG;;"}

package/dist/esm/components/plans/NewSubscriptionPlan.js.map

@@ -1 +1 @@
-{"version":3,"file":"NewSubscriptionPlan.js","sources":["../../../../src/components/plans/NewSubscriptionPlan.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport CheckCircle from '@src/assets/icons/checkCircle.svg';\nimport Quotes from '@src/assets/icons/quotes.svg';\nimport StarFilled from '@src/assets/icons/WhiteStarFilled.svg';\nimport { FunctionComponent } from 'react';\nimport { Button } from '@src/components/button';\nimport { NewSubscriptionStyled } from '@src/components/plans/SubscriptionPlanStyled';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { useCurrency } from '@src/hooks/useCurreny';\nimport { COLORS } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { SubscriptionPlanProps } from './SubscriptionPlan';\n\nexport interface NewSubscriptionPlanProps extends SubscriptionPlanProps {\n\tpopularTestimony?: string;\n\tskipRadioSelection?: boolean;\n\tincludeText?: string;\n\theight?: string;\n\tshowFeaturesButton?: boolean;\n\tbusinessDescription?: string[];\n\tyearlyCode?: string;\n\tisPlanSelected?: boolean;\n\tonClickShowAllFeatures?: () => void;\n\tshowSelectedPlanChip?: boolean;\n\tperMonthForYearly?: boolean;\n\tminHeightOfFeatures?: number;\n}\n\ntype Props = NewSubscriptionPlanProps;\n\nexport const NewSubscriptionPlan: FunctionComponent<Props> = (props) => {\n\tconst { formatCurrency } = useCurrency();\n\tconst featureInfo = props.showMonthlyOptions\n\t\t? props.features\n\t\t: props.annualFeatures || [];\n\tconst planInfo = props.showMonthlyOptions\n\t\t? props.monthlyPlan\n\t\t: props.yearlyPlan;\n\tconst showMostPopularChip = !props.isDisabled && props.isMostPopular;\n\tconst codeToReturn = props.showMonthlyOptions\n\t\t? props.code\n\t\t: props.yearlyCode ?? props.code;\n\n\tconst {\n\t\tplanName,\n\t\tisSelected = false,\n\t\tisDisabled = false,\n\t\tonPlanSelect,\n\t\toldPrice,\n\t\thideMonthYearTag,\n\t\tplanDescription,\n\t\tplanDescriptionDiscount,\n\t\tshowTrialOptions,\n\t\tfreeTrialMessages,\n\t\textraBlockMessage,\n\t\tisLoading,\n\t\tbuttonText,\n\t\tbottomDescription,\n\t\tshowMonthlyOptions,\n\t\tpopularTestimony,\n\t\tskipRadioSelection = false,\n\t\tincludeText,\n\t\theight,\n\t\tshowFeaturesButton,\n\t\tbusinessDescription,\n\t\tisPlanSelected = false,\n\t\tonClickShowAllFeatures,\n\t\tshowSelectedPlanChip = false,\n\t\tperMonthForYearly = false,\n\t\tminHeightOfFeatures,\n\t\thoverTooltip,\n\t\thidePriceBlock = false,\n\t} = props;\n\n\tconst handleFormat = (price: number) => {\n\t\tif (perMonthForYearly && !showMonthlyOptions) {\n\t\t\treturn price == 0 ? '$0' : formatCurrency(Math.round(price / 12), 'USD');\n\t\t}\n\t\treturn price == 0 ? '$0' : formatCurrency(price, 'USD');\n\t};\n\n\treturn (\n\t\t<Tooltip body={hoverTooltip}>\n\t\t\t<NewSubscriptionStyled\n\t\t\t\theight={height}\n\t\t\t\tshowMostPopularChip={showMostPopularChip || false}\n\t\t\t\tonClick={() => onPlanSelect(codeToReturn)}\n\t\t\t>\n\t\t\t\t{showMostPopularChip && (\n\t\t\t\t\t<div className={'most-popular-chip'}>\n\t\t\t\t\t\t<Caption className={'popular-text'}>Most popular </Caption>\n\t\t\t\t\t\t<StarFilled height={12} width={12} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclassName={`box  ${isDisabled ? 'disabled' : ''} \n\t\t\t\t`}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"radio-flex\">\n\t\t\t\t\t\t{!skipRadioSelection && (\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tid=\"html\"\n\t\t\t\t\t\t\t\tname=\"fav_language\"\n\t\t\t\t\t\t\t\tvalue=\"HTML\"\n\t\t\t\t\t\t\t\tdisabled={isDisabled ?? false}\n\t\t\t\t\t\t\t\tonChange={() => onPlanSelect(codeToReturn)}\n\t\t\t\t\t\t\t\tclassName=\"radio-button\"\n\t\t\t\t\t\t\t\tchecked={isPlanSelected}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginBottom: 4 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{planName}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t{showSelectedPlanChip && (\n\t\t\t\t\t\t\t<div style={{ marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={'Current plan'}\n\t\t\t\t\t\t\t\t\ttype=\"positive\"\n\t\t\t\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\t\t\t></Tag>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{!hidePriceBlock ? (\n\t\t\t\t\t\t<div className={'price-block'}>\n\t\t\t\t\t\t\t{oldPrice ? (\n\t\t\t\t\t\t\t\t<BodyCaption className=\"old--price\">\n\t\t\t\t\t\t\t\t\t{handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t) : (\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<TitleLarge style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\t{oldPrice\n\t\t\t\t\t\t\t\t\t? handleFormat(oldPrice)\n\t\t\t\t\t\t\t\t\t: handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginLeft: 4 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{hideMonthYearTag\n\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\tshowMonthlyOptions\n\t\t\t\t\t\t\t\t\t\t\t\t? 'month'\n\t\t\t\t\t\t\t\t\t\t\t\t: perMonthForYearly\n\t\t\t\t\t\t\t\t\t\t\t\t? 'month billed annually'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'year'\n\t\t\t\t\t\t\t\t\t  }`}\n\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{planDescription && (\n\t\t\t\t\t\t<div className={'per-message-price'}>\n\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t{planDescription}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{planDescriptionDiscount && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.background.positive.vibrant,\n\t\t\t\t\t\t\t\t\t\tmarginLeft: 4,\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{planDescriptionDiscount}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{businessDescription && businessDescription.length && (\n\t\t\t\t\t\t<div style={{ marginTop: 4 }}>\n\t\t\t\t\t\t\t{businessDescription.map((item, index) => (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary }}\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: item }}\n\t\t\t\t\t\t\t\t></BodyCaption>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{showTrialOptions && (\n\t\t\t\t\t\t<Caption className={`trial ${isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t7 day free trial with {freeTrialMessages} messages\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\t\t\t\t\t{extraBlockMessage && (\n\t\t\t\t\t\t<Caption className={`trial ${isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t{extraBlockMessage}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\tclassName=\"extra-include-margin\"\n\t\t\t\t\t\tstyle={{ height: includeText ? '' : '20px' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{includeText ? includeText : ''}\n\t\t\t\t\t</TitleSmall>\n\n\t\t\t\t\t<div className=\"features\" style={{ minHeight: minHeightOfFeatures }}>\n\t\t\t\t\t\t{featureInfo.map((feature, index) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div className={'feature'} key={feature.detail}>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<CheckCircle\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<BodyCaption key={index} className={'feature-text'}>\n\t\t\t\t\t\t\t\t\t\t{feature.detail}\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t\t{showFeaturesButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisLoading={false}\n\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\tbuttonText={'See all features'}\n\t\t\t\t\t\t\tsize={'small'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tonClickShowAllFeatures ? onClickShowAllFeatures() : '';\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\t{skipRadioSelection && (\n\t\t\t\t\t\t<div className={'button-box'}>\n\t\t\t\t\t\t\t{isLoading ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tisLoading={true}\n\t\t\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\t\t\tbuttonText={'Choose plan'}\n\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\tmatchParentWidth\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<>\n\t\t\t\t\t\t\t\t\t{isSelected && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\t\t\tLeadingIcon={Check}\n\t\t\t\t\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\t\t\tbuttonText={buttonText || 'Selected Plan'}\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{!isSelected && !isDisabled && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\tonPlanSelect(codeToReturn);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\t\t\tbuttonText={buttonText || 'Choose plan'}\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</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{popularTestimony && (\n\t\t\t\t\t\t<div className=\"popular-testimony\">\n\t\t\t\t\t\t\t<Quotes height={26} width={70} />\n\t\t\t\t\t\t\t<div className=\"testimony-text\">\n\t\t\t\t\t\t\t\t<i>{popularTestimony}</i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{bottomDescription && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`plan-bottom-information\n\t\t\t\t\t${isDisabled ? 'disabled' : ''}\n\t\t\t\t\t${isSelected ? 'selected' : ''}\n\t\t\t\t`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tclassName={'text'}\n\t\t\t\t\t\t\tstyle={{ color: COLORS.background.inverse }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{bottomDescription}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</NewSubscriptionStyled>\n\t\t</Tooltip>\n\t);\n};\n"],"names":["NewSubscriptionPlan","props","formatCurrency","useCurrency","featureInfo","showMonthlyOptions","features","annualFeatures","planInfo","monthlyPlan","yearlyPlan","showMostPopularChip","isDisabled","isMostPopular","codeToReturn","code","yearlyCode","_a","planName","isSelected","onPlanSelect","oldPrice","hideMonthYearTag","planDescription","planDescriptionDiscount","showTrialOptions","freeTrialMessages","extraBlockMessage","isLoading","buttonText","bottomDescription","popularTestimony","skipRadioSelection","includeText","height","showFeaturesButton","businessDescription","isPlanSelected","onClickShowAllFeatures","showSelectedPlanChip","perMonthForYearly","minHeightOfFeatures","hoverTooltip","hidePriceBlock","handleFormat","price","Math","round","_jsx","Tooltip","Object","assign","body","children","_jsxs","NewSubscriptionStyled","onClick","className","Caption","StarFilled","width","type","id","name","value","disabled","onChange","checked","TitleRegular","style","color","COLORS","content","secondary","marginBottom","marginLeft","Tag","tagText","theme","BodyCaption","_Fragment","TitleLarge","primary","background","positive","vibrant","length","marginTop","map","item","index","dangerouslySetInnerHTML","__html","TitleSmall","minHeight","feature","CheckCircle","detail","Button","buttonType","size","e","stopPropagation","matchParentWidth","LeadingIcon","Check","Quotes","inverse"],"mappings":"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"}
+{"version":3,"file":"NewSubscriptionPlan.js","sources":["../../../../src/components/plans/NewSubscriptionPlan.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport CheckCircle from '@src/assets/icons/checkCircle.svg';\nimport Quotes from '@src/assets/icons/quotes.svg';\nimport StarFilled from '@src/assets/icons/WhiteStarFilled.svg';\nimport { FunctionComponent } from 'react';\nimport { Button } from '@src/components/button';\nimport { NewSubscriptionStyled } from '@src/components/plans/SubscriptionPlanStyled';\nimport {\n\tBodyCaption,\n\tCaption,\n\tTitleLarge,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { useCurrency } from '@src/hooks/useCurreny';\nimport { COLORS } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { SubscriptionPlanProps } from './SubscriptionPlan';\n\nexport interface NewSubscriptionPlanProps extends SubscriptionPlanProps {\n\tpopularTestimony?: string;\n\tskipRadioSelection?: boolean;\n\tincludeText?: string;\n\theight?: string;\n\tshowFeaturesButton?: boolean;\n\tbusinessDescription?: string[];\n\tyearlyCode?: string;\n\tisPlanSelected?: boolean;\n\tonClickShowAllFeatures?: () => void;\n\tshowSelectedPlanChip?: boolean;\n\tperMonthForYearly?: boolean;\n\tminHeightOfFeatures?: number;\n}\n\ntype Props = NewSubscriptionPlanProps;\n\nexport const NewSubscriptionPlan: FunctionComponent<Props> = (props) => {\n\tconst { formatCurrency } = useCurrency();\n\tconst featureInfo = props.showMonthlyOptions\n\t\t? props.features\n\t\t: props.annualFeatures || [];\n\tconst planInfo = props.showMonthlyOptions\n\t\t? props.monthlyPlan\n\t\t: props.yearlyPlan;\n\tconst showMostPopularChip = !props.isDisabled && props.isMostPopular;\n\tconst codeToReturn = props.showMonthlyOptions\n\t\t? props.code\n\t\t: props.yearlyCode ?? props.code;\n\n\tconst {\n\t\tplanName,\n\t\tisSelected = false,\n\t\tisDisabled = false,\n\t\tonPlanSelect,\n\t\toldPrice,\n\t\thideMonthYearTag,\n\t\tplanDescription,\n\t\tplanDescriptionDiscount,\n\t\tshowTrialOptions,\n\t\tfreeTrialMessages,\n\t\textraBlockMessage,\n\t\tisLoading,\n\t\tbuttonText,\n\t\tbottomDescription,\n\t\tshowMonthlyOptions,\n\t\tpopularTestimony,\n\t\tskipRadioSelection = false,\n\t\tincludeText,\n\t\theight,\n\t\tshowFeaturesButton,\n\t\tbusinessDescription,\n\t\tisPlanSelected = false,\n\t\tonClickShowAllFeatures,\n\t\tshowSelectedPlanChip = false,\n\t\tperMonthForYearly = false,\n\t\tminHeightOfFeatures,\n\t\thoverTooltip,\n\t\thidePriceBlock = false,\n\t} = props;\n\n\tconst handleFormat = (price: number) => {\n\t\tif (perMonthForYearly && !showMonthlyOptions) {\n\t\t\treturn price == 0 ? '$0' : formatCurrency(Math.round(price / 12), 'USD');\n\t\t}\n\t\treturn price == 0 ? '$0' : formatCurrency(price, 'USD');\n\t};\n\n\treturn (\n\t\t<Tooltip body={hoverTooltip}>\n\t\t\t<NewSubscriptionStyled\n\t\t\t\theight={height}\n\t\t\t\tshowMostPopularChip={showMostPopularChip || false}\n\t\t\t\tonClick={() => onPlanSelect(codeToReturn)}\n\t\t\t>\n\t\t\t\t{showMostPopularChip && (\n\t\t\t\t\t<div className={'most-popular-chip'}>\n\t\t\t\t\t\t<Caption className={'popular-text'}>Most popular </Caption>\n\t\t\t\t\t\t<StarFilled height={12} width={12} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tclassName={`box  ${isDisabled ? 'disabled' : ''} \n\t\t\t\t`}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"radio-flex\">\n\t\t\t\t\t\t{!skipRadioSelection && (\n\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\t\t\t\tid=\"html\"\n\t\t\t\t\t\t\t\tname=\"fav_language\"\n\t\t\t\t\t\t\t\tvalue=\"HTML\"\n\t\t\t\t\t\t\t\tdisabled={isDisabled ?? false}\n\t\t\t\t\t\t\t\tonChange={() => onPlanSelect(codeToReturn)}\n\t\t\t\t\t\t\t\tclassName=\"radio-button\"\n\t\t\t\t\t\t\t\tchecked={isPlanSelected}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginBottom: 4 }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{planName}\n\t\t\t\t\t\t</TitleRegular>\n\t\t\t\t\t\t{showSelectedPlanChip && (\n\t\t\t\t\t\t\t<div style={{ marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\t\ttagText={'Current plan'}\n\t\t\t\t\t\t\t\t\ttype=\"positive\"\n\t\t\t\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\t\t\t></Tag>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{!hidePriceBlock ? (\n\t\t\t\t\t\t<div className={'price-block'}>\n\t\t\t\t\t\t\t{oldPrice ? (\n\t\t\t\t\t\t\t\t<BodyCaption className=\"old--price\">\n\t\t\t\t\t\t\t\t\t{handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t) : (\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<TitleLarge style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\t{oldPrice\n\t\t\t\t\t\t\t\t\t? handleFormat(oldPrice)\n\t\t\t\t\t\t\t\t\t: handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t</TitleLarge>\n\t\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginLeft: 4 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{hideMonthYearTag\n\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\tshowMonthlyOptions\n\t\t\t\t\t\t\t\t\t\t\t\t? 'month'\n\t\t\t\t\t\t\t\t\t\t\t\t: perMonthForYearly\n\t\t\t\t\t\t\t\t\t\t\t\t? 'month billed annually'\n\t\t\t\t\t\t\t\t\t\t\t\t: 'year'\n\t\t\t\t\t\t\t\t\t  }`}\n\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{planDescription && (\n\t\t\t\t\t\t<div className={'per-message-price'}>\n\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t{planDescription}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t{planDescriptionDiscount && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.background.positive.vibrant,\n\t\t\t\t\t\t\t\t\t\tmarginLeft: 4,\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{planDescriptionDiscount}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{businessDescription && businessDescription.length && (\n\t\t\t\t\t\t<div style={{ marginTop: 4 }}>\n\t\t\t\t\t\t\t{businessDescription.map((item, index) => (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary }}\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: item }}\n\t\t\t\t\t\t\t\t></BodyCaption>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{showTrialOptions && (\n\t\t\t\t\t\t<Caption className={`trial ${isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t7 day free trial with {freeTrialMessages} messages\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\t\t\t\t\t{extraBlockMessage && (\n\t\t\t\t\t\t<Caption className={`trial ${isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t{extraBlockMessage}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\tclassName=\"extra-include-margin\"\n\t\t\t\t\t\tstyle={{ height: includeText ? '' : '20px' }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{includeText ? includeText : ''}\n\t\t\t\t\t</TitleSmall>\n\n\t\t\t\t\t<div className=\"features\" style={{ minHeight: minHeightOfFeatures }}>\n\t\t\t\t\t\t{featureInfo.map((feature, index) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div className={'feature'} key={feature.detail}>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<CheckCircle\n\t\t\t\t\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<BodyCaption key={index} className={'feature-text'}>\n\t\t\t\t\t\t\t\t\t\t{feature.detail}\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t\t{showFeaturesButton && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisLoading={false}\n\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\tbuttonText={'See all features'}\n\t\t\t\t\t\t\tsize={'small'}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\tonClickShowAllFeatures ? onClickShowAllFeatures() : '';\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\t{skipRadioSelection && (\n\t\t\t\t\t\t<div className={'button-box'}>\n\t\t\t\t\t\t\t{isLoading ? (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tisLoading={true}\n\t\t\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\t\t\tbuttonText={'Choose plan'}\n\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\tmatchParentWidth\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<>\n\t\t\t\t\t\t\t\t\t{isSelected && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tdisabled={isDisabled}\n\t\t\t\t\t\t\t\t\t\t\tLeadingIcon={Check}\n\t\t\t\t\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\t\t\tbuttonText={buttonText || 'Selected Plan'}\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{!isSelected && !isDisabled && (\n\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\t\tonPlanSelect(codeToReturn);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\t\t\tbuttonText={buttonText || 'Choose plan'}\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</>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{popularTestimony && (\n\t\t\t\t\t\t<div className=\"popular-testimony\">\n\t\t\t\t\t\t\t<Quotes height={26} width={70} />\n\t\t\t\t\t\t\t<div className=\"testimony-text\">\n\t\t\t\t\t\t\t\t<i>{popularTestimony}</i>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{bottomDescription && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`plan-bottom-information\n\t\t\t\t\t${isDisabled ? 'disabled' : ''}\n\t\t\t\t\t${isSelected ? 'selected' : ''}\n\t\t\t\t`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Caption\n\t\t\t\t\t\t\tclassName={'text'}\n\t\t\t\t\t\t\tstyle={{ color: COLORS.background.inverse }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{bottomDescription}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</NewSubscriptionStyled>\n\t\t</Tooltip>\n\t);\n};\n"],"names":["NewSubscriptionPlan","props","formatCurrency","useCurrency","featureInfo","showMonthlyOptions","features","annualFeatures","planInfo","monthlyPlan","yearlyPlan","showMostPopularChip","isDisabled","isMostPopular","codeToReturn","code","yearlyCode","_a","planName","isSelected","onPlanSelect","oldPrice","hideMonthYearTag","planDescription","planDescriptionDiscount","showTrialOptions","freeTrialMessages","extraBlockMessage","isLoading","buttonText","bottomDescription","popularTestimony","skipRadioSelection","includeText","height","showFeaturesButton","businessDescription","isPlanSelected","onClickShowAllFeatures","showSelectedPlanChip","perMonthForYearly","minHeightOfFeatures","hoverTooltip","hidePriceBlock","handleFormat","price","Math","round","_jsx","Tooltip","Object","assign","body","children","_jsxs","NewSubscriptionStyled","onClick","className","Caption","StarFilled","width","type","id","name","value","disabled","onChange","checked","TitleRegular","style","color","COLORS","content","secondary","marginBottom","marginLeft","Tag","tagText","theme","BodyCaption","_Fragment","TitleLarge","primary","background","positive","vibrant","length","marginTop","map","item","index","dangerouslySetInnerHTML","__html","TitleSmall","minHeight","feature","CheckCircle","detail","Button","buttonType","size","e","stopPropagation","matchParentWidth","LeadingIcon","Check","Quotes","inverse"],"mappings":"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"}

package/dist/esm/components/plans/SubscriptionPlan.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionPlan.js","sources":["../../../../src/components/plans/SubscriptionPlan.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport { FunctionComponent } from 'react';\nimport { Button } from '@src/components/button';\nimport { SubscriptionPlanStyled } from '@src/components/plans/SubscriptionPlanStyled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tCaption,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { useCurrency } from '@src/hooks/useCurreny';\nimport { COLORS } from '@src/constants/Theme';\n\ninterface PlanPrice {\n\tprice: number;\n\tdiscount: number;\n}\n\ninterface PlanFeature {\n\tdetail: string;\n}\n\nexport interface SubscriptionPlanProps {\n\tcode: string;\n\tisMostPopular?: boolean;\n\tisDisabled?: boolean;\n\tisSelected?: boolean;\n\tplanName: string;\n\tmonthlyPlan: PlanPrice;\n\tshowTrialOptions: boolean;\n\tyearlyPlan: PlanPrice;\n\tfeatures: PlanFeature[];\n\tshowMonthly: boolean;\n\n\tplanDescription?: string;\n\tplanDescriptionDiscount?: string;\n\n\tonPlanSelect: (code: string) => void;\n\n\tbottomDescription?: string;\n\n\tfreeTrialMessages?: string;\n\textraBlockMessage?: string;\n\n\tisLoading?: boolean;\n\tshowMonthlyOptions?: boolean;\n\toldPrice?: number;\n\tcurrency?: string;\n\tannualFeatures?: PlanFeature[];\n\thideMonthYearTag?: boolean;\n\tbuttonText?: string;\n\thoverTooltip?: string;\n\thidePriceBlock?: boolean;\n}\n\ntype Props = SubscriptionPlanProps;\n\nexport const SubscriptionPlan: FunctionComponent<Props> = (props) => {\n\tconst { formatCurrency } = useCurrency();\n\tconst featureInfo = props.showMonthlyOptions\n\t\t? props.features\n\t\t: props.annualFeatures || [];\n\tconst planInfo = props.showMonthlyOptions\n\t\t? props.monthlyPlan\n\t\t: props.yearlyPlan;\n\tconst showTopBar = !props.isDisabled && props.isMostPopular;\n\n\tconst handleFormat = (price: number) => {\n\t\treturn price == 0 ? '$0' : formatCurrency(price, 'USD');\n\t};\n\n\treturn (\n\t\t<SubscriptionPlanStyled\n\t\t\tisManifestPlan={true}\n\t\t\tisSelected={props.isSelected || false}\n\t\t\tstyle={{ marginTop: showTopBar ? 0 : 24 }}\n\t\t>\n\t\t\t{showTopBar && (\n\t\t\t\t<div className={'most-popular'}>\n\t\t\t\t\t<Caption className={'text'}>Most popular ⭐️</Caption>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={`box ${props.isSelected ? 'selected' : ''} ${\n\t\t\t\t\tprops.isDisabled ? 'disabled' : ''\n\t\t\t\t} ${!showTopBar ? 'rounded-corners' : ''}\n\t\t\t\t`}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginBottom: 4 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.planName}\n\t\t\t\t\t</TitleRegular>\n\n\t\t\t\t\t{!props?.hidePriceBlock ? (\n\t\t\t\t\t\t<div className={'price-block'}>\n\t\t\t\t\t\t\t{props.oldPrice ? (\n\t\t\t\t\t\t\t\t<BodyCaption className=\"old--price\">\n\t\t\t\t\t\t\t\t\t{handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t) : (\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<TitleMedium style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\t{props.oldPrice\n\t\t\t\t\t\t\t\t\t? handleFormat(props.oldPrice)\n\t\t\t\t\t\t\t\t\t: handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginLeft: 4 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.hideMonthYearTag\n\t\t\t\t\t\t\t\t\t? ''\n\t\t\t\t\t\t\t\t\t: `/ ${props.showMonthlyOptions ? 'month' : 'year'}`}\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div className={'per-message-price'}>\n\t\t\t\t\t\t{props.planDescription && (\n\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t{props.planDescription}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.planDescriptionDiscount && (\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: COLORS.background.positive.vibrant,\n\t\t\t\t\t\t\t\t\tmarginLeft: 4,\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{props.planDescriptionDiscount}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{props.showTrialOptions && (\n\t\t\t\t\t\t<Caption className={`trial ${props.isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t7 day free trial with {props.freeTrialMessages} messages\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.extraBlockMessage && (\n\t\t\t\t\t\t<Caption className={`trial ${props.isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t{props.extraBlockMessage}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div className=\"features\">\n\t\t\t\t\t\t{featureInfo.map((feature, index) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div className={'feature'} key={feature.detail}>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<BodyCaption key={index} className={'feature-text'}>\n\t\t\t\t\t\t\t\t\t\t{feature.detail}\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className={'button-box'}>\n\t\t\t\t\t{props.isLoading ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisLoading={true}\n\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\tbuttonText={'Choose plan'}\n\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{props.isSelected && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={props.isDisabled}\n\t\t\t\t\t\t\t\t\tLeadingIcon={Check}\n\t\t\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText={props.buttonText || 'Selected Plan'}\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{!props.isSelected && !props.isDisabled && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\tonClick={() => props.onPlanSelect(props.code)}\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText={props.buttonText || 'Choose plan'}\n\t\t\t\t\t\t\t\t/>\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</div>\n\t\t\t</div>\n\t\t\t{props.bottomDescription && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`plan-bottom-information\n\t\t\t\t\t${props.isDisabled ? 'disabled' : ''}\n\t\t\t\t\t${props.isSelected ? 'selected' : ''}\n\t\t\t\t`}\n\t\t\t\t>\n\t\t\t\t\t<Caption\n\t\t\t\t\t\tclassName={'text'}\n\t\t\t\t\t\tstyle={{ color: COLORS.background.inverse }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.bottomDescription}\n\t\t\t\t\t</Caption>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</SubscriptionPlanStyled>\n\t);\n};\n"],"names":["SubscriptionPlan","props","formatCurrency","useCurrency","featureInfo","showMonthlyOptions","features","annualFeatures","planInfo","monthlyPlan","yearlyPlan","showTopBar","isDisabled","isMostPopular","handleFormat","price","_jsxs","SubscriptionPlanStyled","isManifestPlan","isSelected","style","marginTop","_jsx","Object","assign","className","children","Caption","TitleRegular","color","COLORS","content","secondary","marginBottom","planName","hidePriceBlock","_Fragment","oldPrice","BodyCaption","TitleMedium","primary","BodyPrimary","marginLeft","hideMonthYearTag","planDescription","planDescriptionDiscount","background","positive","vibrant","showTrialOptions","freeTrialMessages","extraBlockMessage","map","feature","index","Check","height","width","detail","isLoading","Button","buttonType","buttonText","size","matchParentWidth","disabled","LeadingIcon","onClick","onPlanSelect","code","bottomDescription","inverse"],"mappings":"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"}
+{"version":3,"file":"SubscriptionPlan.js","sources":["../../../../src/components/plans/SubscriptionPlan.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport { FunctionComponent } from 'react';\nimport { Button } from '@src/components/button';\nimport { SubscriptionPlanStyled } from '@src/components/plans/SubscriptionPlanStyled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tCaption,\n\tTitleMedium,\n\tTitleRegular,\n} from '@src/components/TypographyStyle';\nimport { useCurrency } from '@src/hooks/useCurreny';\nimport { COLORS } from '@src/constants/Theme';\n\ninterface PlanPrice {\n\tprice: number;\n\tdiscount: number;\n}\n\ninterface PlanFeature {\n\tdetail: string;\n}\n\nexport interface SubscriptionPlanProps {\n\tcode: string;\n\tisMostPopular?: boolean;\n\tisDisabled?: boolean;\n\tisSelected?: boolean;\n\tplanName: string;\n\tmonthlyPlan: PlanPrice;\n\tshowTrialOptions: boolean;\n\tyearlyPlan: PlanPrice;\n\tfeatures: PlanFeature[];\n\tshowMonthly: boolean;\n\n\tplanDescription?: string;\n\tplanDescriptionDiscount?: string;\n\n\tonPlanSelect: (code: string) => void;\n\n\tbottomDescription?: string;\n\n\tfreeTrialMessages?: string;\n\textraBlockMessage?: string;\n\n\tisLoading?: boolean;\n\tshowMonthlyOptions?: boolean;\n\toldPrice?: number;\n\tcurrency?: string;\n\tannualFeatures?: PlanFeature[];\n\thideMonthYearTag?: boolean;\n\tbuttonText?: string;\n\thoverTooltip?: string;\n\thidePriceBlock?: boolean;\n}\n\ntype Props = SubscriptionPlanProps;\n\nexport const SubscriptionPlan: FunctionComponent<Props> = (props) => {\n\tconst { formatCurrency } = useCurrency();\n\tconst featureInfo = props.showMonthlyOptions\n\t\t? props.features\n\t\t: props.annualFeatures || [];\n\tconst planInfo = props.showMonthlyOptions\n\t\t? props.monthlyPlan\n\t\t: props.yearlyPlan;\n\tconst showTopBar = !props.isDisabled && props.isMostPopular;\n\n\tconst handleFormat = (price: number) => {\n\t\treturn price == 0 ? '$0' : formatCurrency(price, 'USD');\n\t};\n\n\treturn (\n\t\t<SubscriptionPlanStyled\n\t\t\tisManifestPlan={true}\n\t\t\tisSelected={props.isSelected || false}\n\t\t\tstyle={{ marginTop: showTopBar ? 0 : 24 }}\n\t\t>\n\t\t\t{showTopBar && (\n\t\t\t\t<div className={'most-popular'}>\n\t\t\t\t\t<Caption className={'text'}>Most popular ⭐️</Caption>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tclassName={`box ${props.isSelected ? 'selected' : ''} ${\n\t\t\t\t\tprops.isDisabled ? 'disabled' : ''\n\t\t\t\t} ${!showTopBar ? 'rounded-corners' : ''}\n\t\t\t\t`}\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginBottom: 4 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.planName}\n\t\t\t\t\t</TitleRegular>\n\n\t\t\t\t\t{!props?.hidePriceBlock ? (\n\t\t\t\t\t\t<div className={'price-block'}>\n\t\t\t\t\t\t\t{props.oldPrice ? (\n\t\t\t\t\t\t\t\t<BodyCaption className=\"old--price\">\n\t\t\t\t\t\t\t\t\t{handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t) : (\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<TitleMedium style={{ color: COLORS.content.primary }}>\n\t\t\t\t\t\t\t\t{props.oldPrice\n\t\t\t\t\t\t\t\t\t? handleFormat(props.oldPrice)\n\t\t\t\t\t\t\t\t\t: handleFormat(planInfo.price)}\n\t\t\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.secondary, marginLeft: 4 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.hideMonthYearTag\n\t\t\t\t\t\t\t\t\t? ''\n\t\t\t\t\t\t\t\t\t: `/ ${props.showMonthlyOptions ? 'month' : 'year'}`}\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div className={'per-message-price'}>\n\t\t\t\t\t\t{props.planDescription && (\n\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t\t\t{props.planDescription}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.planDescriptionDiscount && (\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: COLORS.background.positive.vibrant,\n\t\t\t\t\t\t\t\t\tmarginLeft: 4,\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{props.planDescriptionDiscount}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{props.showTrialOptions && (\n\t\t\t\t\t\t<Caption className={`trial ${props.isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t7 day free trial with {props.freeTrialMessages} messages\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\t\t\t\t\t{props.extraBlockMessage && (\n\t\t\t\t\t\t<Caption className={`trial ${props.isSelected ? 'selected' : ''}`}>\n\t\t\t\t\t\t\t{props.extraBlockMessage}\n\t\t\t\t\t\t</Caption>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<div className=\"features\">\n\t\t\t\t\t\t{featureInfo.map((feature, index) => {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div className={'feature'} key={feature.detail}>\n\t\t\t\t\t\t\t\t\t<div>\n\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<BodyCaption key={index} className={'feature-text'}>\n\t\t\t\t\t\t\t\t\t\t{feature.detail}\n\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div className={'button-box'}>\n\t\t\t\t\t{props.isLoading ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tisLoading={true}\n\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\tbuttonText={'Choose plan'}\n\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{props.isSelected && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tdisabled={props.isDisabled}\n\t\t\t\t\t\t\t\t\tLeadingIcon={Check}\n\t\t\t\t\t\t\t\t\tbuttonType={'tertiary'}\n\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText={props.buttonText || 'Selected Plan'}\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{!props.isSelected && !props.isDisabled && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tbuttonType={'primary'}\n\t\t\t\t\t\t\t\t\tsize={'medium'}\n\t\t\t\t\t\t\t\t\tonClick={() => props.onPlanSelect(props.code)}\n\t\t\t\t\t\t\t\t\tmatchParentWidth\n\t\t\t\t\t\t\t\t\tbuttonText={props.buttonText || 'Choose plan'}\n\t\t\t\t\t\t\t\t/>\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</div>\n\t\t\t</div>\n\t\t\t{props.bottomDescription && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`plan-bottom-information\n\t\t\t\t\t${props.isDisabled ? 'disabled' : ''}\n\t\t\t\t\t${props.isSelected ? 'selected' : ''}\n\t\t\t\t`}\n\t\t\t\t>\n\t\t\t\t\t<Caption\n\t\t\t\t\t\tclassName={'text'}\n\t\t\t\t\t\tstyle={{ color: COLORS.background.inverse }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.bottomDescription}\n\t\t\t\t\t</Caption>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</SubscriptionPlanStyled>\n\t);\n};\n"],"names":["SubscriptionPlan","props","formatCurrency","useCurrency","featureInfo","showMonthlyOptions","features","annualFeatures","planInfo","monthlyPlan","yearlyPlan","showTopBar","isDisabled","isMostPopular","handleFormat","price","_jsxs","SubscriptionPlanStyled","isManifestPlan","isSelected","style","marginTop","_jsx","Object","assign","className","children","Caption","TitleRegular","color","COLORS","content","secondary","marginBottom","planName","hidePriceBlock","_Fragment","oldPrice","BodyCaption","TitleMedium","primary","BodyPrimary","marginLeft","hideMonthYearTag","planDescription","planDescriptionDiscount","background","positive","vibrant","showTrialOptions","freeTrialMessages","extraBlockMessage","map","feature","index","Check","height","width","detail","isLoading","Button","buttonType","buttonText","size","matchParentWidth","disabled","LeadingIcon","onClick","onPlanSelect","code","bottomDescription","inverse"],"mappings":"gcA0DaA,MAAAA,EAA8CC,IAC1D,MAAMC,eAAEA,GAAmBC,IACrBC,EAAcH,EAAMI,mBACvBJ,EAAMK,SACNL,EAAMM,gBAAkB,GACrBC,EAAWP,EAAMI,mBACpBJ,EAAMQ,YACNR,EAAMS,WACHC,GAAcV,EAAMW,YAAcX,EAAMY,cAExCC,EAAgBC,GACL,GAATA,EAAa,KAAOb,EAAea,EAAO,OAGlD,OACCC,EAACC,iBACAC,gBAAgB,EAChBC,WAAYlB,EAAMkB,aAAc,EAChCC,MAAO,CAAEC,UAAWV,EAAa,EAAI,gBAEpCA,GACAW,EAAK,MAAAC,OAAAC,OAAA,CAAAC,UAAW,gBAAc,CAAAC,SAC7BJ,EAACK,EAAOJ,OAAAC,OAAA,CAACC,UAAW,QAAiC,CAAAC,SAAA,wBAGvDV,EAAA,MAAAO,OAAAC,OAAA,CACCC,UAAW,OAAOxB,EAAMkB,WAAa,WAAa,MACjDlB,EAAMW,WAAa,WAAa,MAC5BD,EAAiC,GAApB,+BACjB,CAAAe,SAAA,CAEDV,mBACCM,EAACM,iBACAR,MAAO,CAAES,MAAOC,EAAOC,QAAQC,UAAWC,aAAc,IAEvD,CAAAP,SAAAzB,EAAMiC,aAGNjC,eAAAA,EAAOkC,gBAuBRb,EAAKc,EAAA,CAAA,GAtBLpB,uBAAKS,UAAW,eACd,CAAAC,SAAA,CAAAzB,EAAMoC,SACNf,EAACgB,iBAAYb,UAAU,cACrB,CAAAC,SAAAZ,EAAaN,EAASO,UAGxBO,EAAAc,EAAA,CAAA,GAEDd,EAACiB,EAAYhB,OAAAC,OAAA,CAAAJ,MAAO,CAAES,MAAOC,EAAOC,QAAQS,UAC1C,CAAAd,SAAAzB,EAAMoC,SACJvB,EAAab,EAAMoC,UACnBvB,EAAaN,EAASO,UAE1BO,EAACmB,EAAWlB,OAAAC,OAAA,CACXJ,MAAO,CAAES,MAAOC,EAAOC,QAAQC,UAAWU,WAAY,IAErD,CAAAhB,SAAAzB,EAAM0C,iBACJ,GACA,MAAK1C,EAAMI,mBAAqB,QAAU,eAOhDW,EAAA,MAAAO,OAAAC,OAAA,CAAKC,UAAW,qBAAmB,CAAAC,SAAA,CACjCzB,EAAM2C,iBACNtB,EAACgB,EAAYf,OAAAC,OAAA,CAAAJ,MAAO,CAAES,MAAOC,EAAOC,QAAQC,YAAW,CAAAN,SACrDzB,EAAM2C,mBAGR3C,EAAM4C,yBACNvB,EAACgB,EAAWf,OAAAC,OAAA,CACXJ,MAAO,CACNS,MAAOC,EAAOgB,WAAWC,SAASC,QAClCN,WAAY,IACZ,CAAAhB,SAEAzB,EAAM4C,+BAKT5C,EAAMgD,kBACNjC,EAACW,EAAQJ,OAAAC,OAAA,CAAAC,UAAoB,UAAAxB,EAAMkB,WAAa,WAAa,KAAI,CAAAO,SAAA,CAAA,yBACzCzB,EAAMiD,kCAG9BjD,EAAMkD,mBACN7B,EAACK,EAAOJ,OAAAC,OAAA,CAACC,oBAAoBxB,EAAMkB,WAAa,WAAa,KAAI,CAAAO,SAC/DzB,EAAMkD,qBAIT7B,EAAK,MAAAC,OAAAC,OAAA,CAAAC,UAAU,YAAU,CAAAC,SACvBtB,EAAYgD,KAAI,CAACC,EAASC,IAEzBtC,uBAAKS,UAAW,WACf,CAAAC,SAAA,CAAAJ,EAAA,MAAA,CAAAI,SACCJ,EAACiC,EAAK,CACLC,OAAQ,GACRC,MAAO,GACP5B,MAAOC,EAAOC,QAAQS,YAGxBlB,EAACgB,EAAwBf,OAAAC,OAAA,CAAAC,UAAW,gBAClC,CAAAC,SAAA2B,EAAQK,SADQJ,MARaD,EAAQK,gBAgB5CpC,uBAAKG,UAAW,cAAY,CAAAC,SAC1BzB,EAAM0D,UACNrC,EAACsC,EACA,CAAAD,WAAW,EACXE,WAAY,UACZC,WAAY,cACZC,KAAM,SACNC,kBACC,IAEFhD,EAAAoB,EAAA,CAAAV,SAAA,CACEzB,EAAMkB,YACNG,EAACsC,EACA,CAAAK,SAAUhE,EAAMW,WAChBsD,YAAaX,EACbM,WAAY,WACZE,KAAM,SACNC,kBACA,EAAAF,WAAY7D,EAAM6D,YAAc,mBAGhC7D,EAAMkB,aAAelB,EAAMW,YAC5BU,EAACsC,GACAC,WAAY,UACZE,KAAM,SACNI,QAASA,IAAMlE,EAAMmE,aAAanE,EAAMoE,MACxCL,kBAAgB,EAChBF,WAAY7D,EAAM6D,YAAc,0BAOrC7D,EAAMqE,mBACNhD,EAAA,MAAAC,OAAAC,OAAA,CACCC,UAAW,sCACTxB,EAAMW,WAAa,WAAa,iBAChCX,EAAMkB,WAAa,WAAa,gBAGlC,CAAAO,SAAAJ,EAACK,EAAOJ,OAAAC,OAAA,CACPC,UAAW,OACXL,MAAO,CAAES,MAAOC,EAAOgB,WAAWyB,UAAS,CAAA7C,SAE1CzB,EAAMqE,2BAIc"}

package/dist/esm/components/plans/SubscriptionPlansCollected.js

@@ -1,4 +1,4 @@
-import{jsx as t}from"react/jsx-runtime";import{useState as e,createElement as l}from"react";import i from"styled-components";import{NewSubscriptionPlan as o}from"./NewSubscriptionPlan.js";const a=i.div`
+import{jsx as t}from"react/jsx-runtime";import{useState as e,createElement as l}from"react";import i from"styled-components";import{NewSubscriptionPlan as o}from"./NewSubscriptionPlan.js";const n=i.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
@@ -16,5 +16,5 @@ import{jsx as t}from"react/jsx-runtime";import{useState as e,createElement as l}
 	&::-webkit-scrollbar-thumb:horizontal {
 		width: 8px;
 	}
-`,n=i=>{var n;const[r,s]=e(null!==(n=i.selectedPlan)&&void 0!==n?n:"");return t(a,Object.assign({style:{padding:"28px 0px 5px 0px"},maxWidth:i.maxWidth},{children:i.plans.map(((e,a)=>{var n,d;return t("div",Object.assign({style:{minWidth:null!==(n=i.staticWidth)&&void 0!==n?n:280,maxWidth:null!==(d=i.staticWidth)&&void 0!==d?d:280}},{children:l(o,Object.assign({},e,{showMonthly:!0,showMonthlyOptions:"monthly"==i.selectedTab,showTrialOptions:i.showTrialOptions||!1,onPlanSelect:t=>{i.onPlanSelect(t),s(t)},key:e.planName,isPlanSelected:r==("monthly"==i.selectedTab?e.code:e.yearlyCode),onClickShowAllFeatures:i.onClickShowAllFeatures,showSelectedPlanChip:i.currentPlan==("monthly"==i.selectedTab?e.code:e.yearlyCode),minHeightOfFeatures:i.minHeightOfFeatures}))}),a)}))}))};export{n as SubscriptionPlansCollected};
+`,a=i=>{var a;const[r,s]=e(null!==(a=i.selectedPlan)&&void 0!==a?a:"");return t(n,Object.assign({style:{padding:"28px 0px 5px 0px"},maxWidth:i.maxWidth},{children:i.plans.map(((e,n)=>{var a,d,c;return t("div",Object.assign({style:{minWidth:null!==(a=i.staticWidth)&&void 0!==a?a:280,maxWidth:null!==(d=i.staticWidth)&&void 0!==d?d:280}},{children:l(o,Object.assign({},e,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==i.selectedTab)&&void 0!==c&&c,showTrialOptions:i.showTrialOptions||!1,onPlanSelect:t=>{i.onPlanSelect(t),s(t)},key:e.planName,isPlanSelected:r==("monthly"==i.selectedTab?e.code:e.yearlyCode),onClickShowAllFeatures:i.onClickShowAllFeatures,showSelectedPlanChip:i.currentPlan==("monthly"==i.selectedTab?e.code:e.yearlyCode),minHeightOfFeatures:i.minHeightOfFeatures}))}),n)}))}))};export{a as SubscriptionPlansCollected};
 //# sourceMappingURL=SubscriptionPlansCollected.js.map

package/dist/esm/components/plans/SubscriptionPlansCollected.js.map

@@ -1 +1 @@
-{"version":3,"file":"SubscriptionPlansCollected.js","sources":["../../../../src/components/plans/SubscriptionPlansCollected.tsx"],"sourcesContent":["import { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n\tNewSubscriptionPlan,\n\tNewSubscriptionPlanProps,\n} from './NewSubscriptionPlan';\n\ntype Props = {\n\tplans: NewSubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClickShowAllFeatures?: () => void;\n\tshowTrialOptions?: boolean;\n\tstaticWidth?: string;\n\tselectedTab?: 'monthly' | 'annually';\n\tselectedPlan?: string;\n\tcurrentPlan?: string;\n\tmaxWidth?: string;\n\tminHeightOfFeatures?: number;\n};\nconst PlanWrapper = styled.div<{ maxWidth?: string }>`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\toverflow-x: scroll;\n\tmax-width: ${(props) => props.maxWidth ?? '100%'};\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #888;\n\t\tborder-radius: 8px;\n\t}\n\t&::-webkit-scrollbar {\n\t\theight: 5px;\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\t&::-webkit-scrollbar-thumb:horizontal {\n\t\twidth: 8px;\n\t}\n`;\n\nexport const SubscriptionPlansCollected: FunctionComponent<Props> = (props) => {\n\tconst [planSelected, setPlanSelected] = useState<string | undefined>(\n\t\tprops.selectedPlan ?? '',\n\t);\n\treturn (\n\t\t<PlanWrapper\n\t\t\tstyle={{ padding: '28px 0px 5px 0px' }}\n\t\t\tmaxWidth={props.maxWidth}\n\t\t>\n\t\t\t{props.plans.map((prop, index) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t\tmaxWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NewSubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.selectedTab == 'monthly'}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions || false}\n\t\t\t\t\t\t\tonPlanSelect={(code: string) => {\n\t\t\t\t\t\t\t\tprops.onPlanSelect(code);\n\t\t\t\t\t\t\t\tsetPlanSelected(code);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t\tisPlanSelected={\n\t\t\t\t\t\t\t\tplanSelected ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClickShowAllFeatures={props.onClickShowAllFeatures}\n\t\t\t\t\t\t\tshowSelectedPlanChip={\n\t\t\t\t\t\t\t\tprops.currentPlan ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tminHeightOfFeatures={props.minHeightOfFeatures}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</PlanWrapper>\n\t);\n};\n"],"names":["PlanWrapper","styled","div","props","_a","maxWidth","SubscriptionPlansCollected","planSelected","setPlanSelected","useState","selectedPlan","_jsx","Object","assign","style","padding","children","plans","map","prop","index","minWidth","staticWidth","_b","_createElement","NewSubscriptionPlan","showMonthly","showMonthlyOptions","selectedTab","showTrialOptions","onPlanSelect","code","key","planName","isPlanSelected","yearlyCode","onClickShowAllFeatures","showSelectedPlanChip","currentPlan","minHeightOfFeatures"],"mappings":"4LAmBA,MAAMA,EAAcC,EAAOC,GAA0B;;;;;cAKtCC,IAAS,IAAAC,EAAC,OAAc,QAAdA,EAAAD,EAAME,gBAAQ,IAAAD,EAAAA,EAAI,MAAM;;;;;;;;;;;;;EAepCE,EAAwDH,UACpE,MAAOI,EAAcC,GAAmBC,EACjB,QAAtBL,EAAAD,EAAMO,oBAAgB,IAAAN,EAAAA,EAAA,IAEvB,OACCO,EAACX,EAAWY,OAAAC,OAAA,CACXC,MAAO,CAAEC,QAAS,oBAClBV,SAAUF,EAAME,UAAQ,CAAAW,SAEvBb,EAAMc,MAAMC,KAAI,CAACC,EAAMC,aACvB,OACCT,EACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNO,iBAAUjB,EAAAD,EAAMmB,2BAAe,IAC/BjB,iBAAUkB,EAAApB,EAAMmB,2BAAe,MAC/B,CAAAN,SAGDQ,EAACC,EACIb,OAAAC,OAAA,CAAA,EAAAM,EACJ,CAAAO,aAAa,EACbC,mBAAyC,WAArBxB,EAAMyB,YAC1BC,iBAAkB1B,EAAM0B,mBAAoB,EAC5CC,aAAeC,IACd5B,EAAM2B,aAAaC,GACnBvB,EAAgBuB,EAAK,EAEtBC,IAAKb,EAAKc,SACVC,eACC3B,IACsB,WAArBJ,EAAMyB,YAA2BT,EAAKY,KAAOZ,EAAKgB,YAEpDC,uBAAwBjC,EAAMiC,uBAC9BC,qBACClC,EAAMmC,cACgB,WAArBnC,EAAMyB,YAA2BT,EAAKY,KAAOZ,EAAKgB,YAEpDI,oBAAqBpC,EAAMoC,yBArBvBnB,EAuBA,MAGK"}
+{"version":3,"file":"SubscriptionPlansCollected.js","sources":["../../../../src/components/plans/SubscriptionPlansCollected.tsx"],"sourcesContent":["import { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n\tNewSubscriptionPlan,\n\tNewSubscriptionPlanProps,\n} from './NewSubscriptionPlan';\n\ntype Props = {\n\tplans: NewSubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClickShowAllFeatures?: () => void;\n\tshowTrialOptions?: boolean;\n\tstaticWidth?: string;\n\tselectedTab?: 'monthly' | 'annually';\n\tselectedPlan?: string;\n\tcurrentPlan?: string;\n\tmaxWidth?: string;\n\tminHeightOfFeatures?: number;\n};\nconst PlanWrapper = styled.div<{ maxWidth?: string }>`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\toverflow-x: scroll;\n\tmax-width: ${(props) => props.maxWidth ?? '100%'};\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #888;\n\t\tborder-radius: 8px;\n\t}\n\t&::-webkit-scrollbar {\n\t\theight: 5px;\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\t&::-webkit-scrollbar-thumb:horizontal {\n\t\twidth: 8px;\n\t}\n`;\n\nexport const SubscriptionPlansCollected: FunctionComponent<Props> = (props) => {\n\tconst [planSelected, setPlanSelected] = useState<string | undefined>(\n\t\tprops.selectedPlan ?? '',\n\t);\n\treturn (\n\t\t<PlanWrapper\n\t\t\tstyle={{ padding: '28px 0px 5px 0px' }}\n\t\t\tmaxWidth={props.maxWidth}\n\t\t>\n\t\t\t{props.plans.map((prop, index) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t\tmaxWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NewSubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.selectedTab == 'monthly' ?? false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions || false}\n\t\t\t\t\t\t\tonPlanSelect={(code: string) => {\n\t\t\t\t\t\t\t\tprops.onPlanSelect(code);\n\t\t\t\t\t\t\t\tsetPlanSelected(code);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t\tisPlanSelected={\n\t\t\t\t\t\t\t\tplanSelected ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClickShowAllFeatures={props.onClickShowAllFeatures}\n\t\t\t\t\t\t\tshowSelectedPlanChip={\n\t\t\t\t\t\t\t\tprops.currentPlan ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tminHeightOfFeatures={props.minHeightOfFeatures}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</PlanWrapper>\n\t);\n};\n"],"names":["PlanWrapper","styled","div","props","_a","maxWidth","SubscriptionPlansCollected","planSelected","setPlanSelected","useState","selectedPlan","_jsx","Object","assign","style","padding","children","plans","map","prop","index","minWidth","staticWidth","_b","_createElement","NewSubscriptionPlan","showMonthly","showMonthlyOptions","_c","selectedTab","showTrialOptions","onPlanSelect","code","key","planName","isPlanSelected","yearlyCode","onClickShowAllFeatures","showSelectedPlanChip","currentPlan","minHeightOfFeatures"],"mappings":"4LAmBA,MAAMA,EAAcC,EAAOC,GAA0B;;;;;cAKtCC,IAAS,IAAAC,EAAC,OAAc,QAAdA,EAAAD,EAAME,gBAAQ,IAAAD,EAAAA,EAAI,MAAM;;;;;;;;;;;;;EAepCE,EAAwDH,UACpE,MAAOI,EAAcC,GAAmBC,EACjB,QAAtBL,EAAAD,EAAMO,oBAAgB,IAAAN,EAAAA,EAAA,IAEvB,OACCO,EAACX,EAAWY,OAAAC,OAAA,CACXC,MAAO,CAAEC,QAAS,oBAClBV,SAAUF,EAAME,UAAQ,CAAAW,SAEvBb,EAAMc,MAAMC,KAAI,CAACC,EAAMC,eACvB,OACCT,EACC,MAAAC,OAAAC,OAAA,CAAAC,MAAO,CACNO,iBAAUjB,EAAAD,EAAMmB,2BAAe,IAC/BjB,iBAAUkB,EAAApB,EAAMmB,2BAAe,MAC/B,CAAAN,SAGDQ,EAACC,EACIb,OAAAC,OAAA,CAAA,EAAAM,GACJO,aAAa,EACbC,mBAAkD,QAA9BC,EAAqB,WAArBzB,EAAM0B,mBAAwB,IAAAD,GAAAA,EAClDE,iBAAkB3B,EAAM2B,mBAAoB,EAC5CC,aAAeC,IACd7B,EAAM4B,aAAaC,GACnBxB,EAAgBwB,EAAK,EAEtBC,IAAKd,EAAKe,SACVC,eACC5B,IACsB,WAArBJ,EAAM0B,YAA2BV,EAAKa,KAAOb,EAAKiB,YAEpDC,uBAAwBlC,EAAMkC,uBAC9BC,qBACCnC,EAAMoC,cACgB,WAArBpC,EAAM0B,YAA2BV,EAAKa,KAAOb,EAAKiB,YAEpDI,oBAAqBrC,EAAMqC,yBArBvBpB,EAuBA,MAGK"}

package/dist/esm/components/post-live-checklist/PostLiveChecklist.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import r from"../../assets/icons/HeadsetIcon.js";import s from"../../assets/icons/MarketingIcon.js";import{useState as o,useEffect as n}from"react";import{ButtonGroup as a}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as l}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as p,BodySecondary as d}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const c=({title:c="Boost Performance",subtitle:u="Enable these features to make your assistant smarter",marketingChecklist:g=[],supportChecklist:h=[],onChecklistSetup:b,useCaseType:f})=>{var k;const[C,j]=o("marketing"),[y,v]=o("none"),[O,x]=o("marketing");n((()=>{const e=g.filter((e=>!e.isCompleted)).length,t=h.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?v("tabs"):(v("list"),e>0&&x("marketing"),t>0&&x("support")):v("none")}),[g,h]);const S=(()=>{const e=[{id:"marketing",title:"Marketing",icon:s},{id:"support",title:"Support",icon:r}];if(!f)return e;return"support"===String(f).toLowerCase()?[e[1],e[0]]:e})();n((()=>{"tabs"===y&&S.length>0&&j(S[0].id)}),[y,f]);const T=e=>e.toUpperCase(),B=(e,t)=>{b&&b(e,t)};if("none"===y)return null;const H="tabs"===y?"marketing"===C?g:h:"marketing"===O?g:h;return e("div",Object.assign({style:{padding:16,border:`1px solid ${m.stroke.primary}`,backgroundColor:m.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(p,Object.assign({color:"#4B1583"},{children:c})),t(d,Object.assign({color:(null===(k=m.content)||void 0===k?void 0:k.secondary)||"#666666"},{children:u}))]}),t("div",Object.assign({style:{marginTop:12}},{children:"tabs"===y?e(i,{children:[t(a,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>j(e),activeButtonId:C,buttonGroup:S}),t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:H.map((e=>t(l,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>B(e.id,T(C))},e.id)))}))]}):t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:H.map((e=>t(l,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>B(e.id,T(O))},e.id)))}))}))]}))};export{c as PostLiveChecklist};
+import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import"../../_virtual/_tslib.js";import r from"../../assets/icons/HeadsetIcon.js";import s from"../../assets/icons/MarketingIcon.js";import{useState as o,useEffect as n}from"react";import{ButtonGroup as a}from"../buttonGroup/ButtonGroup.js";import{PostLiveChecklistItem as l}from"../post-live-checklist-item/PostLiveChecklistItem.js";import{TitleRegular as p,BodySecondary as d}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";const c=c=>{let{title:u="Boost Performance",subtitle:g="Enable these features to make your assistant smarter",marketingChecklist:h=[],supportChecklist:b=[],onChecklistSetup:f,useCaseType:k}=c;var C;const[j,y]=o("marketing"),[v,O]=o("none"),[x,S]=o("marketing");n((()=>{const e=h.filter((e=>!e.isCompleted)).length,t=b.filter((e=>!e.isCompleted)).length;0!==e||0!==t?e>0&&t>0?O("tabs"):(O("list"),e>0&&S("marketing"),t>0&&S("support")):O("none")}),[h,b]);const T=(()=>{const e=[{id:"marketing",title:"Marketing",icon:s},{id:"support",title:"Support",icon:r}];if(!k)return e;return"support"===String(k).toLowerCase()?[e[1],e[0]]:e})();n((()=>{"tabs"===v&&T.length>0&&y(T[0].id)}),[v,k]);const B=e=>e.toUpperCase(),H=(e,t)=>{f&&f(e,t)};if("none"===v)return null;const I="tabs"===v?"marketing"===j?h:b:"marketing"===x?h:b;return e("div",Object.assign({style:{padding:16,border:`1px solid ${m.stroke.primary}`,backgroundColor:m.surface.standard,borderRadius:8}},{children:[e("div",{children:[t(p,Object.assign({color:"#4B1583"},{children:u})),t(d,Object.assign({color:(null===(C=m.content)||void 0===C?void 0:C.secondary)||"#666666"},{children:g}))]}),t("div",Object.assign({style:{marginTop:12}},{children:"tabs"===v?e(i,{children:[t(a,{size:"medium",gap:"12px",iconPosition:"left",onButtonClick:e=>y(e),activeButtonId:j,buttonGroup:T}),t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:I.map((e=>t(l,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>H(e.id,B(j))},e.id)))}))]}):t("div",Object.assign({style:{marginTop:12,display:"flex",flexDirection:"column",gap:12}},{children:I.map((e=>t(l,{isCompleted:e.isCompleted,isOpen:e.isOpen,header:e.header,image:e.image,subHeader:e.subHeader,onSetup:()=>H(e.id,B(x))},e.id)))}))}))]}))};export{c as PostLiveChecklist};
 //# sourceMappingURL=PostLiveChecklist.js.map

package/dist/esm/components/post-live-checklist/PostLiveChecklist.js.map

@@ -1 +1 @@
-{"version":3,"file":"PostLiveChecklist.js","sources":["../../../../src/components/post-live-checklist/PostLiveChecklist.tsx"],"sourcesContent":["import { HeadsetIcon } from '@src/assets/icons';\nimport MarketingIcon from '@src/assets/icons/MarketingIcon';\nimport React, { useEffect, useState } from 'react';\nimport { ButtonGroup } from '@src/components/buttonGroup';\nimport { PostLiveChecklistItem } from '@src/components/post-live-checklist-item';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonGroupInterface as ButtonGroupItem } from '../buttonGroup/ButtonGroup';\n\nexport interface ChecklistItem {\n\tid: string;\n\tisCompleted: boolean;\n\tisOpen?: boolean;\n\theader: string;\n\timage?: string;\n\tsubHeader?: string;\n}\n\nexport interface PostLiveChecklistProps {\n\ttitle?: string;\n\tsubtitle?: string;\n\tmarketingChecklist?: ChecklistItem[];\n\tsupportChecklist?: ChecklistItem[];\n\tonChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;\n\tuseCaseType?: 'marketing' | 'support' | 'both' | string;\n}\n\nexport const PostLiveChecklist: React.FC<PostLiveChecklistProps> = ({\n\ttitle = 'Boost Performance',\n\tsubtitle = 'Enable these features to make your assistant smarter',\n\tmarketingChecklist = [],\n\tsupportChecklist = [],\n\tonChecklistSetup,\n\tuseCaseType,\n}) => {\n\tconst [selectedTabId, setSelectedTabId] = useState<string>('marketing');\n\tconst [displayMode, setDisplayMode] = useState<'none' | 'tabs' | 'list'>(\n\t\t'none',\n\t);\n\tconst [incompleteUseCase, setIncompleteUseCase] = useState<\n\t\t'marketing' | 'support'\n\t>('marketing');\n\n\t// Auto-detect display mode based on incomplete items\n\tuseEffect(() => {\n\t\tconst marketingIncomplete = marketingChecklist.filter(\n\t\t\t(it) => !it.isCompleted,\n\t\t).length;\n\t\tconst supportIncomplete = supportChecklist.filter(\n\t\t\t(it) => !it.isCompleted,\n\t\t).length;\n\n\t\t// both completed -> none\n\t\tif (marketingIncomplete === 0 && supportIncomplete === 0) {\n\t\t\tsetDisplayMode('none');\n\t\t\treturn;\n\t\t}\n\n\t\t// both have at least one incomplete -> tabs\n\t\tif (marketingIncomplete > 0 && supportIncomplete > 0) {\n\t\t\tsetDisplayMode('tabs');\n\t\t\treturn;\n\t\t}\n\n\t\t// only one has incomplete items -> list\n\t\tsetDisplayMode('list');\n\t\tif (marketingIncomplete > 0) {\n\t\t\tsetIncompleteUseCase('marketing');\n\t\t}\n\t\tif (supportIncomplete > 0) {\n\t\t\tsetIncompleteUseCase('support');\n\t\t}\n\t}, [marketingChecklist, supportChecklist]);\n\n\t// Order button group items based on useCaseType\n\tconst getOrderedButtonItems = (): ButtonGroupItem[] => {\n\t\t// Default button items\n\t\tconst defaultItems: ButtonGroupItem[] = [\n\t\t\t{\n\t\t\t\tid: 'marketing',\n\t\t\t\ttitle: 'Marketing',\n\t\t\t\ticon: MarketingIcon,\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'support',\n\t\t\t\ttitle: 'Support',\n\t\t\t\ticon: HeadsetIcon,\n\t\t\t},\n\t\t];\n\n\t\t// Reorder based on useCaseType\n\t\tif (!useCaseType) return defaultItems;\n\n\t\tconst type = String(useCaseType).toLowerCase();\n\t\tif (type === 'support') {\n\t\t\treturn [defaultItems[1], defaultItems[0]]; // Support first\n\t\t}\n\n\t\t// 'marketing', 'both', or any other value -> marketing first\n\t\treturn defaultItems;\n\t};\n\n\tconst orderedButtonItems = getOrderedButtonItems();\n\n\t// Initialize selectedTabId based on button order and display mode\n\tuseEffect(() => {\n\t\tif (displayMode === 'tabs' && orderedButtonItems.length > 0) {\n\t\t\tsetSelectedTabId(orderedButtonItems[0].id);\n\t\t}\n\t}, [displayMode, useCaseType]); // Only update when display mode or use case type changes\n\n\t// Get current checklist based on selected tab or incomplete use case\n\tconst getCurrentChecklist = () => {\n\t\tif (displayMode === 'tabs') {\n\t\t\t// For tabs mode, use selectedTabId to determine which checklist\n\t\t\treturn selectedTabId === 'marketing'\n\t\t\t\t? marketingChecklist\n\t\t\t\t: supportChecklist;\n\t\t}\n\t\t// For list mode, use incompleteUseCase\n\t\treturn incompleteUseCase === 'marketing'\n\t\t\t? marketingChecklist\n\t\t\t: supportChecklist;\n\t};\n\n\tconst getAnalyticsButtonId = (tabId: string) => {\n\t\t// Map tab ID to analytics button ID (uppercase)\n\t\treturn tabId.toUpperCase();\n\t};\n\n\tconst handleChecklistSetup = (itemId: string, analyticsButtonId: string) => {\n\t\tif (onChecklistSetup) {\n\t\t\tonChecklistSetup(itemId, analyticsButtonId);\n\t\t}\n\t};\n\n\tif (displayMode === 'none') {\n\t\treturn null;\n\t}\n\n\tconst currentChecklist = getCurrentChecklist();\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tpadding: 16,\n\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\tborderRadius: 8,\n\t\t\t}}\n\t\t>\n\t\t\t<div>\n\t\t\t\t<TitleRegular color={'#4B1583'}>{title}</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content?.secondary || '#666666'}>\n\t\t\t\t\t{subtitle}\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\n\t\t\t<div style={{ marginTop: 12 }}>\n\t\t\t\t{displayMode === 'tabs' ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tgap=\"12px\"\n\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\tonButtonClick={(id: string) => setSelectedTabId(id)}\n\t\t\t\t\t\t\tactiveButtonId={selectedTabId}\n\t\t\t\t\t\t\tbuttonGroup={orderedButtonItems}\n\t\t\t\t\t\t/>\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: 12,\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{currentChecklist.map((item: ChecklistItem) => (\n\t\t\t\t\t\t\t\t<PostLiveChecklistItem\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tisCompleted={item.isCompleted}\n\t\t\t\t\t\t\t\t\tisOpen={item.isOpen}\n\t\t\t\t\t\t\t\t\theader={item.header}\n\t\t\t\t\t\t\t\t\timage={item.image}\n\t\t\t\t\t\t\t\t\tsubHeader={item.subHeader}\n\t\t\t\t\t\t\t\t\tonSetup={() =>\n\t\t\t\t\t\t\t\t\t\thandleChecklistSetup(\n\t\t\t\t\t\t\t\t\t\t\titem.id,\n\t\t\t\t\t\t\t\t\t\t\tgetAnalyticsButtonId(selectedTabId),\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/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginTop: 12,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentChecklist.map((item: ChecklistItem) => (\n\t\t\t\t\t\t\t<PostLiveChecklistItem\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\tisCompleted={item.isCompleted}\n\t\t\t\t\t\t\t\tisOpen={item.isOpen}\n\t\t\t\t\t\t\t\theader={item.header}\n\t\t\t\t\t\t\t\timage={item.image}\n\t\t\t\t\t\t\t\tsubHeader={item.subHeader}\n\t\t\t\t\t\t\t\tonSetup={() =>\n\t\t\t\t\t\t\t\t\thandleChecklistSetup(\n\t\t\t\t\t\t\t\t\t\titem.id,\n\t\t\t\t\t\t\t\t\t\tgetAnalyticsButtonId(incompleteUseCase),\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/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["PostLiveChecklist","title","subtitle","marketingChecklist","supportChecklist","onChecklistSetup","useCaseType","selectedTabId","setSelectedTabId","useState","displayMode","setDisplayMode","incompleteUseCase","setIncompleteUseCase","useEffect","marketingIncomplete","filter","it","isCompleted","length","supportIncomplete","orderedButtonItems","getOrderedButtonItems","defaultItems","id","icon","MarketingIcon","HeadsetIcon","String","toLowerCase","getAnalyticsButtonId","tabId","toUpperCase","handleChecklistSetup","itemId","analyticsButtonId","currentChecklist","_jsxs","Object","assign","style","padding","border","COLORS","stroke","primary","backgroundColor","surface","standard","borderRadius","children","_jsx","TitleRegular","color","BodySecondary","content","_a","secondary","marginTop","_Fragment","ButtonGroup","size","gap","iconPosition","onButtonClick","activeButtonId","buttonGroup","display","flexDirection","map","item","PostLiveChecklistItem","isOpen","header","image","subHeader","onSetup"],"mappings":"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"}
+{"version":3,"file":"PostLiveChecklist.js","sources":["../../../../src/components/post-live-checklist/PostLiveChecklist.tsx"],"sourcesContent":["import { HeadsetIcon } from '@src/assets/icons';\nimport MarketingIcon from '@src/assets/icons/MarketingIcon';\nimport React, { useEffect, useState } from 'react';\nimport { ButtonGroup } from '@src/components/buttonGroup';\nimport { PostLiveChecklistItem } from '@src/components/post-live-checklist-item';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ButtonGroupInterface as ButtonGroupItem } from '../buttonGroup/ButtonGroup';\n\nexport interface ChecklistItem {\n\tid: string;\n\tisCompleted: boolean;\n\tisOpen?: boolean;\n\theader: string;\n\timage?: string;\n\tsubHeader?: string;\n}\n\nexport interface PostLiveChecklistProps {\n\ttitle?: string;\n\tsubtitle?: string;\n\tmarketingChecklist?: ChecklistItem[];\n\tsupportChecklist?: ChecklistItem[];\n\tonChecklistSetup?: (itemId: string, analyticsButtonId: string) => void;\n\tuseCaseType?: 'marketing' | 'support' | 'both' | string;\n}\n\nexport const PostLiveChecklist: React.FC<PostLiveChecklistProps> = ({\n\ttitle = 'Boost Performance',\n\tsubtitle = 'Enable these features to make your assistant smarter',\n\tmarketingChecklist = [],\n\tsupportChecklist = [],\n\tonChecklistSetup,\n\tuseCaseType,\n}) => {\n\tconst [selectedTabId, setSelectedTabId] = useState<string>('marketing');\n\tconst [displayMode, setDisplayMode] = useState<'none' | 'tabs' | 'list'>(\n\t\t'none',\n\t);\n\tconst [incompleteUseCase, setIncompleteUseCase] = useState<\n\t\t'marketing' | 'support'\n\t>('marketing');\n\n\t// Auto-detect display mode based on incomplete items\n\tuseEffect(() => {\n\t\tconst marketingIncomplete = marketingChecklist.filter(\n\t\t\t(it) => !it.isCompleted,\n\t\t).length;\n\t\tconst supportIncomplete = supportChecklist.filter(\n\t\t\t(it) => !it.isCompleted,\n\t\t).length;\n\n\t\t// both completed -> none\n\t\tif (marketingIncomplete === 0 && supportIncomplete === 0) {\n\t\t\tsetDisplayMode('none');\n\t\t\treturn;\n\t\t}\n\n\t\t// both have at least one incomplete -> tabs\n\t\tif (marketingIncomplete > 0 && supportIncomplete > 0) {\n\t\t\tsetDisplayMode('tabs');\n\t\t\treturn;\n\t\t}\n\n\t\t// only one has incomplete items -> list\n\t\tsetDisplayMode('list');\n\t\tif (marketingIncomplete > 0) {\n\t\t\tsetIncompleteUseCase('marketing');\n\t\t}\n\t\tif (supportIncomplete > 0) {\n\t\t\tsetIncompleteUseCase('support');\n\t\t}\n\t}, [marketingChecklist, supportChecklist]);\n\n\t// Order button group items based on useCaseType\n\tconst getOrderedButtonItems = (): ButtonGroupItem[] => {\n\t\t// Default button items\n\t\tconst defaultItems: ButtonGroupItem[] = [\n\t\t\t{\n\t\t\t\tid: 'marketing',\n\t\t\t\ttitle: 'Marketing',\n\t\t\t\ticon: MarketingIcon,\n\t\t\t},\n\t\t\t{\n\t\t\t\tid: 'support',\n\t\t\t\ttitle: 'Support',\n\t\t\t\ticon: HeadsetIcon,\n\t\t\t},\n\t\t];\n\n\t\t// Reorder based on useCaseType\n\t\tif (!useCaseType) return defaultItems;\n\n\t\tconst type = String(useCaseType).toLowerCase();\n\t\tif (type === 'support') {\n\t\t\treturn [defaultItems[1], defaultItems[0]]; // Support first\n\t\t}\n\n\t\t// 'marketing', 'both', or any other value -> marketing first\n\t\treturn defaultItems;\n\t};\n\n\tconst orderedButtonItems = getOrderedButtonItems();\n\n\t// Initialize selectedTabId based on button order and display mode\n\tuseEffect(() => {\n\t\tif (displayMode === 'tabs' && orderedButtonItems.length > 0) {\n\t\t\tsetSelectedTabId(orderedButtonItems[0].id);\n\t\t}\n\t}, [displayMode, useCaseType]); // Only update when display mode or use case type changes\n\n\t// Get current checklist based on selected tab or incomplete use case\n\tconst getCurrentChecklist = () => {\n\t\tif (displayMode === 'tabs') {\n\t\t\t// For tabs mode, use selectedTabId to determine which checklist\n\t\t\treturn selectedTabId === 'marketing'\n\t\t\t\t? marketingChecklist\n\t\t\t\t: supportChecklist;\n\t\t}\n\t\t// For list mode, use incompleteUseCase\n\t\treturn incompleteUseCase === 'marketing'\n\t\t\t? marketingChecklist\n\t\t\t: supportChecklist;\n\t};\n\n\tconst getAnalyticsButtonId = (tabId: string) => {\n\t\t// Map tab ID to analytics button ID (uppercase)\n\t\treturn tabId.toUpperCase();\n\t};\n\n\tconst handleChecklistSetup = (itemId: string, analyticsButtonId: string) => {\n\t\tif (onChecklistSetup) {\n\t\t\tonChecklistSetup(itemId, analyticsButtonId);\n\t\t}\n\t};\n\n\tif (displayMode === 'none') {\n\t\treturn null;\n\t}\n\n\tconst currentChecklist = getCurrentChecklist();\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tpadding: 16,\n\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\tborderRadius: 8,\n\t\t\t}}\n\t\t>\n\t\t\t<div>\n\t\t\t\t<TitleRegular color={'#4B1583'}>{title}</TitleRegular>\n\t\t\t\t<BodySecondary color={COLORS.content?.secondary || '#666666'}>\n\t\t\t\t\t{subtitle}\n\t\t\t\t</BodySecondary>\n\t\t\t</div>\n\n\t\t\t<div style={{ marginTop: 12 }}>\n\t\t\t\t{displayMode === 'tabs' ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<ButtonGroup\n\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\tgap=\"12px\"\n\t\t\t\t\t\t\ticonPosition=\"left\"\n\t\t\t\t\t\t\tonButtonClick={(id: string) => setSelectedTabId(id)}\n\t\t\t\t\t\t\tactiveButtonId={selectedTabId}\n\t\t\t\t\t\t\tbuttonGroup={orderedButtonItems}\n\t\t\t\t\t\t/>\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: 12,\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{currentChecklist.map((item: ChecklistItem) => (\n\t\t\t\t\t\t\t\t<PostLiveChecklistItem\n\t\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\t\tisCompleted={item.isCompleted}\n\t\t\t\t\t\t\t\t\tisOpen={item.isOpen}\n\t\t\t\t\t\t\t\t\theader={item.header}\n\t\t\t\t\t\t\t\t\timage={item.image}\n\t\t\t\t\t\t\t\t\tsubHeader={item.subHeader}\n\t\t\t\t\t\t\t\t\tonSetup={() =>\n\t\t\t\t\t\t\t\t\t\thandleChecklistSetup(\n\t\t\t\t\t\t\t\t\t\t\titem.id,\n\t\t\t\t\t\t\t\t\t\t\tgetAnalyticsButtonId(selectedTabId),\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/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tmarginTop: 12,\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\tgap: 12,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{currentChecklist.map((item: ChecklistItem) => (\n\t\t\t\t\t\t\t<PostLiveChecklistItem\n\t\t\t\t\t\t\t\tkey={item.id}\n\t\t\t\t\t\t\t\tisCompleted={item.isCompleted}\n\t\t\t\t\t\t\t\tisOpen={item.isOpen}\n\t\t\t\t\t\t\t\theader={item.header}\n\t\t\t\t\t\t\t\timage={item.image}\n\t\t\t\t\t\t\t\tsubHeader={item.subHeader}\n\t\t\t\t\t\t\t\tonSetup={() =>\n\t\t\t\t\t\t\t\t\thandleChecklistSetup(\n\t\t\t\t\t\t\t\t\t\titem.id,\n\t\t\t\t\t\t\t\t\t\tgetAnalyticsButtonId(incompleteUseCase),\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/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"names":["PostLiveChecklist","_ref","title","subtitle","marketingChecklist","supportChecklist","onChecklistSetup","useCaseType","selectedTabId","setSelectedTabId","useState","displayMode","setDisplayMode","incompleteUseCase","setIncompleteUseCase","useEffect","marketingIncomplete","filter","it","isCompleted","length","supportIncomplete","orderedButtonItems","getOrderedButtonItems","defaultItems","id","icon","MarketingIcon","HeadsetIcon","String","toLowerCase","getAnalyticsButtonId","tabId","toUpperCase","handleChecklistSetup","itemId","analyticsButtonId","currentChecklist","_jsxs","Object","assign","style","padding","border","COLORS","stroke","primary","backgroundColor","surface","standard","borderRadius","children","_jsx","TitleRegular","color","BodySecondary","content","_a","secondary","marginTop","_Fragment","ButtonGroup","size","gap","iconPosition","onButtonClick","activeButtonId","buttonGroup","display","flexDirection","map","item","PostLiveChecklistItem","isOpen","header","image","subHeader","onSetup"],"mappings":"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"}