@bikdotai/bik-component-library 0.0.821-2 → 0.0.821-beta.0

package/dist/cjs/components/agent-listing/AgentListingFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentListingFilters.js","sources":["../../../../src/components/agent-listing/AgentListingFilters.tsx"],"sourcesContent":["import SearchIcon from '@src/assets/icons/search.svg';\nimport React from 'react';\nimport { Dropdown } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListSortOption } from './AgentListing.model';\nimport { FilterRow, FilterRowLeft } from './AgentListing.styled';\n\ninterface AgentListingFiltersProps {\n\tsearchValue: string;\n\tonSearchChange: (value: string) => void;\n\tsearchPlaceholder: string;\n\n\tfilterOptions?: DropdownOption[];\n\tonFilterChange?: (selected: DropdownOption | DropdownOption[]) => void;\n\tfilterPlaceholder: string;\n\n\tsortOptions?: AgentListSortOption[];\n\tselectedSort?: string;\n\tonSortChange?: (value: string) => void;\n}\n\nexport const AgentListingFilters: React.FC<AgentListingFiltersProps> = ({\n\tsearchValue,\n\tonSearchChange,\n\tsearchPlaceholder,\n\tfilterOptions,\n\tonFilterChange,\n\tfilterPlaceholder,\n\tsortOptions,\n\tselectedSort,\n\tonSortChange,\n}) => {\n\tconst sortDropdownOptions: SingleOption[] = (sortOptions ?? []).map((o) => ({\n\t\tlabel: o.label,\n\t\tvalue: o.value,\n\t\tselected: o.value === selectedSort,\n\t}));\n\n\treturn (\n\t\t<FilterRow>\n\t\t\t<FilterRowLeft>\n\t\t\t\t<Input\n\t\t\t\t\tdata-test=\"agent-search\"\n\t\t\t\t\tvariant=\"small\"\n\t\t\t\t\twidth=\"320px\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tvalue={searchValue}\n\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\thideInputHeader\n\t\t\t\t\tnoErrorHint\n\t\t\t\t\tleftIcon={{\n\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\t\t\twidth={18}\n\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.placeholder}\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\tonChangeText={(text) => onSearchChange(text)}\n\t\t\t\t/>\n\n\t\t\t\t{filterOptions && onFilterChange && (\n\t\t\t\t\t<Dropdown\n\t\t\t\t\t\tdata-test=\"agent-filters\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\twidth=\"140px\"\n\t\t\t\t\t\tplaceHolder={filterPlaceholder}\n\t\t\t\t\t\tshowPlaceholderWhenSelected\n\t\t\t\t\t\toptions={filterOptions}\n\t\t\t\t\t\tisMultiSelect\n\t\t\t\t\t\tonSelect={onFilterChange}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</FilterRowLeft>\n\n\t\t\t{sortOptions && onSortChange && (\n\t\t\t\t<Dropdown\n\t\t\t\t\tdata-test=\"agent-sort\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\twidth=\"200px\"\n\t\t\t\t\toptions={sortDropdownOptions}\n\t\t\t\t\tonSelect={(opt) => {\n\t\t\t\t\t\tconst single = Array.isArray(opt) ? opt[0] : opt;\n\t\t\t\t\t\tconst value = (single as SingleOption)?.value;\n\t\t\t\t\t\tif (value) {\n\t\t\t\t\t\t\tonSortChange(value);\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</FilterRow>\n\t);\n};\n"],"names":["AgentListingFilters","searchValue","onSearchChange","searchPlaceholder","filterOptions","onFilterChange","filterPlaceholder","sortOptions","selectedSort","onSortChange","sortDropdownOptions","o","FilterRow","jsxs","FilterRowLeft","jsx","Input","SearchIcon","COLORS","text","Dropdown","opt","value"],"mappings":"mTAuBaA,EAA0D,CAAC,CACvE,YAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,cAAAC,EACA,eAAAC,EACA,kBAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,CACD,IAAM,CACL,MAAMC,GAAuCH,GAAe,CAAA,GAAI,IAAKI,IAAO,CAC3E,MAAOA,EAAE,MACT,MAAOA,EAAE,MACT,SAAUA,EAAE,QAAUH,CAAA,EACrB,EAEF,cACEI,YAAA,CACA,SAAA,CAAAC,OAACC,EAAAA,cAAA,CACA,SAAA,CAAAC,EAAAA,IAACC,EAAAA,MAAA,CACA,YAAU,eACV,QAAQ,QACR,MAAM,QACN,KAAK,OACL,MAAOf,EACP,YAAaE,EACb,gBAAe,GACf,YAAW,GACX,SAAU,CACT,KAAM,IACLY,EAAAA,IAACE,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOC,EAAAA,OAAO,QAAQ,WAAA,CAAA,CACvB,EAGF,aAAeC,GAASjB,EAAeiB,CAAI,CAAA,CAAA,EAG3Cf,GAAiBC,GACjBU,EAAAA,IAACK,EAAAA,SAAA,CACA,YAAU,gBACV,KAAK,QACL,MAAM,QACN,YAAad,EACb,4BAA2B,GAC3B,QAASF,EACT,cAAa,GACb,SAAUC,CAAA,CAAA,CACX,EAEF,EAECE,GAAeE,GACfM,EAAAA,IAACK,EAAAA,SAAA,CACA,YAAU,aACV,KAAK,QACL,MAAM,QACN,QAASV,EACT,SAAWW,GAAQ,CAElB,MAAMC,GADS,MAAM,QAAQD,CAAG,EAAIA,EAAI,CAAC,EAAIA,IACL,MACpCC,GACHb,EAAaa,CAAK,CAEpB,CAAA,CAAA,CACD,EAEF,CAEF"}

package/dist/cjs/components/agent-listing/AgentListingHeader.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../../assets/icons/plus.svg.js"),a=require("../TypographyStyle.js"),u=require("../../constants/Theme.js"),n=require("./AgentListing.styled.js"),r=require("../button/Button.js"),c=({title:s,onNewAgent:i,onBrowseTemplates:t})=>e.jsxs(n.HeaderBar,{children:[e.jsx(a.TitleMedium,{color:u.COLORS.content.primary,children:s}),e.jsxs(n.HeaderActions,{children:[t&&e.jsx(r.Button,{"data-test":"agent-browse-templates",buttonType:"secondary",size:"small",buttonText:"Browse templates",onClick:t}),e.jsx(r.Button,{"data-test":"agent-new",buttonType:"primary",size:"small",buttonText:"New AI agent",LeadingIcon:o.default,onClick:i})]})]});exports.AgentListingHeader=c;
+//# sourceMappingURL=AgentListingHeader.js.map

package/dist/cjs/components/agent-listing/AgentListingHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentListingHeader.js","sources":["../../../../src/components/agent-listing/AgentListingHeader.tsx"],"sourcesContent":["import PlusIcon from '@src/assets/icons/plus.svg';\nimport React from 'react';\nimport { Button } from '@src/components/button';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { HeaderActions, HeaderBar } from './AgentListing.styled';\n\ninterface AgentListingHeaderProps {\n\ttitle: string;\n\tonNewAgent: () => void;\n\tonBrowseTemplates?: () => void;\n}\n\nexport const AgentListingHeader: React.FC<AgentListingHeaderProps> = ({\n\ttitle,\n\tonNewAgent,\n\tonBrowseTemplates,\n}) => (\n\t<HeaderBar>\n\t\t<TitleMedium color={COLORS.content.primary}>{title}</TitleMedium>\n\t\t<HeaderActions>\n\t\t\t{onBrowseTemplates && (\n\t\t\t\t<Button\n\t\t\t\t\tdata-test=\"agent-browse-templates\"\n\t\t\t\t\tbuttonType=\"secondary\"\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\tbuttonText=\"Browse templates\"\n\t\t\t\t\tonClick={onBrowseTemplates}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t<Button\n\t\t\t\tdata-test=\"agent-new\"\n\t\t\t\tbuttonType=\"primary\"\n\t\t\t\tsize=\"small\"\n\t\t\t\tbuttonText=\"New AI agent\"\n\t\t\t\tLeadingIcon={PlusIcon}\n\t\t\t\tonClick={onNewAgent}\n\t\t\t/>\n\t\t</HeaderActions>\n\t</HeaderBar>\n);\n"],"names":["AgentListingHeader","title","onNewAgent","onBrowseTemplates","HeaderBar","jsx","TitleMedium","COLORS","HeaderActions","Button","PlusIcon"],"mappings":"iTAaaA,EAAwD,CAAC,CACrE,MAAAC,EACA,WAAAC,EACA,kBAAAC,CACD,WACEC,YAAA,CACA,SAAA,CAAAC,MAACC,EAAAA,YAAA,CAAY,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAAN,EAAM,SAClDO,EAAAA,cAAA,CACC,SAAA,CAAAL,GACAE,EAAAA,IAACI,EAAAA,OAAA,CACA,YAAU,yBACV,WAAW,YACX,KAAK,QACL,WAAW,mBACX,QAASN,CAAA,CAAA,EAGXE,EAAAA,IAACI,EAAAA,OAAA,CACA,YAAU,YACV,WAAW,UACX,KAAK,QACL,WAAW,eACX,YAAaC,EAAAA,QACb,QAASR,CAAA,CAAA,CACV,CAAA,CACD,CAAA,CAAA,CACD"}

package/dist/cjs/components/agent-listing/AgentTable.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),r=require("./AgentListing.styled.js"),o=require("./AgentTableRow.js"),l=({children:n})=>e.jsx(d.TitleSmall,{color:a.COLORS.content.primary,children:n}),j=({agents:n,onRunAgent:s,onEditAgent:t,onRowClick:c})=>e.jsx(r.TableCard,{children:e.jsxs(r.TableScroll,{children:[e.jsxs(r.HeaderGridRow,{children:[e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Agent name"})}),e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Trigger"})}),e.jsx(r.HeaderCell,{align:"right",children:e.jsx(l,{children:"Trigger count"})}),e.jsx(r.HeaderCell,{children:e.jsx(l,{children:"Status"})}),e.jsx(r.HeaderCell,{align:"center",children:e.jsx(l,{children:"Actions"})})]}),n.map(i=>e.jsx(o.AgentTableRow,{agent:i,onRunAgent:s,onEditAgent:t,onRowClick:c},i.id))]})});exports.AgentTable=j;
+//# sourceMappingURL=AgentTable.js.map

