npm - @bikdotai/bik-component-library - Versions diffs - 0.0.836-0 → 0.0.836-beta.0 - Mend

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

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.

Files changed (27) hide show

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),c=d.default.button`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),o=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./themes.js"),a=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},d=a(o),l=d.default.button`
 	all: unset;
 	outline: none;
 	cursor: pointer;
@@ -113,6 +113,9 @@
 			.text {
 				opacity: 0;
 			}
+			/* Hide any icons while loading so only the spinner shows — the
+			   leading icon carries an inline z-index that would otherwise sit
+			   above the spinner overlay. */
 			.icon-leading,
 			.icon-component,
 			.icon-trailing {
@@ -167,5 +170,5 @@
 		gap: 8.33px;
 		${t=>t.matchParentWidth?"margin: auto;":""}
 	}
-`,l=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=c;exports.ButtonCustomDashedBorder=l;
+`,r=()=>i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"line-top"}),i.jsx("div",{className:"line-left"}),i.jsx("div",{className:"line-bottom"}),i.jsx("div",{className:"line-right"})]});exports.Button=l;exports.ButtonCustomDashedBorder=r;
 //# sourceMappingURL=Button.styled.js.map

package/dist/cjs/components/button/Button.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"kRAqBaA,EAASC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAkBVC,GAAWA,EAAM,YAAc,OAAS,IAAM,KAAM;AAAA;AAAA,GAEnEA,GAAWA,EAAM,iBAAmB,gBAAkB,EAAG;AAAA,qBACvCA,GACpBC,EAAAA,mBACCD,EAAM,WACNA,EAAM,KACNA,EAAM,QACNA,EAAM,SACNA,EAAM,WACP,CAAC;AAAA;AAAA,GAECA,GACFA,EAAM,WAAW,WAAW,MAAM,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAMEA,EAAM,iBAAmB,2BAA6B,EAAE;AAAA,gBAC/CE,EAAAA,WAAWF,EAAM,WAAYA,EAAM,IAAI,CAAC;AAAA,OAEnD,YAAYE,EAAAA,WAAWF,EAAM,WAAYA,EAAM,IAAI,CAAC;AAAA,GACtDG,EAAAA,UACDH,EAAM,SAAW,MACjBA,EAAM,WACNA,EAAM,KACNA,EAAM,QACNA,EAAM,KACP,CAAC,EAAE;AAAA;AAAA;AAAA,YAGSA,GACVA,EAAM,OAAS,QAAUA,EAAM,OAAS,KAAO,OAAS,MAAM;AAAA,WACrDA,GACTA,EAAM,OAAS,QAAUA,EAAM,OAAS,KAAO,OAAS,MAAM;AAAA;AAAA;AAAA;AAAA,YAIpDA,GACVA,EAAM,OAAS,QAAUA,EAAM,OAAS,KAAO,OAAS,MAAM;AAAA,WACrDA,GACTA,EAAM,OAAS,QAAUA,EAAM,OAAS,KAAO,OAAS,MAAM;AAAA;AAAA;AAAA;AAAA,WAIrDA,GACTI,WAASJ,EAAM,WAAYA,EAAM,KAAMA,EAAM,QAASA,EAAM,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,YAI3DA,GACVA,EAAM,OAAS,QAAUA,EAAM,OAAS,KAAO,OAAS,MAAM;AAAA,WACrDA,GACTA,EAAM,OAAS,QAAUA,EAAM,OAAS,KAAO,OAAS,MAAM;AAAA;AAAA;AAAA,GAG7DA,GACFK,EAAAA,uBACCL,EAAM,WACNA,EAAM,KACNA,EAAM,UACHM,SAAO,OAAO,cACdN,EAAM,MACNM,EAAAA,OAAO,OAAO,SAAS,QACvB,MACJ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMCN,GACF,CAACA,EAAM,UACP,CAACA,EAAM,WACPA,EAAM,YACLA,EAAM,YAAc,YAAcA,EAAM,YAAc,gBACvD;AAAA;AAAA;AAAA,IAGEA,EAAM,iBAAmB,2BAA6B,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxD;AAAA,YACQM,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA,YAGpBA,EAAAA,OAAO,WAAW,KAAK;AAAA;AAAA,GAEhC;AAAA;AAAA,GAEAC,EAAAA,eAAeP,EAAM,WAAYA,EAAM,KAAMA,EAAM,OAAO,CAAC;AAAA,GAC3DK,EAAAA,uBAAuBL,EAAM,WAAYA,EAAM,KAAMM,EAAAA,OAAO,QAAQ,KAAK,CAAC;AAAA,EAC3E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMWN,GACVA,EAAM,aAAe,OAAS,OAAS,aAAa;AAAA,IAClDA,GACFQ,EAAAA,wBAAwBR,EAAM,WAAYA,EAAM,KAAMA,EAAM,OAAO,CAAC;AAAA;AAAA,YAE1DA,GAAUS,EAAAA,qBAAqBT,EAAM,OAAO,CAAC;AAAA;AAAA,IAErDA,GACFK,EAAAA,uBACCL,EAAM,WACNA,EAAM,KACNM,EAAAA,OAAO,OAAO,OACf,CAAC;AAAA;AAAA;AAAA,GAGAN,GACF,CAACA,EAAM,UACP,CAACA,EAAM,WACP;AAAA;AAAA;AAAA,OAGKA,EAAM,iBAAmB,2BAA6B,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAOzDA,EAAM,OAAS,QACf;AAAA,eACSM,EAAAA,OAAO,WAAW,YAAY;AAAA;AAAA;AAAA,eAG9BA,EAAAA,OAAO,WAAW,YAAY;AAAA;AAAA,MAGxC;AAAA;AAAA;AAAA;AAAA,KAIAC,EAAAA,eAAeP,EAAM,WAAYA,EAAM,KAAMA,EAAM,OAAO,CAAC;AAAA,KAC3DK,EAAAA,uBAAuBL,EAAM,WAAYA,EAAM,KAAMM,EAAAA,OAAO,QAAQ,KAAK,CAAC;AAAA,IAC3E;AAAA;AAAA,GAEAN,GAEDA,EAAM,UA8DJ;AAAA;AAAA;AAAA,IAGDU,EAAAA,iBAAiBV,EAAM,WAAYA,EAAM,KAAMA,EAAM,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAe7DA,EAAM,YACH,qBAAqBW,EAAAA,iCACrBX,EAAM,YACN,EAAA,CACC,IACD,EACJ;AAAA,cACWE,EAAAA,WAAWF,EAAM,WAAYA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAWhDY,EAAAA,qBACDZ,EAAM,WACNA,EAAM,KACNA,EAAM,QACNA,EAAM,WAAA,CACN;AAAA;AAAA;AAAA;AAAA;AAAA,KAtGA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAMCA,EAAM,iBAAmB,2BAA6B,EAAE;AAAA,eAC/CE,EAAAA,WAAWF,EAAM,WAAYA,EAAM,IAAI,CAAC;AAAA,OAElDA,EAAM,YACH,qBAAqBa,EAAAA,+BACrBb,EAAM,YACN,EAAA,CACC,GACD,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OASGc,EAAAA,yBAAyBd,EAAM,WAAYA,EAAM,OAAO,CAAC;AAAA;AAAA,MAG3DA,EAAM,OAAS,QAAUA,EAAM,aAAe,OAC3CA,EAAM,SACL,qBAAqBM,EAAAA,OAAO,OAAO,OAAO,IAC1C,qBAAqBA,EAAAA,OAAO,QAAQ,OAAO,IAC5C,EACJ;AAAA,MAECN,EAAM,aAAe,UAClB,qBAAqBM,SAAO,WAAW,UAAU,IACjDN,EAAM,aAAe,gBACrB,qBAAqBM,EAAAA,OAAO,QAAQ,OAAO,IAC3C,EACJ;AAAA,MAECN,EAAM,aAAe,WACrBA,EAAM,OAAS,QACfA,EAAM,OAAS,MACf,CAACA,EAAM,SACP,CAACA,EAAM,YACJ,qBAAqBM,EAAAA,OAAO,WAAW,OAAO,IAC9C,EACJ;AAAA;AAAA,KAGAN,EAAM,aAAe,OAClBe,EAAAA,kCAAkCf,EAAM,WAAYA,EAAM,QAAQ,EAClE,EACJ;AAAA,KAECA,EAAM,QACHgB,iCAA+BhB,EAAM,WAAYA,EAAM,QAAQ,EAC/D,EACJ;AAAA,IAgDC;AAAA;AAAA;AAAA;AAAA;AAAA,IAKCA,GAAWA,EAAM,iBAAmB,gBAAkB,EAAG;AAAA;AAAA,EAIjDiB,EAA2B,IAEtCC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAC,EAAAA,IAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAAAA,IAAC,MAAA,CAAI,UAAU,WAAA,CAAY,EAC3BA,EAAAA,IAAC,MAAA,CAAI,UAAU,aAAA,CAAc,EAC7BA,EAAAA,IAAC,MAAA,CAAI,UAAU,YAAA,CAAa,CAAA,EAC7B"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t/* Hide any icons while loading so only the spinner shows — the\n\t\t\t leading icon carries an inline z-index that would otherwise sit\n\t\t\t above the spinner overlay. */\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/cjs/components/button/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
1	+ {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\t// Figma Helpdesk V1 (9090-9519): all xs buttons are 24px (px-6 py-4).\n\t\t// The border sits inside (border-box), so bordered types use the same\n\t\t// 4px vertical padding as the rest — a smaller value shrank them to 22px.\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}

package/dist/cjs/components/checkBox/CheckBox.styled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),s=require("../../utils/rgba.js"),t=require("../../constants/Theme.js"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=c(i),d=o.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(i),c=o.default.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
@@ -8,7 +8,10 @@
 				background: ${t.COLORS.surface.subdued};
 			}
 		`}
-`,r=o.default.div`
+`,d=o.default.div`
+	/* Fixed border-box footprint per size so the box is identical when checked
+	   and unchecked (previously the checked box grew, shifting the row). The
+	   size matches the inner check SVG: XS 12, SMALL 16, DEFAULT 18. */
 	width: ${e=>e.size==="XS"?12:e.size==="SMALL"?16:18}px;
 	height: ${e=>e.size==="XS"?12:e.size==="SMALL"?16:18}px;
 	border-radius: 4px;
@@ -32,8 +35,8 @@
 		`}
 	${e=>e.clicked&&!e.isDisabled&&i.css`
 			outline: 3px solid
-				${e.checked?e.activeColor?s.rgba(e.activeColor,.24):t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
+				${e.checked?e.activeColor?t.COLORS.stroke.brandLightAlt:t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
 			outline-offset: 2px;
 		`}
