@bikdotai/bik-component-library 0.0.836-beta.3 → 0.0.837-0

package/dist/esm/components/tabs/Tabs.model.d.ts

@@ -5,6 +5,7 @@ export interface TabItemProps {
     selected: boolean;
     selectedTextColor: string;
     isSquared?: boolean;
+    uniformBorder?: boolean;
 }
 export interface TabItemTextProps {
     selected: boolean;
@@ -41,10 +42,14 @@ export interface TabViewHeaderProps {
     size?: 'small' | 'default';
     isSquared?: boolean;
     containerStyles?: React.CSSProperties;
+    gap?: number;
+    /** Overrides the background of the leading/trailing number badge on the selected tab. */
+    selectedNumberBackground?: string;
     'data-test'?: string;
 }
 export interface TabItemComponentProps {
     hasEqualSpacing?: boolean;
+    uniformBorder?: boolean;
     tab: TabInterface;
     currentTab: string;
     setCurrentTab: (tabKey: string) => void;
@@ -60,4 +65,6 @@ export interface TabItemComponentProps {
     isLastElement?: boolean;
     'data-test'?: string;
     iconPosition?: 'left' | 'right';
+    /** Overrides the background of the leading/trailing number badge on the selected tab. */
+    selectedNumberBackground?: string;
 }

package/dist/esm/components/tabs/Tabs.styles.d.ts

@@ -1,10 +1,12 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: import('styled-components').StyledComponent<"div", any, {
     bgColor?: string | undefined;
+    tabGap?: number | undefined;
 }, never>;
 export declare const TabItem: import('styled-components').StyledComponent<"div", any, TabItemProps, never>;
 export declare const TrailingNumberContainer: import('styled-components').StyledComponent<"div", any, {
     selected: boolean;
+    selectedBackground?: string | undefined;
 }, never>;
 export declare const TabItemText: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

package/dist/esm/components/tabs/Tabs.styles.js

@@ -1,11 +1,25 @@
 import t from "styled-components";
 import { DEFAULT_THEME as o } from "../../constants/Theme.js";
 import { ButtonLarge as r } from "../TypographyStyle.js";
-const n = t.div`
+const c = t.div`
 	display: flex;
 	flex-direction: row;
 	background-color: ${(e) => e.bgColor};
-`, l = t.div`
+	${(e) => e.tabGap ? `
+		gap: ${e.tabGap}px;
+		position: relative;
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 1px;
+			background: ${o.colorsV2.background.inactive};
+			z-index: -1;
+		}
+	` : ""}
+`, a = t.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
@@ -14,8 +28,8 @@ const n = t.div`
 	align-items: center;
 	justify-content: center;
 	width: ${(e) => e.hasEqualSpacing ? "50%" : "auto"};
-	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : o.colorsV2.background.inactive};
-	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected ? "2px" : "1px"};
+	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : e.uniformBorder ? "transparent" : o.colorsV2.background.inactive};
+	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected || e.uniformBorder ? "2px" : "1px"};
 	border-bottom-style: ${(e) => e.isSquared ? "" : "solid"};
 	border: ${(e) => e.isSquared ? e.selected ? `1px solid ${e.selectedTextColor}` : `1px solid ${o.colorsV2.background.inactive}` : ""};
 	flex-direction: row;
@@ -25,7 +39,7 @@ const n = t.div`
 		background-color: rgba(0, 0, 0, 0.03);
 	}
 	background-color: ${(e) => e.isSquared && e.selected ? `${o.colorsV2.background.brandLight}` : ""};
-`, a = t.div`
+`, l = t.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -33,7 +47,7 @@ const n = t.div`
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${(e) => e.selected ? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
+	background: ${(e) => e.selected ? e.selectedBackground ?? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
 	color: ${o.colorsV2.content.primaryInverse};
 	border-radius: 10px;
 `, s = t(r)`
@@ -49,9 +63,9 @@ const n = t.div`
 export {
   x as EmptyTab,
   b as RightComponent,
-  n as TabHeader,
-  l as TabItem,
+  c as TabHeader,
+  a as TabItem,
   s as TabItemText,
-  a as TrailingNumberContainer
+  l as TrailingNumberContainer
 };
 //# sourceMappingURL=Tabs.styles.js.map

