@bikdotai/bik-component-library 0.0.826 → 0.0.828

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

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

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

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

package/dist/cjs/components/switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { SwitchColorProps, SwitchProps } from './Switch.d';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n\t({\n\t\tcustomThumbColor,\n\t\ttrackColor,\n\t\ttrackHeight,\n\t\ttrackLength,\n\t\tdisabled,\n\t\tvalue: propsValue,\n\t\tonValueChange,\n\t\tduration,\n\t\tcontainerStyle,\n\t\ttype,\n\t\tisLoading,\n\t\t'data-test': dataTest,\n\t}) => {\n\t\tconst { colorsV2 } = DEFAULT_THEME;\n\n\t\tconst [value, setValue] = useState<boolean>(propsValue);\n\n\t\tconst [isloading, setLoading] = useState<boolean>(isLoading ?? false);\n\t\tconst durationTime = duration ?? 200;\n\n\t\tuseEffect(() => {\n\t\t\tif (typeof isLoading == 'boolean') {\n\t\t\t\tsetLoading(isLoading);\n\t\t\t}\n\t\t}, [isLoading]);\n\n\t\tuseEffect(() => {\n\t\t\tsetValue(propsValue);\n\t\t}, [propsValue]);\n\n\t\tconst consolidatedTrackColor: SwitchColorProps = disabled\n\t\t\t? {\n\t\t\t\t\tfalse: colorsV2.background.inactive,\n\t\t\t\t\ttrue: colorsV2.background.inactive,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttrackColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.negative.light\n\t\t\t\t\t\t\t: colorsV2.background.base,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttrackColor?.true ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t\t\t: colorsV2.background.brand,\n\t\t\t  };\n\n\t\tconst consolidatedBorderColor: SwitchColorProps = {\n\t\t\tfalse:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\ttrue:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t: colorsV2.background.brand,\n\t\t};\n\n\t\tconst consolidatedThumbColor: SwitchColorProps = disabled\n\t\t\t? { false: colorsV2.content.inactive, true: colorsV2.content.inactive }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\tcustomThumbColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.content.negative\n\t\t\t\t\t\t\t: colorsV2.text.primary,\n\t\t\t\t\ttrue: customThumbColor?.true ?? colorsV2.surface.standard,\n\t\t\t  };\n\n\t\tconst consolidateOutlineColor: SwitchColorProps = !type\n\t\t\t? { false: colorsV2.stroke.primary, true: colorsV2.stroke.primary }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.positive.lightAlt\n\t\t\t\t\t\t\t: colorsV2.background.brandLight,\n\t\t\t  };\n\n\t\tasync function handlePress() {\n\t\t\tif (disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(true);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait onValueChange?.(!value);\n\t\t\t\tsetValue(!value);\n\t\t\t} catch (err) {\n\t\t\t\tconsole.log(err);\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tdata-test={dataTest}\n\t\t\t\t\ttrackLength={trackLength ?? 40}\n\t\t\t\t\ttrackHeight={trackHeight ?? 20}\n\t\t\t\t\tonClick={() => handlePress()}\n\t\t\t\t\ttrackColor={consolidatedTrackColor}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t\tborderColor={consolidatedBorderColor}\n\t\t\t\t\tduration={durationTime}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\toutlineColor={consolidateOutlineColor}\n\t\t\t\t>\n\t\t\t\t\t{isloading ? (\n\t\t\t\t\t\t<Loader value={value} trackColor={consolidatedTrackColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tduration={durationTime}\n\t\t\t\t\t\t\tthumbColor={consolidatedThumbColor}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SwitchContainer>\n\t\t\t</>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport const SwitchContainer = styled.div<{\n\ttrackLength: number;\n\ttrackHeight: number;\n\ttrackColor: SwitchColorProps;\n\tvalue: boolean;\n\tborderColor: SwitchColorProps;\n\tduration: number;\n\tdisabled?: boolean;\n\toutlineColor: SwitchColorProps;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin-top: 5px;\n\tmargin-bottom: 5px;\n\tborder-radius: 30px;\n\tbackground-color: red;\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\twidth: ${(props) => props.trackLength + 'px'};\n\theight: ${(props) => props.trackHeight + 'px'};\n\tborder-width: ${(props) => (props.disabled ? '0px' : '1px')};\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.borderColor.true : props.borderColor.false};\n\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\talign-items: center;\n\tcursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n\t:focus {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n\t:active {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n`;\n\nexport const Thumb = styled.div<{\n\tvalue: boolean;\n\tduration: number;\n\tthumbColor: SwitchColorProps;\n}>`\n\theight: 12px;\n\twidth: 12px;\n\tmargin: 4px;\n\tborder-radius: 8px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.thumbColor.true : props.thumbColor.false};\n`;\n\nexport const Loader = styled.div<{\n\tvalue: boolean;\n\ttrackColor: SwitchColorProps;\n}>`\n\tborder-width: 2px;\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\tborder-top-width: 2px;\n\tborder-top-style: solid;\n\tborder-top-color: ${(props) =>\n\t\tprops.value ? COLORS.text.white : COLORS.background.brand};\n\tborder-radius: 50%;\n\theight: 8px;\n\twidth: 8px;\n\tmargin: 4px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\tanimation: spin 1s linear infinite;\n\t@keyframes spin {\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`;\n"],"names":["Switch","forwardRef","customThumbColor","trackColor","trackHeight","trackLength","disabled","propsValue","onValueChange","duration","containerStyle","type","isLoading","dataTest","colorsV2","DEFAULT_THEME","value","setValue","useState","isloading","setLoading","durationTime","useEffect","consolidatedTrackColor","consolidatedBorderColor","consolidatedThumbColor","consolidateOutlineColor","handlePress","err","jsx","Fragment","SwitchContainer","Loader","Thumb","styled","props","COLORS"],"mappings":"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"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { SwitchColorProps, SwitchProps } from './Switch.type';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n\t({\n\t\tcustomThumbColor,\n\t\ttrackColor,\n\t\ttrackHeight,\n\t\ttrackLength,\n\t\tdisabled,\n\t\tvalue: propsValue,\n\t\tonValueChange,\n\t\tduration,\n\t\tcontainerStyle,\n\t\ttype,\n\t\tisLoading,\n\t\t'data-test': dataTest,\n\t}) => {\n\t\tconst { colorsV2 } = DEFAULT_THEME;\n\n\t\tconst [value, setValue] = useState<boolean>(propsValue);\n\n\t\tconst [isloading, setLoading] = useState<boolean>(isLoading ?? false);\n\t\tconst durationTime = duration ?? 200;\n\n\t\tuseEffect(() => {\n\t\t\tif (typeof isLoading == 'boolean') {\n\t\t\t\tsetLoading(isLoading);\n\t\t\t}\n\t\t}, [isLoading]);\n\n\t\tuseEffect(() => {\n\t\t\tsetValue(propsValue);\n\t\t}, [propsValue]);\n\n\t\tconst consolidatedTrackColor: SwitchColorProps = disabled\n\t\t\t? {\n\t\t\t\t\tfalse: colorsV2.background.inactive,\n\t\t\t\t\ttrue: colorsV2.background.inactive,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttrackColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.negative.light\n\t\t\t\t\t\t\t: colorsV2.background.base,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttrackColor?.true ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t\t\t: colorsV2.background.brand,\n\t\t\t  };\n\n\t\tconst consolidatedBorderColor: SwitchColorProps = {\n\t\t\tfalse:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\ttrue:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t: colorsV2.background.brand,\n\t\t};\n\n\t\tconst consolidatedThumbColor: SwitchColorProps = disabled\n\t\t\t? { false: colorsV2.content.inactive, true: colorsV2.content.inactive }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\tcustomThumbColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.content.negative\n\t\t\t\t\t\t\t: colorsV2.text.primary,\n\t\t\t\t\ttrue: customThumbColor?.true ?? colorsV2.surface.standard,\n\t\t\t  };\n\n\t\tconst consolidateOutlineColor: SwitchColorProps = !type\n\t\t\t? { false: colorsV2.stroke.primary, true: colorsV2.stroke.primary }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.positive.lightAlt\n\t\t\t\t\t\t\t: colorsV2.background.brandLight,\n\t\t\t  };\n\n\t\tasync function handlePress() {\n\t\t\tif (disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(true);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait onValueChange?.(!value);\n\t\t\t\tsetValue(!value);\n\t\t\t} catch (err) {\n\t\t\t\tconsole.log(err);\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tdata-test={dataTest}\n\t\t\t\t\ttrackLength={trackLength ?? 40}\n\t\t\t\t\ttrackHeight={trackHeight ?? 20}\n\t\t\t\t\tonClick={() => handlePress()}\n\t\t\t\t\ttrackColor={consolidatedTrackColor}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t\tborderColor={consolidatedBorderColor}\n\t\t\t\t\tduration={durationTime}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\toutlineColor={consolidateOutlineColor}\n\t\t\t\t>\n\t\t\t\t\t{isloading ? (\n\t\t\t\t\t\t<Loader value={value} trackColor={consolidatedTrackColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tduration={durationTime}\n\t\t\t\t\t\t\tthumbColor={consolidatedThumbColor}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SwitchContainer>\n\t\t\t</>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport const SwitchContainer = styled.div<{\n\ttrackLength: number;\n\ttrackHeight: number;\n\ttrackColor: SwitchColorProps;\n\tvalue: boolean;\n\tborderColor: SwitchColorProps;\n\tduration: number;\n\tdisabled?: boolean;\n\toutlineColor: SwitchColorProps;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin-top: 5px;\n\tmargin-bottom: 5px;\n\tborder-radius: 30px;\n\tbackground-color: red;\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\twidth: ${(props) => props.trackLength + 'px'};\n\theight: ${(props) => props.trackHeight + 'px'};\n\tborder-width: ${(props) => (props.disabled ? '0px' : '1px')};\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.borderColor.true : props.borderColor.false};\n\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\talign-items: center;\n\tcursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n\t:focus {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n\t:active {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n`;\n\nexport const Thumb = styled.div<{\n\tvalue: boolean;\n\tduration: number;\n\tthumbColor: SwitchColorProps;\n}>`\n\theight: 12px;\n\twidth: 12px;\n\tmargin: 4px;\n\tborder-radius: 8px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.thumbColor.true : props.thumbColor.false};\n`;\n\nexport const Loader = styled.div<{\n\tvalue: boolean;\n\ttrackColor: SwitchColorProps;\n}>`\n\tborder-width: 2px;\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\tborder-top-width: 2px;\n\tborder-top-style: solid;\n\tborder-top-color: ${(props) =>\n\t\tprops.value ? COLORS.text.white : COLORS.background.brand};\n\tborder-radius: 50%;\n\theight: 8px;\n\twidth: 8px;\n\tmargin: 4px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\tanimation: spin 1s linear infinite;\n\t@keyframes spin {\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`;\n"],"names":["Switch","forwardRef","customThumbColor","trackColor","trackHeight","trackLength","disabled","propsValue","onValueChange","duration","containerStyle","type","isLoading","dataTest","colorsV2","DEFAULT_THEME","value","setValue","useState","isloading","setLoading","durationTime","useEffect","consolidatedTrackColor","consolidatedBorderColor","consolidatedThumbColor","consolidateOutlineColor","handlePress","err","jsx","Fragment","SwitchContainer","Loader","Thumb","styled","props","COLORS"],"mappings":"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"}

package/dist/cjs/components/tag/Tag.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),B=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),M=require("./model.js"),P=require("./Tag.styled.js"),D=require("./themes.js"),V=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},h=V(b),C=({tagText:o,LeadingIcon:u,TrailingIcon:j,onLeadingIconClicked:m=void 0,leadingIconId:s,trailingIconId:d,onTrailingIconClicked:T=void 0,theme:n="light",type:p="neutral",variant:c="regular",version:f,cursor:q,alignIcon:A,noBorder:E,tagHtmlText:a,contentPadding:_,leadingIconTooltip:g,trailingIconTooltip:N,tagColor:w,numberOfLines:l,backgroundColor:$,borderRadius:k,size:t="regular"})=>{let i=o;const R=n;let x=p;M.ValidTagTypeMap[c][p]||(x="neutral"),c==="circle"&&typeof i=="number"&&i>99&&(i="99+");const S=D.getTagIconColor(n,x),y={height:c==="compressed"?12:16,width:c==="compressed"?12:16,color:S,style:{display:"block"}};return e.jsx(P.Tag,{cursor:q,theme:R,type:x,variant:c,version:f,alignIcon:A,noBorder:E,contentPadding:_,backgroundColor:$,borderRadius:k,size:t,children:e.jsxs("div",{className:"container",children:[u&&(g?e.jsx(B.Tooltip,{...g,children:e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})}):e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})),a&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:a}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:a}):t==="small"?e.jsx(r.BodyTiny,{className:"text",numberOfLines:l,children:a}):e.jsx(r.BodyCaption,{className:"text",numberOfLines:l,children:a})),!a&&i!==""&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:i}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:i}):t==="small"?e.jsx(r.BodyTiny,{className:"text",color:w,numberOfLines:l,children:i}):e.jsx(r.BodyCaption,{className:"text",color:w,numberOfLines:l,children:i})),j&&(N?e.jsx(B.Tooltip,{...N,children:e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})})}):e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})}))]})})};C.displayName="Tag";exports.Tag=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("react"),B=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),D=require("./model.js"),V=require("./Tag.styled.js"),v=require("./themes.js"),F=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},h=F(P),C=({tagText:o,LeadingIcon:u,TrailingIcon:j,onLeadingIconClicked:m=void 0,leadingIconId:s,trailingIconId:d,onTrailingIconClicked:T=void 0,theme:n="light",type:p="neutral",variant:c="regular",version:f,cursor:q,alignIcon:A,noBorder:E,tagHtmlText:a,contentPadding:_,padding:$,height:k,leadingIconTooltip:g,trailingIconTooltip:N,tagColor:w,numberOfLines:l,backgroundColor:R,borderRadius:S,size:t="regular"})=>{let i=o;const b=n;let x=p;D.ValidTagTypeMap[c][p]||(x="neutral"),c==="circle"&&typeof i=="number"&&i>99&&(i="99+");const M=v.getTagIconColor(n,x),y={height:c==="compressed"?12:16,width:c==="compressed"?12:16,color:M,style:{display:"block"}};return e.jsx(V.Tag,{cursor:q,theme:b,type:x,variant:c,version:f,alignIcon:A,noBorder:E,contentPadding:_,padding:$,height:k,backgroundColor:R,borderRadius:S,size:t,children:e.jsxs("div",{className:"container",children:[u&&(g?e.jsx(B.Tooltip,{...g,children:e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})}):e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})),a&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:a}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:a}):t==="small"?e.jsx(r.BodyTiny,{className:"text",numberOfLines:l,children:a}):e.jsx(r.BodyCaption,{className:"text",numberOfLines:l,children:a})),!a&&i!==""&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:i}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:i}):t==="small"?e.jsx(r.BodyTiny,{className:"text",color:w,numberOfLines:l,children:i}):e.jsx(r.BodyCaption,{className:"text",color:w,numberOfLines:l,children:i})),j&&(N?e.jsx(B.Tooltip,{...N,children:e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})})}):e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})}))]})})};C.displayName="Tag";exports.Tag=C;
 //# sourceMappingURL=Tag.js.map

