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

@bikdotai/bik-component-library 0.0.840 → 0.0.841-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 (99) hide show

package/dist/cjs/components/avatar/Avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),c=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),_=require("../../assets/icons/task.svg.js"),j=require("../../assets/icons/whatsapp_color.svg.js"),S=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var A=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(A||{});const C=e=>{const[l,g]=m.useState(!1),h=()=>{const s=(e.name||"").split(".").join(" ").split(" ").map(b=>b.charAt(0).toUpperCase()).slice(0,2).join(""),r=u[e.background];return e.size===i.SIZE.LARGE?t.jsx(c.TitleMedium,{style:{color:r},children:s}):e.size===i.SIZE.MEDIUM?t.jsx(c.TitleSmall,{style:{color:r},children:s}):e.size===i.SIZE.SMALL?t.jsx(c.SubHeading,{style:{color:r},children:s}):t.jsx(c.BodyTiny,{style:{color:r,fontSize:"6.667px",lineHeight:"8px"},children:s})},R=()=>e.useNameFallback&&(!e.photoUrl||l)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!l?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{g(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(o.default,{width:11,height:11});case"smtp":return t.jsx(o.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(j.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(_.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},O=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,T=()=>e.type===i.AVATAR_TYPES.IMAGE&&(l||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(S.AvatarStyle,{type:T(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&R(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:u[e.background]})]}),e.inboxSettings&&t.jsx("div",{"data-test":"avatar-inbox-badge",style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{"data-test":"avatar-status-indicator",style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:O()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=C;exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;exports.MESSAGE_CHANNELS=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),c=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),y=require("../../assets/icons/bik_livechat.svg.js"),u=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),f=require("../../assets/icons/gmail.svg.js"),j=require("../../assets/icons/instagram-channel.svg.js"),_=require("../../assets/icons/task.svg.js"),S=require("../../assets/icons/whatsapp_color.svg.js"),A=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),C=require("../../icons/Informational/Communication/Phone.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},o={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var g=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e.VOICE="voice",e))(g||{});const v=e=>{const[l,R]=m.useState(!1),h=()=>{const r=(e.name||"").split(".").join(" ").split(" ").map(x=>x.charAt(0).toUpperCase()).slice(0,2).join(""),s=o[e.background];return e.size===i.SIZE.LARGE?t.jsx(c.TitleMedium,{style:{color:s},children:r}):e.size===i.SIZE.MEDIUM?t.jsx(c.TitleSmall,{style:{color:s},children:r}):e.size===i.SIZE.SMALL?t.jsx(c.SubHeading,{style:{color:s},children:r}):t.jsx(c.BodyTiny,{style:{color:s,fontSize:"6.667px",lineHeight:"8px"},children:r})},I=()=>e.useNameFallback&&(!e.photoUrl||l)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!l?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{R(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),O=()=>{switch(e.channelName){case"email":return t.jsx(u.default,{width:11,height:11});case"smtp":return t.jsx(u.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(j.default,{width:11,height:11});case"whatsapp":return t.jsx(S.default,{width:11,height:11});case"gmail":return t.jsx(f.default,{width:11,height:11});case"tasks":return t.jsx(_.default,{width:11,height:11});case"livechat":return t.jsx(y.default,{width:11,height:11});case"voice":return t.jsx(A.PhoneIconWrapper,{children:t.jsx(C.default,{width:8,height:8,color:a.COLORS.content.secondaryInverse})})}},T=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,b=()=>e.type===i.AVATAR_TYPES.IMAGE&&(l||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(A.AvatarStyle,{type:b(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&I(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:o[e.background]})]}),e.inboxSettings&&t.jsx("div",{"data-test":"avatar-inbox-badge",style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:O()}),e.status&&t.jsx("div",{"data-test":"avatar-status-indicator",style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:T()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=v;exports.BACKGROUND_VS_TEXT_COLOR_MAP=o;exports.MESSAGE_CHANNELS=g;
 //# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\n\t\t);\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-inbox-badge\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-status-indicator\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Phone as PhoneIcon } from '@src/icons';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle, PhoneIconWrapper } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n\tVOICE = 'voice',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\n\t\t);\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.VOICE:\n\t\t\t\treturn (\n\t\t\t\t\t<PhoneIconWrapper>\n\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\twidth={8}\n\t\t\t\t\t\t\theight={8}\n\t\t\t\t\t\t\tcolor={COLORS.content.secondaryInverse}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</PhoneIconWrapper>\n\t\t\t\t);\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-inbox-badge\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tdata-test=\"avatar-status-indicator\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","PhoneIconWrapper","PhoneIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"urBAwBaA,EAA+B,CAC3C,CAACC,EAAAA,KAAK,WAAW,EAAG,GACpB,CAACA,EAAAA,KAAK,KAAK,EAAG,GACd,CAACA,EAAAA,KAAK,MAAM,EAAG,GACf,CAACA,EAAAA,KAAK,KAAK,EAAG,EACf,EAEaC,EAA+B,CAC3C,CAACC,oBAAkB,KAAK,EAAGC,EAAAA,OAAO,QAAQ,UAC1C,CAACD,oBAAkB,KAAK,EAAGC,EAAAA,OAAO,QAAQ,UAC1C,CAACD,oBAAkB,IAAI,EAAGC,EAAAA,OAAO,QAAQ,SACzC,CAACD,oBAAkB,KAAK,EAAGC,EAAAA,OAAO,WAAW,YAC9C,EAmBO,IAAWC,GAAAA,IACjBA,EAAA,UAAY,YACZA,EAAA,UAAY,YACZA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,qBAAuB,MACvBA,EAAA,QAAU,UACVA,EAAA,SAAW,WACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,iBAAmB,mBACnBA,EAAA,MAAQ,QACRA,EAAA,aAAe,WACfA,EAAA,MAAQ,QAdSA,IAAAA,GAAA,CAAA,CAAA,EAiBX,MAAMC,EAAiCC,GAAU,CACvD,KAAM,CAACC,EAAUC,CAAW,EAAIC,EAAAA,SAAkB,EAAK,EAEjDC,EAAc,IAAM,CACzB,MAAMC,GAAYL,EAAM,MAAQ,IAC9B,MAAM,GAAG,EACT,KAAK,GAAG,EACR,MAAM,GAAG,EACT,IAAKM,GAAMA,EAAE,OAAO,CAAC,EAAE,YAAA,CAAa,EACpC,MAAM,EAAG,CAAC,EACV,KAAK,EAAE,EAEHC,EAAQZ,EAA6BK,EAAM,UAAU,EAE3D,OAAIA,EAAM,OAASN,EAAAA,KAAK,YACfc,EAAAA,YAAA,CAAY,MAAO,CAAE,MAAAD,GAAU,SAAAF,EAAS,EAE7CL,EAAM,OAASN,EAAAA,KAAK,aACfe,EAAAA,WAAA,CAAW,MAAO,CAAE,MAAAF,GAAU,SAAAF,EAAS,EAE5CL,EAAM,OAASN,EAAAA,KAAK,YACfgB,EAAAA,WAAA,CAAW,MAAO,CAAE,MAAAH,GAAU,SAAAF,EAAS,EAK/CM,EAAAA,IAACC,EAAAA,SAAA,CAAS,MAAO,CAAE,MAAAL,EAAO,SAAU,UAAW,WAAY,KAAA,EACzD,SAAAF,CAAA,CACF,CAEF,EAEMQ,EAAgB,IACjBb,EAAM,kBAAoB,CAACA,EAAM,UAAYC,IAAaD,EAAM,KAC5DW,EAAAA,IAAC,MAAA,CAAK,SAAAP,EAAA,CAAY,CAAE,EAExBJ,EAAM,iBAAmBA,EAAM,UAAY,CAACC,EAE9CU,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,MAAOG,EAAAA,gBAAgBd,EAAM,IAAI,EACjC,OAAQc,EAAAA,gBAAgBd,EAAM,IAAI,EAClC,MAAO,CACN,aAAcA,GAAO,cAAgB,MACrC,UAAW,SAAA,EAEZ,IAAKA,EAAM,SACX,QAAS,IAAM,CACdE,EAAY,EAAI,CACjB,CAAA,CAAA,EAMFS,EAAAA,IAAC,MAAA,CACA,IAAI,GACJ,MAAOG,EAAAA,gBAAgBd,EAAM,IAAI,EACjC,OAAQc,EAAAA,gBAAgBd,EAAM,IAAI,EAClC,MAAO,CACN,aAAcA,GAAO,cAAgB,MACrC,UAAW,SAAA,EAEZ,IAAKA,EAAM,QAAA,CAAA,EAKRe,EAAiB,IAAM,CAC5B,OAAQf,EAAM,YAAA,CACb,IAAK,QACJ,OAAOW,EAAAA,IAACK,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAC1C,IAAK,OACJ,OAAOL,EAAAA,IAACK,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAC1C,IAAK,WACJ,OAAOL,EAAAA,IAACM,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,mBACJ,OAAON,EAAAA,IAACM,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,YACJ,OAAON,EAAAA,IAACM,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,YACJ,OAAON,EAAAA,IAACO,EAAAA,QAAA,CAAc,MAAO,GAAI,OAAQ,GAAI,EAC9C,IAAK,WACJ,OAAOP,EAAAA,IAACQ,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,EAC7C,IAAK,QACJ,OAAOR,EAAAA,IAACS,EAAAA,QAAA,CAAU,MAAO,GAAI,OAAQ,GAAI,EAC1C,IAAK,QACJ,OAAOT,EAAAA,IAACU,EAAAA,QAAA,CAAS,MAAO,GAAI,OAAQ,GAAI,EACzC,IAAK,WACJ,OAAOV,EAAAA,IAACW,EAAAA,QAAA,CAAgB,MAAO,GAAI,OAAQ,GAAI,EAChD,IAAK,QACJ,aACEC,EAAAA,iBAAA,CACA,SAAAZ,EAAAA,IAACa,EAAAA,QAAA,CACA,MAAO,EACP,OAAQ,EACR,MAAO3B,EAAAA,OAAO,QAAQ,gBAAA,CAAA,EAExB,CAAA,CAGJ,EAEM4B,EAAsB,IACpBzB,EAAM,OACZW,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,gBACCX,EAAM,SAAW,SACdH,EAAAA,OAAO,QAAQ,SAAS,MACxBA,SAAO,QAAQ,SACnB,MAAO,MACP,OAAQ,MACR,aAAc,KAAA,CACf,CAAA,EAEE,KAGC6B,EAAe,IAEnB1B,EAAM,OAAS2B,eAAa,QAC3B1B,GAAY,CAACD,EAAM,WACpBA,EAAM,iBACNA,EAAM,KAEC2B,EAAAA,aAAa,SAGd3B,EAAM,KAGd,OACC4B,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,SAAU,UAAA,EAGX,SAAA,CAAAA,EAAAA,KAACC,EAAAA,YAAA,CACA,KAAMH,EAAA,EACN,KAAM1B,EAAM,KACZ,WAAYA,EAAM,WAEjB,SAAA,CAAAA,EAAM,OAAS2B,eAAa,OAASd,EAAA,EACrCb,EAAM,OAAS2B,EAAAA,aAAa,UAAYhB,EAAAA,IAAC,MAAA,CAAK,aAAc,EAC5DX,EAAM,OAAS2B,EAAAA,aAAa,MAAQ3B,EAAM,MAC1CW,EAAAA,IAACX,EAAM,KAAN,CACA,MAAOP,EAA6BO,EAAM,IAAI,EAC9C,OAAQP,EAA6BO,EAAM,IAAI,EAC/C,MAAOL,EAA6BK,EAAM,UAAU,CAAA,CAAA,CACrD,CAAA,CAAA,EAGDA,EAAM,eACNW,EAAAA,IAAC,MAAA,CACA,YAAU,qBACV,MAAO,CACN,SAAU,WACV,KAAMlB,EAA6BO,EAAM,IAAI,EAAI,KACjD,IAAKP,EAA6BO,EAAM,IAAI,EAAI,KAChD,MAAO,GACP,OAAQ,GACR,aAAcA,GAAO,cAAgB,MACrC,QAAS,OACT,eAAgB,SAChB,gBAAiBA,EAAM,cAAc,WAClCA,EAAM,cAAc,WACnBH,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,WAAW,WACnBG,EAAM,cAAc,WACpBH,SAAO,QAAQ,QACfA,SAAO,QAAQ,SAClB,WAAY,QAAA,EAGZ,SAAAkB,EAAA,CAAe,CAAA,EAGjBf,EAAM,QACNW,EAAAA,IAAC,MAAA,CACA,YAAU,0BACV,MAAO,CACN,SAAU,WACV,KAAMlB,EAA6BO,EAAM,IAAI,EAAI,KACjD,IAAKP,EAA6BO,EAAM,IAAI,EAAI,KAChD,MAAO,GACP,OAAQ,GACR,aAAc,MACd,QAAS,OACT,eAAgB,SAChB,gBAAiBH,EAAAA,OAAO,QAAQ,SAChC,WAAY,QAAA,EAGZ,SAAA4B,EAAA,CAAoB,CAAA,CACtB,CAAA,CAAA,CAIJ"}

package/dist/cjs/components/avatar/Avatar.styled.js CHANGED Viewed

@@ -1,11 +1,19 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("./AvatarHelper.js"),A=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=a(r),d=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),t=require("./AvatarHelper.js"),r=require("../../constants/Theme.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=o(a),A=n.default.div`
 	width: ${e=>t.AVATAR_SIZE_MAP[e.size]+"px"};
 	height: ${e=>t.AVATAR_SIZE_MAP[e.size]+"px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${e=>e.type===t.AVATAR_TYPES.IMAGE?"null":e.background===t.AVATAR_BACKGROUND.LIGHT?A.COLORS.background.base:e.background===t.AVATAR_BACKGROUND.WHITE?A.COLORS.surface.standard:e.background===t.AVATAR_BACKGROUND.BRAND?A.COLORS.background.brandLight:A.COLORS.background.inverse};
-	border: ${e=>e.background===t.AVATAR_BACKGROUND.LIGHT||e.background===t.AVATAR_BACKGROUND.WHITE?"1px solid "+A.COLORS.stroke.primary:0};
+	background-color: ${e=>e.type===t.AVATAR_TYPES.IMAGE?"null":e.background===t.AVATAR_BACKGROUND.LIGHT?r.COLORS.background.base:e.background===t.AVATAR_BACKGROUND.WHITE?r.COLORS.surface.standard:e.background===t.AVATAR_BACKGROUND.BRAND?r.COLORS.background.brandLight:r.COLORS.background.inverse};
+	border: ${e=>e.background===t.AVATAR_BACKGROUND.LIGHT||e.background===t.AVATAR_BACKGROUND.WHITE?"1px solid "+r.COLORS.stroke.primary:0};
 	border-radius: 50%;
-`;exports.AvatarStyle=d;
+`,d=n.default.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 11px;
+	height: 11px;
+	border-radius: 4px;
+	background-color: ${r.COLORS.content.secondary};
+`;exports.AvatarStyle=A;exports.PhoneIconWrapper=d;
 //# sourceMappingURL=Avatar.styled.js.map

package/dist/cjs/components/avatar/Avatar.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":"yPASaA,EAAcC,EAAAA,QAAO;AAAA,UAKvBC,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA,WAC3CA,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIlCA,GACpBA,EAAM,OAASE,EAAAA,aAAa,MACzB,OACAF,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,KAClBJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,QAAQ,SACfJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,OAAO;AAAA,WAClBJ,GACVA,EAAM,aAAeG,EAAAA,kBAAkB,OACvCH,EAAM,aAAeG,EAAAA,kBAAkB,MACpC,aAAeC,EAAAA,OAAO,OAAO,QAC7B,CAAC;AAAA;AAAA"}
1	+ {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t? COLORS.background.brandLight\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n\nexport const PhoneIconWrapper = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 11px;\n\theight: 11px;\n\tborder-radius: 4px;\n\tbackground-color: ${COLORS.content.secondary};\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS","PhoneIconWrapper"],"mappings":"yPASaA,EAAcC,EAAAA,QAAO;AAAA,UAKvBC,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA,WAC3CA,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIlCA,GACpBA,EAAM,OAASE,EAAAA,aAAa,MACzB,OACAF,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,KAClBJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,QAAQ,SACfJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,WAClBA,EAAAA,OAAO,WAAW,OAAO;AAAA,WAClBJ,GACVA,EAAM,aAAeG,EAAAA,kBAAkB,OACvCH,EAAM,aAAeG,EAAAA,kBAAkB,MACpC,aAAeC,EAAAA,OAAO,OAAO,QAC7B,CAAC;AAAA;AAAA,EAIOC,EAAmBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOlBK,EAAAA,OAAO,QAAQ,SAAS;AAAA"}

package/dist/cjs/components/card-selector/CardSelector.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../constants/Theme.js"),c=require("../spinner/Spinner.js"),n=require("../TypographyStyle.js"),l=require("./CardSelector.styled.js"),a=require("../tooltips/Tooltip.js"),s=e=>t.jsx(t.Fragment,{children:e.tooltip?t.jsx(a.Tooltip,{title:e.tooltip,children:t.jsx(l.Container,{style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:t.jsx(d,{...e})})}):t.jsx(l.Container,{style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:t.jsx(d,{...e})})}),d=e=>t.jsx(t.Fragment,{children:e.loading?t.jsx(l.Loader,{children:t.jsx(c.Spinner,{size:"large"})}):t.jsxs(t.Fragment,{children:[e?.icon&&t.jsx("div",{style:{width:24,height:24},children:t.jsx(e.icon,{width:24,color:e.selected?i.COLORS.content.brand:e.disabled?i.COLORS.content.inactive:i.COLORS.content.placeholder})}),t.jsxs("div",{"data-test":e?.dataTestId,children:[e.title&&t.jsx(n.TitleSmall,{style:{color:e.selected?i.COLORS.content.brand:e.disabled?i.COLORS.content.inactive:i.COLORS.content.secondary},children:e.title}),e.subtitle&&t.jsx(n.BodyCaption,{style:{marginTop:e.title?4:0,color:e.selected?i.COLORS.content.brand:e.disabled?i.COLORS.content.inactive:i.COLORS.content.secondary},children:e.subtitle})]})]})});exports.CardSelector=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../constants/Theme.js"),c=require("../spinner/Spinner.js"),n=require("../TypographyStyle.js"),l=require("./CardSelector.styled.js"),a=require("../tooltips/Tooltip.js"),s=e=>t.jsx(t.Fragment,{children:e.tooltip?t.jsx(a.Tooltip,{title:e.tooltip,children:t.jsx(l.Container,{"data-testid":"card-selector-container",style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:t.jsx(d,{...e})})}):t.jsx(l.Container,{"data-testid":"card-selector-container",style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:t.jsx(d,{...e})})}),d=e=>t.jsx(t.Fragment,{children:e.loading?t.jsx(l.Loader,{children:t.jsx(c.Spinner,{size:"large"})}):t.jsxs(t.Fragment,{children:[e?.icon&&t.jsx("div",{style:{width:24,height:24},children:t.jsx(e.icon,{width:24,color:e.selected?i.COLORS.content.brand:e.disabled?i.COLORS.content.inactive:i.COLORS.content.placeholder})}),t.jsxs("div",{"data-test":e?.dataTestId,children:[e.title&&t.jsx(n.TitleSmall,{style:{color:e.selected?i.COLORS.content.brand:e.disabled?i.COLORS.content.inactive:i.COLORS.content.secondary},children:e.title}),e.subtitle&&t.jsx(n.BodyCaption,{style:{marginTop:e.title?4:0,color:e.selected?i.COLORS.content.brand:e.disabled?i.COLORS.content.inactive:i.COLORS.content.secondary},children:e.subtitle})]})]})});exports.CardSelector=s;
 //# sourceMappingURL=CardSelector.js.map

package/dist/cjs/components/card-selector/CardSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsx","Container","EachSelector","Fragment","Loader","Spinner","jsxs","COLORS","TitleSmall","BodyCaption"],"mappings":"2SAuBaA,EAAqDC,qBAG9D,SAAAA,EAAM,cACLC,EAAAA,QAAA,CAAQ,MAAOD,EAAM,QACrB,SAAAE,EAAAA,IAACC,EAAAA,UAAA,CACA,MAAO,CACN,WACCH,EAAM,OAASA,EAAM,SAAW,aAAe,QAAA,EAEjD,SAAUA,EAAM,SAChB,SAAUA,EAAM,UAAY,GAC5B,QAASA,EAAM,SAAW,GAC1B,QAAS,IAAM,CACV,CAACA,EAAM,UAAY,CAACA,EAAM,SAC7BA,EAAM,YAAYA,EAAM,EAAE,CAE5B,EACA,iBAAkB,CAAC,CAACA,EAAM,QAE1B,SAAAE,EAAAA,IAACE,EAAA,CAAc,GAAGJ,CAAA,CAAO,CAAA,CAAA,EAE3B,EAEAE,EAAAA,IAACC,EAAAA,UAAA,CACA,MAAO,CACN,WAAYH,EAAM,OAASA,EAAM,SAAW,aAAe,QAAA,EAE5D,SAAUA,EAAM,SAChB,SAAUA,EAAM,UAAY,GAC5B,QAASA,EAAM,SAAW,GAC1B,QAAS,IAAM,CACV,CAACA,EAAM,UAAY,CAACA,EAAM,SAC7BA,EAAM,YAAYA,EAAM,EAAE,CAE5B,EACA,iBAAkB,CAAC,CAACA,EAAM,QAE1B,SAAAE,EAAAA,IAACE,EAAA,CAAc,GAAGJ,CAAA,CAAO,CAAA,CAAA,EAG5B,EAIII,EAAqDJ,GAEzDE,EAAAA,IAAAG,EAAAA,SAAA,CACE,SAAAL,EAAM,QACNE,EAAAA,IAACI,EAAAA,OAAA,CACA,SAAAJ,EAAAA,IAACK,UAAA,CAAQ,KAAM,OAAA,CAAS,CAAA,CACzB,EAEAC,EAAAA,KAAAH,WAAA,CACE,SAAA,CAAAL,GAAO,YACN,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAE,EAAAA,IAACF,EAAM,KAAN,CACA,MAAO,GACP,MACCA,EAAM,SACHS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGrB,EAEDD,EAAAA,KAAC,MAAA,CAAI,YAAWR,GAAO,WACrB,SAAA,CAAAA,EAAM,OACNE,EAAAA,IAACQ,EAAAA,WAAA,CACA,MAAO,CACN,MAAOV,EAAM,SACVS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAA,EAGlB,SAAAT,EAAM,KAAA,CAAA,EAGRA,EAAM,UACNE,EAAAA,IAACS,EAAAA,YAAA,CACA,MAAO,CACN,UAAWX,EAAM,MAAQ,EAAI,EAC7B,MAAOA,EAAM,SACVS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAA,EAGlB,SAAAT,EAAM,QAAA,CAAA,CACR,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAEF"}
1	+ {"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tdata-testid=\"card-selector-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tdata-testid=\"card-selector-container\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsx","Container","EachSelector","Fragment","Loader","Spinner","jsxs","COLORS","TitleSmall","BodyCaption"],"mappings":"2SAuBaA,EAAqDC,qBAG9D,SAAAA,EAAM,cACLC,EAAAA,QAAA,CAAQ,MAAOD,EAAM,QACrB,SAAAE,EAAAA,IAACC,EAAAA,UAAA,CACA,cAAY,0BACZ,MAAO,CACN,WACCH,EAAM,OAASA,EAAM,SAAW,aAAe,QAAA,EAEjD,SAAUA,EAAM,SAChB,SAAUA,EAAM,UAAY,GAC5B,QAASA,EAAM,SAAW,GAC1B,QAAS,IAAM,CACV,CAACA,EAAM,UAAY,CAACA,EAAM,SAC7BA,EAAM,YAAYA,EAAM,EAAE,CAE5B,EACA,iBAAkB,CAAC,CAACA,EAAM,QAE1B,SAAAE,EAAAA,IAACE,EAAA,CAAc,GAAGJ,CAAA,CAAO,CAAA,CAAA,EAE3B,EAEAE,EAAAA,IAACC,EAAAA,UAAA,CACA,cAAY,0BACZ,MAAO,CACN,WAAYH,EAAM,OAASA,EAAM,SAAW,aAAe,QAAA,EAE5D,SAAUA,EAAM,SAChB,SAAUA,EAAM,UAAY,GAC5B,QAASA,EAAM,SAAW,GAC1B,QAAS,IAAM,CACV,CAACA,EAAM,UAAY,CAACA,EAAM,SAC7BA,EAAM,YAAYA,EAAM,EAAE,CAE5B,EACA,iBAAkB,CAAC,CAACA,EAAM,QAE1B,SAAAE,EAAAA,IAACE,EAAA,CAAc,GAAGJ,CAAA,CAAO,CAAA,CAAA,EAG5B,EAIII,EAAqDJ,GAEzDE,EAAAA,IAAAG,EAAAA,SAAA,CACE,SAAAL,EAAM,QACNE,EAAAA,IAACI,EAAAA,OAAA,CACA,SAAAJ,EAAAA,IAACK,UAAA,CAAQ,KAAM,OAAA,CAAS,CAAA,CACzB,EAEAC,EAAAA,KAAAH,WAAA,CACE,SAAA,CAAAL,GAAO,YACN,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAE,EAAAA,IAACF,EAAM,KAAN,CACA,MAAO,GACP,MACCA,EAAM,SACHS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,WAAA,CAAA,EAGrB,EAEDD,EAAAA,KAAC,MAAA,CAAI,YAAWR,GAAO,WACrB,SAAA,CAAAA,EAAM,OACNE,EAAAA,IAACQ,EAAAA,WAAA,CACA,MAAO,CACN,MAAOV,EAAM,SACVS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAA,EAGlB,SAAAT,EAAM,KAAA,CAAA,EAGRA,EAAM,UACNE,EAAAA,IAACS,EAAAA,YAAA,CACA,MAAO,CACN,UAAWX,EAAM,MAAQ,EAAI,EAC7B,MAAOA,EAAM,SACVS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAA,EAGlB,SAAAT,EAAM,QAAA,CAAA,CACR,CAAA,CAEF,CAAA,CAAA,CACD,CAAA,CAEF"}

package/dist/cjs/components/card-selector/CardSelectorGroup.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("./CardSelector.js"),d=t=>l.jsx("div",{style:{display:"flex",flexDirection:t.align==="vertical"?"column":"row",gap:t.gap||16},children:t.cards.map(e=>l.jsx("div",{style:{display:"flex",flex:1},children:l.jsx(i.CardSelector,{"data-test":t["data-test"],id:e.id,icon:e.icon,title:e.title,subtitle:e.subtitle,selected:e.selected,onCardClick:t.onClick,loading:e.loading,disabled:e.disabled,dataTestId:e.dataTestId,tooltip:e.tooltip})},e.id))});exports.CardSelectorGroup=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),i=require("./CardSelector.js"),d=t=>l.jsx("div",{"data-testid":"card-selector-group",style:{display:"flex",flexDirection:t.align==="vertical"?"column":"row",gap:t.gap||16},children:t.cards.map(e=>l.jsx("div",{style:{display:"flex",flex:1},children:l.jsx(i.CardSelector,{"data-test":t["data-test"],id:e.id,icon:e.icon,title:e.title,subtitle:e.subtitle,selected:e.selected,onCardClick:t.onClick,loading:e.loading,disabled:e.disabled,dataTestId:e.dataTestId,tooltip:e.tooltip})},e.id))});exports.CardSelectorGroup=d;
 //# sourceMappingURL=CardSelectorGroup.js.map

package/dist/cjs/components/card-selector/CardSelectorGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' \| 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap \|\| 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsx","card","CardSelector"],"mappings":"oJAWaA,EAAuDC,GAElEC,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAeD,EAAM,QAAU,WAAa,SAAW,MACvD,IAAKA,EAAM,KAAO,EAAA,EAGlB,SAAAA,EAAM,MAAM,IAAKE,GACjBD,EAAAA,IAAC,MAAA,CAAkB,MAAO,CAAE,QAAS,OAAQ,KAAM,GAClD,SAAAA,EAAAA,IAACE,EAAAA,aAAA,CACA,YAAWH,EAAM,WAAW,EAC5B,GAAIE,EAAK,GACT,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,SAAUA,EAAK,SACf,SAAUA,EAAK,SACf,YAAaF,EAAM,QACnB,QAASE,EAAK,QACd,SAAUA,EAAK,SACf,WAAYA,EAAK,WACjB,QAASA,EAAK,OAAA,CAAA,CACf,EAbSA,EAAK,EAcf,CACA,CAAA,CAAA"}
1	+ {"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' \| 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tdata-testid=\"card-selector-group\"\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap \|\| 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsx","card","CardSelector"],"mappings":"oJAWaA,EAAuDC,GAElEC,EAAAA,IAAC,MAAA,CACA,cAAY,sBACZ,MAAO,CACN,QAAS,OACT,cAAeD,EAAM,QAAU,WAAa,SAAW,MACvD,IAAKA,EAAM,KAAO,EAAA,EAGlB,SAAAA,EAAM,MAAM,IAAKE,GACjBD,EAAAA,IAAC,MAAA,CAAkB,MAAO,CAAE,QAAS,OAAQ,KAAM,GAClD,SAAAA,EAAAA,IAACE,EAAAA,aAAA,CACA,YAAWH,EAAM,WAAW,EAC5B,GAAIE,EAAK,GACT,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,SAAUA,EAAK,SACf,SAAUA,EAAK,SACf,YAAaF,EAAM,QACnB,QAASE,EAAK,QACd,SAAUA,EAAK,SACf,WAAYA,EAAK,WACjB,QAASA,EAAK,OAAA,CAAA,CACf,EAbSA,EAAK,EAcf,CACA,CAAA,CAAA"}

package/dist/cjs/components/carousel/carousel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../../assets/icons/chevronLeft.svg.js"),n=require("../../assets/icons/chevronRight.svg.js"),s=require("@trendyol-js/react-carousel"),i=require("styled-components"),l=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=l(i),c=()=>t.jsx(e,{className:"left",children:t.jsx(o.default,{width:16,height:16,color:"#fff"})}),u=()=>t.jsx(e,{className:"right",children:t.jsx(n.default,{width:16,height:16,color:"#fff"})}),f=r=>t.jsx(t.Fragment,{children:t.jsx(s.Carousel,{leftArrow:t.jsx(c,{}),rightArrow:t.jsx(u,{}),...r,children:r.children})}),e=a.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("../../assets/icons/chevronLeft.svg.js"),s=require("../../assets/icons/chevronRight.svg.js"),i=require("@trendyol-js/react-carousel"),n=require("styled-components"),a=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},l=a(n),c=()=>t.jsx(e,{className:"left","data-testid":"carousel-left-arrow",children:t.jsx(o.default,{width:16,height:16,color:"#fff"})}),u=()=>t.jsx(e,{className:"right","data-testid":"carousel-right-arrow",children:t.jsx(s.default,{width:16,height:16,color:"#fff"})}),d=r=>t.jsx(t.Fragment,{children:t.jsx(i.Carousel,{leftArrow:t.jsx(c,{}),rightArrow:t.jsx(u,{}),...r,children:r.children})}),e=l.default.div`
 	cursor: pointer;
 	margin: 0 8px;
 	width: 50px;
@@ -19,5 +19,5 @@
 		transform: translate(0%, -50%);
 		right: 0;
 	}
-`;exports.Carousel=f;
+`;exports.Carousel=d;
 //# sourceMappingURL=carousel.js.map

package/dist/cjs/components/carousel/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":"mWAMMA,EAAY,IAEhBC,EAAAA,IAACC,EAAA,CAAe,UAAU,~~OACzB~~,SAAAD,~~MAACE~~,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,MAAM,~~MAAA~~,~~CAAO,~~EAClD,EAIIC,EAAa,IAEjBH,EAAAA,IAACC,EAAA,CAAe,UAAU,~~QACzB~~,SAAAD,~~MAACI~~,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,MAAM,~~MAAA~~,~~CAAO,~~EACnD,EAIWC,EAAYC,GAEvBN,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACQ,EAAAA,SAAA,CACA,gBAAYT,EAAA,EAAU,EACtB,iBAAaI,EAAA,EAAW,EACvB,GAAGG,EAEH,SAAAA,EAAM,QAAA,CAAA,EAET,EAIIL,EAAiBQ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\" data-testid=\"carousel-left-arrow\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\" data-testid=\"carousel-right-arrow\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsx","ArrowContainer","ChevronLeft","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":"mWAMMA,EAAY,IAEhBC,EAAAA,IAACC,EAAA,CAAe,UAAU,OAAO,cAAY,sBAC5C,SAAAD,EAAAA,IAACE,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,MAAM,OAAO,EAClD,EAIIC,EAAa,IAEjBH,EAAAA,IAACC,EAAA,CAAe,UAAU,QAAQ,cAAY,uBAC7C,SAAAD,EAAAA,IAACI,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,MAAM,OAAO,EACnD,EAIWC,EAAYC,GAEvBN,MAAAO,EAAAA,SAAA,CACC,SAAAP,EAAAA,IAACQ,EAAAA,SAAA,CACA,gBAAYT,EAAA,EAAU,EACtB,iBAAaI,EAAA,EAAW,EACvB,GAAGG,EAEH,SAAAA,EAAM,QAAA,CAAA,EAET,EAIIL,EAAiBQ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),d=require("react"),y=require("./CheckBox.styled.js"),c=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),w=e=>{const s=d.useMemo(()=>e.activeColor||i.COLORS.background.positive.vibrant,[e.activeColor]),t=e.size==="XS"?{box:12,check:{w:6,h:5,x:3,y:3.5},partial:{x:3,y:5,w:6}}:e.size==="SMALL"?{box:16,check:{w:8,h:7,x:4,y:4},partial:{x:5,y:7,w:6}}:{box:18,check:{w:10,h:9,x:4,y:4},partial:{x:5,y:8,w:8}};return l.jsxs("svg",{width:t.box,height:t.box,viewBox:`0 0 ${t.box} ${t.box}`,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:t.box,height:t.box,rx:"4",fill:e.isDisabled?i.COLORS.content.inactive:s}),!e.isPartial&&l.jsx("svg",{width:t.check.w,height:t.check.h,x:t.check.x,y:t.check.y,viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{x:t.partial.x,y:t.partial.y,width:t.partial.w,height:"2",rx:"1",fill:i.COLORS.surface.standard})]})},g=e=>{const[s,t]=d.useState(e.isChecked||!1),[r,o]=d.useState(e.isPartiallyChecked||!1),[n,k]=d.useState(e.isDisabled||!1),[u,h]=d.useState(!1),[S,x]=d.useState(!1),b=a=>{if(!e.isDisabled){const C=!s;r?o(!r):t(C),e.onValueChange?.(C,e.value,a)}},f=a=>{b(a)},O=a=>{(a.key===" "||a.key==="Enter")&&(a.preventDefault(),b(a))},L=r?"mixed":s?"true":"false";d.useEffect(()=>{t(e.isChecked)},[e.isChecked]),d.useEffect(()=>{k(e.isDisabled||!1)},[e.isDisabled]),d.useEffect(()=>{o(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const v=()=>{if(!e.label)return l.jsx(l.Fragment,{});if(e.labelTypography){const a={bodyCaption:c.BodyCaption,bodySecondary:c.BodySecondary,bodyPrimary:c.BodyPrimary,titleSmall:c.TitleSmall}[e.labelTypography];return l.jsx(a,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})}return e.size==="XS"?l.jsx(c.BodyCaption,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.boldOnChecked&&s||e.bold?e.labelSize==="DEFAULT"?l.jsx(c.TitleRegular,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(c.TitleSmall,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(c.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(c.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(c.BodyPrimary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})};return l.jsxs(y.CheckboxContainer,{role:"checkbox","aria-checked":L,"aria-disabled":n||void 0,"aria-label":e.label?void 0:e.ariaLabel,tabIndex:n?-1:0,onClick:f,onKeyDown:O,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>x(!e.skipHoverState),onMouseUp:()=>x(!1),isDisabled:n,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(y.CheckboxIcon,{checked:s,hovered:u,clicked:S,isDisabled:n,size:e.size,borderColor:e.checkboxBorderColor,activeColor:e.activeColor,children:s&&l.jsx(w,{isPartial:r||!1,isDisabled:n,size:e.size,activeColor:e?.activeColor})}),v(),e.rightComponent]})};exports.CheckBox=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),d=require("react"),y=require("./CheckBox.styled.js"),c=require("../TypographyStyle.js"),i=require("../../constants/Theme.js"),w=e=>{const s=d.useMemo(()=>e.activeColor||i.COLORS.background.positive.vibrant,[e.activeColor]),a=e.size==="XS"?{box:12,check:{w:6,h:5,x:3,y:3.5},partial:{x:3,y:5,w:6}}:e.size==="SMALL"?{box:16,check:{w:8,h:7,x:4,y:4},partial:{x:5,y:7,w:6}}:{box:18,check:{w:10,h:9,x:4,y:4},partial:{x:5,y:8,w:8}};return l.jsxs("svg",{"data-testid":"checkbox-mark",width:a.box,height:a.box,viewBox:`0 0 ${a.box} ${a.box}`,fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[l.jsx("rect",{x:"0",y:"0",width:a.box,height:a.box,rx:"4",fill:e.isDisabled?i.COLORS.content.inactive:s}),!e.isPartial&&l.jsx("svg",{"data-testid":"checkmark-icon",width:a.check.w,height:a.check.h,x:a.check.x,y:a.check.y,viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:l.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"})}),e.isPartial&&l.jsx("rect",{"data-testid":"partial-mark",x:a.partial.x,y:a.partial.y,width:a.partial.w,height:"2",rx:"1",fill:i.COLORS.surface.standard})]})},m=e=>{const[s,a]=d.useState(e.isChecked||!1),[n,o]=d.useState(e.isPartiallyChecked||!1),[r,k]=d.useState(e.isDisabled||!1),[u,h]=d.useState(!1),[S,x]=d.useState(!1),b=t=>{if(!e.isDisabled){const C=!s;n?o(!n):a(C),e.onValueChange?.(C,e.value,t)}},f=t=>{b(t)},O=t=>{(t.key===" "||t.key==="Enter")&&(t.preventDefault(),b(t))},L=n?"mixed":s?"true":"false";d.useEffect(()=>{a(e.isChecked)},[e.isChecked]),d.useEffect(()=>{k(e.isDisabled||!1)},[e.isDisabled]),d.useEffect(()=>{o(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const v=()=>{if(!e.label)return l.jsx(l.Fragment,{});if(e.labelTypography){const t={bodyCaption:c.BodyCaption,bodySecondary:c.BodySecondary,bodyPrimary:c.BodyPrimary,titleSmall:c.TitleSmall}[e.labelTypography];return l.jsx(t,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})}return e.size==="XS"?l.jsx(c.BodyCaption,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.boldOnChecked&&s||e.bold?e.labelSize==="DEFAULT"?l.jsx(c.TitleRegular,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(c.TitleSmall,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.size==="SMALL"?l.jsx(c.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):e.labelSize==="SMALL"?l.jsx(c.BodySecondary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label}):l.jsx(c.BodyPrimary,{color:e.isDisabled?i.COLORS.text.disabled:i.COLORS.text.primary,children:e.label})};return l.jsxs(y.CheckboxContainer,{role:"checkbox","aria-checked":L,"aria-disabled":r||void 0,"aria-label":e.label?void 0:e.ariaLabel,tabIndex:r?-1:0,onClick:f,onKeyDown:O,onMouseEnter:()=>h(!e.skipHoverState),onMouseLeave:()=>h(!1),onMouseDown:()=>x(!e.skipHoverState),onMouseUp:()=>x(!1),isDisabled:r,enableHover:e.enableHover,style:e.style??{},children:[l.jsx(y.CheckboxIcon,{checked:s,hovered:u,clicked:S,isDisabled:r,size:e.size,borderColor:e.checkboxBorderColor,activeColor:e.activeColor,children:s&&l.jsx(w,{isPartial:n||!1,isDisabled:r,size:e.size,activeColor:e?.activeColor})}),v(),e.rightComponent]})};exports.CheckBox=m;
 //# sourceMappingURL=CheckBox.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: string;\n\tlabelTypography?:\n\t\t\| 'bodyCaption'\n\t\t\| 'bodySecondary'\n\t\t\| 'bodyPrimary'\n\t\t\| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked \|\| false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked \|\| false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst toggleCheck = (event?: React.SyntheticEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' \|\| event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled \|\| false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked \|\| false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) \|\| props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled \|\| undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked \|\| false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
1	+ {"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' \| 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: string;\n\tlabelTypography?:\n\t\t\| 'bodyCaption'\n\t\t\| 'bodySecondary'\n\t\t\| 'bodyPrimary'\n\t\t\| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' \| 'SMALL' \| 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor \|\| COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t };\n\n\treturn (\n\t\t<svg\n\t\t\tdata-testid=\"checkbox-mark\"\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\tdata-testid=\"checkmark-icon\"\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tdata-testid=\"partial-mark\"\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked \|\| false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked \|\| false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled \|\| false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst toggleCheck = (event?: React.SyntheticEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' \|\| event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled \|\| false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked \|\| false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) \|\| props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled \|\| undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t\tactiveColor={props.activeColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked \|\| false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}

package/dist/cjs/components/code-block/CodeBlock.js CHANGED Viewed

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("../../_virtual/dynamic-import-helper.js"),e=require("react/jsx-runtime"),i=require("react"),F=require("../toaster/Toaster.js"),o=require("./CodeBlock.styled.js"),k=require("./CodeBlockHelper.js"),w=require("./types.js"),L=({code:c="",language:a=w.CodeLanguage.JAVASCRIPT,title:n="",hideLineNumbers:m=!1,maxHeight:g="400px",maxWidth:j,theme:s="dark",hideHeader:x=!1,hideCopy:y=!1})=>{const[T,d]=i.useState(!1),[S,l]=i.useState(!1),[u,p]=i.useState("success"),b=async()=>{try{await navigator.clipboard.writeText(c),d(!0),p("success"),l(!0),setTimeout(()=>d(!1),2e3)}catch{p("error"),l(!0)}},[v,f]=i.useState(c);i.useEffect(()=>{let t=!0;return(async()=>{try{const h=await B.default(Object.assign({"./languageSpecificFormatting/html_file.ts":()=>Promise.resolve().then(()=>require("./languageSpecificFormatting/html_file.js")),"./languageSpecificFormatting/javascript_file.ts":()=>Promise.resolve().then(()=>require("./languageSpecificFormatting/javascript_file.js"))}),`./languageSpecificFormatting/${a}_file.ts`,3);if(h?.format&&t){f(h.format(c));return}}catch{}t&&f(c)})(),()=>{t=!1}},[c,a]);const C=v.split(`
-`),M=t=>({javascript:"#FEC02D",python:"#3776ab",java:"#ed8b00",css:"#1572b6",html:"#e34c26",json:"#000000"})[t.toLowerCase()]||(s==="dark"?"#6e7681":"#656d76"),q=t=>({javascript:"#000"})?.[t.toLowerCase()]||"#fff";return e.jsxs(o.Container,{themeMode:s,maxWidth:j,children:[!x&&e.jsxs(o.Header,{themeMode:s,children:[e.jsxs(o.TitleSection,{children:[!!n&&n&&e.jsx(o.Title,{themeMode:s,children:n}),e.jsx(o.LanguageBadge,{bg:M(a),color:q(a),children:a})]}),!y&&e.jsx(o.CopyButton,{themeMode:s,onClick:b,children:T?e.jsx(e.Fragment,{children:"✓ Copied"}):e.jsx(e.Fragment,{children:"Copy"})})]}),e.jsxs(o.CodeContainer,{maxHeight:g,children:[!m&&e.jsx(o.LineNumbers,{themeMode:s,children:C.map((t,r)=>e.jsx("div",{children:r+1},r))}),e.jsx(o.Code,{themeMode:s,children:C.map((t,r)=>e.jsx("div",{style:{minHeight:t.trim()?"20px":"0px"},dangerouslySetInnerHTML:{__html:k.highlightCode(t,a,s)||"&nbsp;"}},r))})]}),S&&e.jsx(F.Toaster,{text:u==="success"?"Code copied to clipboard!":"Failed to copy code",autoClose:2e3,type:u,hideProgressBar:!0,onCloseToast:()=>l(!1)})]})};exports.CodeBlock=L;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("../../_virtual/dynamic-import-helper.js"),e=require("react/jsx-runtime"),i=require("react"),w=require("../toaster/Toaster.js"),o=require("./CodeBlock.styled.js"),F=require("./CodeBlockHelper.js"),k=require("./types.js"),L=({code:c="",language:a=k.CodeLanguage.JAVASCRIPT,title:n="",hideLineNumbers:m=!1,maxHeight:g="400px",maxWidth:j,theme:s="dark",hideHeader:x=!1,hideCopy:y=!1})=>{const[T,l]=i.useState(!1),[S,d]=i.useState(!1),[u,p]=i.useState("success"),b=async()=>{try{await navigator.clipboard.writeText(c),l(!0),p("success"),d(!0),setTimeout(()=>l(!1),2e3)}catch{p("error"),d(!0)}},[v,f]=i.useState(c);i.useEffect(()=>{let t=!0;return(async()=>{try{const h=await B.default(Object.assign({"./languageSpecificFormatting/html_file.ts":()=>Promise.resolve().then(()=>require("./languageSpecificFormatting/html_file.js")),"./languageSpecificFormatting/javascript_file.ts":()=>Promise.resolve().then(()=>require("./languageSpecificFormatting/javascript_file.js"))}),`./languageSpecificFormatting/${a}_file.ts`,3);if(h?.format&&t){f(h.format(c));return}}catch{}t&&f(c)})(),()=>{t=!1}},[c,a]);const C=v.split(`
+`),M=t=>({javascript:"#FEC02D",python:"#3776ab",java:"#ed8b00",css:"#1572b6",html:"#e34c26",json:"#000000"})[t.toLowerCase()]||(s==="dark"?"#6e7681":"#656d76"),q=t=>({javascript:"#000"})?.[t.toLowerCase()]||"#fff";return e.jsxs(o.Container,{themeMode:s,maxWidth:j,children:[!x&&e.jsxs(o.Header,{themeMode:s,children:[e.jsxs(o.TitleSection,{children:[!!n&&n&&e.jsx(o.Title,{themeMode:s,children:n}),e.jsx(o.LanguageBadge,{bg:M(a),color:q(a),children:a})]}),!y&&e.jsx(o.CopyButton,{themeMode:s,onClick:b,children:T?e.jsx(e.Fragment,{children:"✓ Copied"}):e.jsx(e.Fragment,{children:"Copy"})})]}),e.jsxs(o.CodeContainer,{maxHeight:g,children:[!m&&e.jsx(o.LineNumbers,{themeMode:s,children:C.map((t,r)=>e.jsx("div",{"data-testid":"line-number-row",children:r+1},r))}),e.jsx(o.Code,{themeMode:s,children:C.map((t,r)=>e.jsx("div",{style:{minHeight:t.trim()?"20px":"0px"},dangerouslySetInnerHTML:{__html:F.highlightCode(t,a,s)||"&nbsp;"}},r))})]}),S&&e.jsx(w.Toaster,{text:u==="success"?"Code copied to clipboard!":"Failed to copy code",autoClose:2e3,type:u,hideProgressBar:!0,onCloseToast:()=>d(!1)})]})};exports.CodeBlock=L;
 //# sourceMappingURL=CodeBlock.js.map

package/dist/cjs/components/code-block/CodeBlock.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CodeBlock.js","sources":["../../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Toaster } from '@src/components/toaster/Toaster';\nimport {\n\tCode,\n\tCodeContainer,\n\tContainer,\n\tCopyButton,\n\tHeader,\n\tLanguageBadge,\n\tLineNumbers,\n\tTitle,\n\tTitleSection,\n} from './CodeBlock.styled';\nimport { highlightCode } from './CodeBlockHelper';\nimport { CodeBlockProps, CodeLanguage } from './types';\n\n// optional types extraction\n\nexport const CodeBlock = ({\n\tcode = '',\n\tlanguage = CodeLanguage.JAVASCRIPT,\n\ttitle = '',\n\thideLineNumbers = false,\n\tmaxHeight = '400px',\n\tmaxWidth,\n\ttheme = 'dark',\n\thideHeader = false,\n\thideCopy = false,\n}: CodeBlockProps) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst [showToaster, setShowToaster] = useState(false);\n\tconst [toasterType, setToasterType] = useState<'success' \| 'error'>(\n\t\t'success',\n\t);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetToasterType('success');\n\t\t\tsetShowToaster(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tsetToasterType('error');\n\t\t\tsetShowToaster(true);\n\t\t}\n\t};\n\n\t// Apply language-specific formatting\n\tconst [formattedCode, setFormattedCode] = useState(code);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\t\tconst formatCode = async () => {\n\t\t\ttry {\n\t\t\t\tconst formatterModule = await import(\n\t\t\t\t\t/* webpackChunkName: \"languageSpecificFormatting-[request]\" */\n\t\t\t\t\t`./languageSpecificFormatting/${language}_file.ts`\n\t\t\t\t);\n\t\t\t\tif (formatterModule?.format && isMounted) {\n\t\t\t\t\tsetFormattedCode(formatterModule.format(code));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// No formatter found — just use original\n\t\t\t}\n\t\t\tif (isMounted) setFormattedCode(code);\n\t\t};\n\n\t\tformatCode();\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [code, language]);\n\n\tconst lines = formattedCode.split('\\n');\n\n\tconst getLanguageBadgeColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<CodeLanguage, string> = {\n\t\t\tjavascript: '#FEC02D',\n\t\t\tpython: '#3776ab',\n\t\t\tjava: '#ed8b00',\n\t\t\tcss: '#1572b6',\n\t\t\thtml: '#e34c26',\n\t\t\tjson: '#000000',\n\t\t};\n\t\treturn (\n\t\t\tcolors[lang.toLowerCase()] \|\| (theme === 'dark' ? '#6e7681' : '#656d76')\n\t\t);\n\t};\n\n\tconst getBadgeTextColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<string, string> = {\n\t\t\tjavascript: '#000',\n\t\t};\n\t\treturn colors?.[lang.toLowerCase()] \|\| '#fff';\n\t};\n\n\treturn (\n\t\t<Container themeMode={theme} maxWidth={maxWidth}>\n\t\t\t{!hideHeader && (\n\t\t\t\t<Header themeMode={theme}>\n\t\t\t\t\t<TitleSection>\n\t\t\t\t\t\t{!!title && title && <Title themeMode={theme}>{title}</Title>}\n\t\t\t\t\t\t<LanguageBadge\n\t\t\t\t\t\t\tbg={getLanguageBadgeColor(language)}\n\t\t\t\t\t\t\tcolor={getBadgeTextColor(language)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{language}\n\t\t\t\t\t\t</LanguageBadge>\n\t\t\t\t\t</TitleSection>\n\t\t\t\t\t{!hideCopy && (\n\t\t\t\t\t\t<CopyButton themeMode={theme} onClick={handleCopy}>\n\t\t\t\t\t\t\t{copied ? <>✓ Copied</> : <>Copy</>}\n\t\t\t\t\t\t</CopyButton>\n\t\t\t\t\t)}\n\t\t\t\t</Header>\n\t\t\t)}\n\n\t\t\t<CodeContainer maxHeight={maxHeight}>\n\t\t\t\t{!hideLineNumbers && (\n\t\t\t\t\t<LineNumbers themeMode={theme}>\n\t\t\t\t\t\t{lines.map((_, index) => (\n\t\t\t\t\t\t\t<div key={index}>{index + 1}</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</LineNumbers>\n\t\t\t\t)}\n\t\t\t\t<Code themeMode={theme}>\n\t\t\t\t\t{lines.map((line, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tstyle={{ minHeight: line.trim() ? '20px' : '0px' }}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: highlightCode(line, language, theme) \|\| ' ',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</Code>\n\t\t\t</CodeContainer>\n\t\t\t{showToaster && (\n\t\t\t\t<Toaster\n\t\t\t\t\ttext={\n\t\t\t\t\t\ttoasterType === 'success'\n\t\t\t\t\t\t\t? 'Code copied to clipboard!'\n\t\t\t\t\t\t\t: 'Failed to copy code'\n\t\t\t\t\t}\n\t\t\t\t\tautoClose={2000}\n\t\t\t\t\ttype={toasterType}\n\t\t\t\t\thideProgressBar\n\t\t\t\t\tonCloseToast={() => setShowToaster(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["CodeBlock","code","language","CodeLanguage","title","hideLineNumbers","maxHeight","maxWidth","theme","hideHeader","hideCopy","copied","setCopied","useState","showToaster","setShowToaster","toasterType","setToasterType","handleCopy","formattedCode","setFormattedCode","useEffect","isMounted","formatterModule","__variableDynamicImportRuntimeHelper","lines","getLanguageBadgeColor","lang","getBadgeTextColor","jsxs","Container","Header","TitleSection","Title","jsx","LanguageBadge","CopyButton","Fragment","CodeContainer","LineNumbers","_","index","Code","line","highlightCode","Toaster"],"mappings":"6TAkBaA,EAAY,CAAC,CACzB,KAAAC,EAAO,GACP,SAAAC,EAAWC,EAAAA,aAAa,WACxB,MAAAC,EAAQ,GACR,gBAAAC,EAAkB,GAClB,UAAAC,EAAY,QACZ,SAAAC,EACA,MAAAC,EAAQ,OACR,WAAAC,EAAa,GACb,SAAAC,EAAW,EACZ,IAAsB,CACrB,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAAS,EAAK,EACpC,CAACC,EAAaC,CAAc,EAAIF,EAAAA,SAAS,EAAK,EAC9C,CAACG,EAAaC,CAAc,EAAIJ,EAAAA,SACrC,SAAA,EAGKK,EAAa,SAAY,CAC9B,GAAI,CACH,MAAM,UAAU,UAAU,UAAUjB,CAAI,EACxCW,EAAU,EAAI,EACdK,EAAe,SAAS,EACxBF,EAAe,EAAI,EACnB,WAAW,IAAMH,EAAU,EAAK,EAAG,GAAI,CACxC,MAAc,CACbK,EAAe,OAAO,EACtBF,EAAe,EAAI,CACpB,CACD,EAGM,CAACI,EAAeC,CAAgB,EAAIP,EAAAA,SAASZ,CAAI,EAEvDoB,EAAAA,UAAU,IAAM,CACf,IAAIC,EAAY,GAiBhB,OAhBmB,SAAY,CAC9B,GAAI,CACH,MAAMC,EAAkB,MAAMC,EAAAA,QAAA,OAAA,OAAA,CAAA,4CAAA,IAAA,QAAA,QAAA,EAAA,KAAA,IAAA,QAAA,2CAAA,CAAA,EAAA,kDAAA,IAAA,QAAA,QAAA,EAAA,KAAA,IAAA,QAAA,iDAAA,CAAA,CAAA,CAAA,EAAA,gCAAAtB,CAAA,WAAA,CAAA,EAI9B,GAAIqB,GAAiB,QAAUD,EAAW,CACzCF,EAAiBG,EAAgB,OAAOtB,CAAI,CAAC,EAC7C,MACD,CACD,MAAQ,CAER,CACIqB,KAA4BrB,CAAI,CACrC,GAEA,EACO,IAAM,CACZqB,EAAY,EACb,CACD,EAAG,CAACrB,EAAMC,CAAQ,CAAC,EAEnB,MAAMuB,EAAQN,EAAc,MAAM;AAAA,CAAI,EAEhCO,EAAyBC,IACe,CAC5C,WAAY,UACZ,OAAQ,UACR,KAAM,UACN,IAAK,UACL,KAAM,UACN,KAAM,SAAA,GAGCA,EAAK,YAAA,CAAa,IAAMnB,IAAU,OAAS,UAAY,WAI1DoB,EAAqBD,IACa,CACtC,WAAY,MAAA,KAEGA,EAAK,YAAA,CAAa,GAAK,OAGxC,OACCE,EAAAA,KAACC,EAAAA,UAAA,CAAU,UAAWtB,EAAO,SAAAD,EAC3B,SAAA,CAAA,CAACE,GACDoB,EAAAA,KAACE,EAAAA,OAAA,CAAO,UAAWvB,EAClB,SAAA,CAAAqB,OAACG,EAAAA,aAAA,CACC,SAAA,CAAA,CAAC,CAAC5B,GAASA,SAAU6B,EAAAA,MAAA,CAAM,UAAWzB,EAAQ,SAAAJ,EAAM,EACrD8B,EAAAA,IAACC,EAAAA,cAAA,CACA,GAAIT,EAAsBxB,CAAQ,EAClC,MAAO0B,EAAkB1B,CAAQ,EAEhC,SAAAA,CAAA,CAAA,CACF,EACD,EACC,CAACQ,GACDwB,MAACE,EAAAA,WAAA,CAAW,UAAW5B,EAAO,QAASU,EACrC,SAAAP,EAASuB,EAAAA,IAAAG,WAAA,CAAE,SAAA,WAAQ,EAAMH,MAAAG,EAAAA,SAAA,CAAE,gBAAI,CAAA,CACjC,CAAA,EAEF,EAGDR,EAAAA,KAACS,EAAAA,eAAc,UAAAhC,EACb,SAAA,CAAA,CAACD,GACD6B,EAAAA,~~IAACK~~,~~cAAA,~~CAAY,UAAW/B,EACtB,~~WAAM~~,IAAI,~~CAACgC~~,EAAGC,~~UACb~~,~~MAAA~~,~~CAAiB~~,~~SAAAA~~,~~EAAQ~~,CAAA,~~EAAhBA~~,~~CAAkB~~,~~CAC5B~~,EACF,EAEDP,EAAAA,IAACQ,EAAAA,MAAK,UAAWlC,EACf,WAAM,IAAI,CAACmC,EAAMF,IACjBP,EAAAA,IAAC,MAAA,CAEA,MAAO,CAAE,UAAWS,EAAK,KAAA,EAAS,OAAS,KAAA,EAC3C,wBAAyB,CACxB,OAAQC,EAAAA,cAAcD,EAAMzC,EAAUM,CAAK,GAAK,QAAA,CACjD,EAJKiC,CAAA,CAMN,CAAA,CACF,CAAA,EACD,EACC3B,GACAoB,EAAAA,IAACW,EAAAA,QAAA,CACA,KACC7B,IAAgB,UACb,4BACA,sBAEJ,UAAW,IACX,KAAMA,EACN,gBAAe,GACf,aAAc,IAAMD,EAAe,EAAK,CAAA,CAAA,CACzC,EAEF,CAEF"}
1	+ {"version":3,"file":"CodeBlock.js","sources":["../../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { Toaster } from '@src/components/toaster/Toaster';\nimport {\n\tCode,\n\tCodeContainer,\n\tContainer,\n\tCopyButton,\n\tHeader,\n\tLanguageBadge,\n\tLineNumbers,\n\tTitle,\n\tTitleSection,\n} from './CodeBlock.styled';\nimport { highlightCode } from './CodeBlockHelper';\nimport { CodeBlockProps, CodeLanguage } from './types';\n\n// optional types extraction\n\nexport const CodeBlock = ({\n\tcode = '',\n\tlanguage = CodeLanguage.JAVASCRIPT,\n\ttitle = '',\n\thideLineNumbers = false,\n\tmaxHeight = '400px',\n\tmaxWidth,\n\ttheme = 'dark',\n\thideHeader = false,\n\thideCopy = false,\n}: CodeBlockProps) => {\n\tconst [copied, setCopied] = useState(false);\n\tconst [showToaster, setShowToaster] = useState(false);\n\tconst [toasterType, setToasterType] = useState<'success' \| 'error'>(\n\t\t'success',\n\t);\n\n\tconst handleCopy = async () => {\n\t\ttry {\n\t\t\tawait navigator.clipboard.writeText(code);\n\t\t\tsetCopied(true);\n\t\t\tsetToasterType('success');\n\t\t\tsetShowToaster(true);\n\t\t\tsetTimeout(() => setCopied(false), 2000);\n\t\t} catch (err) {\n\t\t\tsetToasterType('error');\n\t\t\tsetShowToaster(true);\n\t\t}\n\t};\n\n\t// Apply language-specific formatting\n\tconst [formattedCode, setFormattedCode] = useState(code);\n\n\tuseEffect(() => {\n\t\tlet isMounted = true;\n\t\tconst formatCode = async () => {\n\t\t\ttry {\n\t\t\t\tconst formatterModule = await import(\n\t\t\t\t\t/* webpackChunkName: \"languageSpecificFormatting-[request]\" */\n\t\t\t\t\t`./languageSpecificFormatting/${language}_file.ts`\n\t\t\t\t);\n\t\t\t\tif (formatterModule?.format && isMounted) {\n\t\t\t\t\tsetFormattedCode(formatterModule.format(code));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t} catch {\n\t\t\t\t// No formatter found — just use original\n\t\t\t}\n\t\t\tif (isMounted) setFormattedCode(code);\n\t\t};\n\n\t\tformatCode();\n\t\treturn () => {\n\t\t\tisMounted = false;\n\t\t};\n\t}, [code, language]);\n\n\tconst lines = formattedCode.split('\\n');\n\n\tconst getLanguageBadgeColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<CodeLanguage, string> = {\n\t\t\tjavascript: '#FEC02D',\n\t\t\tpython: '#3776ab',\n\t\t\tjava: '#ed8b00',\n\t\t\tcss: '#1572b6',\n\t\t\thtml: '#e34c26',\n\t\t\tjson: '#000000',\n\t\t};\n\t\treturn (\n\t\t\tcolors[lang.toLowerCase()] \|\| (theme === 'dark' ? '#6e7681' : '#656d76')\n\t\t);\n\t};\n\n\tconst getBadgeTextColor = (lang: CodeLanguage) => {\n\t\tconst colors: Record<string, string> = {\n\t\t\tjavascript: '#000',\n\t\t};\n\t\treturn colors?.[lang.toLowerCase()] \|\| '#fff';\n\t};\n\n\treturn (\n\t\t<Container themeMode={theme} maxWidth={maxWidth}>\n\t\t\t{!hideHeader && (\n\t\t\t\t<Header themeMode={theme}>\n\t\t\t\t\t<TitleSection>\n\t\t\t\t\t\t{!!title && title && <Title themeMode={theme}>{title}</Title>}\n\t\t\t\t\t\t<LanguageBadge\n\t\t\t\t\t\t\tbg={getLanguageBadgeColor(language)}\n\t\t\t\t\t\t\tcolor={getBadgeTextColor(language)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{language}\n\t\t\t\t\t\t</LanguageBadge>\n\t\t\t\t\t</TitleSection>\n\t\t\t\t\t{!hideCopy && (\n\t\t\t\t\t\t<CopyButton themeMode={theme} onClick={handleCopy}>\n\t\t\t\t\t\t\t{copied ? <>✓ Copied</> : <>Copy</>}\n\t\t\t\t\t\t</CopyButton>\n\t\t\t\t\t)}\n\t\t\t\t</Header>\n\t\t\t)}\n\n\t\t\t<CodeContainer maxHeight={maxHeight}>\n\t\t\t\t{!hideLineNumbers && (\n\t\t\t\t\t<LineNumbers themeMode={theme}>\n\t\t\t\t\t\t{lines.map((_, index) => (\n\t\t\t\t\t\t\t<div key={index} data-testid=\"line-number-row\">\n\t\t\t\t\t\t\t\t{index + 1}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</LineNumbers>\n\t\t\t\t)}\n\t\t\t\t<Code themeMode={theme}>\n\t\t\t\t\t{lines.map((line, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tstyle={{ minHeight: line.trim() ? '20px' : '0px' }}\n\t\t\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t\t\t__html: highlightCode(line, language, theme) \|\| ' ',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</Code>\n\t\t\t</CodeContainer>\n\t\t\t{showToaster && (\n\t\t\t\t<Toaster\n\t\t\t\t\ttext={\n\t\t\t\t\t\ttoasterType === 'success'\n\t\t\t\t\t\t\t? 'Code copied to clipboard!'\n\t\t\t\t\t\t\t: 'Failed to copy code'\n\t\t\t\t\t}\n\t\t\t\t\tautoClose={2000}\n\t\t\t\t\ttype={toasterType}\n\t\t\t\t\thideProgressBar\n\t\t\t\t\tonCloseToast={() => setShowToaster(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</Container>\n\t);\n};\n"],"names":["CodeBlock","code","language","CodeLanguage","title","hideLineNumbers","maxHeight","maxWidth","theme","hideHeader","hideCopy","copied","setCopied","useState","showToaster","setShowToaster","toasterType","setToasterType","handleCopy","formattedCode","setFormattedCode","useEffect","isMounted","formatterModule","__variableDynamicImportRuntimeHelper","lines","getLanguageBadgeColor","lang","getBadgeTextColor","jsxs","Container","Header","TitleSection","Title","jsx","LanguageBadge","CopyButton","Fragment","CodeContainer","LineNumbers","_","index","Code","line","highlightCode","Toaster"],"mappings":"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"}

package/dist/cjs/components/colourInput/ColourInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("./ColourInput.styled.js"),n=require("../TypographyStyle.js"),l=e=>t.jsxs("div",{className:"buttonColorCustom",children:[e.headingText&&t.jsx(n.BodySecondary,{children:e.headingText}),t.jsxs(o.ColorInputContainer,{children:[t.jsx(n.BodyPrimary,{children:e.labelText??"Colour"}),t.jsx(o.StyledColorInput,{type:"color",onChange:r=>{e.onValueChange(r.target.value)},value:e.value})]})]});exports.ColourInput=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("./ColourInput.styled.js"),n=require("../TypographyStyle.js"),l=e=>t.jsxs("div",{className:"buttonColorCustom",children:[e.headingText&&t.jsx(n.BodySecondary,{children:e.headingText}),t.jsxs(o.ColorInputContainer,{children:[t.jsx(n.BodyPrimary,{children:e.labelText??"Colour"}),t.jsx(o.StyledColorInput,{type:"color","data-testid":"colour-input",onChange:r=>{e.onValueChange(r.target.value)},value:e.value})]})]});exports.ColourInput=l;
 //# sourceMappingURL=ColourInput.js.map

package/dist/cjs/components/colourInput/ColourInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ColourInput.js","sources":["../../../../src/components/colourInput/ColourInput.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tColorInputContainer,\n\tStyledColorInput,\n} from '@src/components/colourInput/ColourInput.styled';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\n\nexport interface ColourInputProps {\n\tvalue: string;\n\tlabelText: string;\n\theadingText?: string;\n\tonValueChange: (value: string) => void;\n}\n\nexport const ColourInput: React.FC<ColourInputProps> = (props) => {\n\treturn (\n\t\t<div className=\"buttonColorCustom\">\n\t\t\t{props.headingText && <BodySecondary>{props.headingText}</BodySecondary>}\n\t\t\t<ColorInputContainer>\n\t\t\t\t<BodyPrimary>{props.labelText ?? 'Colour'}</BodyPrimary>\n\t\t\t\t<StyledColorInput\n\t\t\t\t\ttype=\"color\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tprops.onValueChange(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvalue={props.value}\n\t\t\t\t/>\n\t\t\t</ColorInputContainer>\n\t\t</div>\n\t);\n};\n"],"names":["ColourInput","props","jsxs","jsx","BodySecondary","ColorInputContainer","BodyPrimary","StyledColorInput","e"],"mappings":"6LAcaA,EAA2CC,GAEtDC,EAAAA,KAAC,MAAA,CAAI,UAAU,oBACb,SAAA,CAAAD,EAAM,aAAeE,MAACC,EAAAA,cAAA,CAAe,SAAAH,EAAM,YAAY,SACvDI,EAAAA,oBAAA,CACA,SAAA,CAAAF,EAAAA,IAACG,EAAAA,YAAA,CAAa,SAAAL,EAAM,WAAa,SAAS,EAC1CE,EAAAA,IAACI,EAAAA,iBAAA,CACA,KAAK,QACL,SAAWC,GAAM,CAChBP,EAAM,cAAcO,EAAE,OAAO,KAAK,CACnC,EACA,MAAOP,EAAM,KAAA,CAAA,CACd,CAAA,CACD,CAAA,EACD"}
1	+ {"version":3,"file":"ColourInput.js","sources":["../../../../src/components/colourInput/ColourInput.tsx"],"sourcesContent":["import React from 'react';\nimport {\n\tColorInputContainer,\n\tStyledColorInput,\n} from '@src/components/colourInput/ColourInput.styled';\nimport { BodyPrimary, BodySecondary } from '@src/components/TypographyStyle';\n\nexport interface ColourInputProps {\n\tvalue: string;\n\tlabelText: string;\n\theadingText?: string;\n\tonValueChange: (value: string) => void;\n}\n\nexport const ColourInput: React.FC<ColourInputProps> = (props) => {\n\treturn (\n\t\t<div className=\"buttonColorCustom\">\n\t\t\t{props.headingText && <BodySecondary>{props.headingText}</BodySecondary>}\n\t\t\t<ColorInputContainer>\n\t\t\t\t<BodyPrimary>{props.labelText ?? 'Colour'}</BodyPrimary>\n\t\t\t\t<StyledColorInput\n\t\t\t\t\ttype=\"color\"\n\t\t\t\t\tdata-testid=\"colour-input\"\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tprops.onValueChange(e.target.value);\n\t\t\t\t\t}}\n\t\t\t\t\tvalue={props.value}\n\t\t\t\t/>\n\t\t\t</ColorInputContainer>\n\t\t</div>\n\t);\n};\n"],"names":["ColourInput","props","jsxs","jsx","BodySecondary","ColorInputContainer","BodyPrimary","StyledColorInput","e"],"mappings":"6LAcaA,EAA2CC,GAEtDC,EAAAA,KAAC,MAAA,CAAI,UAAU,oBACb,SAAA,CAAAD,EAAM,aAAeE,MAACC,EAAAA,cAAA,CAAe,SAAAH,EAAM,YAAY,SACvDI,EAAAA,oBAAA,CACA,SAAA,CAAAF,EAAAA,IAACG,EAAAA,YAAA,CAAa,SAAAL,EAAM,WAAa,SAAS,EAC1CE,EAAAA,IAACI,EAAAA,iBAAA,CACA,KAAK,QACL,cAAY,eACZ,SAAWC,GAAM,CAChBP,EAAM,cAAcO,EAAE,OAAO,KAAK,CACnC,EACA,MAAOP,EAAM,KAAA,CAAA,CACd,CAAA,CACD,CAAA,EACD"}

package/dist/cjs/components/dot-pulse/DotPulse.js CHANGED Viewed

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("styled-components"),o=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},n=o(s),l=({color:t="linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)",size:i=4})=>e.jsxs(r,{children:[e.jsx(a,{$color:t,$size:i}),e.jsx(a,{$color:t,$size:i}),e.jsx(a,{$color:t,$size:i})]}),r=n.default.span`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},o=n(i),d=({color:t="linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)",size:a=4})=>e.jsxs(l,{children:[e.jsx(s,{"data-testid":"dot-pulse-dot",$color:t,$size:a}),e.jsx(s,{"data-testid":"dot-pulse-dot",$color:t,$size:a}),e.jsx(s,{"data-testid":"dot-pulse-dot",$color:t,$size:a})]}),l=o.default.span`
 	display: inline-flex;
 	align-items: center;
-`,a=n.default.span`
+`,s=o.default.span`
 	display: block;
 	width: ${t=>t.$size}px;
 	height: ${t=>t.$size}px;
@@ -32,5 +32,5 @@
 			transform: scale(1.4);
 		}
 	}