package/dist/cjs/components/agent-listing/AgentTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTable.js","sources":["../../../../src/components/agent-listing/AgentTable.tsx"],"sourcesContent":["import React from 'react';\nimport { TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem } from './AgentListing.model';\nimport {\n\tHeaderCell,\n\tHeaderGridRow,\n\tTableCard,\n\tTableScroll,\n} from './AgentListing.styled';\nimport { AgentTableRow } from './AgentTableRow';\n\ninterface AgentTableProps {\n\tagents: AgentListItem[];\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nconst HeaderLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n\t<TitleSmall color={COLORS.content.primary}>{children}</TitleSmall>\n);\n\nexport const AgentTable: React.FC<AgentTableProps> = ({\n\tagents,\n\tonRunAgent,\n\tonEditAgent,\n\tonRowClick,\n}) => (\n\t<TableCard>\n\t\t<TableScroll>\n\t\t\t<HeaderGridRow>\n\t\t\t\t<HeaderCell>\n\t\t\t\t\t<HeaderLabel>Agent name</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell>\n\t\t\t\t\t<HeaderLabel>Trigger</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell align=\"right\">\n\t\t\t\t\t<HeaderLabel>Trigger count</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell>\n\t\t\t\t\t<HeaderLabel>Status</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t\t<HeaderCell align=\"center\">\n\t\t\t\t\t<HeaderLabel>Actions</HeaderLabel>\n\t\t\t\t</HeaderCell>\n\t\t\t</HeaderGridRow>\n\n\t\t\t{agents.map((agent) => (\n\t\t\t\t<AgentTableRow\n\t\t\t\t\tkey={agent.id}\n\t\t\t\t\tagent={agent}\n\t\t\t\t\tonRunAgent={onRunAgent}\n\t\t\t\t\tonEditAgent={onEditAgent}\n\t\t\t\t\tonRowClick={onRowClick}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</TableScroll>\n\t</TableCard>\n);\n"],"names":["HeaderLabel","children","jsx","TitleSmall","COLORS","AgentTable","agents","onRunAgent","onEditAgent","onRowClick","TableCard","jsxs","TableScroll","HeaderGridRow","HeaderCell","agent","AgentTableRow"],"mappings":"oQAmBMA,EAAuD,CAAC,CAAE,SAAAC,CAAA,IAC/DC,EAAAA,IAACC,EAAAA,WAAA,CAAW,MAAOC,SAAO,QAAQ,QAAU,SAAAH,CAAA,CAAS,EAGzCI,EAAwC,CAAC,CACrD,OAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,CACD,IACCP,EAAAA,IAACQ,EAAAA,UAAA,CACA,SAAAC,EAAAA,KAACC,EAAAA,YAAA,CACA,SAAA,CAAAD,OAACE,EAAAA,cAAA,CACA,SAAA,CAAAX,MAACY,EAAAA,WAAA,CACA,SAAAZ,EAAAA,IAACF,EAAA,CAAY,SAAA,YAAA,CAAU,EACxB,EACAE,MAACY,EAAAA,WAAA,CACA,SAAAZ,EAAAA,IAACF,EAAA,CAAY,mBAAO,EACrB,QACCc,EAAAA,WAAA,CAAW,MAAM,QACjB,SAAAZ,MAACF,EAAA,CAAY,yBAAa,CAAA,CAC3B,EACAE,MAACY,EAAAA,WAAA,CACA,SAAAZ,EAAAA,IAACF,EAAA,CAAY,kBAAM,EACpB,QACCc,EAAAA,WAAA,CAAW,MAAM,SACjB,SAAAZ,EAAAA,IAACF,EAAA,CAAY,mBAAO,CAAA,CACrB,CAAA,EACD,EAECM,EAAO,IAAKS,GACZb,EAAAA,IAACc,EAAAA,cAAA,CAEA,MAAAD,EACA,WAAAR,EACA,YAAAC,EACA,WAAAC,CAAA,EAJKM,EAAM,EAAA,CAMZ,CAAA,CAAA,CACF,CAAA,CACD"}

package/dist/cjs/components/agent-listing/AgentTableRow.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("../../assets/icons/edit.svg.js"),y=require("../../assets/icons/playOutline.svg.js"),n=require("../TypographyStyle.js"),r=require("../../constants/Theme.js"),i=require("./AgentListing.styled.js"),x=require("../tag/Tag.js"),j=require("../tooltips/Tooltip.js"),b=e=>{switch(e.kind){case"topic":return`Topic: ${e.label??""}`;case"phrases":return`Phrases: ${(e.items??[]).join(", ")}`;default:return e.label??""}},O=({agent:e,onRunAgent:a,onEditAgent:d,onRowClick:o})=>{const s=e.status==="live",u=l=>{l.stopPropagation(),!e.isRunDisabled&&a(e)},h=l=>{l.stopPropagation(),d(e)},c=t.jsx(i.ActionButton,{"data-test":`agent-row-run-${e.id}`,disabled:e.isRunDisabled,onClick:u,"aria-label":"Run agent",children:t.jsx(y.default,{width:20,height:20,color:r.COLORS.content.secondary})});return t.jsxs(i.BodyGridRow,{"data-test":`agent-row-${e.id}`,clickable:!!o,onClick:o?()=>o(e):void 0,children:[t.jsxs(i.Cell,{children:[t.jsx(n.TitleSmall,{numberOfLines:1,color:r.COLORS.content.primary,children:e.name}),t.jsxs(n.BodyCaption,{numberOfLines:1,color:r.COLORS.content.secondary,children:["Created: ",e.createdAtLabel]})]}),t.jsx(i.Cell,{children:t.jsx(n.BodyPrimary,{numberOfLines:2,color:r.COLORS.content.primary,children:b(e.trigger)})}),t.jsx(i.Cell,{align:"right",children:t.jsx(n.BodyPrimary,{color:r.COLORS.content.primary,children:e.triggerCount})}),t.jsx(i.Cell,{children:t.jsx(x.Tag,{tagText:s?"Live":"Draft",type:s?"positive":"neutral",variant:"regular"})}),t.jsx(i.Cell,{align:"center",children:t.jsxs(i.ActionGroup,{children:[e.isRunDisabled&&e.runDisabledTooltip?t.jsx(j.Tooltip,{body:e.runDisabledTooltip,placement:"top",children:t.jsx("span",{style:{display:"flex"},children:c})}):c,t.jsx(i.ActionButton,{"data-test":`agent-row-edit-${e.id}`,onClick:h,"aria-label":"Edit agent",children:t.jsx(p.default,{width:20,height:20,color:r.COLORS.content.secondary})})]})})]})};exports.AgentTableRow=O;
+//# sourceMappingURL=AgentTableRow.js.map