package/dist/cjs/components/tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` || 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId || 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` || 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId || 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"4VAYaA,EAAM,CAAC,CACnB,QAAAC,EACA,YAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuB,OACvB,cAAAC,EACA,eAAAC,EACA,sBAAAC,EAAwB,OACxB,MAAAC,EAAQ,QACR,KAAAC,EAAO,UACP,QAAAC,EAAU,UACV,QAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,QAAAC,EACA,OAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,SACR,IAAgB,CACf,IAAIC,EAAiBzB,EACrB,MAAM0B,EAAenB,EACrB,IAAIoB,EAAcnB,EAEboB,EAAAA,gBAAgBnB,CAAO,EAAED,CAAI,IACjCmB,EAAc,WAGXlB,IAAY,UACX,OAAOgB,GAAmB,UAAYA,EAAiB,KAC1DA,EAAiB,OAInB,MAAMI,EAAYC,EAAAA,gBAAgBvB,EAAOoB,CAAW,EAC9CI,EAAY,CACjB,OAAQtB,IAAY,aAAe,GAAK,GACxC,MAAOA,IAAY,aAAe,GAAK,GACvC,MAAOoB,EACP,MAAO,CAAE,QAAS,OAAA,CAAQ,EAG3B,OACCG,EAAAA,IAACC,EAAAA,IAAA,CACA,OAAAtB,EACA,MAAOe,EACP,KAAMC,EACN,QAAAlB,EACA,QAAAC,EACA,UAAAE,EACA,SAAAC,EACA,eAAAE,EACA,QAAAC,EACA,OAAAC,EACA,gBAAAK,EACA,aAAAC,EACA,KAAAC,EAEA,SAAAU,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,CAAAjC,IACCiB,EACAc,MAACG,EAAAA,QAAA,CAAS,GAAGjB,EACZ,SAAAc,EAAAA,IAAC,SAAA,CACA,UAAU,eACV,QAAS7B,EACT,GAAI,GAAGC,CAAa,YAAc,uBAEjC,SAAAgC,EAAAA,QAAM,cAAcnC,EAAa,CACjC,GAAG8B,EACH,GAAI3B,GAAiB,cAAA,CACrB,CAAA,CAAA,EAEH,EAEA4B,EAAAA,IAAC,SAAA,CACA,UAAU,eACV,QAAS7B,EACT,GAAI,GAAGC,CAAa,YAAc,uBAEjC,SAAAgC,EAAAA,QAAM,cAAcnC,EAAa,CACjC,GAAG8B,EACH,GAAI3B,GAAiB,cAAA,CACrB,CAAA,CAAA,GAIHU,IACCN,IAAS,MAAQD,IAAU,QAC3BiB,IAAS,QACRQ,EAAAA,IAACK,EAAAA,WAAA,CAAW,cAAAhB,EACV,SAAAP,CAAA,CACF,QAECwB,EAAAA,cAAA,CAAc,cAAAjB,EACb,SAAAP,CAAA,CACF,EAEEU,IAAS,QACZQ,EAAAA,IAACO,EAAAA,SAAA,CAAS,UAAU,OAAO,cAAAlB,EACzB,SAAAP,CAAA,CACF,EAEAkB,EAAAA,IAACQ,EAAAA,YAAA,CAAY,UAAU,OAAO,cAAAnB,EAC5B,SAAAP,CAAA,CACF,GAGD,CAACA,GACDW,IAAmB,KAClBjB,IAAS,MAAQD,IAAU,QAC3BiB,IAAS,cACPa,EAAAA,WAAA,CAAW,cAAAhB,EACV,WACF,EAEAW,EAAAA,IAACM,EAAAA,eAAc,cAAAjB,EACb,SAAAI,CAAA,CACF,EAEED,IAAS,QACZQ,EAAAA,IAACO,EAAAA,SAAA,CACA,UAAU,OACV,MAAOnB,EACP,cAAAC,EAEC,SAAAI,CAAA,CAAA,EAGFO,EAAAA,IAACQ,EAAAA,YAAA,CACA,UAAU,OACV,MAAOpB,EACP,cAAAC,EAEC,SAAAI,CAAA,CAAA,GAIHvB,IACCiB,EACAa,MAACG,EAAAA,QAAA,CAAS,GAAGhB,EACZ,SAAAa,EAAAA,IAAC,SAAA,CACA,UAAU,gBACV,QAAS1B,EACT,GAAI,GAAGD,CAAc,YAAc,wBAElC,SAAA+B,EAAAA,QAAM,cAAclC,EAAc,CAClC,GAAG6B,EACH,GAAI1B,GAAkB,eAAA,CACtB,CAAA,CAAA,EAEH,EAEA2B,EAAAA,IAAC,SAAA,CACA,UAAU,gBACV,QAAS1B,EACT,GAAI,GAAGD,CAAc,YAAc,wBAElC,SAAA+B,EAAAA,QAAM,cAAclC,EAAc,CAClC,GAAG6B,EACH,GAAI1B,GAAkB,eAAA,CACtB,CAAA,CAAA,EACF,CAAA,CAEH,CAAA,CAAA,CAGH,EAEAN,EAAI,YAAc"}