-`;exports.CheckboxContainer=d;exports.CheckboxIcon=r;
+`;exports.CheckboxContainer=c;exports.CheckboxIcon=d;
 //# sourceMappingURL=CheckBox.styled.js.map

package/dist/cjs/components/checkBox/CheckBox.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ~~rgba } from '@src/utils/rgba';\nimport {~~ COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' \| 'DEFAULT' \| 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? ~~rgba(props~~.~~activeColor, 0~~.~~24)~~\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"~~,"rgba"~~],"mappings":"~~2PAIaA~~,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,~~UASxBC~~,GACTA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA,WACjDA,GACVA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOzDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,GAEC;AAAA,GACCD,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLA,EAAM,~~YACLI~~,EAAAA,~~KAAKJ~~,~~EAAM~~,~~YAAa~~,~~GAAI,EAC5BE,~~EAAAA,OAAO,OAAO,SAAS,SACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}
1	+ {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' \| 'DEFAULT' \| 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\t/* Fixed border-box footprint per size so the box is identical when checked\n\t and unchecked (previously the checked box grew, shifting the row). The\n\t size matches the inner check SVG: XS 12, SMALL 16, DEFAULT 18. */\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":"0NAGaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,UAYxBC,GACTA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA,WACjDA,GACVA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOzDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,GAEC;AAAA,GACCD,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLA,EAAM,YACLE,EAAAA,OAAO,OAAO,cACdA,EAAAA,OAAO,OAAO,SAAS,SACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}

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

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

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

@@ -23,8 +23,8 @@
 	.notification--count {
 		box-sizing: border-box;
 		position: absolute;
-		top: -4px;
-		right: -4px;
+		top: -2px;
+		right: -2px;
 		/* display-only: let clicks fall through to the IconButton underneath */
 		pointer-events: none;
 		border-radius: 50%;

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

	@@ -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/* 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: -~~4px~~;\n\t\tright: -~~4px~~;\n\t\t/ display-only: let clicks fall through to the IconButton underneath */\n\t\tpointer-events: none;\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;AAAA,gBAYtBA,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	+ {"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/* 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\t/ display-only: let clicks fall through to the IconButton underneath */\n\t\tpointer-events: none;\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;AAAA,gBAYtBA,SAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}

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

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

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

	@@ -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\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t~~\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t~~}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":"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,WAAAC,EAAa,GACb,WAAYC,CACb,IAAM,CACL,GAAIR,EACH,cACE,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAS,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,EAAYZ,EAAkB,GAAK,MAAQ,OAAOA,CAAe,EAEjEa,EACLD,EAAU,QAAU,EAAI,GAAKA,EAAU,SAAW,EAAI,GAAK,GAE5D,OACCE,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOf,EAC7B,SAAA,CAAAW,EAAAA,IAACK,EAAAA,QAAA,CAAQ,KAAMb,EAAS,UAAW,SAClC,SAAAQ,EAAAA,IAACM,EAAAA,WAAA,CACA,KACEP,GAAcQ,EAAAA,QAIhB,MAAOb,EACP,OAAQC,EACR,YAAAE,EACA,WAAYP,EACZ,UACCM,IACCN,EAASkB,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAApB,EACA,cAAaK,EACb,MAAO,CACN,MAAOK,EACP,OAAQA,EACR,UAAW,~~aACX~~,~~QAAS~~,~~OACT,WAAY,SACZ,eAAgB,QAAA,CACjB,~~CAAA,EAEF,EACCT,EAAkB,GAClBW,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"}
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\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":"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,WAAAC,EAAa,GACb,WAAYC,CACb,IAAM,CACL,GAAIR,EACH,cACE,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAS,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,EAAYZ,EAAkB,GAAK,MAAQ,OAAOA,CAAe,EAEjEa,EACLD,EAAU,QAAU,EAAI,GAAKA,EAAU,SAAW,EAAI,GAAK,GAE5D,OACCE,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOf,EAC7B,SAAA,CAAAW,EAAAA,IAACK,EAAAA,QAAA,CAAQ,KAAMb,EAAS,UAAW,SAClC,SAAAQ,EAAAA,IAACM,EAAAA,WAAA,CACA,KACEP,GAAcQ,EAAAA,QAIhB,MAAOb,EACP,OAAQC,EACR,YAAAE,EACA,WAAYP,EACZ,UACCM,IACCN,EAASkB,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAApB,EACA,cAAaK,EACb,MAAO,CACN,MAAOK,EACP,OAAQA,EACR,UAAW,YAAA,CACZ,CAAA,EAEF,EACCT,EAAkB,GAClBW,EAAAA,IAAC,MAAA,CACA,UAAU,sBACV,MAAO,CAAE,MAAOE,EAAW,OAAQA,CAAA,EAEnC,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAC,CAAA,CAAU,CAAA,CAAA,CACzC,EAEF,CAEF"}

package/dist/esm/components/button/Button.styled.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import { jsxs as d, Fragment as c, jsx as n } from "react/jsx-runtime";
-import l from "styled-components";
+import { jsxs as d, Fragment as l, jsx as n } from "react/jsx-runtime";
+import c from "styled-components";
 import { COLORS as e } from "../../constants/Theme.js";
-import { getBackgroundColor as r, getPadding as i, getBorder as u, getColor as b, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as g, getDisabledTextColor as y, getHoverButtonBackgroundCustom as h, getHoverButtonBackground as $, getHoverButtonTextDecorationStyle as s, generateInverseHoverBackground as v, getLoadingBorder as x, getLoadingButtonBackgroundCustom as m, getLoadingBackground as z } from "./themes.js";
-const w = l.button`
+import { getBackgroundColor as r, getPadding as i, getBorder as u, getColor as b, getDashedBorderStyling as o, getClickEffect as a, generateDisabledStyling as g, getDisabledTextColor as h, getHoverButtonBackgroundCustom as y, getHoverButtonBackground as s, getHoverButtonTextDecorationStyle as $, generateInverseHoverBackground as v, getLoadingBorder as x, getLoadingButtonBackgroundCustom as m, getLoadingBackground as z } from "./themes.js";
+const B = c.button`
 	all: unset;
 	outline: none;
 	cursor: pointer;
@@ -93,7 +93,7 @@ const w = l.button`
 		cursor: ${(t) => t.buttonType === "text" ? "auto" : "not-allowed"};
 		${(t) => g(t.buttonType, t.size, t.inverse)}
 		.text {
-			color: ${(t) => y(t.inverse)} !important;
+			color: ${(t) => h(t.inverse)} !important;
 		}
 		${(t) => o(
   t.buttonType,
@@ -139,6 +139,9 @@ const w = l.button`
 			.text {
 				opacity: 0;
 			}
+			/* Hide any icons while loading so only the spinner shows — the
+			   leading icon carries an inline z-index that would otherwise sit
+			   above the spinner overlay. */
 			.icon-leading,
 			.icon-component,
 			.icon-trailing {
@@ -177,7 +180,7 @@ const w = l.button`
 				width: 100%;
 				${t.matchParentWidth ? "justify-content: center;" : ""}
 				padding: ${i(t.buttonType, t.size)};
-				{${t.buttonColor ? `background-color: ${h(
+				{${t.buttonColor ? `background-color: ${y(
     t.buttonColor,
     15
   )}` : ""}}
@@ -189,13 +192,13 @@ const w = l.button`
 					left: 0;
 					width: 100%;
 					height: 100%;
-					${$(t.buttonType, t.inverse)}
+					${s(t.buttonType, t.inverse)}
 				}
 				${t.size === "chip" && t.buttonType !== "text" ? t.darkMode ? `background-color: ${e.stroke.primary};` : `background-color: ${e.surface.hovered};` : ""}
 				${t.buttonType === "special" ? `background-color: ${e.background.brandLight};` : t.buttonType === "secondaryGray" ? `background-color: ${e.surface.hovered};` : ""}
 				${t.buttonType === "primary" && t.size !== "chip" && t.size !== "xs" && !t.inverse && !t.buttonColor ? `background-color: ${e.background.inverse};` : ""}
 			}
-			${t.buttonType === "text" ? s(t.buttonType, t.disabled) : ""}
+			${t.buttonType === "text" ? $(t.buttonType, t.disabled) : ""}
 			${t.inverse ? v(t.buttonType, t.disabled) : ""}
 		}`
 )}
@@ -205,14 +208,14 @@ const w = l.button`
 		gap: 8.33px;
 		${(t) => t.matchParentWidth ? "margin: auto;" : ""}
 	}
-`, C = () => /* @__PURE__ */ d(c, { children: [
+`, C = () => /* @__PURE__ */ d(l, { children: [
   /* @__PURE__ */ n("div", { className: "line-top" }),
   /* @__PURE__ */ n("div", { className: "line-left" }),
   /* @__PURE__ */ n("div", { className: "line-bottom" }),
   /* @__PURE__ */ n("div", { className: "line-right" })
 ] });
 export {
-  w as Button,
+  B as Button,
   C as ButtonCustomDashedBorder
 };
 //# sourceMappingURL=Button.styled.js.map

package/dist/esm/components/button/Button.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t/* Hide any icons while loading so only the spinner shows — the\n\t\t\t leading icon carries an inline z-index that would otherwise sit\n\t\t\t above the spinner overlay. */\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/esm/components/button/themes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
1	+ {"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\t// Figma Helpdesk V1 (9090-9519): all xs buttons are 24px (px-6 py-4).\n\t\t// The border sits inside (border-box), so bordered types use the same\n\t\t// 4px vertical padding as the rest — a smaller value shrank them to 22px.\n\t\treturn '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' \|\| size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' \| '2.0' \| '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/*\n Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n \n @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n \n @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n /\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/*\n Generates a new color by adjusting the brightness of the given color by a specified percentage.\n \n @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n \n @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n \n @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n /\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' \|\| type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' \|\|\n\t\ttype === 'tertiary' \|\|\n\t\ttype === 'tertiaryGray' \|\|\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight} !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' \|\| type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' \|\| type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","getColor","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","ButtonRegularAI","ButtonLargeAI","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","getBorderColor","error","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","amt","R","G","B","getLoadingButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","generateDisabledStyling","getDashedBorderStyling","borderColor","getClickEffect","getLoadingBackground","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}

package/dist/esm/components/checkBox/CheckBox.styled.js CHANGED Viewed

@@ -1,7 +1,6 @@
-import r, { css as i } from "styled-components";
-import { rgba as t } from "../../utils/rgba.js";
+import t, { css as i } from "styled-components";
 import { COLORS as o } from "../../constants/Theme.js";
-const c = r.div`
+const s = t.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
@@ -11,7 +10,10 @@ const c = r.div`
 				background: ${o.surface.subdued};
 			}
 		`}
-`, n = r.div`
+`, c = t.div`
+	/* Fixed border-box footprint per size so the box is identical when checked
+	   and unchecked (previously the checked box grew, shifting the row). The
+	   size matches the inner check SVG: XS 12, SMALL 16, DEFAULT 18. */
 	width: ${(e) => e.size === "XS" ? 12 : e.size === "SMALL" ? 16 : 18}px;
 	height: ${(e) => e.size === "XS" ? 12 : e.size === "SMALL" ? 16 : 18}px;
 	border-radius: 4px;
@@ -35,12 +37,12 @@ const c = r.div`
 		`}
 	${(e) => e.clicked && !e.isDisabled && i`
 			outline: 3px solid
-				${e.checked ? e.activeColor ? t(e.activeColor, 0.24) : o.stroke.positive.lightAlt : o.surface.hovered};
+				${e.checked ? e.activeColor ? o.stroke.brandLightAlt : o.stroke.positive.lightAlt : o.surface.hovered};
 			outline-offset: 2px;
 		`}
 `;
 export {
-  c as CheckboxContainer,
-  n as CheckboxIcon
+  s as CheckboxContainer,
+  c as CheckboxIcon
 };
 //# sourceMappingURL=CheckBox.styled.js.map

package/dist/esm/components/checkBox/CheckBox.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ~~rgba } from '@src/utils/rgba';\nimport {~~ COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' \| 'DEFAULT' \| 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? ~~rgba(props~~.~~activeColor, 0~~.~~24)~~\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"~~,"rgba"~~],"mappings":"~~;;;AAIO~~,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,~~UASzB~~,CAACC,MACTA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA,WAClD,CAACA,MACVA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1D,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,GAEC;AAAA,GACA,CAACD,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLA,EAAM,~~cACLI~~,~~EAAKJ~~,~~EAAM~~,~~aAAa~~,~~IAAI,IAC5BE,~~EAAO,OAAO,SAAS,WACxBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}
1	+ {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' \| 'DEFAULT' \| 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\t/* Fixed border-box footprint per size so the box is identical when checked\n\t and unchecked (previously the checked box grew, shifting the row). The\n\t size matches the inner check SVG: XS 12, SMALL 16, DEFAULT 18. */\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon"],"mappings":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA;AAAA;AAAA;AAAA,UAYzB,CAACC,MACTA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA,WAClD,CAACA,MACVA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1D,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,GAEC;AAAA,GACA,CAACD,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLA,EAAM,cACLE,EAAO,OAAO,gBACdA,EAAO,OAAO,SAAS,WACxBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}

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

@@ -15,6 +15,7 @@ interface WhatsNewProps {
     iconHeight?: number;
     iconColor?: string;
     iconPadding?: number;
+    /** Width/height of the square icon button box. Defaults to 24. */
     buttonSize?: number;
     customIcon?: React.ComponentType<{
         width?: number;

package/dist/esm/components/whats-new/WhatsNew.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\ticonColor?: string;\n\ticonPadding?: number;\n\tbuttonSize?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tbuttonSize,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\ticonColor={iconColor}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tbuttonSize={buttonSize}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel","contentItem"],"mappings":";;;;;~~AA6BO~~,MAAMA,IAAoC,CAAC;AAAA,EACjD,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC,IAAwB;AAAA,EACxB,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,EAAE,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,EAAA,IAAoBC,EAAA;AAcxD,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAfgB,MAAMT,EAAU,EAAI;AAAA,QAgBpC,iBAAAI;AAAA,QACA,QAAAL;AAAA,QACA,WAAAI;AAAA,QACA,SAAAnB;AAAA,QACA,QAAQQ;AAAA,QACR,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAAX;AAAA,QACA,SA7BiB,MAAMC,EAAU,EAAK;AAAA,QA8BtC,SAASE;AAAA,QACT,WAAAC;AAAA,QACA,OAAApB;AAAA,QACA,mBAAAE;AAAA,QACA,iBAAAC;AAAA,QACA,uBAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,gBApCwB,CAACsB,MAAiC;AAI5D,UAAIrB,KACHA,EAAeqB,CAAW;AAAA,QAE5B;AAAA,QA8BG,qBAAApB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}
1	+ {"version":3,"file":"WhatsNew.js","sources":["../../../../src/components/whats-new/WhatsNew.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { WhatsNewContent } from './WhatsNew.types';\nimport { WhatsNewButton } from './WhatsNewButton';\nimport { WhatsNewPanel } from './WhatsNewPanel';\nimport { useWhatsNewContext } from './WhatsNewProvider';\n\ninterface WhatsNewProps {\n\ttitle?: string;\n\ttooltip?: string;\n\tsearchPlaceholder?: string;\n\temptyStateTitle?: string;\n\temptyStateDescription?: string;\n\tnoResultsText?: string;\n\twidth?: string;\n\tonContentClick?: (content: WhatsNewContent) => void;\n\trenderCustomContent?: (content: WhatsNewContent) => React.ReactNode;\n\tbuttonTestId?: string;\n\ticonWidth?: number;\n\ticonHeight?: number;\n\ticonColor?: string;\n\ticonPadding?: number;\n\t/** Width/height of the square icon button box. Defaults to 24. */\n\tbuttonSize?: number;\n\tcustomIcon?: React.ComponentType<{\n\t\twidth?: number;\n\t\theight?: number;\n\t\tcolor?: string;\n\t}>;\n}\n\nexport const WhatsNew: React.FC<WhatsNewProps> = ({\n\ttitle = \"What's new\",\n\ttooltip = \"What's new\",\n\tsearchPlaceholder = 'Search posts',\n\temptyStateTitle = 'Nothing new!',\n\temptyStateDescription = 'There are no new updates or features at the moment. Check back soon!',\n\tnoResultsText = 'Sorry, no results found.',\n\twidth = '480px',\n\tonContentClick,\n\trenderCustomContent,\n\tbuttonTestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tbuttonSize,\n\tcustomIcon,\n}) => {\n\tconst [isOpen, setIsOpen] = useState(false);\n\tconst { whatsNewContent, isLoading, newContentCount } = useWhatsNewContext();\n\n\tconst handleOpen = () => setIsOpen(true);\n\tconst handleClose = () => setIsOpen(false);\n\n\tconst handleContentClick = (contentItem: WhatsNewContent) => {\n\t\t// WhatsNewPanel handles video/redirect logic directly\n\t\t// This handler is only for parent-level analytics/tracking\n\n\t\tif (onContentClick) {\n\t\t\tonContentClick(contentItem);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<WhatsNewButton\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tnewContentCount={newContentCount}\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttooltip={tooltip}\n\t\t\t\ttestId={buttonTestId}\n\t\t\t\ticonWidth={iconWidth}\n\t\t\t\ticonHeight={iconHeight}\n\t\t\t\ticonColor={iconColor}\n\t\t\t\ticonPadding={iconPadding}\n\t\t\t\tbuttonSize={buttonSize}\n\t\t\t\tcustomIcon={customIcon}\n\t\t\t/>\n\t\t\t<WhatsNewPanel\n\t\t\t\tisOpen={isOpen}\n\t\t\t\tonClose={handleClose}\n\t\t\t\tcontent={whatsNewContent}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\ttitle={title}\n\t\t\t\tsearchPlaceholder={searchPlaceholder}\n\t\t\t\temptyStateTitle={emptyStateTitle}\n\t\t\t\temptyStateDescription={emptyStateDescription}\n\t\t\t\tnoResultsText={noResultsText}\n\t\t\t\twidth={width}\n\t\t\t\tonContentClick={handleContentClick}\n\t\t\t\trenderCustomContent={renderCustomContent}\n\t\t\t/>\n\t\t</>\n\t);\n};\n"],"names":["WhatsNew","title","tooltip","searchPlaceholder","emptyStateTitle","emptyStateDescription","noResultsText","width","onContentClick","renderCustomContent","buttonTestId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","customIcon","isOpen","setIsOpen","useState","whatsNewContent","isLoading","newContentCount","useWhatsNewContext","jsxs","Fragment","jsx","WhatsNewButton","WhatsNewPanel","contentItem"],"mappings":";;;;;AA8BO,MAAMA,IAAoC,CAAC;AAAA,EACjD,OAAAC,IAAQ;AAAA,EACR,SAAAC,IAAU;AAAA,EACV,mBAAAC,IAAoB;AAAA,EACpB,iBAAAC,IAAkB;AAAA,EAClB,uBAAAC,IAAwB;AAAA,EACxB,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,gBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpC,EAAE,iBAAAC,GAAiB,WAAAC,GAAW,iBAAAC,EAAA,IAAoBC,EAAA;AAcxD,SACC,gBAAAC,EAAAC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACA,SAfgB,MAAMT,EAAU,EAAI;AAAA,QAgBpC,iBAAAI;AAAA,QACA,QAAAL;AAAA,QACA,WAAAI;AAAA,QACA,SAAAnB;AAAA,QACA,QAAQQ;AAAA,QACR,WAAAC;AAAA,QACA,YAAAC;AAAA,QACA,WAAAC;AAAA,QACA,aAAAC;AAAA,QACA,YAAAC;AAAA,QACA,YAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,gBAAAU;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,QAAAX;AAAA,QACA,SA7BiB,MAAMC,EAAU,EAAK;AAAA,QA8BtC,SAASE;AAAA,QACT,WAAAC;AAAA,QACA,OAAApB;AAAA,QACA,mBAAAE;AAAA,QACA,iBAAAC;AAAA,QACA,uBAAAC;AAAA,QACA,eAAAC;AAAA,QACA,OAAAC;AAAA,QACA,gBApCwB,CAACsB,MAAiC;AAI5D,UAAIrB,KACHA,EAAeqB,CAAW;AAAA,QAE5B;AAAA,QA8BG,qBAAApB;AAAA,MAAA;AAAA,IAAA;AAAA,EACD,GACD;AAEF;"}

package/dist/esm/components/whats-new/WhatsNew.styles.js CHANGED Viewed

@@ -25,8 +25,8 @@ const o = i.div`
 	.notification--count {
 		box-sizing: border-box;
 		position: absolute;
-		top: -4px;
-		right: -4px;
+		top: -2px;
+		right: -2px;
 		/* display-only: let clicks fall through to the IconButton underneath */
 		pointer-events: none;
 		border-radius: 50%;

package/dist/esm/components/whats-new/WhatsNew.styles.js.map CHANGED Viewed

	@@ -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/* 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: -~~4px~~;\n\t\tright: -~~4px~~;\n\t\t/ display-only: let clicks fall through to the IconButton underneath */\n\t\tpointer-events: none;\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;AAAA,gBAYtBA,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	+ {"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/* 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\t/ display-only: let clicks fall through to the IconButton underneath */\n\t\tpointer-events: none;\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;AAAA,gBAYtBA,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;"}

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

@@ -36,6 +36,7 @@ export interface WhatsNewButtonProps {
     iconHeight?: number;
     iconColor?: string;
     iconPadding?: number;
+    /** Width/height of the square icon button box. Defaults to 24. */
     buttonSize?: number;
     customIcon?: React.ComponentType<{
         width?: number;

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

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

package/dist/esm/components/whats-new/WhatsNewButton.js.map CHANGED Viewed

	@@ -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\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t~~\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t~~}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAYC;AACb,MAAM;AACL,MAAIR;AACH,6BACE,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,wBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,IAAA,GACD;AAIF,QAAMC,IAAYZ,IAAkB,KAAK,QAAQ,OAAOA,CAAe,GAEjEa,IACLD,EAAU,UAAU,IAAI,KAAKA,EAAU,WAAW,IAAI,KAAK;AAE5D,SACC,gBAAAE,EAACC,GAAA,EAAsB,OAAOf,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACK,GAAA,EAAQ,MAAMb,GAAS,WAAW,UAClC,UAAA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,MACEP,KAAcQ;AAAAA,QAIhB,OAAOb;AAAA,QACP,QAAQC;AAAA,QACR,aAAAE;AAAA,QACA,YAAYP;AAAA,QACZ,WACCM,MACCN,IAASkB,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAEjD,SAAApB;AAAA,QACA,eAAaK;AAAA,QACb,OAAO;AAAA,UACN,OAAOK;AAAA,UACP,QAAQA;AAAA,UACR,WAAW;AAAA,~~UACX,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,~~QAAA;AAAA,~~MACjB~~;AAAA,IAAA,GAEF;AAAA,IACCT,IAAkB,KAClB,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,GAAW,QAAQA,EAAA;AAAA,QAEnC,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAC,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}
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\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":";;;;;;AAQO,MAAMA,IAAgD,CAAC;AAAA,EAC7D,SAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,QAAAC,IAAS;AAAA,EACT,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,YAAYC;AACb,MAAM;AACL,MAAIR;AACH,6BACE,OAAA,EAAI,OAAO,EAAE,QAAQ,aAErB,UAAA;AAAA,MAAA,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,cAAc;AAAA,YACd,WAAW;AAAA,UAAA;AAAA,QACZ;AAAA,MAAA;AAAA,wBAEA,SAAA,EACC,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,OAAA,CAMF;AAAA,IAAA,GACD;AAIF,QAAMC,IAAYZ,IAAkB,KAAK,QAAQ,OAAOA,CAAe,GAEjEa,IACLD,EAAU,UAAU,IAAI,KAAKA,EAAU,WAAW,IAAI,KAAK;AAE5D,SACC,gBAAAE,EAACC,GAAA,EAAsB,OAAOf,GAC7B,UAAA;AAAA,IAAA,gBAAAW,EAACK,GAAA,EAAQ,MAAMb,GAAS,WAAW,UAClC,UAAA,gBAAAQ;AAAA,MAACM;AAAA,MAAA;AAAA,QACA,MACEP,KAAcQ;AAAAA,QAIhB,OAAOb;AAAA,QACP,QAAQC;AAAA,QACR,aAAAE;AAAA,QACA,YAAYP;AAAA,QACZ,WACCM,MACCN,IAASkB,EAAO,QAAQ,QAAQA,EAAO,QAAQ;AAAA,QAEjD,SAAApB;AAAA,QACA,eAAaK;AAAA,QACb,OAAO;AAAA,UACN,OAAOK;AAAA,UACP,QAAQA;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA,GAEF;AAAA,IACCT,IAAkB,KAClB,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAO,EAAE,OAAOE,GAAW,QAAQA,EAAA;AAAA,QAEnC,UAAA,gBAAAF,EAAC,OAAA,EAAI,WAAU,eAAe,UAAAC,EAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACzC,GAEF;AAEF;"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.836-0",
+	"version": "0.0.836-beta.0",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",

package/dist/cjs/utils/rgba.js DELETED Viewed

	@@ -1,2 +0,0 @@
1	- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=(s,e=1)=>{let r=s.replace("#","");r.length===3&&(r=`${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`);const t=parseInt(r.substring(0,2),16),n=parseInt(r.substring(2,4),16),g=parseInt(r.substring(4,6),16);return e>1&&e<=100&&(e=e/100),`rgba(${t}, ${n}, ${g}, ${e})`};exports.rgba=$;
2	- //# sourceMappingURL=rgba.js.map

package/dist/cjs/utils/rgba.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"rgba.js","sources":["../../../src/utils/rgba.ts"],"sourcesContent":["/**\n * Convert hex string to RGBA color.\n *\n * @see https://gist.github.com/danieliser/b4b24c9f772066bcf0a6\n * @example\n * rgba('#000', 0.5) // rgba(0, 0, 0, 0.5)\n */\nexport const rgba = (hexCode: string, opacity = 1) => {\n\tlet hex = hexCode.replace('#', '');\n\n\tif (hex.length === 3) {\n\t\thex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;\n\t}\n\n\tconst r = parseInt(hex.substring(0, 2), 16);\n\tconst g = parseInt(hex.substring(2, 4), 16);\n\tconst b = parseInt(hex.substring(4, 6), 16);\n\n\t/* Backward compatibility for whole number based opacity values. */\n\tif (opacity > 1 && opacity <= 100) {\n\t\topacity = opacity / 100;\n\t}\n\n\treturn `rgba(${r}, ${g}, ${b}, ${opacity})`;\n};\n"],"names":["rgba","hexCode","opacity","hex","r","g","b"],"mappings":"gFAOO,MAAMA,EAAO,CAACC,EAAiBC,EAAU,IAAM,CACrD,IAAIC,EAAMF,EAAQ,QAAQ,IAAK,EAAE,EAE7BE,EAAI,SAAW,IAClBA,EAAM,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,IAG7D,MAAMC,EAAI,SAASD,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EACpCE,EAAI,SAASF,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EACpCG,EAAI,SAASH,EAAI,UAAU,EAAG,CAAC,EAAG,EAAE,EAG1C,OAAID,EAAU,GAAKA,GAAW,MAC7BA,EAAUA,EAAU,KAGd,QAAQE,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKJ,CAAO,GACzC"}

package/dist/esm/utils/rgba.js DELETED Viewed

@@ -1,10 +0,0 @@
-const g = (n, s = 1) => {
-  let r = n.replace("#", "");
-  r.length === 3 && (r = `${r[0]}${r[0]}${r[1]}${r[1]}${r[2]}${r[2]}`);
-  const e = parseInt(r.substring(0, 2), 16), t = parseInt(r.substring(2, 4), 16), $ = parseInt(r.substring(4, 6), 16);
-  return s > 1 && s <= 100 && (s = s / 100), `rgba(${e}, ${t}, ${$}, ${s})`;
-};
-export {
-  g as rgba
-};
-//# sourceMappingURL=rgba.js.map

package/dist/esm/utils/rgba.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"rgba.js","sources":["../../../src/utils/rgba.ts"],"sourcesContent":["/**\n * Convert hex string to RGBA color.\n *\n * @see https://gist.github.com/danieliser/b4b24c9f772066bcf0a6\n * @example\n * rgba('#000', 0.5) // rgba(0, 0, 0, 0.5)\n */\nexport const rgba = (hexCode: string, opacity = 1) => {\n\tlet hex = hexCode.replace('#', '');\n\n\tif (hex.length === 3) {\n\t\thex = `${hex[0]}${hex[0]}${hex[1]}${hex[1]}${hex[2]}${hex[2]}`;\n\t}\n\n\tconst r = parseInt(hex.substring(0, 2), 16);\n\tconst g = parseInt(hex.substring(2, 4), 16);\n\tconst b = parseInt(hex.substring(4, 6), 16);\n\n\t/* Backward compatibility for whole number based opacity values. */\n\tif (opacity > 1 && opacity <= 100) {\n\t\topacity = opacity / 100;\n\t}\n\n\treturn `rgba(${r}, ${g}, ${b}, ${opacity})`;\n};\n"],"names":["rgba","hexCode","opacity","hex","r","g","b"],"mappings":"AAOO,MAAMA,IAAO,CAACC,GAAiBC,IAAU,MAAM;AACrD,MAAIC,IAAMF,EAAQ,QAAQ,KAAK,EAAE;AAEjC,EAAIE,EAAI,WAAW,MAClBA,IAAM,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC,GAAGA,EAAI,CAAC,CAAC;AAG7D,QAAMC,IAAI,SAASD,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpCE,IAAI,SAASF,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE,GACpCG,IAAI,SAASH,EAAI,UAAU,GAAG,CAAC,GAAG,EAAE;AAG1C,SAAID,IAAU,KAAKA,KAAW,QAC7BA,IAAUA,IAAU,MAGd,QAAQE,CAAC,KAAKC,CAAC,KAAKC,CAAC,KAAKJ,CAAO;AACzC;"}