package/dist/cjs/components/agent-listing/AgentTableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgentTableRow.js","sources":["../../../../src/components/agent-listing/AgentTableRow.tsx"],"sourcesContent":["import EditIcon from '@src/assets/icons/edit.svg';\nimport PlayOutlineIcon from '@src/assets/icons/playOutline.svg';\nimport React from 'react';\nimport { Tag } from '@src/components/tag';\nimport { Tooltip } from '@src/components/tooltips';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentListItem, AgentTriggerSummary } from './AgentListing.model';\nimport {\n\tActionButton,\n\tActionGroup,\n\tBodyGridRow,\n\tCell,\n} from './AgentListing.styled';\n\nconst triggerToText = (trigger: AgentTriggerSummary): string => {\n\tswitch (trigger.kind) {\n\t\tcase 'topic':\n\t\t\treturn `Topic: ${trigger.label ?? ''}`;\n\t\tcase 'phrases':\n\t\t\treturn `Phrases: ${(trigger.items ?? []).join(', ')}`;\n\t\tcase 'custom':\n\t\tdefault:\n\t\t\treturn trigger.label ?? '';\n\t}\n};\n\ninterface AgentTableRowProps {\n\tagent: AgentListItem;\n\tonRunAgent: (agent: AgentListItem) => void;\n\tonEditAgent: (agent: AgentListItem) => void;\n\tonRowClick?: (agent: AgentListItem) => void;\n}\n\nexport const AgentTableRow: React.FC<AgentTableRowProps> = ({\n\tagent,\n\tonRunAgent,\n\tonEditAgent,\n\tonRowClick,\n}) => {\n\tconst isLive = agent.status === 'live';\n\n\tconst handleRun = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tif (agent.isRunDisabled) {\n\t\t\treturn;\n\t\t}\n\t\tonRunAgent(agent);\n\t};\n\n\tconst handleEdit = (e: React.MouseEvent) => {\n\t\te.stopPropagation();\n\t\tonEditAgent(agent);\n\t};\n\n\tconst playButton = (\n\t\t<ActionButton\n\t\t\tdata-test={`agent-row-run-${agent.id}`}\n\t\t\tdisabled={agent.isRunDisabled}\n\t\t\tonClick={handleRun}\n\t\t\taria-label=\"Run agent\"\n\t\t>\n\t\t\t<PlayOutlineIcon\n\t\t\t\twidth={20}\n\t\t\t\theight={20}\n\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t/>\n\t\t</ActionButton>\n\t);\n\n\treturn (\n\t\t<BodyGridRow\n\t\t\tdata-test={`agent-row-${agent.id}`}\n\t\t\tclickable={!!onRowClick}\n\t\t\tonClick={onRowClick ? () => onRowClick(agent) : undefined}\n\t\t>\n\t\t\t<Cell>\n\t\t\t\t<TitleSmall numberOfLines={1} color={COLORS.content.primary}>\n\t\t\t\t\t{agent.name}\n\t\t\t\t</TitleSmall>\n\t\t\t\t<BodyCaption numberOfLines={1} color={COLORS.content.secondary}>\n\t\t\t\t\tCreated: {agent.createdAtLabel}\n\t\t\t\t</BodyCaption>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<BodyPrimary numberOfLines={2} color={COLORS.content.primary}>\n\t\t\t\t\t{triggerToText(agent.trigger)}\n\t\t\t\t</BodyPrimary>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"right\">\n\t\t\t\t<BodyPrimary color={COLORS.content.primary}>\n\t\t\t\t\t{agent.triggerCount}\n\t\t\t\t</BodyPrimary>\n\t\t\t</Cell>\n\n\t\t\t<Cell>\n\t\t\t\t<Tag\n\t\t\t\t\ttagText={isLive ? 'Live' : 'Draft'}\n\t\t\t\t\ttype={isLive ? 'positive' : 'neutral'}\n\t\t\t\t\tvariant=\"regular\"\n\t\t\t\t/>\n\t\t\t</Cell>\n\n\t\t\t<Cell align=\"center\">\n\t\t\t\t<ActionGroup>\n\t\t\t\t\t{agent.isRunDisabled && agent.runDisabledTooltip ? (\n\t\t\t\t\t\t<Tooltip body={agent.runDisabledTooltip} placement=\"top\">\n\t\t\t\t\t\t\t<span style={{ display: 'flex' }}>{playButton}</span>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\tplayButton\n\t\t\t\t\t)}\n\t\t\t\t\t<ActionButton\n\t\t\t\t\t\tdata-test={`agent-row-edit-${agent.id}`}\n\t\t\t\t\t\tonClick={handleEdit}\n\t\t\t\t\t\taria-label=\"Edit agent\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<EditIcon width={20} height={20} color={COLORS.content.secondary} />\n\t\t\t\t\t</ActionButton>\n\t\t\t\t</ActionGroup>\n\t\t\t</Cell>\n\t\t</BodyGridRow>\n\t);\n};\n"],"names":["triggerToText","trigger","AgentTableRow","agent","onRunAgent","onEditAgent","onRowClick","isLive","handleRun","e","handleEdit","playButton","jsx","ActionButton","PlayOutlineIcon","COLORS","jsxs","BodyGridRow","Cell","TitleSmall","BodyCaption","BodyPrimary","Tag","ActionGroup","Tooltip","EditIcon"],"mappings":"kYAmBMA,EAAiBC,GAAyC,CAC/D,OAAQA,EAAQ,KAAA,CACf,IAAK,QACJ,MAAO,UAAUA,EAAQ,OAAS,EAAE,GACrC,IAAK,UACJ,MAAO,aAAaA,EAAQ,OAAS,CAAA,GAAI,KAAK,IAAI,CAAC,GAEpD,QACC,OAAOA,EAAQ,OAAS,EAAA,CAE3B,EASaC,EAA8C,CAAC,CAC3D,MAAAC,EACA,WAAAC,EACA,YAAAC,EACA,WAAAC,CACD,IAAM,CACL,MAAMC,EAASJ,EAAM,SAAW,OAE1BK,EAAaC,GAAwB,CAC1CA,EAAE,gBAAA,EACE,CAAAN,EAAM,eAGVC,EAAWD,CAAK,CACjB,EAEMO,EAAcD,GAAwB,CAC3CA,EAAE,gBAAA,EACFJ,EAAYF,CAAK,CAClB,EAEMQ,EACLC,EAAAA,IAACC,EAAAA,aAAA,CACA,YAAW,iBAAiBV,EAAM,EAAE,GACpC,SAAUA,EAAM,cAChB,QAASK,EACT,aAAW,YAEX,SAAAI,EAAAA,IAACE,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOC,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CAAA,EAIF,OACCC,EAAAA,KAACC,EAAAA,YAAA,CACA,YAAW,aAAad,EAAM,EAAE,GAChC,UAAW,CAAC,CAACG,EACb,QAASA,EAAa,IAAMA,EAAWH,CAAK,EAAI,OAEhD,SAAA,CAAAa,OAACE,EAAAA,KAAA,CACA,SAAA,CAAAN,EAAAA,IAACO,EAAAA,WAAA,CAAW,cAAe,EAAG,MAAOJ,SAAO,QAAQ,QAClD,WAAM,IAAA,CACR,SACCK,EAAAA,YAAA,CAAY,cAAe,EAAG,MAAOL,SAAO,QAAQ,UAAW,SAAA,CAAA,YACrDZ,EAAM,cAAA,CAAA,CACjB,CAAA,EACD,EAEAS,EAAAA,IAACM,EAAAA,KAAA,CACA,SAAAN,EAAAA,IAACS,cAAA,CAAY,cAAe,EAAG,MAAON,EAAAA,OAAO,QAAQ,QACnD,SAAAf,EAAcG,EAAM,OAAO,EAC7B,EACD,EAEAS,EAAAA,IAACM,EAAAA,KAAA,CAAK,MAAM,QACX,SAAAN,EAAAA,IAACS,cAAA,CAAY,MAAON,EAAAA,OAAO,QAAQ,QACjC,SAAAZ,EAAM,YAAA,CACR,EACD,QAECe,EAAAA,KAAA,CACA,SAAAN,EAAAA,IAACU,EAAAA,IAAA,CACA,QAASf,EAAS,OAAS,QAC3B,KAAMA,EAAS,WAAa,UAC5B,QAAQ,SAAA,CAAA,EAEV,EAEAK,MAACM,EAAAA,KAAA,CAAK,MAAM,SACX,gBAACK,cAAA,CACC,SAAA,CAAApB,EAAM,eAAiBA,EAAM,yBAC5BqB,UAAA,CAAQ,KAAMrB,EAAM,mBAAoB,UAAU,MAClD,SAAAS,EAAAA,IAAC,OAAA,CAAK,MAAO,CAAE,QAAS,QAAW,SAAAD,EAAW,EAC/C,EAEAA,EAEDC,EAAAA,IAACC,EAAAA,aAAA,CACA,YAAW,kBAAkBV,EAAM,EAAE,GACrC,QAASO,EACT,aAAW,aAEX,SAAAE,EAAAA,IAACa,WAAS,MAAO,GAAI,OAAQ,GAAI,MAAOV,SAAO,QAAQ,SAAA,CAAW,CAAA,CAAA,CACnE,CAAA,CACD,CAAA,CACD,CAAA,CAAA,CAAA,CAGH"}