package/dist/cjs/components/tag/Tag.styled.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),t=require("./themes.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=i(a),d=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("./themes.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},d=a(i),n=d.default.div`
 	cursor: ${e=>e.cursor??"default"};
 	${e=>e.size!=="small"&&(e.variant==="regular"?`display: block;
 		     min-height: 26px;
@@ -7,8 +7,8 @@
 		display: flex;
 		align-items: ${e=>e.alignIcon?e.alignIcon:"center"};
 		gap: 6px;
-		${e=>e.size==="small"?"height: 16px; box-sizing: border-box;":""}
-		padding: ${e=>e.size==="small"?"2px 6px":e.contentPadding?`${e.contentPadding}px`:t.getPadding(e.variant)};
+		${e=>e.height?`height: ${e.height}px; box-sizing: border-box;`:e.size==="small"?"height: 16px; box-sizing: border-box;":""}
+		padding: ${e=>e.padding?e.padding:e.size==="small"?"2px 6px":e.contentPadding?`${e.contentPadding}px`:t.getPadding(e.variant)};
 		background: ${e=>e.backgroundColor??t.getBackgroundColor(e.theme,e.type)};
 
 		border-radius: ${e=>e.borderRadius!==void 0?typeof e.borderRadius=="number"?`${e.borderRadius}px`:e.borderRadius:e.variant==="regular"?"4px":"12px"};
@@ -29,5 +29,5 @@
 			display: flex;
 		}
 	}
-`;exports.Tag=d;
+`;exports.Tag=n;
 //# sourceMappingURL=Tag.styled.js.map