package/dist/esm/components/tabs/Tabs.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '2px' : '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","TabItem","DEFAULT_THEME","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,GAGhCC,IAAUF,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,oBACNE,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,CAACF,MACvBA,EAAM,YAAY,KAAKA,EAAM,WAAW,QAAQ,KAAK;AAAA,wBAC/B,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,aAAaE,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,CAACF,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,GAAGE,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,GAGMC,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU/B,CAACC,MACdA,EAAM,WACHE,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,GAI1CE,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,4BAEHG,EAAc,SAAS,WAAW,QAAQ;AAAA,GAGzDK,IAAiBR,EAAO;AAAA;AAAA;AAAA,4BAGTG,EAAc,SAAS,WAAW,QAAQ;AAAA;"}
+{"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected || props.uniformBorder\n\t\t\t? '2px'\n\t\t\t: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n\tselectedBackground?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? props.selectedBackground ??\n\t\t\t  DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","DEFAULT_THEME","TabItem","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,GAC1C,CAACA,MACFA,EAAM,SACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,EAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,KAItD,EAAE;AAAA,GAGMC,IAAUH,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,oBACNA,EAAM,gBACN,gBACAC,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,CAACD,MACvBA,EAAM,YACH,KACAA,EAAM,YAAYA,EAAM,gBACxB,QACA,KAAK;AAAA,wBACc,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,aAAaC,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,CAACD,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,GAAGC,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,GAGME,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW/B,CAACC,MACdA,EAAM,WACHA,EAAM,sBACNC,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,GAI1CG,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,4BAEHE,EAAc,SAAS,WAAW,QAAQ;AAAA,GAGzDM,IAAiBR,EAAO;AAAA;AAAA;AAAA,4BAGTE,EAAc,SAAS,WAAW,QAAQ;AAAA;"}

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -15,6 +15,7 @@ interface WhatsNewProps {
     iconHeight?: number;
     iconColor?: string;
     iconPadding?: number;
+    buttonSize?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

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

@@ -1,9 +1,9 @@
-import { jsxs as O, Fragment as g, jsx as s } from "react/jsx-runtime";
-import { useState as S } from "react";
-import { WhatsNewButton as b } from "./WhatsNewButton.js";
-import { WhatsNewPanel as j } from "./WhatsNewPanel.js";
-import { useWhatsNewContext as I } from "./WhatsNewProvider.js";
-const z = ({
+import { jsxs as g, Fragment as S, jsx as s } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { WhatsNewButton as j } from "./WhatsNewButton.js";
+import { WhatsNewPanel as I } from "./WhatsNewPanel.js";
+import { useWhatsNewContext as y } from "./WhatsNewProvider.js";
+const A = ({
   title: a = "What's new",
   tooltip: r = "What's new",
   searchPlaceholder: h = "Search posts",
@@ -18,15 +18,16 @@ const z = ({
   iconHeight: d = 24,
   iconColor: u,
   iconPadding: f,
-  customIcon: N
+  buttonSize: N,
+  customIcon: W
 }) => {
-  const [t, n] = S(!1), { whatsNewContent: W, isLoading: o, newContentCount: k } = I();
-  return /* @__PURE__ */ O(g, { children: [
+  const [t, n] = b(!1), { whatsNewContent: k, isLoading: o, newContentCount: x } = y();
+  return /* @__PURE__ */ g(S, { children: [
     /* @__PURE__ */ s(
-      b,
+      j,
       {
         onClick: () => n(!0),
-        newContentCount: k,
+        newContentCount: x,
         isOpen: t,
         isLoading: o,
         tooltip: r,
@@ -35,15 +36,16 @@ const z = ({
         iconHeight: d,
         iconColor: u,
         iconPadding: f,
-        customIcon: N
+        buttonSize: N,
+        customIcon: W
       }
     ),
     /* @__PURE__ */ s(
-      j,
+      I,
       {
         isOpen: t,
         onClose: () => n(!1),
-        content: W,
+        content: k,
         isLoading: o,
         title: a,
         searchPlaceholder: h,
@@ -51,8 +53,8 @@ const z = ({
         emptyStateDescription: c,
         noResultsText: i,
         width: m,
-        onContentClick: (x) => {
-          e && e(x);
+        onContentClick: (O) => {
+          e && e(O);
         },
         renderCustomContent: p
       }
@@ -60,6 +62,6 @@ const z = ({
   ] });
 };
 export {
-  z as WhatsNew
+  A as WhatsNew
 };
 //# sourceMappingURL=WhatsNew.js.map

package/dist/esm/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\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","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel","contentItem"],"mappings":";;;;;AA4BO,MAAMA,IAAoC,CAAC;AAAA,EACjD,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC,IAAwB;AAAA,EACxB,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,EAAE,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,EAAA,IAAoBC,EAAA;AAcxD,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAfgB,MAAMT,EAAU,EAAI;AAAA,QAgBpC,iBAAAI;AAAA,QACA,QAAAL;AAAA,QACA,WAAAI;AAAA,QACA,SAAAlB;AAAA,QACA,QAAQQ;AAAA,QACR,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAAX;AAAA,QACA,SA5BiB,MAAMC,EAAU,EAAK;AAAA,QA6BtC,SAASE;AAAA,QACT,WAAAC;AAAA,QACA,OAAAnB;AAAA,QACA,mBAAAE;AAAA,QACA,iBAAAC;AAAA,QACA,uBAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,gBAnCwB,CAACqB,MAAiC;AAI5D,UAAIpB,KACHA,EAAeoB,CAAW;AAAA,QAE5B;AAAA,QA6BG,qBAAAnB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}
+{"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\tbuttonSize?: 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\tbuttonSize,\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\tbuttonSize={buttonSize}\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","buttonSize","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel","contentItem"],"mappings":";;;;;AA6BO,MAAMA,IAAoC,CAAC;AAAA,EACjD,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC,IAAwB;AAAA,EACxB,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,EAAE,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,EAAA,IAAoBC,EAAA;AAcxD,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAfgB,MAAMT,EAAU,EAAI;AAAA,QAgBpC,iBAAAI;AAAA,QACA,QAAAL;AAAA,QACA,WAAAI;AAAA,QACA,SAAAnB;AAAA,QACA,QAAQQ;AAAA,QACR,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAAX;AAAA,QACA,SA7BiB,MAAMC,EAAU,EAAK;AAAA,QA8BtC,SAASE;AAAA,QACT,WAAAC;AAAA,QACA,OAAApB;AAAA,QACA,mBAAAE;AAAA,QACA,iBAAAC;AAAA,QACA,uBAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,gBApCwB,CAACsB,MAAiC;AAI5D,UAAIrB,KACHA,EAAeqB,CAAW;AAAA,QAE5B;AAAA,QA8BG,qBAAApB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}

package/dist/esm/components/whats-new/WhatsNew.types.d.ts

@@ -36,6 +36,7 @@ export interface WhatsNewButtonProps {
     iconHeight?: number;
     iconColor?: string;
     iconPadding?: number;
+    buttonSize?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

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

@@ -1,24 +1,25 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { COLORS as s } from "../../constants/Theme.js";
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { COLORS as a } from "../../constants/Theme.js";
 import { WhatsNewIconContainer as b } from "./WhatsNew.styles.js";
-import { Tooltip as x } from "../tooltips/Tooltip.js";
-import { IconButton as y } from "../icon-button/IconButton.js";
-import u from "../../icons/Legacy - Bikayi specific/Services/Marketing.js";
+import { Tooltip as y } from "../tooltips/Tooltip.js";
+import { IconButton as u } from "../icon-button/IconButton.js";
+import w from "../../icons/Legacy - Bikayi specific/Services/Marketing.js";
 const W = ({
-  onClick: a,
-  newContentCount: i = 0,
-  isOpen: o = !1,
-  isLoading: d = !1,
-  tooltip: c = "What's new",
+  onClick: d,
+  newContentCount: e = 0,
+  isOpen: r = !1,
+  isLoading: c = !1,
+  tooltip: l = "What's new",
   testId: h = "whats-new-button",
-  iconWidth: l = 24,
-  iconHeight: m = 24,
-  iconColor: f,
-  iconPadding: p,
-  customIcon: g
+  iconWidth: m = 24,
+  iconHeight: f = 24,
+  iconColor: p,
+  iconPadding: g,
+  buttonSize: o = 24,
+  customIcon: x
 }) => {
-  if (d)
-    return /* @__PURE__ */ n("div", { style: { margin: "0px 8px" }, children: [
+  if (c)
+    return /* @__PURE__ */ s("div", { style: { margin: "0px 8px" }, children: [
       /* @__PURE__ */ t(
         "div",
         {
@@ -39,28 +40,35 @@ const W = ({
 						}
 					` })
     ] });
-  const e = i > 99 ? "99+" : String(i), r = e.length >= 3 ? 20 : e.length === 2 ? 16 : 12;
-  return /* @__PURE__ */ n(b, { count: i, children: [
-    /* @__PURE__ */ t(x, { body: c, placement: "bottom", children: /* @__PURE__ */ t(
-      y,
+  const i = e > 99 ? "99+" : String(e), n = i.length >= 3 ? 20 : i.length === 2 ? 16 : 12;
+  return /* @__PURE__ */ s(b, { count: e, children: [
+    /* @__PURE__ */ t(y, { body: l, placement: "bottom", children: /* @__PURE__ */ t(
+      u,
       {
-        Icon: g ?? u,
-        width: l,
-        height: m,
-        iconPadding: p,
-        isSelected: o,
-        iconColor: f ?? (o ? s.content.brand : s.content.primary),
-        onClick: a,
+        Icon: x ?? w,
+        width: m,
+        height: f,
+        iconPadding: g,
+        isSelected: r,
+        iconColor: p ?? (r ? a.content.brand : a.content.primary),
+        onClick: d,
         "data-testid": h,
-        style: { width: 24, height: 24, boxSizing: "border-box" }
+        style: {
+          width: o,
+          height: o,
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
       }
     ) }),
-    i > 0 && /* @__PURE__ */ t(
+    e > 0 && /* @__PURE__ */ t(
       "div",
       {
         className: "notification--count",
-        style: { width: r, height: r },
-        children: /* @__PURE__ */ t("div", { className: "count--text", children: e })
+        style: { width: n, height: n },
+        children: /* @__PURE__ */ t("div", { className: "count--text", children: i })
       }
     )
   ] });

package/dist/esm/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 { 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":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAYC;AACb,MAAM;AACL,MAAIP;AACH,6BACE,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,MAAA,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,wBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,IAAA,GACD;AAIF,QAAMC,IAAYX,IAAkB,KAAK,QAAQ,OAAOA,CAAe,GAEjEY,IACLD,EAAU,UAAU,IAAI,KAAKA,EAAU,WAAW,IAAI,KAAK;AAE5D,SACC,gBAAAE,EAACC,GAAA,EAAsB,OAAOd,GAC7B,UAAA;AAAA,IAAA,gBAAAU,EAACK,GAAA,EAAQ,MAAMZ,GAAS,WAAW,UAClC,UAAA,gBAAAO;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,MACEP,KAAcQ;AAAAA,QAIhB,OAAOZ;AAAA,QACP,QAAQC;AAAA,QACR,aAAAE;AAAA,QACA,YAAYP;AAAA,QACZ,WACCM,MACCN,IAASiB,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAEjD,SAAAnB;AAAA,QACA,eAAaK;AAAA,QACb,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,WAAW,aAAA;AAAA,MAAa;AAAA,IAAA,GAE1D;AAAA,IACCJ,IAAkB,KAClB,gBAAAU;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,GAAW,QAAQA,EAAA;AAAA,QAEnC,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAC,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}
+{"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\tbuttonSize = 24,\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={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\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","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAYC;AACb,MAAM;AACL,MAAIR;AACH,6BACE,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,wBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,IAAA,GACD;AAIF,QAAMC,IAAYZ,IAAkB,KAAK,QAAQ,OAAOA,CAAe,GAEjEa,IACLD,EAAU,UAAU,IAAI,KAAKA,EAAU,WAAW,IAAI,KAAK;AAE5D,SACC,gBAAAE,EAACC,GAAA,EAAsB,OAAOf,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACK,GAAA,EAAQ,MAAMb,GAAS,WAAW,UAClC,UAAA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,MACEP,KAAcQ;AAAAA,QAIhB,OAAOb;AAAA,QACP,QAAQC;AAAA,QACR,aAAAE;AAAA,QACA,YAAYP;AAAA,QACZ,WACCM,MACCN,IAASkB,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAEjD,SAAApB;AAAA,QACA,eAAaK;AAAA,QACb,OAAO;AAAA,UACN,OAAOK;AAAA,UACP,QAAQA;AAAA,UACR,WAAW;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,QAAA;AAAA,MACjB;AAAA,IAAA,GAEF;AAAA,IACCT,IAAkB,KAClB,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,GAAW,QAAQA,EAAA;AAAA,QAEnC,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAC,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}