package/dist/cjs/components/avatar/Avatar.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),l=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),_=require("../../assets/icons/instagram-channel.svg.js"),f=require("../../assets/icons/task.svg.js"),j=require("../../assets/icons/whatsapp_color.svg.js"),C=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var A=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(A||{});const S=e=>{const[s,g]=b.useState(!1),h=()=>{const r=(e.name||"").split(".").join(" ").split(" ").map(m=>m.charAt(0).toUpperCase()).slice(0,2).join(""),c=u[e.background];return e.size===i.SIZE.LARGE?t.jsx(l.TitleMedium,{style:{color:c},children:r}):e.size===i.SIZE.MEDIUM?t.jsx(l.TitleSmall,{style:{color:c},children:r}):t.jsx(l.BodyTiny,{style:{color:c},children:r})},R=()=>e.useNameFallback&&(!e.photoUrl||s)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!s?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{g(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),O=()=>{switch(e.channelName){case"email":return t.jsx(o.default,{width:11,height:11});case"smtp":return t.jsx(o.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(_.default,{width:11,height:11});case"whatsapp":return t.jsx(j.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(f.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},I=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,T=()=>e.type===i.AVATAR_TYPES.IMAGE&&(s||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(C.AvatarStyle,{type:T(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&R(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:u[e.background]})]}),e.inboxSettings&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:O()}),e.status&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:I()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=S;exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;exports.MESSAGE_CHANNELS=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),m=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),l=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),h=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),j=require("../../assets/icons/task.svg.js"),_=require("../../assets/icons/whatsapp_color.svg.js"),n={[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.INBOX]:24,[i.SIZE.LARGE]:32},s={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard};var o=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(o||{});const S=e=>{const[r,A]=b.useState(!1),u=()=>{const c=(e.name||"").split(".").join(" ").split(" ").map(T=>T.charAt(0).toUpperCase()).slice(0,2).join("");if(e.size===i.SIZE.SMALL)return t.jsx(l.BodyTiny,{style:{color:s[e.background]},children:c});if(e.size===i.SIZE.MEDIUM||e.size===i.SIZE.INBOX)return t.jsx(l.TitleSmall,{style:{color:s[e.background]},children:c});if(e.size===i.SIZE.LARGE)return t.jsx(l.TitleMedium,{style:{color:s[e.background]},children:c})},g=()=>e.useNameFallback&&(!e.photoUrl||r)&&e.name?t.jsx("div",{children:u()}):e.useNameFallback&&e.photoUrl&&!r?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{A(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(h.default,{width:11,height:11});case"smtp":return t.jsx(h.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(_.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(j.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},R=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,O=()=>e.type===i.AVATAR_TYPES.IMAGE&&(r||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(m.AvatarStyle,{type:O(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&g(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:u()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:s[e.background]})]}),e.inboxSettings&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:R()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=S;exports.BACKGROUND_VS_TEXT_COLOR_MAP=s;exports.MESSAGE_CHANNELS=o;
 //# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\treturn <BodyTiny style={{ color }}>{initials}</BodyTiny>;\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","BodyTiny","getImageBlock","jsx","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}
+{"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' | 'OFFLINE' | 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name || '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM || props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl || imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError || !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius || '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}

package/dist/cjs/components/avatar/Avatar.styled.js

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("./AvatarHelper.js"),A=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=a(r),d=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("styled-components"),t=require("./AvatarHelper.js"),r=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=a(A),o=n.default.div`
 	width: ${e=>t.AVATAR_SIZE_MAP[e.size]+"px"};
 	height: ${e=>t.AVATAR_SIZE_MAP[e.size]+"px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${e=>e.type===t.AVATAR_TYPES.IMAGE?"null":e.background===t.AVATAR_BACKGROUND.LIGHT?A.COLORS.background.base:e.background===t.AVATAR_BACKGROUND.WHITE?A.COLORS.surface.standard:e.background===t.AVATAR_BACKGROUND.BRAND?A.COLORS.background.brandLight:A.COLORS.background.inverse};
-	border: ${e=>e.background===t.AVATAR_BACKGROUND.LIGHT||e.background===t.AVATAR_BACKGROUND.WHITE?"1px solid "+A.COLORS.stroke.primary:0};
+	background-color: ${e=>e.type===t.AVATAR_TYPES.IMAGE?"null":e.background===t.AVATAR_BACKGROUND.LIGHT?r.COLORS.background.base:e.background===t.AVATAR_BACKGROUND.WHITE?r.COLORS.surface.standard:r.COLORS.background.inverse};
+	border: ${e=>e.background===t.AVATAR_BACKGROUND.LIGHT||e.background===t.AVATAR_BACKGROUND.WHITE?"1px solid "+r.COLORS.stroke.primary:0};
 	border-radius: 50%;
-`;exports.AvatarStyle=d;
+`;exports.AvatarStyle=o;
 //# sourceMappingURL=Avatar.styled.js.map

package/dist/cjs/components/avatar/Avatar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":"yPASaA,EAAcC,EAAAA,QAAO;AAAA,UAKvBC,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA,WAC3CA,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIlCA,GACpBA,EAAM,OAASE,EAAAA,aAAa,MACzB,OACAF,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,KAClBJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,QAAQ,SACfJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,OAAO;AAAA,WAClBJ,GACVA,EAAM,aAAeG,EAAAA,kBAAkB,OACvCH,EAAM,aAAeG,EAAAA,kBAAkB,MACpC,aAAeC,EAAAA,OAAO,OAAO,QAC7B,CAAC;AAAA;AAAA"}
+{"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT ||\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":"yPASaA,EAAcC,EAAAA,QAAO;AAAA,UAKvBC,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA,WAC3CA,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIlCA,GACpBA,EAAM,OAASE,EAAAA,aAAa,MACzB,OACAF,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,KAClBJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,SAAO,QAAQ,SACfA,SAAO,WAAW,OAAO;AAAA,WAClBJ,GACVA,EAAM,aAAeG,EAAAA,kBAAkB,OACvCH,EAAM,aAAeG,EAAAA,kBAAkB,MACpC,aAAeC,EAAAA,OAAO,OAAO,QAC7B,CAAC;AAAA;AAAA"}

package/dist/cjs/components/avatar/AvatarHelper.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var A=(L=>(L.IMAGE="IMAGE",L.INITIALS="INITIALS",L.ICON="ICON",L))(A||{}),I=(L=>(L.EXTRA_SMALL="EXTRA_SMALL",L.SMALL="SMALL",L.MEDIUM="MEDIUM",L.LARGE="LARGE",L))(I||{}),M=(L=>(L.LIGHT="LIGHT",L.DARK="DARK",L.WHITE="WHITE",L.BRAND="BRAND",L))(M||{});const r={EXTRA_SMALL:16,SMALL:24,MEDIUM:40,LARGE:64};exports.AVATAR_BACKGROUND=M;exports.AVATAR_SIZE_MAP=r;exports.AVATAR_TYPES=A;exports.SIZE=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var M=(I=>(I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON",I))(M||{}),r=(I=>(I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX",I))(r||{}),A=(I=>(I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE",I))(A||{});const L={SMALL:24,MEDIUM:40,LARGE:64,INBOX:30};exports.AVATAR_BACKGROUND=A;exports.AVATAR_SIZE_MAP=L;exports.AVATAR_TYPES=M;exports.SIZE=r;
 //# sourceMappingURL=AvatarHelper.js.map

package/dist/cjs/components/avatar/AvatarHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\tEXTRA_SMALL = 'EXTRA_SMALL',\n\tSMALL = 'SMALL',\n\tMEDIUM = 'MEDIUM',\n\tLARGE = 'LARGE',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n\tBRAND = 'BRAND',\n}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 16,\n\t[SIZE.SMALL]: 24,\n\t[SIZE.MEDIUM]: 40,\n\t[SIZE.LARGE]: 64,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP"],"mappings":"gFAAO,IAAKA,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,KAAO,OAHIA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACXA,EAAA,YAAc,cACdA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAJGA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJGA,IAAAA,GAAA,CAAA,CAAA,EAOL,MAAMC,EAAkB,CAC7B,YAAmB,GACnB,MAAa,GACb,OAAc,GACd,MAAa,EACf"}
+{"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\tSMALL = 'SMALL',\n\tMEDIUM = 'MEDIUM',\n\tLARGE = 'LARGE',\n\tINBOX = 'INBOX',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.SMALL]: 24,\n\t[SIZE.MEDIUM]: 40,\n\t[SIZE.LARGE]: 64,\n\t[SIZE.INBOX]: 30,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP"],"mappings":"gFAAO,IAAKA,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,KAAO,OAHIA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJGA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,MAAQ,QAHGA,IAAAA,GAAA,CAAA,CAAA,EAML,MAAMC,EAAkB,CAC7B,MAAa,GACb,OAAc,GACd,MAAa,GACb,MAAa,EACf"}

package/dist/cjs/components/bik-layout/BikSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"BikSidebar.js","sources":["../../../../src/components/bik-layout/BikSidebar.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './Sidebar.model';\nimport { SidebarPopup } from './SidebarPopup';\nimport {\n\tMainSideBarMenuWrapper,\n\tSibeBarMenuItem,\n\tSideBarContainer,\n} from './SidebarStyles';\nimport { SimpleSidebar } from './SimpleSidebar';\n\nexport interface MenuItem {\n\tkey: string | number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' | 'popup' | string | undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarProps {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItem[];\n\tactiveMainMenu: MenuItem;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItem) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarMenuItemProps {\n\toption: MenuItem;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItem) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItem) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItem | undefined;\n\thoveredComp: MenuItem | undefined;\n\tpopupMenu: MenuItem | undefined;\n}\n\nexport const BikSidebar: React.FC<BikSidebarProps> = (bikSidebarProps) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarProps;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItem>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItem>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItem>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst [autoCloseTimer, setAutoCloseTimer] = useState<NodeJS.Timeout | null>(\n\t\tnull,\n\t);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky || menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItem) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItem) => {\n\t\tclearRemnantTimers();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') || option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t\tinitiateAutoClose();\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (targetElement: HTMLElement) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerStickyElements = targetElement.querySelectorAll('div');\n\t\tlet innerStickyElement = null as HTMLElement | null;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tinnerStickyElements.forEach((element) => {\n\t\t\tif (element.className.includes('sticky')) {\n\t\t\t\tinnerStickyElement = element;\n\t\t\t}\n\t\t});\n\t\tif (innerStickyElement) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst initiateAutoClose = () => {\n\t\tclearRemnantTimers();\n\t\tconst timer = setTimeout(() => setHoveredComp(undefined), 10000); // 10-second delay\n\t\tsetAutoCloseTimer(timer);\n\t};\n\n\tconst clearRemnantTimers = () => {\n\t\tclearTimeout(autoCloseTimer!);\n\t};\n\n\treturn (\n\t\t<SideBarContainer>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarMenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarPopup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setPopupMenu(undefined)}\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{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebar\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={() => clearRemnantTimers()}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => {\n\t\t\t\t\t\t\t\t\t\tclearRemnantTimers();\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 92 : 88}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\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</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarProps.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarMenuItem>\n\t\t\t\t\t\t<div className=\"main--sidebar\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tclassName={`sidebar-menu-item ${\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu'\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu-int'\n\t\t\t\t\t\t\t\t\t\t: 'sticky-menu-three'\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<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarProps.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</SibeBarMenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarMenuWrapper>\n\t\t</SideBarContainer>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon, hoverStateIcon, isHovered } =\n\t\ticonComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\tconst HoverIcon = hoverStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon width={20} height={20} />\n\t\t\t) : isHovered ? (\n\t\t\t\t<HoverIcon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t) : (\n\t\t\t\t<Icon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarMenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tsetHoveredComp,\n\tsetPopupMenu,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n}) => {\n\treturn (\n\t\t<SibeBarMenuItem>\n\t\t\t<div\n\t\t\t\tid={option.displayName?.split(' ')?.join('') || option.key.toString()}\n\t\t\t\tclassName=\"main--sidebar\"\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tif (!option?.children?.length) {\n\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {\n\t\t\t\t\t// do nothing\n\t\t\t\t}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<div className={`new-tag ${option.isLastSticky ? 'tag-sticky' : ''}`}>\n\t\t\t\t\t\tNEW\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`locked--channel ${\n\t\t\t\t\t\t\toption.isLastSticky ? 'tag-sticky' : ''\n\t\t\t\t\t\t}  ${option.is2ndLastSticky ? 'tag-sticky-2' : ''}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tclassName={`sidebar-menu-item \n\t\t\t\t\t${mainActiveMenu?.key === option.key ? 'main-menu-active-class' : ''} \n\t\t\t\t\t${option.isLastSticky ? 'sticky-menu-int' : ''} \n\t\t\t\t\t${option.is2ndLastSticky ? 'sticky-menu' : ''} \n\t\t\t\t\t${option.key === hoveredComp?.key ? 'sidebar-menu-item-hover' : ''} \n\t\t\t\t\t${option.isNew ? 'new-menu-item' : ''}`}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key || option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"menu-item-container\">\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={`menu-item-text ${\n\t\t\t\t\t\t\t\toption?.key === mainActiveMenu?.key\n\t\t\t\t\t\t\t\t\t? 'active-menu-item-text'\n\t\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\t\t{option.displayName}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</SibeBarMenuItem>\n\t);\n};\n"],"names":["BikSidebar","bikSidebarProps","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","autoCloseTimer","setAutoCloseTimer","numberOfStickyOptions","useMemo","menu","useEffect","onClickMainMenuLogic","useCallback","option","setHandleHoverForFullLayout","clearRemnantTimers","top","determineElementTop","targetElement","topValue","calculateTopSideBarPosition","initiateAutoClose","targetRect","innerStickyElements","innerStickyElement","element","distanceToBottom","handleResize","newTop","determineSideMenuTopWhileResize","openSideMenuElementHeight","currentId","sideMenuRect","divBoxTop","popupHeight","timer","SideBarContainer","jsx","BikIcon","jsxs","MainSideBarMenuWrapper","index","Fragment","NavigationHyperlink","EachSidebarMenuItem","SidebarPopup","popupMenuSelected","SimpleSidebar","menuSelected","reDirect","SibeBarMenuItem","CircularProgressBar","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","hoverStateIcon","isHovered","Icon","ActiveIcon","HoverIcon","COLORS","LockedIcon"],"mappings":"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"}
+{"version":3,"file":"BikSidebar.js","sources":["../../../../src/components/bik-layout/BikSidebar.tsx"],"sourcesContent":["import BikIcon from '@src/assets/icons/Bik_logo.svg';\nimport LockedIcon from '@src/assets/icons/locked.svg';\nimport { Fragment, useCallback, useEffect, useMemo, useState } from 'react';\nimport React from 'react';\nimport CircularProgressBar from '@src/components/progress-bar/CircularProgressBar';\nimport { COLORS } from '@src/constants/Theme';\nimport { NavigationHyperlink } from '../navigation-hyperlink/NavigationHyperlink';\nimport { Menu } from './Sidebar.model';\nimport { SidebarPopup } from './SidebarPopup';\nimport {\n\tMainSideBarMenuWrapper,\n\tSibeBarMenuItem,\n\tSideBarContainer,\n} from './SidebarStyles';\nimport { SimpleSidebar } from './SimpleSidebar';\n\nexport interface MenuItem {\n\tkey: string | number;\n\tdisplayName: string;\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Main Icon element that is to display\n\tactiveIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; // Icon element to pass when the menu is active\n\thoverIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>; //Icon element to pass when the menu is hovered upon\n\tisLastSticky?: boolean; // to stick any menu at the end of the list\n\tis2ndLastSticky?: boolean; // to stick any menu at 2nd last end of list\n\tchildren?: Menu[];\n\tshowAccessUpgradePanel?: boolean;\n\tpath?: string;\n\tlayout?: 'fullScreen' | 'popup' | string | undefined;\n\tisNew?: boolean;\n\tisLocked?: boolean;\n}\n\nexport interface BikSidebarProps {\n\tlogoSvg?: JSX.Element;\n\tallMenuList: MenuItem[];\n\tactiveMainMenu: MenuItem;\n\tactiveSubMenu: Menu;\n\trouter: any;\n\tonClickingMainMenu: (menu: MenuItem) => void;\n\tonClickingSubMenu: (subMenu: Menu) => void;\n\tonClickingAccessUpgradePanel?: () => void;\n\tonClickingPopupMenuItem?: (menu: Menu) => void;\n\tpopupMinHeight?: number;\n\tisNewSidebar?: boolean;\n\tonboardingPercentage?: number;\n\tmenuStyle?: React.CSSProperties;\n}\n\ninterface GetSideBarMenuItemProps {\n\toption: MenuItem;\n\tindex: number;\n\tonClickMainMenuLogic: (option: MenuItem) => void;\n\tsetHandleHoverForFullLayout: (option: MenuItem) => void;\n\tisDisabled: boolean;\n\tsetHoveredComp: (comp: any) => void;\n\tsetPopupMenu: (menu: any) => void;\n\tmainActiveMenu: MenuItem | undefined;\n\thoveredComp: MenuItem | undefined;\n\tpopupMenu: MenuItem | undefined;\n}\n\nexport const BikSidebar: React.FC<BikSidebarProps> = (bikSidebarProps) => {\n\tconst {\n\t\tlogoSvg,\n\t\tallMenuList,\n\t\tactiveMainMenu,\n\t\tactiveSubMenu,\n\t\trouter,\n\t\tonClickingMainMenu,\n\t\tonClickingSubMenu,\n\t\tonClickingAccessUpgradePanel,\n\t\tonClickingPopupMenuItem,\n\t\tpopupMinHeight,\n\t\tisNewSidebar,\n\t\tmenuStyle,\n\t} = bikSidebarProps;\n\tconst [mainActiveMenu, setMainActiveMenu] =\n\t\tuseState<MenuItem>(activeMainMenu);\n\tconst [hoveredComp, setHoveredComp] = useState<MenuItem>();\n\tconst [subActiveMenu, setSubActiveMenu] = useState<Menu>(activeSubMenu);\n\tconst [isDisabled, setIsDisabled] = useState(false);\n\tconst [popupMenu, setPopupMenu] = useState<MenuItem>();\n\tconst [popupMenuTop, setPopupMenuTop] = useState<number>();\n\tconst [sidebarEachMenuTop, setSidebarEachMenuTop] = useState<number>();\n\tconst [autoCloseTimer, setAutoCloseTimer] = useState<NodeJS.Timeout | null>(\n\t\tnull,\n\t);\n\tconst numberOfStickyOptions = useMemo(\n\t\t() =>\n\t\t\tallMenuList.filter((menu) => menu.is2ndLastSticky || menu.isLastSticky)\n\t\t\t\t.length,\n\t\t[allMenuList],\n\t);\n\n\tuseEffect(() => {\n\t\tsetMainActiveMenu(activeMainMenu);\n\t}, [activeMainMenu]);\n\n\tuseEffect(() => {\n\t\tsetSubActiveMenu(activeSubMenu);\n\t}, [activeSubMenu]);\n\n\tconst onClickMainMenuLogic = useCallback(\n\t\t(option: MenuItem) => {\n\t\t\tif (option?.layout === 'popup') {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tsetPopupMenu(undefined);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetIsDisabled(true);\n\t\t\tsetMainActiveMenu(option);\n\t\t\tif (!option.path) {\n\t\t\t\tonClickingMainMenu(option);\n\t\t\t}\n\t\t\toption?.children?.length\n\t\t\t\t? setSubActiveMenu(option?.children[0])\n\t\t\t\t: setSubActiveMenu({} as Menu);\n\t\t\tsetHoveredComp(undefined);\n\t\t\tsetTimeout(() => {\n\t\t\t\tsetIsDisabled(false);\n\t\t\t}, 1000);\n\t\t},\n\t\t[onClickingMainMenu],\n\t);\n\n\tconst setHandleHoverForFullLayout = useCallback((option: MenuItem) => {\n\t\tclearRemnantTimers();\n\t\tsetHoveredComp(undefined);\n\t\tsetPopupMenu(undefined);\n\t\tif (option?.layout == 'popup') {\n\t\t\tconst top = determineElementTop();\n\t\t\ttop && setPopupMenuTop(top);\n\t\t\tsetPopupMenu(option);\n\t\t} else {\n\t\t\tconst targetElement = document.getElementById(\n\t\t\t\toption.displayName?.split(' ')?.join('') || option.key.toString(),\n\t\t\t);\n\t\t\tif (targetElement) {\n\t\t\t\tconst topValue = calculateTopSideBarPosition(targetElement);\n\t\t\t\tsetSidebarEachMenuTop(topValue);\n\t\t\t}\n\t\t\tsetHoveredComp(option);\n\t\t\tinitiateAutoClose();\n\t\t}\n\t}, []);\n\tconst calculateTopSideBarPosition = (targetElement: HTMLElement) => {\n\t\tconst targetRect = targetElement.getBoundingClientRect();\n\t\tlet topValue = targetRect.top;\n\t\tconst innerStickyElements = targetElement.querySelectorAll('div');\n\t\tlet innerStickyElement = null as HTMLElement | null;\n\t\tconst innerHeight = window.innerHeight;\n\t\tif (innerHeight <= 768) {\n\t\t\treturn topValue;\n\t\t}\n\t\tinnerStickyElements.forEach((element) => {\n\t\t\tif (element.className.includes('sticky')) {\n\t\t\t\tinnerStickyElement = element;\n\t\t\t}\n\t\t});\n\t\tif (innerStickyElement) {\n\t\t\tconst windowHeight = window.innerHeight;\n\t\t\tconst distanceToBottom = windowHeight - targetRect.bottom;\n\t\t\ttopValue = targetRect.top + distanceToBottom - 200; // sample height for lower elements\n\t\t}\n\t\treturn topValue;\n\t};\n\n\tuseEffect(() => {\n\t\tconst handleResize = () => {\n\t\t\tconst newTop = determineElementTop();\n\t\t\tnewTop && setPopupMenuTop(newTop);\n\t\t\tdetermineSideMenuTopWhileResize();\n\t\t};\n\t\twindow.addEventListener('resize', handleResize);\n\t\treturn () => {\n\t\t\twindow.removeEventListener('resize', handleResize);\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\tconst determineSideMenuTopWhileResize = () => {\n\t\tconst openSideMenuElement = document.getElementById('_sub-menu');\n\t\tconst openSideMenuElementHeight =\n\t\t\topenSideMenuElement?.getBoundingClientRect().height;\n\t\tif (openSideMenuElementHeight) {\n\t\t\tsetSidebarEachMenuTop(window.innerHeight - openSideMenuElementHeight);\n\t\t}\n\t};\n\tconst determineElementTop = () => {\n\t\tif (popupMenu) {\n\t\t\tconst currentId =\n\t\t\t\tpopupMenu.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\tpopupMenu.key.toString() + '_sub';\n\n\t\t\tconst targetElement = document.getElementById(currentId);\n\t\t\tif (targetElement) {\n\t\t\t\tconst sideMenuRect = targetElement.getBoundingClientRect();\n\t\t\t\tlet divBoxTop = sideMenuRect.top;\n\t\t\t\tconst popupHeight = popupMinHeight ?? 320;\n\t\t\t\tif (sideMenuRect.bottom + popupHeight > window.innerHeight) {\n\t\t\t\t\tdivBoxTop -= sideMenuRect.bottom + popupHeight - window.innerHeight;\n\t\t\t\t}\n\t\t\t\treturn divBoxTop;\n\t\t\t}\n\t\t\treturn null;\n\t\t}\n\t};\n\n\tconst initiateAutoClose = () => {\n\t\tclearRemnantTimers();\n\t\tconst timer = setTimeout(() => setHoveredComp(undefined), 10000); // 10-second delay\n\t\tsetAutoCloseTimer(timer);\n\t};\n\n\tconst clearRemnantTimers = () => {\n\t\tclearTimeout(autoCloseTimer!);\n\t};\n\n\treturn (\n\t\t<SideBarContainer>\n\t\t\t<div\n\t\t\t\tclassName=\"bik-header-logo\"\n\t\t\t\tonClick={() => undefined}\n\t\t\t\tonKeyDown={() => undefined}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{logoSvg ? logoSvg : <BikIcon />}\n\t\t\t</div>\n\t\t\t<MainSideBarMenuWrapper style={menuStyle}>\n\t\t\t\t{allMenuList?.map((option, index) => (\n\t\t\t\t\t<Fragment key={index}>\n\t\t\t\t\t\t{option.path ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={option.path} router={router}>\n\t\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<EachSidebarMenuItem\n\t\t\t\t\t\t\t\toption={option}\n\t\t\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\t\t\tonClickMainMenuLogic={onClickMainMenuLogic}\n\t\t\t\t\t\t\t\tsetHandleHoverForFullLayout={setHandleHoverForFullLayout}\n\t\t\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\t\t\tsetHoveredComp={setHoveredComp}\n\t\t\t\t\t\t\t\tsetPopupMenu={setPopupMenu}\n\t\t\t\t\t\t\t\tmainActiveMenu={mainActiveMenu}\n\t\t\t\t\t\t\t\thoveredComp={hoveredComp}\n\t\t\t\t\t\t\t\tpopupMenu={popupMenu}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{option.layout === 'popup' && popupMenu?.children?.length && (\n\t\t\t\t\t\t\t\t<SidebarPopup\n\t\t\t\t\t\t\t\t\ttop={popupMenuTop ?? undefined}\n\t\t\t\t\t\t\t\t\tmenuList={popupMenu?.children}\n\t\t\t\t\t\t\t\t\tonClickingPopupMenu={(popupMenuSelected) => {\n\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem &&\n\t\t\t\t\t\t\t\t\t\t\tonClickingPopupMenuItem(popupMenuSelected);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => setPopupMenu(undefined)}\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{hoveredComp?.children?.length && (\n\t\t\t\t\t\t\t\t<SimpleSidebar\n\t\t\t\t\t\t\t\t\tmenuList={hoveredComp?.children}\n\t\t\t\t\t\t\t\t\tactiveMenu={subActiveMenu}\n\t\t\t\t\t\t\t\t\tonMouseEnterOnMenu={() => clearRemnantTimers()}\n\t\t\t\t\t\t\t\t\tonMouseLeaveOnMenu={() => {\n\t\t\t\t\t\t\t\t\t\tclearRemnantTimers();\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tleft={isNewSidebar ? 92 : 88}\n\t\t\t\t\t\t\t\t\tpostion={'fixed'}\n\t\t\t\t\t\t\t\t\theader={hoveredComp.displayName}\n\t\t\t\t\t\t\t\t\ttheme={'brand'}\n\t\t\t\t\t\t\t\t\trouter={router}\n\t\t\t\t\t\t\t\t\tshowAccessUpgradePanel={hoveredComp.showAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\tonMenuClick={(menuSelected, reDirect) => {\n\t\t\t\t\t\t\t\t\t\tsetSubActiveMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t\tsetMainActiveMenu(hoveredComp);\n\t\t\t\t\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t\t\t\t\t\treDirect && onClickingSubMenu(menuSelected);\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\tonUpgrade={onClickingAccessUpgradePanel}\n\t\t\t\t\t\t\t\t\ttop={\n\t\t\t\t\t\t\t\t\t\tisNewSidebar\n\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t? sidebarEachMenuTop\n\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisNewSidebar={isNewSidebar}\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</Fragment>\n\t\t\t\t))}\n\t\t\t\t{typeof bikSidebarProps.onboardingPercentage === 'number' && (\n\t\t\t\t\t<SibeBarMenuItem>\n\t\t\t\t\t\t<div className=\"main--sidebar\">\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tid={'bik-onboarding__checklist'}\n\t\t\t\t\t\t\t\tclassName={`sidebar-menu-item ${\n\t\t\t\t\t\t\t\t\tnumberOfStickyOptions === 0\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu'\n\t\t\t\t\t\t\t\t\t\t: numberOfStickyOptions === 1\n\t\t\t\t\t\t\t\t\t\t? 'sticky-menu-int'\n\t\t\t\t\t\t\t\t\t\t: 'sticky-menu-three'\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<CircularProgressBar\n\t\t\t\t\t\t\t\t\tpercentage={bikSidebarProps.onboardingPercentage}\n\t\t\t\t\t\t\t\t\twidth={48}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</SibeBarMenuItem>\n\t\t\t\t)}\n\t\t\t</MainSideBarMenuWrapper>\n\t\t</SideBarContainer>\n\t);\n};\n\nconst IconComponent: React.FC<{\n\ticon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisActive: boolean;\n\tactiveStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\thoverStateIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tisHovered: boolean;\n}> = (iconComponentProps) => {\n\tconst { icon, isActive, activeStateIcon, hoverStateIcon, isHovered } =\n\t\ticonComponentProps;\n\tconst Icon = icon;\n\tconst ActiveIcon = activeStateIcon;\n\tconst HoverIcon = hoverStateIcon;\n\treturn (\n\t\t<>\n\t\t\t{isActive ? (\n\t\t\t\t<ActiveIcon width={20} height={20} />\n\t\t\t) : isHovered ? (\n\t\t\t\t<HoverIcon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t) : (\n\t\t\t\t<Icon width={20} height={20} color={COLORS.surface.standard} />\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSidebarMenuItem: React.FC<GetSideBarMenuItemProps> = ({\n\toption,\n\tindex,\n\tonClickMainMenuLogic,\n\tsetHandleHoverForFullLayout,\n\tisDisabled,\n\tsetHoveredComp,\n\tsetPopupMenu,\n\tmainActiveMenu,\n\thoveredComp,\n\tpopupMenu,\n}) => {\n\treturn (\n\t\t<SibeBarMenuItem>\n\t\t\t<div\n\t\t\t\tid={option.displayName?.split(' ')?.join('') || option.key.toString()}\n\t\t\t\tclassName=\"main--sidebar\"\n\t\t\t\tkey={index}\n\t\t\t\tonClick={() => onClickMainMenuLogic(option)}\n\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseOver={() => {\n\t\t\t\t\t!isDisabled && setHandleHoverForFullLayout(option);\n\t\t\t\t}}\n\t\t\t\tonMouseLeave={() => {\n\t\t\t\t\tif (!option?.children?.length) {\n\t\t\t\t\t\tsetHoveredComp(undefined);\n\t\t\t\t\t\tsetPopupMenu(undefined);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonFocus={() => {}}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t{option.isNew && (\n\t\t\t\t\t<div className={`new-tag ${option.isLastSticky ? 'tag-sticky' : ''}`}>\n\t\t\t\t\t\tNEW\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t{option.isLocked && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={`locked--channel ${\n\t\t\t\t\t\t\toption.isLastSticky ? 'tag-sticky' : ''\n\t\t\t\t\t\t}  ${option.is2ndLastSticky ? 'tag-sticky-2' : ''}`}\n\t\t\t\t\t>\n\t\t\t\t\t\t<LockedIcon height={16} width={16} />\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tkey={index}\n\t\t\t\t\tid={\n\t\t\t\t\t\toption.displayName?.split(' ')?.join('') + '_sub' ||\n\t\t\t\t\t\toption.key.toString() + '_sub'\n\t\t\t\t\t}\n\t\t\t\t\tclassName={`sidebar-menu-item \n\t\t\t\t\t${mainActiveMenu?.key === option.key ? 'main-menu-active-class' : ''} \n\t\t\t\t\t${option.isLastSticky ? 'sticky-menu-int' : ''} \n\t\t\t\t\t${option.is2ndLastSticky ? 'sticky-menu' : ''} \n\t\t\t\t\t${option.key === hoveredComp?.key ? 'sidebar-menu-item-hover' : ''} \n\t\t\t\t\t${option.isNew ? 'new-menu-item' : ''}`}\n\t\t\t\t>\n\t\t\t\t\t<IconComponent\n\t\t\t\t\t\ticon={option.icon}\n\t\t\t\t\t\tisActive={option.key == mainActiveMenu?.key}\n\t\t\t\t\t\tactiveStateIcon={\n\t\t\t\t\t\t\toption.activeIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\thoverStateIcon={\n\t\t\t\t\t\t\toption.hoverIcon ??\n\t\t\t\t\t\t\t({} as React.FunctionComponent<React.SVGAttributes<SVGElement>>)\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisHovered={\n\t\t\t\t\t\t\toption.key == hoveredComp?.key || option.key == popupMenu?.key\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"menu-item-container\">\n\t\t\t\t\t\t<p\n\t\t\t\t\t\t\tclassName={`menu-item-text ${\n\t\t\t\t\t\t\t\toption?.key === mainActiveMenu?.key\n\t\t\t\t\t\t\t\t\t? 'active-menu-item-text'\n\t\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\t\t{option.displayName}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</SibeBarMenuItem>\n\t);\n};\n"],"names":["BikSidebar","bikSidebarProps","logoSvg","allMenuList","activeMainMenu","activeSubMenu","router","onClickingMainMenu","onClickingSubMenu","onClickingAccessUpgradePanel","onClickingPopupMenuItem","popupMinHeight","isNewSidebar","menuStyle","mainActiveMenu","setMainActiveMenu","useState","hoveredComp","setHoveredComp","subActiveMenu","setSubActiveMenu","isDisabled","setIsDisabled","popupMenu","setPopupMenu","popupMenuTop","setPopupMenuTop","sidebarEachMenuTop","setSidebarEachMenuTop","autoCloseTimer","setAutoCloseTimer","numberOfStickyOptions","useMemo","menu","useEffect","onClickMainMenuLogic","useCallback","option","setHandleHoverForFullLayout","clearRemnantTimers","top","determineElementTop","targetElement","topValue","calculateTopSideBarPosition","initiateAutoClose","targetRect","innerStickyElements","innerStickyElement","element","distanceToBottom","handleResize","newTop","determineSideMenuTopWhileResize","openSideMenuElementHeight","currentId","sideMenuRect","divBoxTop","popupHeight","timer","SideBarContainer","jsx","BikIcon","jsxs","MainSideBarMenuWrapper","index","Fragment","NavigationHyperlink","EachSidebarMenuItem","SidebarPopup","popupMenuSelected","SimpleSidebar","menuSelected","reDirect","SibeBarMenuItem","CircularProgressBar","IconComponent","iconComponentProps","icon","isActive","activeStateIcon","hoverStateIcon","isHovered","Icon","ActiveIcon","HoverIcon","COLORS","LockedIcon"],"mappings":"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"}

package/dist/cjs/components/bik-layout/CommonStyles.js

@@ -81,7 +81,7 @@
 	z-index: 10;
 `,x=o.default.div`
 	background-color: ${t.DEFAULT_THEME.colorsV2.surface.standard};
-	border-bottom: 1px solid #e0e0e0;
+	border-bottom: 0.5px solid #e0e0e0;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;

package/dist/cjs/components/bik-layout/CommonStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' | 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 1px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n   .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}
+{"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' | 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n      flex-grow: 0 !important;\n      flex-shrink: 0 !important;\n      flex-basis: calc(100vh - 56px) !important;\n      overflow: scroll;\n    `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 0.5px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n   .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}

package/dist/cjs/components/button/Button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),G=require("../spinner/Spinner.js"),M=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=M(u),S=u.forwardRef(({version:e,id:v,buttonType:n="primary",size:s="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const F=i.GetButtonTextComponent(s,n,a),B=i.getButtonIconColor(s,n,c,a,l,f),o=u.useCallback(()=>{const N=s==="chip"||s==="xs"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[s,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:s,buttonType:n,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[n.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(G.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(n,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(F,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),y=require("./Button.styled.js"),i=require("./themes.js"),F=require("../spinner/Spinner.js"),G=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=G(u),S=u.forwardRef(({version:e,id:v,buttonType:s="primary",size:n="small",buttonText:m,disabled:a,IconComponent:x,LeadingIcon:h,TrailingIcon:j,isLoading:l,inverse:c,onClick:q,matchParentWidth:C,subtitle:E,darkMode:f,activated:R,error:_,buttonTextColor:g,buttonFontSize:k,customIconColor:r,buttonColor:w,LeadingIconStyles:D,...p},P)=>{const z=i.GetButtonTextComponent(n,s,a),B=i.getButtonIconColor(n,s,c,a,l,f),o=u.useCallback(()=>{const N=n==="chip"?16:20;return{height:N,width:N,color:r||B,style:{display:"block"},className:"icon"}},[n,r,B]);return t.jsx(y.Button,{"data-test":p["data-test"],version:e,onClick:l?()=>{}:q,ref:P,id:v,disabled:a,size:n,buttonType:s,isLoading:l,inverse:c,matchParentWidth:C,darkMode:f,activated:R,error:_,buttonColor:w,...p,children:t.jsxs("div",{className:"button-container",children:[s.startsWith("dash")&&t.jsx(y.ButtonCustomDashedBorder,{}),t.jsx("div",{className:"overlay-container",children:l&&t.jsx(F.Spinner,{className:"spinner",size:"small",color:i.SpinnerColorMap(s,c)})}),x&&t.jsx("div",{className:"icon-component",children:d.default.createElement(x,o())}),h&&t.jsx("div",{className:"icon-leading",style:{zIndex:1,...D},children:d.default.createElement(h,o())}),m?t.jsxs(z,{className:"text",style:{color:g,fontSize:k},children:[m,t.jsx("div",{className:"text-subtitle",children:E})]}):t.jsx(t.Fragment,{}),j&&t.jsx("div",{className:"icon-trailing",style:{zIndex:1},children:d.default.createElement(j,o())})]})})});S.displayName="Button";exports.Button=S;
 //# sourceMappingURL=Button.js.map

package/dist/cjs/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' || size === 'xs' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\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{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,QAAUA,IAAS,KAAO,GAAK,GACzD,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\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{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"mSAWaA,EAASC,EAAAA,WACrB,CACC,CACC,QAAAC,EACA,GAAAC,EACA,WAAAC,EAAa,UACb,KAAAC,EAAO,QACP,WAAAC,EACA,SAAAC,EACA,cAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAC,EACA,QAAAC,EACA,QAAAC,EACA,iBAAAC,EACA,SAAAC,EACA,SAAAC,EACA,UAAAC,EACA,MAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,gBAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAoBC,EAAAA,uBACzBtB,EACAD,EACAG,CAAA,EAGKqB,EAAYC,EAAAA,mBACjBxB,EACAD,EACAQ,EACAL,EACAI,EACAK,CAAA,EAGKc,EAAeC,EAAAA,YAAY,IAAM,CACtC,MAAMC,EAAW3B,IAAS,OAAS,GAAK,GACxC,MAAO,CACN,OAAQ2B,EACR,MAAOA,EACP,MAAOX,GAAoCO,EAC3C,MAAO,CAAE,QAAS,OAAA,EAClB,UAAW,MAAA,CAEb,EAAG,CAACvB,EAAMgB,EAAiBO,CAAS,CAAC,EAErC,OACCK,EAAAA,IAACC,EAAAA,OAAA,CACA,YAAWV,EAAK,WAAW,EAC3B,QAAAtB,EACA,QACCS,EACG,IAAM,CAEN,EACAE,EAEJ,IAAAY,EACA,GAAAtB,EACA,SAAAI,EACA,KAAAF,EACA,WAAAD,EACA,UAAAO,EACA,QAAAC,EACA,iBAAAE,EACA,SAAAE,EACA,UAAAC,EACA,MAAAC,EACA,YAAAI,EACC,GAAGE,EAEJ,SAAAW,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA/B,EAAW,WAAW,MAAM,GAAK6B,EAAAA,IAACG,EAAAA,yBAAA,CAAA,CAA4B,EAC/DH,EAAAA,IAAC,MAAA,CAAI,UAAU,oBACb,SAAAtB,GACAsB,EAAAA,IAACI,EAAAA,QAAA,CACA,UAAU,UACV,KAAK,QACL,MAAOC,EAAAA,gBAAgBlC,EAAYQ,CAAO,CAAA,CAAA,EAG7C,EACCJ,GACAyB,EAAAA,IAAC,MAAA,CAAI,UAAU,iBACb,mBAAM,cAAczB,EAAesB,EAAA,CAAc,CAAA,CACnD,EAEArB,GACAwB,EAAAA,IAAC,MAAA,CACA,UAAU,eACV,MAAO,CAAE,OAAQ,EAAG,GAAGV,CAAA,EAEtB,SAAAgB,EAAAA,QAAM,cAAc9B,EAAaqB,EAAA,CAAc,CAAA,CAAA,EAGjDxB,EACA6B,EAAAA,KAACT,EAAA,CACA,UAAU,OACV,MAAO,CACN,MAAOP,EACP,SAAUC,CAAA,EAGV,SAAA,CAAAd,EACD2B,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAiB,SAAAlB,CAAA,CAAS,CAAA,CAAA,CAAA,EAG1CkB,EAAAA,IAAAO,EAAAA,SAAA,EAAE,EAEF9B,GACAuB,EAAAA,IAAC,MAAA,CAAI,UAAU,gBAAgB,MAAO,CAAE,OAAQ,CAAA,EAC9C,SAAAM,EAAAA,QAAM,cAAc7B,EAAcoB,EAAA,CAAc,CAAA,CAClD,CAAA,CAAA,CAEF,CAAA,CAAA,CAGH,CACD,EAEA9B,EAAO,YAAc"}

package/dist/cjs/components/button/Button.styled.js

@@ -1,6 +1,5 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),l=d.default.button`
 	all: unset;
-	outline: none;
 	cursor: pointer;
 	display: flex;
 	gap: 8.83px;
@@ -21,13 +20,13 @@
 	${e.getBorder(t.version??"1.0",t.buttonType,t.size,t.inverse,t.error)}`}
 
 	.icon-component {
-		height: ${t=>t.size==="chip"||t.size==="xs"?"16px":"20px"};
-		width: ${t=>t.size==="chip"||t.size==="xs"?"16px":"20px"};
+		height: ${t=>t.size==="chip"?"16px":"20px"};
+		width: ${t=>t.size==="chip"?"16px":"20px"};
 	}
 
 	.icon-trailing {
-		height: ${t=>t.size==="chip"||t.size==="xs"?"16px":"20px"};
-		width: ${t=>t.size==="chip"||t.size==="xs"?"16px":"20px"};
+		height: ${t=>t.size==="chip"?"16px":"20px"};
+		width: ${t=>t.size==="chip"?"16px":"20px"};
 	}
 
 	.text {
@@ -35,8 +34,8 @@
 	}
 
 	.icon-leading {
-		height: ${t=>t.size==="chip"||t.size==="xs"?"16px":"20px"};
-		width: ${t=>t.size==="chip"||t.size==="xs"?"16px":"20px"};
+		height: ${t=>t.size==="chip"?"16px":"20px"};
+		width: ${t=>t.size==="chip"?"16px":"20px"};
 	}
 
 	${t=>e.getDashedBorderStyling(t.buttonType,t.size,t.isLoading?n.COLORS.stroke.brandLightAlt:t.error?n.COLORS.stroke.negative.vibrant:void 0)}
@@ -116,19 +115,21 @@
 			${t.buttonColor?`background-color: ${e.getLoadingButtonBackgroundCustom(t.buttonColor,15)};`:""}
 			padding: ${e.getPadding(t.buttonType,t.size)};
 			.overlay-container {
-				display: flex;
-				align-items: center;
-				justify-content: center;
+				display: block;
 				position: absolute;
 				padding: 0;
+				padding-top: 1px;
 				top: 0;
 				left: 0;
 				width: 100%;
 				height: 100%;
 				${e.getLoadingBackground(t.buttonType,t.size,t.inverse,t.buttonColor)}
 				.spinner {
-					line-height: 0;
+					position: absolute;
+					top: calc(50% - 14px);
+					left: calc(50% - 7px);
 				}
+
 			}
 		}`:`:not(:active):not(:disabled):hover {
 			padding: 0;
@@ -150,8 +151,7 @@
 					${e.getHoverButtonBackground(t.buttonType,t.inverse)}
 				}
 				${t.size==="chip"&&t.buttonType!=="text"?t.darkMode?`background-color: ${n.COLORS.stroke.primary};`:`background-color: ${n.COLORS.surface.hovered};`:""}
-				${t.buttonType==="special"?`background-color: ${n.COLORS.background.brandLight};`:t.buttonType==="secondaryGray"?`background-color: ${n.COLORS.surface.hovered};`:""}
-				${t.buttonType==="primary"&&t.size!=="chip"&&t.size!=="xs"&&!t.inverse&&!t.buttonColor?`background-color: ${n.COLORS.background.inverse};`:""}
+				${t.buttonType==="primary"&&t.size!=="chip"&&!t.inverse&&!t.buttonColor?`background-color: ${n.COLORS.background.inverse};`:""}
 			}
 			${t.buttonType==="text"?e.getHoverButtonTextDecorationStyle(t.buttonType,t.disabled):""}
 			${t.inverse?e.generateInverseHoverBackground(t.buttonType,t.disabled):""}