package/dist/cjs/components/tag/Tag.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t     min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.size === 'small' ? 'height: 16px; box-sizing: border-box;' : ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":"6MASaA,EAAMC,EAAAA,QAAO;AAAA,WAadC,GAAUA,EAAM,QAAU,SAAS;AAAA,GAC3CA,GACFA,EAAM,OAAS,UACdA,EAAM,UAAY,UAChB;AAAA;AAAA,IAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGPA,GAAWA,EAAM,UAAYA,EAAM,UAAY,QAAS;AAAA;AAAA,IAErEA,GACFA,EAAM,OAAS,QAAU,wCAA0C,EAAE;AAAA,aAC1DA,GACXA,EAAM,OAAS,QACZ,UACAA,EAAM,eACN,GAAGA,EAAM,cAAc,KACvBC,EAAAA,WAAWD,EAAM,OAAO,CAAC;AAAA,gBACdA,GACdA,EAAM,iBAAmBE,EAAAA,mBAAmBF,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEnDA,GACjBA,EAAM,eAAiB,OACpB,OAAOA,EAAM,cAAiB,SAC7B,GAAGA,EAAM,YAAY,KACrBA,EAAM,aACPA,EAAM,UAAY,UAClB,MACA,MAAM;AAAA;AAAA,IAEPA,GACF,CAACA,EAAM,UACPA,EAAM,QAAU,SAChB,WAAWA,EAAM,UAAY,MAAQ,GAAM,CAAC,YAAYG,EAAAA,eACvDH,EAAM,KACNA,EAAM,KACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGMA,GAAUI,eAAaJ,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
+{"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string | number;\n\tsize?: 'regular' | 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t     min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":"6MASaA,EAAMC,EAAAA,QAAO;AAAA,WAedC,GAAUA,EAAM,QAAU,SAAS;AAAA,GAC3CA,GACFA,EAAM,OAAS,UACdA,EAAM,UAAY,UAChB;AAAA;AAAA,IAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGPA,GAAWA,EAAM,UAAYA,EAAM,UAAY,QAAS;AAAA;AAAA,IAErEA,GACFA,EAAM,OACH,WAAWA,EAAM,MAAM,8BACvBA,EAAM,OAAS,QACf,wCACA,EAAE;AAAA,aACMA,GACXA,EAAM,QACHA,EAAM,QACNA,EAAM,OAAS,QACf,UACAA,EAAM,eACN,GAAGA,EAAM,cAAc,KACvBC,EAAAA,WAAWD,EAAM,OAAO,CAAC;AAAA,gBACdA,GACdA,EAAM,iBAAmBE,EAAAA,mBAAmBF,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEnDA,GACjBA,EAAM,eAAiB,OACpB,OAAOA,EAAM,cAAiB,SAC7B,GAAGA,EAAM,YAAY,KACrBA,EAAM,aACPA,EAAM,UAAY,UAClB,MACA,MAAM;AAAA;AAAA,IAEPA,GACF,CAACA,EAAM,UACPA,EAAM,QAAU,SAChB,WAAWA,EAAM,UAAY,MAAQ,GAAM,CAAC,YAAYG,EAAAA,eACvDH,EAAM,KACNA,EAAM,KACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGMA,GAAUI,eAAaJ,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/tag/model.js.map

@@ -1 +1 @@
-{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}
+{"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' | 'dark';\n\nexport type TagVariant = 'regular' | 'circle' | 'compressed';\n\nexport type TagType =\n\t| 'negative'\n\t| 'warning'\n\t| 'positive'\n\t| 'neutral'\n\t| 'white'\n\t| 'purple'\n\t| 'blue'\n\t| 'grey'\n\t| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Set the theme of the Tag\n\t * @default default light\n\t */\n\ttheme?: TagTheme;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default neutral\n\t */\n\ttype?: TagType;\n\n\t/**\n\t * Set the color of the Tag\n\t * @default default regular\n\t */\n\tvariant?: TagVariant;\n\n\t/**\n\t * The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon id,\n\t * @default trailing-icon\n\t */\n\ttrailingIconId?: string;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * Tooltip props for the trailing icon\n\t * @default undefined\n\t */\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/**\n\t * The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t */\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/**\n\t * The right icon on click event, defaults to () => {}\n\t */\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/**\n\t * The left icon id,\n\t * @default leading-icon\n\t */\n\tleadingIconId?: string;\n\t/**\n\t * Tooltip props for the leading icon\n\t * @default undefined\n\t */\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string | number;\n\tversion?: '1.0' | '2.0' | '3.0';\n\t/** Custom CSS padding string, e.g. '4px 8px' */\n\tpadding?: string;\n\t/** Custom height in px */\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/**\n\t * Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t */\n\tbackgroundColor?: string;\n\t/**\n\t * Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t */\n\tborderRadius?: string | number;\n\t/**\n\t * Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' | 'small';\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}

package/dist/cjs/components/whats-new/WhatsNew.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),q=require("react"),S=require("./WhatsNewButton.js"),b=require("./WhatsNewPanel.js"),k=require("./WhatsNewProvider.js"),O=({title:a="What's new",tooltip:r="What's new",searchPlaceholder:c="Search posts",emptyStateTitle:h="Nothing new!",emptyStateDescription:u="There are no new updates or features at the moment. Check back soon!",noResultsText:i="Sorry, no results found.",width:w="480px",onContentClick:t,renderCustomContent:l,buttonTestId:d="whats-new-button",iconWidth:C=32,iconHeight:N=32,customIcon:W})=>{const[n,s]=q.useState(!1),{whatsNewContent:p,isLoading:o,newContentCount:f}=k.useWhatsNewContext(),x=()=>s(!0),g=()=>s(!1),j=m=>{t&&t(m)};return e.jsxs(e.Fragment,{children:[e.jsx(S.WhatsNewButton,{onClick:x,newContentCount:f,isOpen:n,isLoading:o,tooltip:r,testId:d,iconWidth:C,iconHeight:N,customIcon:W}),e.jsx(b.WhatsNewPanel,{isOpen:n,onClose:g,content:p,isLoading:o,title:a,searchPlaceholder:c,emptyStateTitle:h,emptyStateDescription:u,noResultsText:i,width:w,onContentClick:j,renderCustomContent:l})]})};exports.WhatsNew=O;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),k=require("./WhatsNewButton.js"),O=require("./WhatsNewPanel.js"),P=require("./WhatsNewProvider.js"),y=({title:a="What's new",tooltip:r="What's new",searchPlaceholder:c="Search posts",emptyStateTitle:h="Nothing new!",emptyStateDescription:u="There are no new updates or features at the moment. Check back soon!",noResultsText:i="Sorry, no results found.",width:w="480px",onContentClick:t,renderCustomContent:l,buttonTestId:d="whats-new-button",iconWidth:C=24,iconHeight:N=24,iconColor:W,iconPadding:p,customIcon:f})=>{const[n,s]=b.useState(!1),{whatsNewContent:x,isLoading:o,newContentCount:g}=P.useWhatsNewContext(),j=()=>s(!0),m=()=>s(!1),q=S=>{t&&t(S)};return e.jsxs(e.Fragment,{children:[e.jsx(k.WhatsNewButton,{onClick:j,newContentCount:g,isOpen:n,isLoading:o,tooltip:r,testId:d,iconWidth:C,iconHeight:N,iconColor:W,iconPadding:p,customIcon:f}),e.jsx(O.WhatsNewPanel,{isOpen:n,onClose:m,content:x,isLoading:o,title:a,searchPlaceholder:c,emptyStateTitle:h,emptyStateDescription:u,noResultsText:i,width:w,onContentClick:q,renderCustomContent:l})]})};exports.WhatsNew=y;
 //# sourceMappingURL=WhatsNew.js.map

