@bikdotai/bik-component-library 0.0.820 → 0.0.821-0

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

@@ -34,6 +34,8 @@ export interface WhatsNewButtonProps {
     testId?: string;
     iconWidth?: number;
     iconHeight?: number;
+    iconColor?: string;
+    iconPadding?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

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

@@ -1,19 +1,22 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import h from "../../assets/icons/whatsNew.svg.js";
-import { COLORS as r } from "../../constants/Theme.js";
-import { WhatsNewIconContainer as f } from "./WhatsNew.styles.js";
-import { Tooltip as p } from "../tooltips/Tooltip.js";
-const g = ({
-  onClick: d,
-  newContentCount: i = 0,
-  isOpen: e = !1,
-  isLoading: c = !1,
-  tooltip: l = "What's new",
-  testId: m = "whats-new-button",
-  iconWidth: o = 32,
-  iconHeight: a = 32,
-  customIcon: n
-}) => c ? /* @__PURE__ */ s("div", { style: { margin: "0px 8px" }, children: [
+import { COLORS as e } from "../../constants/Theme.js";
+import { WhatsNewIconContainer as p } from "./WhatsNew.styles.js";
+import { Tooltip as u } from "../tooltips/Tooltip.js";
+import { IconButton as x } from "../icon-button/IconButton.js";
+const W = ({
+  onClick: n,
+  newContentCount: o = 0,
+  isOpen: i = !1,
+  isLoading: a = !1,
+  tooltip: s = "What's new",
+  testId: d = "whats-new-button",
+  iconWidth: c = 24,
+  iconHeight: m = 24,
+  iconColor: l,
+  iconPadding: b,
+  customIcon: f
+}) => a ? /* @__PURE__ */ r("div", { style: { margin: "0px 8px" }, children: [
   /* @__PURE__ */ t(
     "div",
     {
@@ -33,29 +36,22 @@ const g = ({
 							100% { transform: rotate(360deg); }
 						}
 					` })
-] }) : /* @__PURE__ */ t(f, { count: i, children: /* @__PURE__ */ s(
-  "div",
-  {
-    className: `main-icon-class ${e ? "icon-active" : ""}`,
-    style: {
-      color: e ? r.content.brand : r.content.primary
-    },
-    onClick: d,
-    "data-testid": m,
-    children: [
-      /* @__PURE__ */ t(p, { body: l, placement: "bottom", children: /* @__PURE__ */ t("div", { children: n ? /* @__PURE__ */ t(
-        n,
-        {
-          width: o,
-          height: a,
-          color: e ? r.content.brand : r.content.primary
-        }
-      ) : /* @__PURE__ */ t(h, { width: o, height: a }) }) }),
-      i > 0 && /* @__PURE__ */ t("div", { className: "notification--count", children: /* @__PURE__ */ t("div", { className: "count--text", children: i }) })
-    ]
-  }
-) });
+] }) : /* @__PURE__ */ r(p, { count: o, children: [
+  /* @__PURE__ */ t(u, { body: s, placement: "bottom", children: /* @__PURE__ */ t(
+    x,
+    {
+      Icon: f ?? h,
+      width: c,
+      height: m,
+      isSelected: i,
+      iconColor: l ?? (i ? e.content.brand : e.content.primary),
+      onClick: n,
+      "data-testid": d
+    }
+  ) }),
+  o > 0 && /* @__PURE__ */ t("div", { className: "notification--count", children: /* @__PURE__ */ t("div", { className: "count--text", children: o }) })
+] });
 export {
-  g as WhatsNewButton
+  W as WhatsNewButton
 };
 //# sourceMappingURL=WhatsNewButton.js.map

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 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":";;;;;AAOO,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,YAAYC;AACb,MACKL,sBAED,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,EAAA,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAAA,oBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,GACD,IAKD,gBAAAA,EAACC,GAAA,EAAsB,OAAOT,GAC7B,UAAA,gBAAAU;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,WAAW,mBAAmBT,IAAS,gBAAgB,EAAE;AAAA,IACzD,OAAO;AAAA,MACN,OAAOA,IAASU,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,IAAA;AAAA,IAEvD,SAAAZ;AAAA,IACA,eAAaK;AAAA,IAEb,UAAA;AAAA,MAAA,gBAAAI,EAACI,KAAQ,MAAMT,GAAS,WAAW,UAClC,UAAA,gBAAAK,EAAC,SACC,UAAAD,IACA,gBAAAC;AAAA,QAACD;AAAA,QAAA;AAAA,UACA,OAAOF;AAAA,UACP,QAAQC;AAAA,UACR,OAAOL,IAASU,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAAA;AAAA,MAAA,sBAGtDE,GAAA,EAAa,OAAOR,GAAW,QAAQC,EAAA,CAAY,GAEtD,GACD;AAAA,MACCN,IAAkB,KAClB,gBAAAQ,EAAC,OAAA,EAAI,WAAU,uBACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAR,EAAA,CAAgB,EAAA,CAC/C;AAAA,IAAA;AAAA,EAAA;AAAA,GAGH;"}
+{"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 { 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\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 ?? WhatsNewIcon) 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\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/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div className=\"notification--count\">\n\t\t\t\t\t<div className=\"count--text\">{newContentCount}</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","jsxs","WhatsNewIconContainer","Tooltip","IconButton","WhatsNewIcon","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,MACKP,sBAED,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,EAAA,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAW;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAAA,oBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,GACD,IAKD,gBAAAC,EAACC,GAAA,EAAsB,OAAOZ,GAC7B,UAAA;AAAA,EAAA,gBAAAU,EAACG,GAAA,EAAQ,MAAMV,GAAS,WAAW,UAClC,UAAA,gBAAAO;AAAA,IAACI;AAAA,IAAA;AAAA,MACA,MACEL,KAAcM;AAAAA,MAIhB,OAAOV;AAAA,MACP,QAAQC;AAAA,MACR,YAAYL;AAAA,MACZ,WACCM,MACCN,IAASe,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,MAEjD,SAAAjB;AAAA,MACA,eAAaK;AAAA,IAAA;AAAA,EAAA,GAEf;AAAA,EACCJ,IAAkB,KAClB,gBAAAU,EAAC,OAAA,EAAI,WAAU,uBACd,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAV,EAAA,CAAgB,EAAA,CAC/C;AAAA,GAEF;"}

package/dist/esm/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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"}

package/dist/esm/constants/Theme.d.ts

@@ -1,11 +1,15 @@
 export declare const BASE_COLORS: {
     brand: {
         900: string;
+        850: string;
         800: string;
+        700: string;
         500: string;
         100: string;
         50: string;
         10: string;
+        7: string;
+        5: string;
     };
     grayscale: {
         900: string;
@@ -52,8 +56,11 @@ export declare const COLORS: {
         brand: string;
         brandLight: string;
         brandVeryLight: string;
+        brandUltraLight: string;
+        brandGhost: string;
         pureWhite: string;
         brandTint: string;
+        brandHovered: string;
         negative: {
             vibrant: string;
             light: string;
@@ -114,6 +121,7 @@ export declare const COLORS: {
             vibrant: string;
         };
         brandLightAlt: string;
+        brandSubdued: string;
         blue: {
             lightAlt: string;
         };
@@ -206,6 +214,12 @@ export declare const FONTS: {
         lineHeight: number;
         letterSpacing: number;
     };
+    bodyTinySemiBold: {
+        fontWeight: string;
+        fontSize: number;
+        lineHeight: number;
+        letterSpacing: number;
+    };
     tiny: {
         fontWeight: string;
         fontSize: number;
@@ -343,8 +357,11 @@ export declare const DEFAULT_THEME: {
             brand: string;
             brandLight: string;
             brandVeryLight: string;
+            brandUltraLight: string;
+            brandGhost: string;
             pureWhite: string;
             brandTint: string;
+            brandHovered: string;
             negative: {
                 vibrant: string;
                 light: string;
@@ -405,6 +422,7 @@ export declare const DEFAULT_THEME: {
                 vibrant: string;
             };
             brandLightAlt: string;
+            brandSubdued: string;
             blue: {
                 lightAlt: string;
             };
@@ -497,6 +515,12 @@ export declare const DEFAULT_THEME: {
             lineHeight: number;
             letterSpacing: number;
         };
+        bodyTinySemiBold: {
+            fontWeight: string;
+            fontSize: number;
+            lineHeight: number;
+            letterSpacing: number;
+        };
         tiny: {
             fontWeight: string;
             fontSize: number;

package/dist/esm/constants/Theme.js

@@ -1,11 +1,15 @@
 const e = {
   brand: {
     900: "#28034E",
+    850: "#360A63",
     800: "#4B1583",
+    700: "#5E3A83",
     500: "#731DCF",
     100: "#F3EDF9",
     50: "#EFE6F9",
-    10: "#F9F3FF"
+    10: "#F9F3FF",
+    7: "#F7F2FC",
+    5: "#FDFBFF"
   },
   grayscale: {
     900: "#212121",
@@ -51,8 +55,11 @@ const e = {
     brand: e.brand[500],
     brandLight: e.brand[50],
     brandVeryLight: e.brand[10],
+    brandUltraLight: e.brand[7],
+    brandGhost: e.brand[5],
     pureWhite: e.grayscale.white,
     brandTint: e.brand[100],
+    brandHovered: e.brand[850],
     negative: {
       vibrant: e.negative[700],
       light: e.negative[50]
@@ -111,6 +118,7 @@ const e = {
       vibrant: e.positive[700]
     },
     brandLightAlt: "#DDCCF0",
+    brandSubdued: e.brand[700],
     blue: {
       lightAlt: "#C3D5E5"
     },
@@ -202,6 +210,12 @@ const e = {
     lineHeight: 16,
     letterSpacing: 0
   },
+  bodyTinySemiBold: {
+    fontWeight: "600",
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0
+  },
   tiny: {
     fontWeight: "400",
     fontSize: 10,

package/dist/esm/constants/Theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"Theme.js","sources":["../../../src/constants/Theme.ts"],"sourcesContent":["export const BASE_COLORS = {\n\tbrand: {\n\t\t900: '#28034E',\n\t\t800: '#4B1583',\n\t\t500: '#731DCF',\n\t\t100: '#F3EDF9',\n\t\t50: '#EFE6F9',\n\t\t10: '#F9F3FF',\n\t},\n\tgrayscale: {\n\t\t900: '#212121',\n\t\t700: '#616161',\n\t\t500: '#9E9E9E',\n\t\t400: '#BDBDBD',\n\t\t200: '#E0E0E0',\n\t\t100: '#F0F0F0',\n\t\t70: '#F7F7F7',\n\t\t50: '#FAFAFA',\n\t\twhite: '#FFFFFF',\n\t\talpha: '#00000088',\n\t},\n\tnegative: {\n\t\t900: '#B92321',\n\t\t700: '#D53434',\n\t\t100: '#FFCED4',\n\t\t50: '#FFEBEF',\n\t},\n\twarning: {\n\t\t900: '#99631B',\n\t\t500: '#FEC02D',\n\t\t100: '#FFEABE',\n\t\t50: '#FFF7E5',\n\t},\n\tpositive: {\n\t\t900: '#00580E',\n\t\t700: '#1A872C',\n\t\t100: '#C3E4C4',\n\t\t50: '#E6F4E7',\n\t},\n\tbikAi: {\n\t\t500: 'linear-gradient(93deg, #FF166A 0.37%, #FB5F08 100%)',\n\t\t100: 'linear-gradient(93deg, #FEBAD2 0.37%, #FDD1B9 100%)',\n\t\t50: 'linear-gradient(93deg, #FFE6EE 0.37%, #FFF0E7 100%)',\n\t},\n};\n\nexport const COLORS = {\n\tbackground: {\n\t\tinactive: BASE_COLORS.grayscale['200'],\n\t\tbase: BASE_COLORS.grayscale['100'],\n\t\tinverse: BASE_COLORS.brand['900'],\n\t\tinverseLight: BASE_COLORS.brand['800'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\tbrandLight: BASE_COLORS.brand['50'],\n\t\tbrandVeryLight: BASE_COLORS.brand['10'],\n\t\tpureWhite: BASE_COLORS.grayscale.white,\n\t\tbrandTint: BASE_COLORS.brand['100'],\n\t\tnegative: {\n\t\t\tvibrant: BASE_COLORS.negative['700'],\n\t\t\tlight: BASE_COLORS.negative['50'],\n\t\t},\n\t\twarning: {\n\t\t\tvibrant: BASE_COLORS.warning['500'],\n\t\t\tlight: BASE_COLORS.warning['50'],\n\t\t},\n\t\tpositive: {\n\t\t\tvibrant: BASE_COLORS.positive['700'],\n\t\t\tlight: BASE_COLORS.positive['50'],\n\t\t},\n\t\tblue: {\n\t\t\tlight: '#E5F2FF',\n\t\t},\n\t},\n\ticon: { placeholder: '#9E9E9E' },\n\tscrim: {\n\t\tstandard: '#00000099',\n\t},\n\tsurface: {\n\t\tstandard: BASE_COLORS.grayscale['white'],\n\t\tsubdued: BASE_COLORS.grayscale['50'],\n\t\thovered: BASE_COLORS.grayscale['100'],\n\t\tgrey: BASE_COLORS.grayscale['70'],\n\t\tai: BASE_COLORS.bikAi['500'],\n\t\taiLight: BASE_COLORS.bikAi['50'],\n\t},\n\tcontent: {\n\t\tprimary: BASE_COLORS.grayscale['900'],\n\t\tsecondary: BASE_COLORS.grayscale['700'],\n\t\tplaceholder: BASE_COLORS.grayscale['500'],\n\t\tinactive: BASE_COLORS.grayscale['400'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\tprimaryInverse: BASE_COLORS.grayscale['white'],\n\t\tsecondaryInverse: '#ffffffcc',\n\t\tnegative: BASE_COLORS.negative['900'],\n\t\twarning: BASE_COLORS.warning['900'],\n\t\tpositive: BASE_COLORS.positive['900'],\n\t\tblue: '#28458F',\n\t\tai: BASE_COLORS.bikAi['500'],\n\t},\n\tstroke: {\n\t\tprimary: BASE_COLORS.grayscale['200'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\tnegative: {\n\t\t\tlightAlt: BASE_COLORS.negative['100'],\n\t\t\tvibrant: BASE_COLORS.negative['700'],\n\t\t},\n\t\twarning: {\n\t\t\tlightAlt: BASE_COLORS.warning['100'],\n\t\t\tvibrant: BASE_COLORS.warning['500'],\n\t\t},\n\t\tpositive: {\n\t\t\tlightAlt: BASE_COLORS.positive['100'],\n\t\t\tvibrant: BASE_COLORS.positive['700'],\n\t\t},\n\t\tbrandLightAlt: '#DDCCF0',\n\t\tblue: {\n\t\t\tlightAlt: '#C3D5E5',\n\t\t},\n\t\tai: {\n\t\t\tlightAlt: '#FEBAD2',\n\t\t\tvibrant: '#F23275',\n\t\t},\n\t},\n\tspecial: {\n\t\twhatsapp: {\n\t\t\tbrand: '#25D366',\n\t\t\tgradient: 'linear-gradient(360deg, #20B038 0%, #60D66A 100%)',\n\t\t\tdark: '#455A64',\n\t\t\tgradientArr: ['#20B038', '#60D66A'],\n\t\t},\n\t\tbrand: {\n\t\t\tgoogle: '#DD4B39',\n\t\t\tfacebook: '#1877F2',\n\t\t},\n\t},\n\ttext: {\n\t\tprimary: BASE_COLORS.grayscale['900'],\n\t\tsecondary: BASE_COLORS.grayscale['700'],\n\t\tplaceholder: BASE_COLORS.grayscale['500'],\n\t\tdisabled: BASE_COLORS.grayscale['400'],\n\t\twhite: BASE_COLORS.grayscale['white'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\taltPrimary: BASE_COLORS.brand['900'],\n\t\taltSecondary: BASE_COLORS.brand['800'],\n\t},\n};\n\nexport const FONTS = {\n\tdisplay: {\n\t\tfontWeight: '400',\n\t\tfontSize: 32,\n\t\tlineHeight: 40,\n\t\tletterSpacing: 0,\n\t},\n\ttitleXLarge: {\n\t\tfontWeight: '600',\n\t\tfontSize: 32,\n\t\tlineHeight: 40,\n\t\tletterSpacing: 0,\n\t},\n\ttitleLarge: {\n\t\tfontWeight: '600',\n\t\tfontSize: 28,\n\t\tlineHeight: 40,\n\t\tletterSpacing: 0,\n\t},\n\ttitleMedium: {\n\t\tfontWeight: '600',\n\t\tfontSize: 20,\n\t\tlineHeight: 28,\n\t\tletterSpacing: 0,\n\t},\n\ttitleRegular: {\n\t\tfontWeight: '600',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttitleSmall: {\n\t\tfontWeight: '600',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tbodyPrimary: {\n\t\tfontWeight: '400',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\tbodyLarge: {\n\t\tfontWeight: '400',\n\t\tfontSize: 20,\n\t\tlineHeight: 28,\n\t\tletterSpacing: 0,\n\t},\n\tbodySecondary: {\n\t\tfontWeight: '400',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tcaption: {\n\t\tfontWeight: '400',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\ttiny: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\tsubHeading: {\n\t\tfontWeight: '600',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\n\ttitle1: {\n\t\tfontWeight: '600',\n\t\tfontSize: 24,\n\t\tlineHeight: 32,\n\t\tletterSpacing: 0,\n\t},\n\ttitle1Mobile: {\n\t\tfontWeight: '600',\n\t\tfontSize: 20,\n\t\tlineHeight: 30,\n\t\tletterSpacing: 0,\n\t},\n\ttitle2: {\n\t\tfontWeight: '600',\n\t\tfontSize: 20,\n\t\tlineHeight: 28,\n\t\tletterSpacing: 0,\n\t},\n\ttitle2Mobile: {\n\t\tfontWeight: '600',\n\t\tfontSize: 18,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttitle3: {\n\t\tfontWeight: '600',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttitle3Mobile: {\n\t\tfontWeight: '500',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\ttitle4: {\n\t\tfontWeight: '400',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\ttextPlaceholder: {\n\t\tfontWeight: '400',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\ttitle4Mobile: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\tbodyRegularMobile: {\n\t\tfontWeight: '400',\n\t\tfontSize: 14,\n\t\tlineHeight: 18,\n\t\tletterSpacing: 0,\n\t},\n\tbodyRegular: {\n\t\tfontWeight: '400',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\n\tbodySmall: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\tbuttonLarge: {\n\t\tfontWeight: '600',\n\t\tfontSize: 16,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tbuttonRegular: {\n\t\tfontWeight: '600',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tcaptionMobile: {\n\t\tfontWeight: '500',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\tcaptionBold: {\n\t\tfontWeight: '700',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\ttext1Bold: {\n\t\tfontWeight: '700',\n\t\tfontSize: 10,\n\t\tlineHeight: 14,\n\t\tletterSpacing: 0,\n\t},\n\ttoast: {\n\t\tfontWeight: '400',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttoastMobile: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n};\n\n// For backward compatibility\nexport const DEFAULT_THEME = {\n\tcolorsV2: COLORS,\n\tfonts: FONTS,\n};\n"],"names":["BASE_COLORS","COLORS","FONTS","DEFAULT_THEME"],"mappings":"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"}
+{"version":3,"file":"Theme.js","sources":["../../../src/constants/Theme.ts"],"sourcesContent":["export const BASE_COLORS = {\n\tbrand: {\n\t\t900: '#28034E',\n\t\t850: '#360A63',\n\t\t800: '#4B1583',\n\t\t700: '#5E3A83',\n\t\t500: '#731DCF',\n\t\t100: '#F3EDF9',\n\t\t50: '#EFE6F9',\n\t\t10: '#F9F3FF',\n\t\t7: '#F7F2FC',\n\t\t5: '#FDFBFF',\n\t},\n\tgrayscale: {\n\t\t900: '#212121',\n\t\t700: '#616161',\n\t\t500: '#9E9E9E',\n\t\t400: '#BDBDBD',\n\t\t200: '#E0E0E0',\n\t\t100: '#F0F0F0',\n\t\t70: '#F7F7F7',\n\t\t50: '#FAFAFA',\n\t\twhite: '#FFFFFF',\n\t\talpha: '#00000088',\n\t},\n\tnegative: {\n\t\t900: '#B92321',\n\t\t700: '#D53434',\n\t\t100: '#FFCED4',\n\t\t50: '#FFEBEF',\n\t},\n\twarning: {\n\t\t900: '#99631B',\n\t\t500: '#FEC02D',\n\t\t100: '#FFEABE',\n\t\t50: '#FFF7E5',\n\t},\n\tpositive: {\n\t\t900: '#00580E',\n\t\t700: '#1A872C',\n\t\t100: '#C3E4C4',\n\t\t50: '#E6F4E7',\n\t},\n\tbikAi: {\n\t\t500: 'linear-gradient(93deg, #FF166A 0.37%, #FB5F08 100%)',\n\t\t100: 'linear-gradient(93deg, #FEBAD2 0.37%, #FDD1B9 100%)',\n\t\t50: 'linear-gradient(93deg, #FFE6EE 0.37%, #FFF0E7 100%)',\n\t},\n};\n\nexport const COLORS = {\n\tbackground: {\n\t\tinactive: BASE_COLORS.grayscale['200'],\n\t\tbase: BASE_COLORS.grayscale['100'],\n\t\tinverse: BASE_COLORS.brand['900'],\n\t\tinverseLight: BASE_COLORS.brand['800'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\tbrandLight: BASE_COLORS.brand['50'],\n\t\tbrandVeryLight: BASE_COLORS.brand['10'],\n\t\tbrandUltraLight: BASE_COLORS.brand['7'],\n\t\tbrandGhost: BASE_COLORS.brand['5'],\n\t\tpureWhite: BASE_COLORS.grayscale.white,\n\t\tbrandTint: BASE_COLORS.brand['100'],\n\t\tbrandHovered: BASE_COLORS.brand['850'],\n\t\tnegative: {\n\t\t\tvibrant: BASE_COLORS.negative['700'],\n\t\t\tlight: BASE_COLORS.negative['50'],\n\t\t},\n\t\twarning: {\n\t\t\tvibrant: BASE_COLORS.warning['500'],\n\t\t\tlight: BASE_COLORS.warning['50'],\n\t\t},\n\t\tpositive: {\n\t\t\tvibrant: BASE_COLORS.positive['700'],\n\t\t\tlight: BASE_COLORS.positive['50'],\n\t\t},\n\t\tblue: {\n\t\t\tlight: '#E5F2FF',\n\t\t},\n\t},\n\ticon: { placeholder: '#9E9E9E' },\n\tscrim: {\n\t\tstandard: '#00000099',\n\t},\n\tsurface: {\n\t\tstandard: BASE_COLORS.grayscale['white'],\n\t\tsubdued: BASE_COLORS.grayscale['50'],\n\t\thovered: BASE_COLORS.grayscale['100'],\n\t\tgrey: BASE_COLORS.grayscale['70'],\n\t\tai: BASE_COLORS.bikAi['500'],\n\t\taiLight: BASE_COLORS.bikAi['50'],\n\t},\n\tcontent: {\n\t\tprimary: BASE_COLORS.grayscale['900'],\n\t\tsecondary: BASE_COLORS.grayscale['700'],\n\t\tplaceholder: BASE_COLORS.grayscale['500'],\n\t\tinactive: BASE_COLORS.grayscale['400'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\tprimaryInverse: BASE_COLORS.grayscale['white'],\n\t\tsecondaryInverse: '#ffffffcc',\n\t\tnegative: BASE_COLORS.negative['900'],\n\t\twarning: BASE_COLORS.warning['900'],\n\t\tpositive: BASE_COLORS.positive['900'],\n\t\tblue: '#28458F',\n\t\tai: BASE_COLORS.bikAi['500'],\n\t},\n\tstroke: {\n\t\tprimary: BASE_COLORS.grayscale['200'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\tnegative: {\n\t\t\tlightAlt: BASE_COLORS.negative['100'],\n\t\t\tvibrant: BASE_COLORS.negative['700'],\n\t\t},\n\t\twarning: {\n\t\t\tlightAlt: BASE_COLORS.warning['100'],\n\t\t\tvibrant: BASE_COLORS.warning['500'],\n\t\t},\n\t\tpositive: {\n\t\t\tlightAlt: BASE_COLORS.positive['100'],\n\t\t\tvibrant: BASE_COLORS.positive['700'],\n\t\t},\n\t\tbrandLightAlt: '#DDCCF0',\n\t\tbrandSubdued: BASE_COLORS.brand['700'],\n\t\tblue: {\n\t\t\tlightAlt: '#C3D5E5',\n\t\t},\n\t\tai: {\n\t\t\tlightAlt: '#FEBAD2',\n\t\t\tvibrant: '#F23275',\n\t\t},\n\t},\n\tspecial: {\n\t\twhatsapp: {\n\t\t\tbrand: '#25D366',\n\t\t\tgradient: 'linear-gradient(360deg, #20B038 0%, #60D66A 100%)',\n\t\t\tdark: '#455A64',\n\t\t\tgradientArr: ['#20B038', '#60D66A'],\n\t\t},\n\t\tbrand: {\n\t\t\tgoogle: '#DD4B39',\n\t\t\tfacebook: '#1877F2',\n\t\t},\n\t},\n\ttext: {\n\t\tprimary: BASE_COLORS.grayscale['900'],\n\t\tsecondary: BASE_COLORS.grayscale['700'],\n\t\tplaceholder: BASE_COLORS.grayscale['500'],\n\t\tdisabled: BASE_COLORS.grayscale['400'],\n\t\twhite: BASE_COLORS.grayscale['white'],\n\t\tbrand: BASE_COLORS.brand['500'],\n\t\taltPrimary: BASE_COLORS.brand['900'],\n\t\taltSecondary: BASE_COLORS.brand['800'],\n\t},\n};\n\nexport const FONTS = {\n\tdisplay: {\n\t\tfontWeight: '400',\n\t\tfontSize: 32,\n\t\tlineHeight: 40,\n\t\tletterSpacing: 0,\n\t},\n\ttitleXLarge: {\n\t\tfontWeight: '600',\n\t\tfontSize: 32,\n\t\tlineHeight: 40,\n\t\tletterSpacing: 0,\n\t},\n\ttitleLarge: {\n\t\tfontWeight: '600',\n\t\tfontSize: 28,\n\t\tlineHeight: 40,\n\t\tletterSpacing: 0,\n\t},\n\ttitleMedium: {\n\t\tfontWeight: '600',\n\t\tfontSize: 20,\n\t\tlineHeight: 28,\n\t\tletterSpacing: 0,\n\t},\n\ttitleRegular: {\n\t\tfontWeight: '600',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttitleSmall: {\n\t\tfontWeight: '600',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tbodyPrimary: {\n\t\tfontWeight: '400',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\tbodyLarge: {\n\t\tfontWeight: '400',\n\t\tfontSize: 20,\n\t\tlineHeight: 28,\n\t\tletterSpacing: 0,\n\t},\n\tbodySecondary: {\n\t\tfontWeight: '400',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tcaption: {\n\t\tfontWeight: '400',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\tbodyTinySemiBold: {\n\t\tfontWeight: '600',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\ttiny: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\tsubHeading: {\n\t\tfontWeight: '600',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\n\ttitle1: {\n\t\tfontWeight: '600',\n\t\tfontSize: 24,\n\t\tlineHeight: 32,\n\t\tletterSpacing: 0,\n\t},\n\ttitle1Mobile: {\n\t\tfontWeight: '600',\n\t\tfontSize: 20,\n\t\tlineHeight: 30,\n\t\tletterSpacing: 0,\n\t},\n\ttitle2: {\n\t\tfontWeight: '600',\n\t\tfontSize: 20,\n\t\tlineHeight: 28,\n\t\tletterSpacing: 0,\n\t},\n\ttitle2Mobile: {\n\t\tfontWeight: '600',\n\t\tfontSize: 18,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttitle3: {\n\t\tfontWeight: '600',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttitle3Mobile: {\n\t\tfontWeight: '500',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\ttitle4: {\n\t\tfontWeight: '400',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\ttextPlaceholder: {\n\t\tfontWeight: '400',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\ttitle4Mobile: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\tbodyRegularMobile: {\n\t\tfontWeight: '400',\n\t\tfontSize: 14,\n\t\tlineHeight: 18,\n\t\tletterSpacing: 0,\n\t},\n\tbodyRegular: {\n\t\tfontWeight: '400',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\n\tbodySmall: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\tbuttonLarge: {\n\t\tfontWeight: '600',\n\t\tfontSize: 16,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tbuttonRegular: {\n\t\tfontWeight: '600',\n\t\tfontSize: 14,\n\t\tlineHeight: 20,\n\t\tletterSpacing: 0,\n\t},\n\tcaptionMobile: {\n\t\tfontWeight: '500',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n\tcaptionBold: {\n\t\tfontWeight: '700',\n\t\tfontSize: 12,\n\t\tlineHeight: 16,\n\t\tletterSpacing: 0,\n\t},\n\ttext1Bold: {\n\t\tfontWeight: '700',\n\t\tfontSize: 10,\n\t\tlineHeight: 14,\n\t\tletterSpacing: 0,\n\t},\n\ttoast: {\n\t\tfontWeight: '400',\n\t\tfontSize: 16,\n\t\tlineHeight: 24,\n\t\tletterSpacing: 0,\n\t},\n\ttoastMobile: {\n\t\tfontWeight: '400',\n\t\tfontSize: 10,\n\t\tlineHeight: 12,\n\t\tletterSpacing: 0,\n\t},\n};\n\n// For backward compatibility\nexport const DEFAULT_THEME = {\n\tcolorsV2: COLORS,\n\tfonts: FONTS,\n};\n"],"names":["BASE_COLORS","COLORS","FONTS","DEFAULT_THEME"],"mappings":"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"}

package/dist/esm/editor/extensions/editorDropdown.styles.d.ts

@@ -8,5 +8,11 @@ export declare const MentionLabel: import('styled-components').StyledComponent<"
 export declare const MentionPresenceDot: import('styled-components').StyledComponent<"span", any, {
     $online?: boolean | undefined;
 }, never>;
-export declare const SlashLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
-export declare const SlashDescription: import('styled-components').StyledComponent<"span", any, {}, never>;
+export declare const SlashLabel: import('styled-components').StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const SlashDescription: import('styled-components').StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;

package/dist/esm/editor/extensions/editorDropdown.styles.js

@@ -1,33 +1,31 @@
 import t from "styled-components";
 import { COLORS as o } from "../../constants/Theme.js";
-const i = t.div`
+import { BodyCaption as n } from "../../components/TypographyStyle.js";
+const c = t.div`
 	background: ${o.surface.standard};
-	border: 1px solid ${o.stroke.primary};
-	border-radius: 8px;
+	border-radius: 4px;
 	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-	padding: 4px;
 	min-width: 330px;
 	max-height: 260px;
 	overflow-y: auto;
 	font-size: 14px;
 	color: ${o.content.primary};
-`, a = t.div`
+`, p = t.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	padding: 12px 16px;
+	padding: 8px;
 	min-height: 43px;
-	border-radius: 6px;
 	cursor: pointer;
 	color: ${o.content.primary};
 	background: ${({ $isActive: r }) => r ? o.surface.hovered : "transparent"};
-`, p = t.img`
+`, s = t.img`
 	width: 24px;
 	height: 24px;
 	border-radius: 50%;
 	object-fit: cover;
 	flex-shrink: 0;
-`, s = t.div`
+`, d = t.div`
 	width: 24px;
 	height: 24px;
 	border-radius: 50%;
@@ -39,32 +37,30 @@ const i = t.div`
 	font-weight: 600;
 	color: ${o.content.primary};
 	flex-shrink: 0;
-`, c = t.span`
+`, l = t.span`
 	font-weight: 500;
 	color: ${o.content.primary};
-`, d = t.span`
+`, h = t.span`
 	width: 8px;
 	height: 8px;
 	border-radius: 50%;
 	background: ${({ $online: r }) => r ? o.content.positive : o.content.placeholder};
 	margin-left: auto;
 	flex-shrink: 0;
-`, x = t.span`
-	font-weight: 500;
+`, x = t(n)`
 	color: ${o.content.primary};
-`, l = t.span`
-	font-size: 12px;
+`, f = t(n)`
 	color: ${o.content.secondary};
 	margin-left: auto;
 `;
 export {
-  i as DropdownContainer,
-  a as DropdownItem,
-  p as MentionAvatar,
-  s as MentionAvatarFallback,
-  c as MentionLabel,
-  d as MentionPresenceDot,
-  l as SlashDescription,
+  c as DropdownContainer,
+  p as DropdownItem,
+  s as MentionAvatar,
+  d as MentionAvatarFallback,
+  l as MentionLabel,
+  h as MentionPresenceDot,
+  f as SlashDescription,
   x as SlashLabel
 };
 //# sourceMappingURL=editorDropdown.styles.js.map

package/dist/esm/editor/extensions/editorDropdown.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"editorDropdown.styles.js","sources":["../../../../src/editor/extensions/editorDropdown.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n\tpadding: 4px;\n\tmin-width: 330px;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const DropdownItem = styled.div<{ $isActive?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 12px 16px;\n\tmin-height: 43px;\n\tborder-radius: 6px;\n\tcursor: pointer;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${({ $isActive }) =>\n\t\t$isActive ? COLORS.surface.hovered : 'transparent'};\n`;\n\nexport const MentionAvatar = styled.img`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tobject-fit: cover;\n\tflex-shrink: 0;\n`;\n\nexport const MentionAvatarFallback = styled.div`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.hovered};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tcolor: ${COLORS.content.primary};\n\tflex-shrink: 0;\n`;\n\nexport const MentionLabel = styled.span`\n\tfont-weight: 500;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const MentionPresenceDot = styled.span<{ $online?: boolean }>`\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: ${({ $online }) =>\n\t\t$online ? COLORS.content.positive : COLORS.content.placeholder};\n\tmargin-left: auto;\n\tflex-shrink: 0;\n`;\n\nexport const SlashLabel = styled.span`\n\tfont-weight: 500;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const SlashDescription = styled.span`\n\tfont-size: 12px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-left: auto;\n`;\n"],"names":["DropdownContainer","styled","COLORS","DropdownItem","$isActive","MentionAvatar","MentionAvatarFallback","MentionLabel","MentionPresenceDot","$online","SlashLabel","SlashDescription"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA,eACzBC,EAAO,QAAQ,QAAQ;AAAA,qBACjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQhCA,EAAO,QAAQ,OAAO;AAAA,GAGnBC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQzBC,EAAO,QAAQ,OAAO;AAAA,eACjB,CAAC,EAAE,WAAAE,QAChBA,IAAYF,EAAO,QAAQ,UAAU,aAAa;AAAA,GAGvCG,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBK,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA,eAI7BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBK,IAAeN,EAAO;AAAA;AAAA,UAEzBC,EAAO,QAAQ,OAAO;AAAA,GAGnBM,IAAqBP,EAAO;AAAA;AAAA;AAAA;AAAA,eAI1B,CAAC,EAAE,SAAAQ,EAAA,MAChBA,IAAUP,EAAO,QAAQ,WAAWA,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,GAKnDQ,IAAaT,EAAO;AAAA;AAAA,UAEvBC,EAAO,QAAQ,OAAO;AAAA,GAGnBS,IAAmBV,EAAO;AAAA;AAAA,UAE7BC,EAAO,QAAQ,SAAS;AAAA;AAAA;"}
+{"version":3,"file":"editorDropdown.styles.js","sources":["../../../../src/editor/extensions/editorDropdown.styles.ts"],"sourcesContent":["import { BodyCaption } from '@src/index';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const DropdownContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 4px;\n\tbox-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n\tmin-width: 330px;\n\tmax-height: 260px;\n\toverflow-y: auto;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const DropdownItem = styled.div<{ $isActive?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 8px;\n\tmin-height: 43px;\n\tcursor: pointer;\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${({ $isActive }) =>\n\t\t$isActive ? COLORS.surface.hovered : 'transparent'};\n`;\n\nexport const MentionAvatar = styled.img`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tobject-fit: cover;\n\tflex-shrink: 0;\n`;\n\nexport const MentionAvatarFallback = styled.div`\n\twidth: 24px;\n\theight: 24px;\n\tborder-radius: 50%;\n\tbackground: ${COLORS.surface.hovered};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\tcolor: ${COLORS.content.primary};\n\tflex-shrink: 0;\n`;\n\nexport const MentionLabel = styled.span`\n\tfont-weight: 500;\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const MentionPresenceDot = styled.span<{ $online?: boolean }>`\n\twidth: 8px;\n\theight: 8px;\n\tborder-radius: 50%;\n\tbackground: ${({ $online }) =>\n\t\t$online ? COLORS.content.positive : COLORS.content.placeholder};\n\tmargin-left: auto;\n\tflex-shrink: 0;\n`;\n\nexport const SlashLabel = styled(BodyCaption)`\n\tcolor: ${COLORS.content.primary};\n`;\n\nexport const SlashDescription = styled(BodyCaption)`\n\tcolor: ${COLORS.content.secondary};\n\tmargin-left: auto;\n`;\n"],"names":["DropdownContainer","styled","COLORS","DropdownItem","$isActive","MentionAvatar","MentionAvatarFallback","MentionLabel","MentionPresenceDot","$online","SlashLabel","BodyCaption","SlashDescription"],"mappings":";;;AAIO,MAAMA,IAAoBC,EAAO;AAAA,eACzBC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO5BA,EAAO,QAAQ,OAAO;AAAA,GAGnBC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAOzBC,EAAO,QAAQ,OAAO;AAAA,eACjB,CAAC,EAAE,WAAAE,QAChBA,IAAYF,EAAO,QAAQ,UAAU,aAAa;AAAA,GAGvCG,IAAgBJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBK,IAAwBL,EAAO;AAAA;AAAA;AAAA;AAAA,eAI7BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAM3BA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBK,IAAeN,EAAO;AAAA;AAAA,UAEzBC,EAAO,QAAQ,OAAO;AAAA,GAGnBM,IAAqBP,EAAO;AAAA;AAAA;AAAA;AAAA,eAI1B,CAAC,EAAE,SAAAQ,EAAA,MAChBA,IAAUP,EAAO,QAAQ,WAAWA,EAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,GAKnDQ,IAAaT,EAAOU,CAAW;AAAA,UAClCT,EAAO,QAAQ,OAAO;AAAA,GAGnBU,IAAmBX,EAAOU,CAAW;AAAA,UACxCT,EAAO,QAAQ,SAAS;AAAA;AAAA;"}

package/dist/esm/icons/Arrows/Chevron/ChevronUp.d.ts

@@ -1,7 +1,6 @@
 import { SVGProps } from 'react';
 interface Props extends SVGProps<SVGSVGElement> {
-    size?: number | string;
     color?: string;
 }
-declare const SvgChevronUp: ({ size, color, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const SvgChevronUp: ({ width, height, color, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default SvgChevronUp;

package/dist/esm/icons/Arrows/Chevron/ChevronUp.js

@@ -1,35 +1,31 @@
 import { jsx as e } from "react/jsx-runtime";
-const d = ({
-  size: o = 24,
+const C = ({
+  width: l = 24,
+  height: o = 24,
   color: r = "currentColor",
-  ...l
-}) => {
-  const t = {
-    width: o,
+  ...n
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: l,
     height: o,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
     color: r,
-    ...l
-  };
-  return /* @__PURE__ */ e(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...t,
-      children: /* @__PURE__ */ e(
-        "path",
-        {
-          fillRule: "evenodd",
-          clipRule: "evenodd",
-          d: "M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z",
-          fill: "currentColor"
-        }
-      )
-    }
-  );
-};
+    ...n,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
 export {
-  d as default
+  C as default
 };
 //# sourceMappingURL=ChevronUp.js.map

package/dist/esm/icons/Arrows/Chevron/ChevronUp.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChevronUp.js","sources":["../../../../../src/icons/Arrows/Chevron/ChevronUp.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\n\ninterface Props extends SVGProps<SVGSVGElement> {\n\tsize?: number | string;\n\tcolor?: string;\n}\nconst SvgChevronUp = ({\n\tsize = 24,\n\tcolor = 'currentColor',\n\t...rest\n}: Props) => {\n\tconst props = {\n\t\twidth: size,\n\t\theight: size,\n\t\tcolor,\n\t\t...rest,\n\t};\n\treturn (\n\t\t<svg\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<path\n\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\td=\"M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\nexport default SvgChevronUp;\n"],"names":["SvgChevronUp","size","color","rest","props","jsx"],"mappings":";AAMA,MAAMA,IAAe,CAAC;AAAA,EACrB,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACJ,MAAa;AACZ,QAAMC,IAAQ;AAAA,IACb,OAAOH;AAAA,IACP,QAAQA;AAAA,IACR,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA;AAEJ,SACC,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,OAAM;AAAA,MACL,GAAGD;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,UAAS;AAAA,UACT,UAAS;AAAA,UACT,GAAE;AAAA,UACF,MAAK;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAGH;"}
+{"version":3,"file":"ChevronUp.js","sources":["../../../../../src/icons/Arrows/Chevron/ChevronUp.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\n\ninterface Props extends SVGProps<SVGSVGElement> {\n\tcolor?: string;\n}\nconst SvgChevronUp = ({\n\twidth = 24,\n\theight = 24,\n\tcolor = 'currentColor',\n\t...rest\n}: Props) => {\n\treturn (\n\t\t<svg\n\t\t\twidth={width}\n\t\t\theight={height}\n\t\t\tviewBox=\"0 0 24 24\"\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tcolor={color}\n\t\t\t{...rest}\n\t\t>\n\t\t\t<path\n\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\td=\"M11.2929 8.29289C11.6834 7.90237 12.3166 7.90237 12.7071 8.29289L18.7071 14.2929C19.0976 14.6834 19.0976 15.3166 18.7071 15.7071C18.3166 16.0976 17.6834 16.0976 17.2929 15.7071L12 10.4142L6.70711 15.7071C6.31658 16.0976 5.68342 16.0976 5.29289 15.7071C4.90237 15.3166 4.90237 14.6834 5.29289 14.2929L11.2929 8.29289Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t/>\n\t\t</svg>\n\t);\n};\nexport default SvgChevronUp;\n"],"names":["SvgChevronUp","width","height","color","rest","jsx"],"mappings":";AAKA,MAAMA,IAAe,CAAC;AAAA,EACrB,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACJ,MAEE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAAJ;AAAA,IACA,QAAAC;AAAA,IACA,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,OAAM;AAAA,IACN,OAAAC;AAAA,IACC,GAAGC;AAAA,IAEJ,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,UAAS;AAAA,QACT,UAAS;AAAA,QACT,GAAE;AAAA,QACF,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EACN;AAAA;"}