@bikdotai/bik-component-library 0.0.825-5 → 0.0.825-6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/whats-new/WhatsNew.styles.js +3 -6
- package/dist/cjs/components/whats-new/WhatsNew.styles.js.map +1 -1
- package/dist/cjs/components/whats-new/WhatsNewButton.js +2 -2
- package/dist/cjs/components/whats-new/WhatsNewButton.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNew.styles.js +1 -4
- package/dist/esm/components/whats-new/WhatsNew.styles.js.map +1 -1
- package/dist/esm/components/whats-new/WhatsNewButton.js +60 -46
- package/dist/esm/components/whats-new/WhatsNewButton.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,15 +20,12 @@
|
|
|
20
20
|
}
|
|
21
21
|
|
|
22
22
|
/* tag-circle badge — Figma node 9496:35458 */
|
|
23
|
+
/* diameter is set inline per digit-count so it is always a perfect circle */
|
|
23
24
|
.notification--count {
|
|
24
25
|
box-sizing: border-box;
|
|
25
26
|
position: absolute;
|
|
26
27
|
top: -2px;
|
|
27
28
|
right: -2px;
|
|
28
|
-
min-width: 12px;
|
|
29
|
-
min-height: 12px;
|
|
30
|
-
aspect-ratio: 1;
|
|
31
|
-
padding: 2px 3px;
|
|
32
29
|
border-radius: 50%;
|
|
33
30
|
background: ${t.COLORS.background.negative.vibrant};
|
|
34
31
|
border: 1px solid ${t.COLORS.surface.standard};
|
|
@@ -178,7 +175,7 @@
|
|
|
178
175
|
&:hover {
|
|
179
176
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
180
177
|
}
|
|
181
|
-
`,
|
|
178
|
+
`,l=n.default.div`
|
|
182
179
|
background-image: url(${e=>e.imageUrl});
|
|
183
180
|
background-size: cover;
|
|
184
181
|
background-position: center;
|
|
@@ -186,5 +183,5 @@
|
|
|
186
183
|
height: ${e=>e.height||"200px"};
|
|
187
184
|
width: ${e=>e.width||"100%"};
|
|
188
185
|
border-radius: 4px;
|
|
189
|
-
`;exports.BackgroundImageContainer=
|
|
186
|
+
`;exports.BackgroundImageContainer=l;exports.MainCardContainer=c;exports.MainContainer=d;exports.WhatsNewIconContainer=r;exports.WhatsNewWrapper=o;
|
|
190
187
|
//# sourceMappingURL=WhatsNew.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -2px;\n\t\tright: -2px;\n\t\
|
|
1
|
+
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t/* diameter is set inline per digit-count so it is always a perfect circle */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -2px;\n\t\tright: -2px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height || '200px'};\n\twidth: ${(props) => props.width || '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWtBA,SAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),b=require("./WhatsNew.styles.js"),m=require("../tooltips/Tooltip.js"),f=require("../icon-button/IconButton.js"),p=require("../../icons/Legacy - Bikayi specific/Services/Marketing.js"),y=({onClick:n,newContentCount:e=0,isOpen:s=!1,isLoading:a=!1,tooltip:c="What's new",testId:d="whats-new-button",iconWidth:l=24,iconHeight:h=24,iconColor:u,iconPadding:x,customIcon:g})=>{if(a)return t.jsxs("div",{style:{margin:"0px 8px"},children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:`
|
|
2
2
|
@keyframes spin {
|
|
3
3
|
0% { transform: rotate(0deg); }
|
|
4
4
|
100% { transform: rotate(360deg); }
|
|
5
5
|
}
|
|
6
|
-
`})]}):t.jsxs(
|
|
6
|
+
`})]});const i=e>99?"99+":String(e),o=i.length>=3?20:i.length===2?16:12;return t.jsxs(b.WhatsNewIconContainer,{count:e,children:[t.jsx(m.Tooltip,{body:c,placement:"bottom",children:t.jsx(f.IconButton,{Icon:g??p.default,width:l,height:h,iconPadding:x,isSelected:s,iconColor:u??(s?r.COLORS.content.brand:r.COLORS.content.primary),onClick:n,"data-testid":d,style:{width:24,height:24,boxSizing:"border-box"}})}),e>0&&t.jsx("div",{className:"notification--count",style:{width:o,height:o},children:t.jsx("div",{className:"count--text",children:i})})]})};exports.WhatsNewButton=y;
|
|
7
7
|
//# sourceMappingURL=WhatsNewButton.js.map
|
|
@@ -1 +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\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\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
|
|
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":"mVAQaA,EAAgD,CAAC,CAC7D,QAAAC,EACA,gBAAAC,EAAkB,EAClB,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,aACV,OAAAC,EAAS,mBACT,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EACA,YAAAC,EACA,WAAYC,CACb,IAAM,CACL,GAAIP,EACH,cACE,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAQ,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,GACP,OAAQ,GACR,OAAQ,oBACR,UAAW,oBACX,aAAc,MACd,UAAW,yBAAA,CACZ,CAAA,QAEA,QAAA,CACC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAMF,CAAA,EACD,EAIF,MAAMC,EAAYX,EAAkB,GAAK,MAAQ,OAAOA,CAAe,EAEjEY,EACLD,EAAU,QAAU,EAAI,GAAKA,EAAU,SAAW,EAAI,GAAK,GAE5D,OACCE,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOd,EAC7B,SAAA,CAAAU,EAAAA,IAACK,EAAAA,QAAA,CAAQ,KAAMZ,EAAS,UAAW,SAClC,SAAAO,EAAAA,IAACM,EAAAA,WAAA,CACA,KACEP,GAAcQ,EAAAA,QAIhB,MAAOZ,EACP,OAAQC,EACR,YAAAE,EACA,WAAYP,EACZ,UACCM,IACCN,EAASiB,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAAnB,EACA,cAAaK,EACb,MAAO,CAAE,MAAO,GAAI,OAAQ,GAAI,UAAW,YAAA,CAAa,CAAA,EAE1D,EACCJ,EAAkB,GAClBU,EAAAA,IAAC,MAAA,CACA,UAAU,sBACV,MAAO,CAAE,MAAOE,EAAW,OAAQA,CAAA,EAEnC,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAC,CAAA,CAAU,CAAA,CAAA,CACzC,EAEF,CAEF"}
|
|
@@ -22,15 +22,12 @@ const a = t.div`
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
/* tag-circle badge — Figma node 9496:35458 */
|
|
25
|
+
/* diameter is set inline per digit-count so it is always a perfect circle */
|
|
25
26
|
.notification--count {
|
|
26
27
|
box-sizing: border-box;
|
|
27
28
|
position: absolute;
|
|
28
29
|
top: -2px;
|
|
29
30
|
right: -2px;
|
|
30
|
-
min-width: 12px;
|
|
31
|
-
min-height: 12px;
|
|
32
|
-
aspect-ratio: 1;
|
|
33
|
-
padding: 2px 3px;
|
|
34
31
|
border-radius: 50%;
|
|
35
32
|
background: ${e.background.negative.vibrant};
|
|
36
33
|
border: 1px solid ${e.surface.standard};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -2px;\n\t\tright: -2px;\n\t\
|
|
1
|
+
{"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* tag-circle badge — Figma node 9496:35458 */\n\t/* diameter is set inline per digit-count so it is always a perfect circle */\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -2px;\n\t\tright: -2px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height || '200px'};\n\twidth: ${(props) => props.width || '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":";;AAGO,MAAMA,IAAwBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAWtBA,EAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAO,QAAQ,QAAQ;AAAA;AAAA,GAIrBC,IAAkBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,EAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQpCE,IAAgBH,EAAO;AAAA;AAAA;AAAA;AAAA,GAMvBI,IAAoBJ,EAAO;AAAA,eACzBC,EAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAY7BI,IAA2BL,EAAO;AAAA,yBAKtB,CAACM,MAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAIvC,CAACA,MAAUA,EAAM,UAAU,OAAO;AAAA,UACnC,CAACA,MAAUA,EAAM,SAAS,MAAM;AAAA;AAAA;"}
|
|
@@ -1,57 +1,71 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { COLORS as
|
|
3
|
-
import { WhatsNewIconContainer as
|
|
4
|
-
import { Tooltip as
|
|
5
|
-
import { IconButton as
|
|
6
|
-
import
|
|
7
|
-
const
|
|
8
|
-
onClick:
|
|
1
|
+
import { jsxs as n, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { COLORS as s } from "../../constants/Theme.js";
|
|
3
|
+
import { WhatsNewIconContainer as b } from "./WhatsNew.styles.js";
|
|
4
|
+
import { Tooltip as x } from "../tooltips/Tooltip.js";
|
|
5
|
+
import { IconButton as y } from "../icon-button/IconButton.js";
|
|
6
|
+
import u from "../../icons/Legacy - Bikayi specific/Services/Marketing.js";
|
|
7
|
+
const W = ({
|
|
8
|
+
onClick: a,
|
|
9
9
|
newContentCount: i = 0,
|
|
10
10
|
isOpen: o = !1,
|
|
11
|
-
isLoading:
|
|
12
|
-
tooltip:
|
|
13
|
-
testId:
|
|
14
|
-
iconWidth:
|
|
11
|
+
isLoading: d = !1,
|
|
12
|
+
tooltip: c = "What's new",
|
|
13
|
+
testId: h = "whats-new-button",
|
|
14
|
+
iconWidth: l = 24,
|
|
15
15
|
iconHeight: m = 24,
|
|
16
|
-
iconColor:
|
|
17
|
-
iconPadding:
|
|
18
|
-
customIcon:
|
|
19
|
-
}) =>
|
|
20
|
-
|
|
21
|
-
"div",
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
16
|
+
iconColor: f,
|
|
17
|
+
iconPadding: p,
|
|
18
|
+
customIcon: g
|
|
19
|
+
}) => {
|
|
20
|
+
if (d)
|
|
21
|
+
return /* @__PURE__ */ n("div", { style: { margin: "0px 8px" }, children: [
|
|
22
|
+
/* @__PURE__ */ t(
|
|
23
|
+
"div",
|
|
24
|
+
{
|
|
25
|
+
style: {
|
|
26
|
+
width: 16,
|
|
27
|
+
height: 16,
|
|
28
|
+
border: "2px solid #f3f3f3",
|
|
29
|
+
borderTop: "2px solid #731DCF",
|
|
30
|
+
borderRadius: "50%",
|
|
31
|
+
animation: "spin 1s linear infinite"
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
),
|
|
35
|
+
/* @__PURE__ */ t("style", { children: `
|
|
34
36
|
@keyframes spin {
|
|
35
37
|
0% { transform: rotate(0deg); }
|
|
36
38
|
100% { transform: rotate(360deg); }
|
|
37
39
|
}
|
|
38
40
|
` })
|
|
39
|
-
] })
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
{
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
41
|
+
] });
|
|
42
|
+
const e = i > 99 ? "99+" : String(i), r = e.length >= 3 ? 20 : e.length === 2 ? 16 : 12;
|
|
43
|
+
return /* @__PURE__ */ n(b, { count: i, children: [
|
|
44
|
+
/* @__PURE__ */ t(x, { body: c, placement: "bottom", children: /* @__PURE__ */ t(
|
|
45
|
+
y,
|
|
46
|
+
{
|
|
47
|
+
Icon: g ?? u,
|
|
48
|
+
width: l,
|
|
49
|
+
height: m,
|
|
50
|
+
iconPadding: p,
|
|
51
|
+
isSelected: o,
|
|
52
|
+
iconColor: f ?? (o ? s.content.brand : s.content.primary),
|
|
53
|
+
onClick: a,
|
|
54
|
+
"data-testid": h,
|
|
55
|
+
style: { width: 24, height: 24, boxSizing: "border-box" }
|
|
56
|
+
}
|
|
57
|
+
) }),
|
|
58
|
+
i > 0 && /* @__PURE__ */ t(
|
|
59
|
+
"div",
|
|
60
|
+
{
|
|
61
|
+
className: "notification--count",
|
|
62
|
+
style: { width: r, height: r },
|
|
63
|
+
children: /* @__PURE__ */ t("div", { className: "count--text", children: e })
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
] });
|
|
67
|
+
};
|
|
54
68
|
export {
|
|
55
|
-
|
|
69
|
+
W as WhatsNewButton
|
|
56
70
|
};
|
|
57
71
|
//# sourceMappingURL=WhatsNewButton.js.map
|
|
@@ -1 +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\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\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
|
|
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;"}
|