package/dist/cjs/components/whats-new/WhatsNew.js.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 32,\n\ticonHeight = 32,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","handleOpen","handleClose","handleContentClick","contentItem","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel"],"mappings":"4OA0BaA,EAAoC,CAAC,CACjD,MAAAC,EAAQ,aACR,QAAAC,EAAU,aACV,kBAAAC,EAAoB,eACpB,gBAAAC,EAAkB,eAClB,sBAAAC,EAAwB,uEACxB,cAAAC,EAAgB,2BAChB,MAAAC,EAAQ,QACR,eAAAC,EACA,oBAAAC,EACA,aAAAC,EAAe,mBACf,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,WAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpC,CAAE,gBAAAC,EAAiB,UAAAC,EAAW,gBAAAC,CAAA,EAAoBC,EAAAA,mBAAA,EAElDC,EAAa,IAAMN,EAAU,EAAI,EACjCO,EAAc,IAAMP,EAAU,EAAK,EAEnCQ,EAAsBC,GAAiC,CAIxDhB,GACHA,EAAegB,CAAW,CAE5B,EAEA,OACCC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CACA,QAASP,EACT,gBAAAF,EACA,OAAAL,EACA,UAAAI,EACA,QAAAhB,EACA,OAAQQ,EACR,UAAAC,EACA,WAAAC,EACA,WAAAC,CAAA,CAAA,EAEDc,EAAAA,IAACE,EAAAA,cAAA,CACA,OAAAf,EACA,QAASQ,EACT,QAASL,EACT,UAAAC,EACA,MAAAjB,EACA,kBAAAE,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,MAAAC,EACA,eAAgBgB,EAChB,oBAAAd,CAAA,CAAA,CACD,EACD,CAEF"}
+{"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\ticonColor?: string;\n\ticonPadding?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\ticonColor={iconColor}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","iconColor","iconPadding","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","handleOpen","handleClose","handleContentClick","contentItem","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel"],"mappings":"4OA4BaA,EAAoC,CAAC,CACjD,MAAAC,EAAQ,aACR,QAAAC,EAAU,aACV,kBAAAC,EAAoB,eACpB,gBAAAC,EAAkB,eAClB,sBAAAC,EAAwB,uEACxB,cAAAC,EAAgB,2BAChB,MAAAC,EAAQ,QACR,eAAAC,EACA,oBAAAC,EACA,aAAAC,EAAe,mBACf,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EACA,YAAAC,EACA,WAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpC,CAAE,gBAAAC,EAAiB,UAAAC,EAAW,gBAAAC,CAAA,EAAoBC,EAAAA,mBAAA,EAElDC,EAAa,IAAMN,EAAU,EAAI,EACjCO,EAAc,IAAMP,EAAU,EAAK,EAEnCQ,EAAsBC,GAAiC,CAIxDlB,GACHA,EAAekB,CAAW,CAE5B,EAEA,OACCC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,eAAA,CACA,QAASP,EACT,gBAAAF,EACA,OAAAL,EACA,UAAAI,EACA,QAAAlB,EACA,OAAQQ,EACR,UAAAC,EACA,WAAAC,EACA,UAAAC,EACA,YAAAC,EACA,WAAAC,CAAA,CAAA,EAEDc,EAAAA,IAACE,EAAAA,cAAA,CACA,OAAAf,EACA,QAASQ,EACT,QAASL,EACT,UAAAC,EACA,MAAAnB,EACA,kBAAAE,EACA,gBAAAC,EACA,sBAAAC,EACA,cAAAC,EACA,MAAAC,EACA,eAAgBkB,EAChB,oBAAAhB,CAAA,CAAA,CACD,EACD,CAEF"}

package/dist/cjs/components/whats-new/WhatsNew.styles.js

@@ -19,24 +19,25 @@
 		background: ${t.COLORS.background.base};
 	}
 
+	/* tag-circle badge — Figma node 9496:35458 */
+	/* diameter is set inline per digit-count so it is always a perfect circle */
 	.notification--count {
 		box-sizing: border-box;
 		position: absolute;
-		right: 6px;
-		top: 4px;
+		top: -2px;
+		right: -2px;
 		border-radius: 50%;
-		width: 14px;
-		height: 14px;
 		background: ${t.COLORS.background.negative.vibrant};
-		border: 1.25px solid ${t.COLORS.surface.standard};
+		border: 1px solid ${t.COLORS.surface.standard};
 		display: flex;
 		justify-content: center;
 		align-items: center;
 	}
 
 	.count--text {
+		font-family: 'Inter';
 		font-size: 8px;
-		line-height: 7.2px;
+		line-height: 8px;
 		font-weight: 400;
 		color: ${t.COLORS.surface.standard};
 	}
@@ -174,7 +175,7 @@
 	&:hover {
 		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 	}
-`,p=n.default.div`
+`,l=n.default.div`
 	background-image: url(${e=>e.imageUrl});
 	background-size: cover;
 	background-position: center;
@@ -182,5 +183,5 @@
 	height: ${e=>e.height||"200px"};
 	width: ${e=>e.width||"100%"};
 	border-radius: 4px;
-`;exports.BackgroundImageContainer=p;exports.MainCardContainer=c;exports.MainContainer=d;exports.WhatsNewIconContainer=r;exports.WhatsNewWrapper=o;
+`;exports.BackgroundImageContainer=l;exports.MainCardContainer=c;exports.MainContainer=d;exports.WhatsNewIconContainer=r;exports.WhatsNewWrapper=o;
 //# sourceMappingURL=WhatsNew.styles.js.map