-`;exports.DotPulse=l;
+`;exports.DotPulse=d;
 //# sourceMappingURL=DotPulse.js.map

package/dist/cjs/components/dot-pulse/DotPulse.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DotPulse.js","sources":["../../../../src/components/dot-pulse/DotPulse.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nexport interface DotPulseProps {\n\tcolor?: string;\n\tsize?: number;\n}\n\nconst DotPulse: React.FC<DotPulseProps> = ({\n\tcolor = 'linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)',\n\tsize = 4,\n}) => {\n\treturn (\n\t\t<DotPulseContainer>\n\t\t\t<Dot $color={color} $size={size} />\n\t\t\t<Dot $color={color} $size={size} />\n\t\t\t<Dot $color={color} $size={size} />\n\t\t</DotPulseContainer>\n\t);\n};\n\nconst DotPulseContainer = styled.span`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\ninterface DotProps {\n\t$color: string;\n\t$size: number;\n}\n\nconst Dot = styled.span<DotProps>`\n\tdisplay: block;\n\twidth: ${(props) => props.$size}px;\n\theight: ${(props) => props.$size}px;\n\tborder-radius: 50%;\n\tbackground: ${(props) => props.$color};\n\tmargin: 0 1.5px;\n\topacity: 0.6;\n\tanimation: dotPulse 1.2s infinite;\n\twill-change: opacity, transform;\n\n\t&:nth-child(2) {\n\t\tanimation-delay: 0.2s;\n\t}\n\n\t&:nth-child(3) {\n\t\tanimation-delay: 0.4s;\n\t}\n\n\t@keyframes dotPulse {\n\t\t0%,\n\t\t80%,\n\t\t100% {\n\t\t\topacity: 0.6;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t40% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1.4);\n\t\t}\n\t}\n`;\n\nexport { DotPulse };\n"],"names":["DotPulse","color","size","DotPulseContainer","jsx","Dot","styled","props"],"mappings":"mNAQMA,EAAoC,CAAC,CAC1C,MAAAC,EAAQ,qDACR,KAAAC,EAAO,CACR,WAEGC,EAAA,CACA,SAAA,CAAAC,~~EAAAA~~,~~IAACC~~,~~EAAA~~,~~CAAI~~,OAAQJ,EAAO,MAAOC,EAAM,~~EACjCE~~,~~EAAAA,IAACC,~~EAAA,CAAI,OAAQJ,EAAO,MAAOC,EAAM,~~EACjCE~~,~~EAAAA,IAACC,~~EAAA,CAAI,OAAQJ,EAAO,MAAOC,CAAA,CAAM,CAAA,~~EAClC~~,EAIIC,EAAoBG,EAAAA,QAAO;AAAA;AAAA;AAAA,EAU3BD,EAAMC,EAAAA,QAAO;AAAA;AAAA,UAERC,GAAUA,EAAM,KAAK;AAAA,WACpBA,GAAUA,EAAM,KAAK;AAAA;AAAA,eAEjBA,GAAUA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"DotPulse.js","sources":["../../../../src/components/dot-pulse/DotPulse.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\n\nexport interface DotPulseProps {\n\tcolor?: string;\n\tsize?: number;\n}\n\nconst DotPulse: React.FC<DotPulseProps> = ({\n\tcolor = 'linear-gradient(90deg, #ff166a 0%, #ff317dff 100%)',\n\tsize = 4,\n}) => {\n\treturn (\n\t\t<DotPulseContainer>\n\t\t\t<Dot data-testid=\"dot-pulse-dot\" $color={color} $size={size} />\n\t\t\t<Dot data-testid=\"dot-pulse-dot\" $color={color} $size={size} />\n\t\t\t<Dot data-testid=\"dot-pulse-dot\" $color={color} $size={size} />\n\t\t</DotPulseContainer>\n\t);\n};\n\nconst DotPulseContainer = styled.span`\n\tdisplay: inline-flex;\n\talign-items: center;\n`;\n\ninterface DotProps {\n\t$color: string;\n\t$size: number;\n}\n\nconst Dot = styled.span<DotProps>`\n\tdisplay: block;\n\twidth: ${(props) => props.$size}px;\n\theight: ${(props) => props.$size}px;\n\tborder-radius: 50%;\n\tbackground: ${(props) => props.$color};\n\tmargin: 0 1.5px;\n\topacity: 0.6;\n\tanimation: dotPulse 1.2s infinite;\n\twill-change: opacity, transform;\n\n\t&:nth-child(2) {\n\t\tanimation-delay: 0.2s;\n\t}\n\n\t&:nth-child(3) {\n\t\tanimation-delay: 0.4s;\n\t}\n\n\t@keyframes dotPulse {\n\t\t0%,\n\t\t80%,\n\t\t100% {\n\t\t\topacity: 0.6;\n\t\t\ttransform: scale(1);\n\t\t}\n\t\t40% {\n\t\t\topacity: 1;\n\t\t\ttransform: scale(1.4);\n\t\t}\n\t}\n`;\n\nexport { DotPulse };\n"],"names":["DotPulse","color","size","DotPulseContainer","jsx","Dot","styled","props"],"mappings":"mNAQMA,EAAoC,CAAC,CAC1C,MAAAC,EAAQ,qDACR,KAAAC,EAAO,CACR,WAEGC,EAAA,CACA,SAAA,CAAAC,MAACC,GAAI,cAAY,gBAAgB,OAAQJ,EAAO,MAAOC,EAAM,QAC5DG,EAAA,CAAI,cAAY,gBAAgB,OAAQJ,EAAO,MAAOC,EAAM,QAC5DG,EAAA,CAAI,cAAY,gBAAgB,OAAQJ,EAAO,MAAOC,CAAA,CAAM,CAAA,EAC9D,EAIIC,EAAoBG,EAAAA,QAAO;AAAA;AAAA;AAAA,EAU3BD,EAAMC,EAAAA,QAAO;AAAA;AAAA,UAERC,GAAUA,EAAM,KAAK;AAAA,WACpBA,GAAUA,EAAM,KAAK;AAAA;AAAA,eAEjBA,GAAUA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/dropShadow/DropShadow.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},n=({level:o="z1",position:p="down",children:x,style:r})=>{const t=a[o][p];return e.jsx("div",{style:{boxShadow:t,...r??{}},children:x})};exports.DropShadow=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},e=({level:o="z1",position:p="down",children:t,style:x})=>{const r=d[o][p];return a.jsx("div",{"data-testid":"drop-shadow",style:{boxShadow:r,...x??{}},children:t})};exports.DropShadow=e;
 //# sourceMappingURL=DropShadow.js.map

package/dist/cjs/components/dropShadow/DropShadow.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DropShadow.js","sources":["../../../../src/components/dropShadow/DropShadow.tsx"],"sourcesContent":["import React from 'react';\n\nconst BoxShadowMap = {\n\tz1: {\n\t\tup: '0px -2px 8px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 2px 8px rgba(0, 0, 0, 0.12)',\n\t},\n\tz2: {\n\t\tup: '0px -4px 12px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 4px 12px rgba(0, 0, 0, 0.12)',\n\t},\n};\n\nexport const DropShadow: React.FC<{\n\tlevel: 'z1' \| 'z2';\n\tposition: 'up' \| 'down';\n\tchildren: React.ReactNode;\n\tstyle?: React.CSSProperties;\n}> = ({ level = 'z1', position = 'down', children, style }) => {\n\tconst boxShadow = BoxShadowMap[level][position];\n\n\treturn <div style={{ boxShadow, ...(style ?? {}) }}>{children}</div~~>;\~~n};\n"],"names":["BoxShadowMap","DropShadow","level","position","children","style","boxShadow","jsx"],"mappings":"qHAEMA,EAAe,CACpB,GAAI,CACH,GAAI,mCACJ,KAAM,iCAAA,EAEP,GAAI,CACH,GAAI,oCACJ,KAAM,kCAAA,CAER,EAEaC,EAKR,CAAC,CAAE,MAAAC,EAAQ,KAAM,SAAAC,EAAW,OAAQ,SAAAC,EAAU,MAAAC,KAAY,CAC9D,MAAMC,EAAYN,EAAaE,CAAK,EAAEC,CAAQ,EAE9C,~~OAAOI~~,~~EAAAA~~,~~IAAC,~~MAAA,CAAI,MAAO,CAAE,UAAAD,EAAW,GAAID,GAAS,~~CAAA~~,~~GAAQ~~,SAAAD,~~EAAS~~,~~CAC/D~~"}
1	+ {"version":3,"file":"DropShadow.js","sources":["../../../../src/components/dropShadow/DropShadow.tsx"],"sourcesContent":["import React from 'react';\n\nconst BoxShadowMap = {\n\tz1: {\n\t\tup: '0px -2px 8px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 2px 8px rgba(0, 0, 0, 0.12)',\n\t},\n\tz2: {\n\t\tup: '0px -4px 12px rgba(0, 0, 0, 0.12)',\n\t\tdown: '0px 4px 12px rgba(0, 0, 0, 0.12)',\n\t},\n};\n\nexport const DropShadow: React.FC<{\n\tlevel: 'z1' \| 'z2';\n\tposition: 'up' \| 'down';\n\tchildren: React.ReactNode;\n\tstyle?: React.CSSProperties;\n}> = ({ level = 'z1', position = 'down', children, style }) => {\n\tconst boxShadow = BoxShadowMap[level][position];\n\n\treturn (\n\t\t<div data-testid=\"drop-shadow\" style={{ boxShadow, ...(style ?? {}) }}>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n"],"names":["BoxShadowMap","DropShadow","level","position","children","style","boxShadow","jsx"],"mappings":"qHAEMA,EAAe,CACpB,GAAI,CACH,GAAI,mCACJ,KAAM,iCAAA,EAEP,GAAI,CACH,GAAI,oCACJ,KAAM,kCAAA,CAER,EAEaC,EAKR,CAAC,CAAE,MAAAC,EAAQ,KAAM,SAAAC,EAAW,OAAQ,SAAAC,EAAU,MAAAC,KAAY,CAC9D,MAAMC,EAAYN,EAAaE,CAAK,EAAEC,CAAQ,EAE9C,OACCI,MAAC,MAAA,CAAI,cAAY,cAAc,MAAO,CAAE,UAAAD,EAAW,GAAID,GAAS,EAAC,EAC/D,SAAAD,CAAA,CACF,CAEF"}

package/dist/cjs/components/dropdown/ChipInput.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),v=require("../../utils/StringUtils.js"),d=require("../../constants/Theme.js"),q=require("../../assets/icons/chevronDown.svg.js"),S=require("../../assets/icons/cross.svg.js"),R=require("../../assets/icons/errorInfo.svg.js"),I=require("../input/Input.styled.js"),h=require("../TypographyStyle.js"),L=require("./Common.styled.js"),T=require("../tag/Tag.js"),w=require("../tooltips/Tooltip.js"),_=t=>t.length===1?100:t.length===2?40:34,A=({chips:t,onDeleteChip:g,containerStyle:m={},sizeToUse:i="default",isDropdownOpened:p,placeholder:x="Select..",errorMessage:s="",showLabelsOnMoreHover:C=!1})=>{const[f,j]=a.useState(),[c,y]=a.useState(0),[u,b]=a.useState([]);return a.useEffect(()=>{if(!t)return;let n=0;const l=_(t);let r=t.filter(o=>(n+=o.label.length,n<=l));r.length===0&&t.length>0&&(r=[t[0]]),j(r);const O=t.filter(o=>!r.includes(o)).map(o=>o.label);b(O),y(t.length-r.length)},[t]),e.jsxs(e.Fragment,{children:[e.jsxs(L.ChipInputWrapper,{style:{...m},error:!!s,children:[e.jsxs("div",{className:"chips-container",children:[f?.map((n,l)=>e.jsx("div",{style:{zIndex:2},children:e.jsx(T.Tag,{tagText:v.default.truncateText(n.selectedLabel||n.label,40),TrailingIcon:()=>e.jsx(S.default,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(n)}}),children:n.selectedLabel||n.label})},l)),!!c&&e.jsx("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsx(w.Tooltip,{body:"",placement:"bottom",tooltipContent:C&&u.length>0?e.jsx("div",{style:{padding:"4px"},children:u.map((n,l)=>e.jsx(h.BodyCaption,{style:{color:d.COLORS.text.white},children:n},l))}):void 0,children:e.jsx(h.BodyCaption,{color:d.COLORS.content.placeholder,children:`+${c} more`})})}),t.length===0&&e.jsx("div",{style:{color:d.COLORS.content.placeholder},children:x})]}),e.jsx("div",{children:e.jsx(q.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:i==="x-small"?16:i==="small"?20:24,height:i==="x-small"?16:i==="small"?20:24,color:d.COLORS.content.primary})})]}),!!s&&e.jsxs(I.InputFooter,{invalid:!0,children:[!!s&&e.jsx(R.default,{width:16,height:16}),s]})]})};exports.default=A;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),a=require("react"),O=require("../../utils/StringUtils.js"),d=require("../../constants/Theme.js"),q=require("../../assets/icons/chevronDown.svg.js"),S=require("../../assets/icons/cross.svg.js"),R=require("../../assets/icons/errorInfo.svg.js"),I=require("../input/Input.styled.js"),h=require("../TypographyStyle.js"),L=require("./Common.styled.js"),T=require("../tag/Tag.js"),w=require("../tooltips/Tooltip.js"),_=t=>t.length===1?100:t.length===2?40:34,A=({chips:t,onDeleteChip:g,containerStyle:m={},sizeToUse:o="default",isDropdownOpened:p,placeholder:x="Select..",errorMessage:s="",showLabelsOnMoreHover:C=!1})=>{const[f,j]=a.useState(),[c,y]=a.useState(0),[u,b]=a.useState([]);return a.useEffect(()=>{if(!t)return;let n=0;const l=_(t);let r=t.filter(i=>(n+=i.label.length,n<=l));r.length===0&&t.length>0&&(r=[t[0]]),j(r);const v=t.filter(i=>!r.includes(i)).map(i=>i.label);b(v),y(t.length-r.length)},[t]),e.jsxs(e.Fragment,{children:[e.jsxs(L.ChipInputWrapper,{style:{...m},error:!!s,children:[e.jsxs("div",{className:"chips-container",children:[f?.map((n,l)=>e.jsx("div",{style:{zIndex:2},children:e.jsx(T.Tag,{tagText:O.default.truncateText(n.selectedLabel||n.label,40),TrailingIcon:()=>e.jsx(S.default,{"data-testid":"chip-remove-icon",width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(n)}}),children:n.selectedLabel||n.label})},l)),!!c&&e.jsx("div",{style:{position:"relative",zIndex:2,pointerEvents:"auto"},children:e.jsx(w.Tooltip,{body:"",placement:"bottom",tooltipContent:C&&u.length>0?e.jsx("div",{style:{padding:"4px"},children:u.map((n,l)=>e.jsx(h.BodyCaption,{style:{color:d.COLORS.text.white},children:n},l))}):void 0,children:e.jsx(h.BodyCaption,{color:d.COLORS.content.placeholder,children:`+${c} more`})})}),t.length===0&&e.jsx("div",{style:{color:d.COLORS.content.placeholder},children:x})]}),e.jsx("div",{children:e.jsx(q.default,{style:{transform:p?"rotate(180deg)":"rotate(0deg)"},width:o==="x-small"?16:o==="small"?20:24,height:o==="x-small"?16:o==="small"?20:24,color:d.COLORS.content.primary})})]}),!!s&&e.jsxs(I.InputFooter,{invalid:!0,children:[!!s&&e.jsx(R.default,{width:16,height:16}),s]})]})};exports.default=A;
 //# sourceMappingURL=ChipInput.js.map

package/dist/cjs/components/dropdown/ChipInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"2iBAwBMA,EAAwBC,GACzBA,EAAM,SAAW,EAAU,IAC3BA,EAAM,SAAW,EAAU,GACxB,GAGFC,EAAsC,CAAC,CAC5C,MAAAD,EACA,aAAAE,EACA,eAAAC,EAAiB,CAAA,EACjB,UAAAC,EAAY,UACZ,iBAAAC,EACA,YAAAC,EAAc,WACd,aAAAC,EAAe,GACf,sBAAAC,EAAwB,EACzB,IAAM,CACL,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAA,EACxB,CAACC,EAAqBC,CAAsB,EAAIF,EAAAA,SAAS,CAAC,EAC1D,CAACG,EAAwBC,CAAyB,EAAIJ,EAAAA,SAE1D,CAAA,CAAE,EAEJK,OAAAA,EAAAA,UAAU,IAAM,CACf,GAAI,CAAChB,EAAO,OACZ,IAAIiB,EAAiB,EACrB,MAAMC,EAAWnB,EAAqBC,CAAK,EAC3C,IAAIS,EAAUT,EAAM,OAAQmB,IAC3BF,GAAkBE,EAAO,MAAM,OACxBF,GAAkBC,EACzB,EACGT,EAAQ,SAAW,GAAKT,EAAM,OAAS,IAC1CS,EAAU,CAACT,EAAM,CAAC,CAAC,GAEpBU,EAAWD,CAAO,EAElB,MAAMW,EADiBpB,EAAM,OAAQmB,GAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAKA,GAAWA,EAAO,KAAK,EAC1DJ,EAA0BK,CAAM,EAChCP,EAAuBb,EAAM,OAASS,EAAQ,MAAM,CACrD,EAAG,CAACT,CAAK,CAAC,EAGTqB,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,iBAAA,CAAiB,MAAO,CAAE,GAAGpB,GAAkB,MAAO,CAAC,CAACI,EACxD,SAAA,CAAAc,EAAAA,KAAC,MAAA,CAAI,UAAU,kBACb,SAAA,CAAAZ,GAAS,IAAI,CAACe,EAAMC,IACpBC,EAAAA,IAAC,OAAgB,MAAO,CAAE,OAAQ,CAAA,EACjC,SAAAA,EAAAA,IAACC,EAAAA,IAAA,CACA,QAASC,EAAAA,QAAY,aACpBJ,EAAK,eAAiBA,EAAK,MAC3B,EAAA,EAED,aAAc,IACbE,EAAAA,IAACG,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,CACd3B,EAAasB,CAAI,CAClB,CAAA,CAAA,EAID,SAAAA,EAAK,eAAiBA,EAAK,KAAA,CAAA,CAC7B,~~EAlBSC~~,~~CAmBV~~,CACA,EACA,CAAC,CAACb,GACFc,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,OAAQ,EACR,cAAe,MAAA,EAGhB,SAAAA,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAM,GACN,UAAU,SACV,eACCtB,GAAyBM,EAAuB,OAAS,QACvD,MAAA,CAAI,MAAO,CAAE,QAAS,OACrB,SAAAA,EAAuB,IAAI,CAACiB,EAAON,IACnCC,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CAAE,MAAOC,SAAO,KAAK,KAAA,EAG3B,SAAAF,CAAA,EAFIN,CAAA,CAIN,EACF,EACG,OAGL,SAAAC,EAAAA,IAACM,EAAAA,aAAY,MAAOC,EAAAA,OAAO,QAAQ,YACjC,SAAA,IAAIrB,CAAmB,OAAA,CACzB,CAAA,CAAA,CACD,CAAA,EAIDZ,EAAM,SAAW,GACjB0B,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,MAAOO,EAAAA,OAAO,QAAQ,WAAA,EAClC,SAAA3B,CAAA,CACF,CAAA,EAEF,QAEC,MAAA,CACA,SAAAoB,EAAAA,IAACQ,EAAAA,QAAA,CACA,MAAO,CACN,UAAW7B,EAAmB,iBAAmB,cAAA,EAElD,MACCD,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,OACCA,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,MAAO6B,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACvB,CACD,CAAA,EACD,EACC,CAAC,CAAC1B,GACFc,OAACc,EAAAA,YAAA,CAAY,QAAS,GACpB,SAAA,CAAA,CAAC,CAAC5B,GAAgBmB,EAAAA,IAACU,EAAAA,SAAU,MAAO,GAAI,OAAQ,GAAI,EACpD7B,CAAA,CAAA,CACF,CAAA,EAEF,CAEF"}
1	+ {"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' \| 'small' \| 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel \|\| chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\tdata-testid=\"chip-remove-icon\"\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel \|\| chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"2iBAwBMA,EAAwBC,GACzBA,EAAM,SAAW,EAAU,IAC3BA,EAAM,SAAW,EAAU,GACxB,GAGFC,EAAsC,CAAC,CAC5C,MAAAD,EACA,aAAAE,EACA,eAAAC,EAAiB,CAAA,EACjB,UAAAC,EAAY,UACZ,iBAAAC,EACA,YAAAC,EAAc,WACd,aAAAC,EAAe,GACf,sBAAAC,EAAwB,EACzB,IAAM,CACL,KAAM,CAACC,EAASC,CAAU,EAAIC,WAAA,EACxB,CAACC,EAAqBC,CAAsB,EAAIF,EAAAA,SAAS,CAAC,EAC1D,CAACG,EAAwBC,CAAyB,EAAIJ,EAAAA,SAE1D,CAAA,CAAE,EAEJK,OAAAA,EAAAA,UAAU,IAAM,CACf,GAAI,CAAChB,EAAO,OACZ,IAAIiB,EAAiB,EACrB,MAAMC,EAAWnB,EAAqBC,CAAK,EAC3C,IAAIS,EAAUT,EAAM,OAAQmB,IAC3BF,GAAkBE,EAAO,MAAM,OACxBF,GAAkBC,EACzB,EACGT,EAAQ,SAAW,GAAKT,EAAM,OAAS,IAC1CS,EAAU,CAACT,EAAM,CAAC,CAAC,GAEpBU,EAAWD,CAAO,EAElB,MAAMW,EADiBpB,EAAM,OAAQmB,GAAW,CAACV,EAAQ,SAASU,CAAM,CAAC,EAC3C,IAAKA,GAAWA,EAAO,KAAK,EAC1DJ,EAA0BK,CAAM,EAChCP,EAAuBb,EAAM,OAASS,EAAQ,MAAM,CACrD,EAAG,CAACT,CAAK,CAAC,EAGTqB,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,OAACE,EAAAA,iBAAA,CAAiB,MAAO,CAAE,GAAGpB,GAAkB,MAAO,CAAC,CAACI,EACxD,SAAA,CAAAc,EAAAA,KAAC,MAAA,CAAI,UAAU,kBACb,SAAA,CAAAZ,GAAS,IAAI,CAACe,EAAMC,IACpBC,EAAAA,IAAC,OAAgB,MAAO,CAAE,OAAQ,CAAA,EACjC,SAAAA,EAAAA,IAACC,EAAAA,IAAA,CACA,QAASC,EAAAA,QAAY,aACpBJ,EAAK,eAAiBA,EAAK,MAC3B,EAAA,EAED,aAAc,IACbE,EAAAA,IAACG,EAAAA,QAAA,CACA,cAAY,mBACZ,MAAO,GACP,OAAQ,GACR,MAAO,CAAE,OAAQ,SAAA,EACjB,QAAS,IAAM,CACd3B,EAAasB,CAAI,CAClB,CAAA,CAAA,EAID,SAAAA,EAAK,eAAiBA,EAAK,KAAA,CAAA,CAC7B,EAnBSC,CAoBV,CACA,EACA,CAAC,CAACb,GACFc,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAU,WACV,OAAQ,EACR,cAAe,MAAA,EAGhB,SAAAA,EAAAA,IAACI,EAAAA,QAAA,CACA,KAAM,GACN,UAAU,SACV,eACCtB,GAAyBM,EAAuB,OAAS,QACvD,MAAA,CAAI,MAAO,CAAE,QAAS,OACrB,SAAAA,EAAuB,IAAI,CAACiB,EAAON,IACnCC,EAAAA,IAACM,EAAAA,YAAA,CACA,MAAO,CAAE,MAAOC,SAAO,KAAK,KAAA,EAG3B,SAAAF,CAAA,EAFIN,CAAA,CAIN,EACF,EACG,OAGL,SAAAC,EAAAA,IAACM,EAAAA,aAAY,MAAOC,EAAAA,OAAO,QAAQ,YACjC,SAAA,IAAIrB,CAAmB,OAAA,CACzB,CAAA,CAAA,CACD,CAAA,EAIDZ,EAAM,SAAW,GACjB0B,EAAAA,IAAC,MAAA,CAAI,MAAO,CAAE,MAAOO,EAAAA,OAAO,QAAQ,WAAA,EAClC,SAAA3B,CAAA,CACF,CAAA,EAEF,QAEC,MAAA,CACA,SAAAoB,EAAAA,IAACQ,EAAAA,QAAA,CACA,MAAO,CACN,UAAW7B,EAAmB,iBAAmB,cAAA,EAElD,MACCD,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,OACCA,IAAc,UAAY,GAAKA,IAAc,QAAU,GAAK,GAE7D,MAAO6B,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACvB,CACD,CAAA,EACD,EACC,CAAC,CAAC1B,GACFc,OAACc,EAAAA,YAAA,CAAY,QAAS,GACpB,SAAA,CAAA,CAAC,CAAC5B,GAAgBmB,EAAAA,IAACU,EAAAA,SAAU,MAAO,GAAI,OAAQ,GAAI,EACpD7B,CAAA,CAAA,CACF,CAAA,EAEF,CAEF"}

package/dist/cjs/components/dropdown/DropdownPopover/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),H=require("react-popper"),I=require("../../../constants/Theme.js"),m=require("../Common.styled.js"),T=require("../../tooltips/Tooltip.js"),_=require("../../dropShadow/DropShadow.js"),k=require("../OpenedDropdown/components/OpennedDropdown.js"),w=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},L=w(s),S=L.default.forwardRef(({children:a,onDropdownVisbilityChange:v,version:r="1.0",tooltipContent:u,tooltipDirection:g,showTooltipArrow:x,isChildLoading:h,forceOpen:d,...e},y)=>{const c=y,[l,i]=s.useState(!1),[j,o]=s.useState(!1),[R,E]=s.useState(null),[C,O]=s.useState(null),f=s.useRef(null),{styles:q,attributes:M}=H.usePopper(R,C,{placement:e.placement,strategy:e.strategy}),z=n=>{r==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),i(!1),e?.onClose?.()};s.useImperativeHandle(c,()=>({openDropdown:l}),[]),s.useEffect(()=>{c?.current&&(c.current.openDropdown=l)},[l]),s.useEffect(()=>{v?.(l)},[l]);const b=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{position:"relative",...r==="3.0"&&{backgroundColor:l||j?I.COLORS.surface.hovered:"transparent",transition:"background-color 0.3s ease",borderRadius:4}},ref:E,onMouseEnter:r==="3.0"?()=>o(!0):void 0,onMouseLeave:r==="3.0"?()=>o(!1):void 0,children:[t.jsx(m.OverLapAbs,{ref:f,allowEvents:e.allowEvents,disabled:e.disabled,onClick:n=>{e.onDropdownOpen?.(),l?(i(!1),n.preventDefault()):e.disabled||i(!0)},isChildLoading:h,children:e.allowEvents?a:null}),e.allowEvents?null:a]}),(l||d)&&t.jsx(m.OpenDropdownContainer,{ref:O,style:{...q.popper,zIndex:e.dropdownZIndex??3},...M.popper,"data-test":e["data-test"],children:t.jsx(_.DropShadow,{level:"z2",position:"down",style:{borderRadius:r==="3.0"?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"},children:t.jsx(k.OpenedDropdown,{...e,onSelect:n=>{r==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),i(!1))},onClose:z,version:r,headerRef:f,zeroState:e?.zeroState,isDraggable:e.isDraggable,onOptionsReorder:e.onOptionsReorder})})})]});return t.jsx(t.Fragment,{children:!l&&!d&&u!==void 0?t.jsx(T.Tooltip,{body:u,placement:g,hideArrow:!x,children:t.jsx("div",{"data-test":e["data-test"],children:b()})}):b()})});S.displayName="DropdownPopover";exports.DropdownPopover=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),z=require("react-popper"),H=require("../../../constants/Theme.js"),m=require("../Common.styled.js"),I=require("../../tooltips/Tooltip.js"),T=require("../../dropShadow/DropShadow.js"),_=require("../OpenedDropdown/components/OpennedDropdown.js"),k=s=>s&&typeof s=="object"&&"default"in s?s:{default:s},L=k(a),v=L.default.forwardRef(({children:s,onDropdownVisbilityChange:S,version:r="1.0",tooltipContent:d,tooltipDirection:g,showTooltipArrow:x,isChildLoading:h,forceOpen:u,...e},y)=>{const c=y,[l,i]=a.useState(!1),[j,o]=a.useState(!1),[R,E]=a.useState(null),[C,O]=a.useState(null),f=a.useRef(null),{styles:q,attributes:M}=z.usePopper(R,C,{placement:e.placement,strategy:e.strategy}),w=n=>{r==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),i(!1),e?.onClose?.()};a.useImperativeHandle(c,()=>({openDropdown:l}),[]),a.useEffect(()=>{c?.current&&(c.current.openDropdown=l)},[l]),a.useEffect(()=>{S?.(l)},[l]);const b=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{position:"relative",...r==="3.0"&&{backgroundColor:l||j?H.COLORS.surface.hovered:"transparent",transition:"background-color 0.3s ease",borderRadius:4}},ref:E,onMouseEnter:r==="3.0"?()=>o(!0):void 0,onMouseLeave:r==="3.0"?()=>o(!1):void 0,children:[t.jsx(m.OverLapAbs,{ref:f,"data-testid":"dropdown-overlay",allowEvents:e.allowEvents,disabled:e.disabled,onClick:n=>{e.onDropdownOpen?.(),l?(i(!1),n.preventDefault()):e.disabled||i(!0)},isChildLoading:h,children:e.allowEvents?s:null}),e.allowEvents?null:s]}),(l||u)&&t.jsx(m.OpenDropdownContainer,{ref:O,style:{...q.popper,zIndex:e.dropdownZIndex??3},...M.popper,"data-test":e["data-test"],children:t.jsx(T.DropShadow,{level:"z2",position:"down",style:{borderRadius:r==="3.0"?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"},children:t.jsx(_.OpenedDropdown,{...e,onSelect:n=>{r==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),i(!1))},onClose:w,version:r,headerRef:f,zeroState:e?.zeroState,isDraggable:e.isDraggable,onOptionsReorder:e.onOptionsReorder})})})]});return t.jsx(t.Fragment,{children:!l&&!u&&d!==void 0?t.jsx(I.Tooltip,{body:d,placement:g,hideArrow:!x,children:t.jsx("div",{"data-test":e["data-test"],children:b()})}):b()})});v.displayName="DropdownPopover";exports.DropdownPopover=v;
 //# sourceMappingURL=index.js.map