package/dist/cjs/components/whats-new/WhatsNew.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: 6px;\n\t\ttop: 4px;\n\t\tborder-radius: 50%;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1.25px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-size: 8px;\n\t\tline-height: 7.2px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height || '200px'};\n\twidth: ${(props) => props.width || '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWtBA,SAAO,WAAW,SAAS,OAAO;AAAA,yBACzBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAUrCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}
+{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t/* diameter is set inline per digit-count so it is always a perfect circle */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -2px;\n\t\tright: -2px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height || '200px'};\n\twidth: ${(props) => props.width || '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWtBA,SAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}

package/dist/cjs/components/whats-new/WhatsNewButton.js

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("../../assets/icons/whatsNew.svg.js"),t=require("../../constants/Theme.js"),u=require("./WhatsNew.styles.js"),x=require("../tooltips/Tooltip.js"),m=({onClick:a,newContentCount:s=0,isOpen:r=!1,isLoading:c=!1,tooltip:d="What's new",testId:l="whats-new-button",iconWidth:i=32,iconHeight:n=32,customIcon:o})=>c?e.jsxs("div",{style:{margin:"0px 8px"},children:[e.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),e.jsx("style",{children:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),b=require("./WhatsNew.styles.js"),m=require("../tooltips/Tooltip.js"),f=require("../icon-button/IconButton.js"),p=require("../../icons/Legacy - Bikayi specific/Services/Marketing.js"),y=({onClick:n,newContentCount:e=0,isOpen:s=!1,isLoading:a=!1,tooltip:c="What's new",testId:d="whats-new-button",iconWidth:l=24,iconHeight:h=24,iconColor:u,iconPadding:x,customIcon:g})=>{if(a)return t.jsxs("div",{style:{margin:"0px 8px"},children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:`
 						@keyframes spin {
 							0% { transform: rotate(0deg); }
 							100% { transform: rotate(360deg); }
 						}
-					`})]}):e.jsx(u.WhatsNewIconContainer,{count:s,children:e.jsxs("div",{className:`main-icon-class ${r?"icon-active":""}`,style:{color:r?t.COLORS.content.brand:t.COLORS.content.primary},onClick:a,"data-testid":l,children:[e.jsx(x.Tooltip,{body:d,placement:"bottom",children:e.jsx("div",{children:o?e.jsx(o,{width:i,height:n,color:r?t.COLORS.content.brand:t.COLORS.content.primary}):e.jsx(h.default,{width:i,height:n})})}),s>0&&e.jsx("div",{className:"notification--count",children:e.jsx("div",{className:"count--text",children:s})})]})});exports.WhatsNewButton=m;
+					`})]});const i=e>99?"99+":String(e),o=i.length>=3?20:i.length===2?16:12;return t.jsxs(b.WhatsNewIconContainer,{count:e,children:[t.jsx(m.Tooltip,{body:c,placement:"bottom",children:t.jsx(f.IconButton,{Icon:g??p.default,width:l,height:h,iconPadding:x,isSelected:s,iconColor:u??(s?r.COLORS.content.brand:r.COLORS.content.primary),onClick:n,"data-testid":d,style:{width:24,height:24,boxSizing:"border-box"}})}),e>0&&t.jsx("div",{className:"notification--count",style:{width:o,height:o},children:t.jsx("div",{className:"count--text",children:i})})]})};exports.WhatsNewButton=y;
 //# sourceMappingURL=WhatsNewButton.js.map

package/dist/cjs/components/whats-new/WhatsNewButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 32,\n\ticonHeight = 32,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<div\n\t\t\t\tclassName={`main-icon-class ${isOpen ? 'icon-active' : ''}`}\n\t\t\t\tstyle={{\n\t\t\t\t\tcolor: isOpen ? COLORS.content.brand : COLORS.content.primary,\n\t\t\t\t}}\n\t\t\t\tonClick={onClick}\n\t\t\t\tdata-testid={testId}\n\t\t\t>\n\t\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{CustomIcon ? (\n\t\t\t\t\t\t\t<CustomIcon\n\t\t\t\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\t\t\t\theight={iconHeight}\n\t\t\t\t\t\t\t\tcolor={isOpen ? COLORS.content.brand : COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<WhatsNewIcon width={iconWidth} height={iconHeight} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</Tooltip>\n\t\t\t\t{newContentCount > 0 && (\n\t\t\t\t\t<div className=\"notification--count\">\n\t\t\t\t\t\t<div className=\"count--text\">{newContentCount}</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","CustomIcon","jsx","WhatsNewIconContainer","jsxs","COLORS","Tooltip","WhatsNewIcon"],"mappings":"iRAOaA,EAAgD,CAAC,CAC7D,QAAAC,EACA,gBAAAC,EAAkB,EAClB,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,aACV,OAAAC,EAAS,mBACT,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,WAAYC,CACb,IACKL,SAED,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAM,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,GACP,OAAQ,GACR,OAAQ,oBACR,UAAW,oBACX,aAAc,MACd,UAAW,yBAAA,CACZ,CAAA,QAEA,QAAA,CACC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAMF,CAAA,EACD,EAKDA,EAAAA,IAACC,EAAAA,sBAAA,CAAsB,MAAOT,EAC7B,SAAAU,EAAAA,KAAC,MAAA,CACA,UAAW,mBAAmBT,EAAS,cAAgB,EAAE,GACzD,MAAO,CACN,MAAOA,EAASU,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,OAAA,EAEvD,QAAAZ,EACA,cAAaK,EAEb,SAAA,CAAAI,EAAAA,IAACI,EAAAA,SAAQ,KAAMT,EAAS,UAAW,SAClC,SAAAK,EAAAA,IAAC,OACC,SAAAD,EACAC,EAAAA,IAACD,EAAA,CACA,MAAOF,EACP,OAAQC,EACR,MAAOL,EAASU,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,OAAA,CAAA,QAGtDE,UAAA,CAAa,MAAOR,EAAW,OAAQC,CAAA,CAAY,EAEtD,EACD,EACCN,EAAkB,GAClBQ,EAAAA,IAAC,MAAA,CAAI,UAAU,sBACd,SAAAA,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAR,CAAA,CAAgB,CAAA,CAC/C,CAAA,CAAA,CAAA,EAGH"}
+{"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{ width: 24, height: 24, boxSizing: 'border-box' }}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":"mVAQaA,EAAgD,CAAC,CAC7D,QAAAC,EACA,gBAAAC,EAAkB,EAClB,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,aACV,OAAAC,EAAS,mBACT,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EACA,YAAAC,EACA,WAAYC,CACb,IAAM,CACL,GAAIP,EACH,cACE,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAQ,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,GACP,OAAQ,GACR,OAAQ,oBACR,UAAW,oBACX,aAAc,MACd,UAAW,yBAAA,CACZ,CAAA,QAEA,QAAA,CACC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAMF,CAAA,EACD,EAIF,MAAMC,EAAYX,EAAkB,GAAK,MAAQ,OAAOA,CAAe,EAEjEY,EACLD,EAAU,QAAU,EAAI,GAAKA,EAAU,SAAW,EAAI,GAAK,GAE5D,OACCE,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOd,EAC7B,SAAA,CAAAU,EAAAA,IAACK,EAAAA,QAAA,CAAQ,KAAMZ,EAAS,UAAW,SAClC,SAAAO,EAAAA,IAACM,EAAAA,WAAA,CACA,KACEP,GAAcQ,EAAAA,QAIhB,MAAOZ,EACP,OAAQC,EACR,YAAAE,EACA,WAAYP,EACZ,UACCM,IACCN,EAASiB,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAAnB,EACA,cAAaK,EACb,MAAO,CAAE,MAAO,GAAI,OAAQ,GAAI,UAAW,YAAA,CAAa,CAAA,EAE1D,EACCJ,EAAkB,GAClBU,EAAAA,IAAC,MAAA,CACA,UAAU,sBACV,MAAO,CAAE,MAAOE,EAAW,OAAQA,CAAA,EAEnC,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAC,CAAA,CAAU,CAAA,CAAA,CACzC,EAEF,CAEF"}

package/dist/cjs/components/whats-new/WhatsNewPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"WhatsNewPanel.js","sources":["../../../../src/components/whats-new/WhatsNewPanel.tsx"],"sourcesContent":["import { differenceInBusinessDays, format } from 'date-fns';\nimport React, { useMemo, useState } from 'react';\nimport SearchIconSvg from '../../assets/icons/searchIcon.svg';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { Button } from '../button';\nimport { VideoModal } from '../feature-announcements/VideoModal';\nimport { SearchBar } from '../searchBar';\nimport { SideModal } from '../side-modal';\nimport {\n\tBodyPrimary,\n\tCaption,\n\tTitleMedium,\n\tTitleRegular,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBackgroundImageContainer,\n\tMainCardContainer,\n\tMainContainer,\n\tWhatsNewWrapper,\n} from './WhatsNew.styles';\nimport { WhatsNewContent, WhatsNewPanelProps } from './WhatsNew.types';\n\nexport const WhatsNewPanel: React.FC<WhatsNewPanelProps> = ({\n\tisOpen,\n\tonClose,\n\tcontent,\n\tisLoading = false,\n\ttitle = \"What's new on BIK\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n}) => {\n\tconst [searchText, setSearchText] = useState('');\n\tconst [isVideoModalOpen, setIsVideoModalOpen] = useState(false);\n\tconst [videoUrl, setVideoUrl] = useState('');\n\n\tconst ifNewContent = (contentItem: WhatsNewContent): boolean => {\n\t\tif (!contentItem.createdAt) return false;\n\t\tconst createdAt = contentItem.createdAt.toDate\n\t\t\t? contentItem.createdAt.toDate()\n\t\t\t: new Date(contentItem.createdAt);\n\t\treturn differenceInBusinessDays(new Date(), createdAt) < 7;\n\t};\n\n\tconst modifiedWhatsNewContent = useMemo(() => {\n\t\tif (!searchText.trim()) return content;\n\n\t\tconst searchLower = searchText.toLowerCase();\n\t\treturn content.filter(\n\t\t\t(item) =>\n\t\t\t\titem.title.toLowerCase().includes(searchLower) ||\n\t\t\t\titem.body.toLowerCase().includes(searchLower) ||\n\t\t\t\t(item.content && item.content.toLowerCase().includes(searchLower)),\n\t\t);\n\t}, [content, searchText]);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\tconst action = contentItem.primaryButton?.action;\n\t\tif (action === 'Play Video' || (!action && contentItem.productVideo)) {\n\t\t\tif (contentItem.productVideo) {\n\t\t\t\tsetVideoUrl(contentItem.productVideo);\n\t\t\t\tsetIsVideoModalOpen(true);\n\t\t\t}\n\t\t} else {\n\t\t\tconst redirectionUrl =\n\t\t\t\tcontentItem.primaryButton?.redirectionUrl || contentItem.redirectUrl;\n\t\t\tif (redirectionUrl) {\n\t\t\t\tconst isExternal = redirectionUrl.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(redirectionUrl, '_blank', 'noopener,noreferrer');\n\t\t\t\t} else {\n\t\t\t\t\twindow.location.href = redirectionUrl;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\tconst isWhatsNewContentEmpty = content.length === 0;\n\tconst isModifiedWhatsNewContentEmpty = modifiedWhatsNewContent.length === 0;\n\n\tif (!isOpen) {\n\t\treturn <></>;\n\t}\n\n\treturn (\n\t\t<SideModal\n\t\t\twidth={width}\n\t\t\tonClose={onClose}\n\t\t\theader=\"\"\n\t\t\theaderCustomComponent={\n\t\t\t\t<TitleMedium color={COLORS.background.inverse}>{title}</TitleMedium>\n\t\t\t}\n\t\t\theaderStyle={{ background: COLORS.background.brandLight }}\n\t\t\thideFooter={true}\n\t\t>\n\t\t\t<MainContainer>\n\t\t\t\t<div className=\"mt-8\">\n\t\t\t\t\t<SearchBar\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tisEnabled={!isWhatsNewContentEmpty}\n\t\t\t\t\t\tonChange={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonEnter={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\tsearchValue={searchText}\n\t\t\t\t\t\tonClickCross={() => {\n\t\t\t\t\t\t\tsetSearchText('');\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<WhatsNewWrapper>\n\t\t\t\t\t{isWhatsNewContentEmpty || isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t<div className=\"no--data--found\">\n\t\t\t\t\t\t\t<div className=\"icon--wrapper\">\n\t\t\t\t\t\t\t\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t\t<WhatsNewIcon width={32} height={32} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<SearchIconSvg width={32} height={32} />\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\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<TitleRegular>{emptyStateTitle}</TitleRegular>\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{emptyStateDescription}\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{noResultsText}\n\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"scroller\">\n\t\t\t\t\t\t\t{modifiedWhatsNewContent.map((contentItem, index) => {\n\t\t\t\t\t\t\t\tif (renderCustomContent) {\n\t\t\t\t\t\t\t\t\treturn renderCustomContent(contentItem);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MainCardContainer\n\t\t\t\t\t\t\t\t\t\tclassName=\"padding--16 mb-mt-8\"\n\t\t\t\t\t\t\t\t\t\tkey={`whats-new-${index}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BackgroundImageContainer\n\t\t\t\t\t\t\t\t\t\t\timageUrl={contentItem.image}\n\t\t\t\t\t\t\t\t\t\t\theight=\"209px\"\n\t\t\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ borderRadius: '4px' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"created--at flex flex--row\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ifNewContent(contentItem) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"new--content--tag\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Caption>New</Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{contentItem.createdAt\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? format(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.createdAt.toDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? contentItem.createdAt.toDate()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: new Date(contentItem.createdAt),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'dd MMMM yyyy',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt--8\">\n\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>{contentItem.title}</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: contentItem.body }}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"card--desc mt--12\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex--row mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText={\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.primaryButton?.text ||\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.buttonText ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Explore the feature'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleContentClick(contentItem)}\n\t\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth={true}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</MainCardContainer>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</WhatsNewWrapper>\n\t\t\t</MainContainer>\n\t\t\t<VideoModal\n\t\t\t\tisOpen={isVideoModalOpen}\n\t\t\t\tvideoUrl={videoUrl}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tsetIsVideoModalOpen(false);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SideModal>\n\t);\n};\n"],"names":["WhatsNewPanel","isOpen","onClose","content","isLoading","title","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","searchText","setSearchText","useState","isVideoModalOpen","setIsVideoModalOpen","videoUrl","setVideoUrl","ifNewContent","contentItem","createdAt","differenceInBusinessDays","modifiedWhatsNewContent","useMemo","searchLower","item","handleContentClick","action","redirectionUrl","isWhatsNewContentEmpty","isModifiedWhatsNewContentEmpty","jsxs","SideModal","jsx","TitleMedium","COLORS","MainContainer","SearchBar","inputText","WhatsNewWrapper","WhatsNewIcon","SearchIconSvg","Fragment","TitleRegular","BodyPrimary","index","MainCardContainer","BackgroundImageContainer","Caption","format","TitleSmall","Button","VideoModal"],"mappings":"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"}
+{"version":3,"file":"WhatsNewPanel.js","sources":["../../../../src/components/whats-new/WhatsNewPanel.tsx"],"sourcesContent":["import { differenceInBusinessDays, format } from 'date-fns';\nimport React, { useMemo, useState } from 'react';\nimport SearchIconSvg from '../../assets/icons/searchIcon.svg';\nimport WhatsNewIcon from '../../assets/icons/whatsNew.svg';\nimport { COLORS } from '../../constants/Theme';\nimport { Button } from '../button';\nimport { VideoModal } from '../feature-announcements/VideoModal';\nimport { SearchBar } from '../searchBar';\nimport { SideModal } from '../side-modal';\nimport {\n\tBodyPrimary,\n\tCaption,\n\tTitleMedium,\n\tTitleRegular,\n\tTitleSmall,\n} from '../TypographyStyle';\nimport {\n\tBackgroundImageContainer,\n\tMainCardContainer,\n\tMainContainer,\n\tWhatsNewWrapper,\n} from './WhatsNew.styles';\nimport { WhatsNewContent, WhatsNewPanelProps } from './WhatsNew.types';\n\nexport const WhatsNewPanel: React.FC<WhatsNewPanelProps> = ({\n\tisOpen,\n\tonClose,\n\tcontent,\n\tisLoading = false,\n\ttitle = \"What's new on BIK\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n}) => {\n\tconst [searchText, setSearchText] = useState('');\n\tconst [isVideoModalOpen, setIsVideoModalOpen] = useState(false);\n\tconst [videoUrl, setVideoUrl] = useState('');\n\n\tconst ifNewContent = (contentItem: WhatsNewContent): boolean => {\n\t\tif (!contentItem.createdAt) return false;\n\t\tconst createdAt = contentItem.createdAt.toDate\n\t\t\t? contentItem.createdAt.toDate()\n\t\t\t: new Date(contentItem.createdAt);\n\t\treturn differenceInBusinessDays(new Date(), createdAt) < 7;\n\t};\n\n\tconst modifiedWhatsNewContent = useMemo(() => {\n\t\tif (!searchText.trim()) return content;\n\n\t\tconst searchLower = searchText.toLowerCase();\n\t\treturn content.filter(\n\t\t\t(item) =>\n\t\t\t\titem.title.toLowerCase().includes(searchLower) ||\n\t\t\t\titem.body.toLowerCase().includes(searchLower) ||\n\t\t\t\t(item.content && item.content.toLowerCase().includes(searchLower)),\n\t\t);\n\t}, [content, searchText]);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\tconst action = contentItem.primaryButton?.action;\n\t\tif (action === 'Play Video' || (!action && contentItem.productVideo)) {\n\t\t\tif (contentItem.productVideo) {\n\t\t\t\tsetVideoUrl(contentItem.productVideo);\n\t\t\t\tsetIsVideoModalOpen(true);\n\t\t\t}\n\t\t} else {\n\t\t\tconst redirectionUrl =\n\t\t\t\tcontentItem.primaryButton?.redirectionUrl || contentItem.redirectUrl;\n\t\t\tif (redirectionUrl) {\n\t\t\t\tconst isExternal = redirectionUrl.startsWith('http');\n\t\t\t\tif (isExternal) {\n\t\t\t\t\twindow.open(redirectionUrl, '_blank', 'noopener,noreferrer');\n\t\t\t\t} else {\n\t\t\t\t\twindow.location.href = redirectionUrl;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\tconst isWhatsNewContentEmpty = content.length === 0;\n\tconst isModifiedWhatsNewContentEmpty = modifiedWhatsNewContent.length === 0;\n\n\tif (!isOpen) {\n\t\treturn <></>;\n\t}\n\n\treturn (\n\t\t<SideModal\n\t\t\twidth={width}\n\t\t\tonClose={onClose}\n\t\t\theader=\"\"\n\t\t\theaderCustomComponent={\n\t\t\t\t<TitleMedium color={COLORS.background.inverse}>{title}</TitleMedium>\n\t\t\t}\n\t\t\theaderStyle={{ background: COLORS.background.brandLight }}\n\t\t\thideFooter={true}\n\t\t>\n\t\t\t<MainContainer>\n\t\t\t\t<div className=\"mt-8\">\n\t\t\t\t\t<SearchBar\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tisEnabled={!isWhatsNewContentEmpty}\n\t\t\t\t\t\tonChange={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonEnter={(inputText: string) => {\n\t\t\t\t\t\t\tsetSearchText(inputText);\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tplaceholder={searchPlaceholder}\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\tsearchValue={searchText}\n\t\t\t\t\t\tonClickCross={() => {\n\t\t\t\t\t\t\tsetSearchText('');\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<WhatsNewWrapper>\n\t\t\t\t\t{isWhatsNewContentEmpty || isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t<div className=\"no--data--found\">\n\t\t\t\t\t\t\t<div className=\"icon--wrapper\">\n\t\t\t\t\t\t\t\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t\t<WhatsNewIcon width={32} height={32} />\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<SearchIconSvg width={32} height={32} />\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\t{isWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<TitleRegular>{emptyStateTitle}</TitleRegular>\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{emptyStateDescription}\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) : isModifiedWhatsNewContentEmpty ? (\n\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\tcolor={COLORS.content.secondary}\n\t\t\t\t\t\t\t\t\tclassName=\"text--align\"\n\t\t\t\t\t\t\t\t\tstyle={{ maxWidth: 300 }}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{noResultsText}\n\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<div className=\"scroller\">\n\t\t\t\t\t\t\t{modifiedWhatsNewContent.map((contentItem, index) => {\n\t\t\t\t\t\t\t\tif (renderCustomContent) {\n\t\t\t\t\t\t\t\t\treturn renderCustomContent(contentItem);\n\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<MainCardContainer\n\t\t\t\t\t\t\t\t\t\tclassName=\"padding--16 mb-mt-8\"\n\t\t\t\t\t\t\t\t\t\tkey={`whats-new-${index}`}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<BackgroundImageContainer\n\t\t\t\t\t\t\t\t\t\t\timageUrl={contentItem.image}\n\t\t\t\t\t\t\t\t\t\t\theight=\"209px\"\n\t\t\t\t\t\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ borderRadius: '4px' }}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<div className=\"created--at flex flex--row\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ifNewContent(contentItem) ? (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"new--content--tag\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Caption>New</Caption>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<></>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t<Caption style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{contentItem.createdAt\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? format(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.createdAt.toDate\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? contentItem.createdAt.toDate()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: new Date(contentItem.createdAt),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'dd MMMM yyyy',\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: ''}\n\t\t\t\t\t\t\t\t\t\t\t\t</Caption>\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div className=\"mt--8\">\n\t\t\t\t\t\t\t\t\t\t\t<TitleSmall>{contentItem.title}</TitleSmall>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tdangerouslySetInnerHTML={{ __html: contentItem.body }}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"card--desc mt--12\"\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<div className=\"flex flex--row mt-20 full--width\">\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText={\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.primaryButton?.text ||\n\t\t\t\t\t\t\t\t\t\t\t\t\tcontentItem.buttonText ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Explore the feature'\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleContentClick(contentItem)}\n\t\t\t\t\t\t\t\t\t\t\t\tmatchParentWidth={true}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"medium\"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t</MainCardContainer>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</WhatsNewWrapper>\n\t\t\t</MainContainer>\n\t\t\t<VideoModal\n\t\t\t\tisOpen={isVideoModalOpen}\n\t\t\t\tvideoUrl={videoUrl}\n\t\t\t\tonClose={() => {\n\t\t\t\t\tsetIsVideoModalOpen(false);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</SideModal>\n\t);\n};\n"],"names":["WhatsNewPanel","isOpen","onClose","content","isLoading","title","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","searchText","setSearchText","useState","isVideoModalOpen","setIsVideoModalOpen","videoUrl","setVideoUrl","ifNewContent","contentItem","createdAt","differenceInBusinessDays","modifiedWhatsNewContent","useMemo","searchLower","item","handleContentClick","action","redirectionUrl","isWhatsNewContentEmpty","isModifiedWhatsNewContentEmpty","jsxs","SideModal","jsx","TitleMedium","COLORS","MainContainer","SearchBar","inputText","WhatsNewWrapper","WhatsNewIcon","SearchIconSvg","Fragment","TitleRegular","BodyPrimary","index","MainCardContainer","BackgroundImageContainer","Caption","format","TitleSmall","Button","VideoModal"],"mappings":"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"}