npm - @bikdotai/bik-component-library - Versions diffs - 0.0.861 → 0.0.862 - Mend

@bikdotai/bik-component-library 0.0.861 → 0.0.862

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 (81) hide show

package/dist/cjs/components/input/Input.styled.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),h=({isActive:t,isInvalid:r,hightlightInputColor:o})=>t?o||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,s=t=>t.hideBorder?0:t.version==="2.0"?.5:1,x=i.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("styled-components"),n=require("../TypographyStyle.js"),e=require("../../constants/Theme.js"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=d(a),s=({isActive:t,isInvalid:r,hightlightInputColor:o})=>t?o||e.COLORS.stroke.brand:r?e.COLORS.stroke.negative.vibrant:e.COLORS.stroke.primary,h=t=>t.hideBorder?0:t.version==="2.0"?.5:1,c=i.default.div`
 	border-radius: ${t=>t.version==="2.0"?8:4}px;
 	background: ${t=>["disabled","read-only","disabled-invalid"].includes(t.state)?e.COLORS.background.base:"#fff"};
-	border: ${t=>s(t)}px solid
-		${t=>h({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
+	border: ${t=>h(t)}px solid
+		${t=>s({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
 	${t=>t.isActive?`box-shadow: inset 0px 0px 0px 1px ${t.hightlightInputColor?t.hightlightInputColor:e.COLORS.stroke.brand};`:""};
 	padding: ${t=>t.variant==="small"?"6px":"8px"};
 	height: ${t=>t.height||"100%"};
@@ -13,9 +13,22 @@
 	gap: 8px;
 	overflow: hidden;
-	${t=>t.state==="read-only"?"opacity: 0.7":""};
+	${t=>t.state==="read-only"&&!t.solidDisabled?"opacity: 0.7":""};
 	${t=>t.state==="read-only"?"pointer-events: none":""};
-`,g=i.default.div`
+	${t=>t.solidDisabled&&["disabled","read-only","disabled-invalid"].includes(t.state)?a.css`
+					input,
+					textarea {
+						color: ${e.COLORS.content.secondary};
+						-webkit-text-fill-color: ${e.COLORS.content.secondary};
+						opacity: 1;
+						&::placeholder {
+							color: ${e.COLORS.content.secondary};
+							-webkit-text-fill-color: ${e.COLORS.content.secondary};
+							opacity: 1;
+						}
+					}
+			  `:""};
+`,x=i.default.div`
 	min-height: ${t=>t.iconSize};
 	min-width: ${t=>t.iconSize};
 	display: flex;
@@ -60,7 +73,7 @@
 		min-height: 100px;
 		resize: none;
 	}
-`,c=i.default(n.BodyPrimary)`
+`,g=i.default(n.BodyPrimary)`
 	${l};
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
@@ -82,7 +95,7 @@
 		}
 	}
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
-`,p=i.default(n.BodyCaption)`
+`,m=i.default(n.BodyCaption)`
 	${l};
 	input {
 		min-height: 16px;
@@ -93,7 +106,7 @@
 		}
 	}
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
-`,m=i.default.div`
+`,p=i.default.div`
 	display: flex;
 	justify-content: space-between;
 	${t=>t.maxCharAlignment?"align-items: flex-end;":""}
@@ -114,7 +127,7 @@
 `,f=i.default(n.BodySecondary)`
 	color: ${e.COLORS.content.secondary} !important;
 	margin-top: ${t=>t.position==="BOTTOM"?"8px":"0px"};
-`,v=i.default(n.BodyCaption)`
+`,y=i.default(n.BodyCaption)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${t=>t.invalid?e.COLORS.content.negative:e.COLORS.content.secondary} !important;
@@ -128,11 +141,11 @@
 		width: 16px;
 		height: 16px;
 	}
-`,y=i.default.div`
+`,v=i.default.div`
 	${t=>t.width?`width: ${t.width}`:""};
 	${t=>t.height&&t.type=="multiline"?`height: ${t.height}`:""};
 	${t=>t.state==="disabled"||t.state==="disabled-invalid"?a.css`
-					opacity: 0.5;
+					opacity: ${t.solidDisabled?1:.5};
 					pointer-events: none;
 			  `:""};
 	display: flex;
@@ -159,5 +172,5 @@
 	margin-right: ${t=>t.variant&&["small","x-small"].includes(t.variant)?"":"16px"};
 	font-size: ${t=>t.variant==="x-small"?"12px":t.variant==="small"?"14px":"16px"};
 	line-height: ${t=>t.variant==="x-small"?"16px":t.variant==="small"?"20px":"24px"};
-`;exports.IconHolder=g;exports.InputContainer=c;exports.InputContainerSmall=u;exports.InputContainerXSmall=p;exports.InputFooter=v;exports.InputHeader=m;exports.InputWrapper=x;exports.MaxCharStyle=f;exports.PrefixHolder=$;exports.RootContainer=y;exports.SuffixHolder=b;
+`;exports.IconHolder=x;exports.InputContainer=g;exports.InputContainerSmall=u;exports.InputContainerXSmall=m;exports.InputFooter=y;exports.InputHeader=p;exports.InputWrapper=c;exports.MaxCharStyle=f;exports.PrefixHolder=$;exports.RootContainer=v;exports.SuffixHolder=b;
 //# sourceMappingURL=Input.styled.js.map

package/dist/cjs/components/input/Input.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"6PASMA,EAAiB,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,qBAAAC,KAC1CF,EACIE,GAA8CC,EAAAA,OAAO,OAAO,MACzDF,EACHE,EAAAA,OAAO,OAAO,SAAS,QAExBA,EAAAA,OAAO,OAAO,QAGhBC,EAAkBC,GAIhBA,EAAM,WAAa,EAAIA,EAAM,UAAY,MAAQ,GAAM,EAGlDC,EAAeC,EAAAA,QAAO;AAAA,kBAWhBF,GAAWA,EAAM,UAAY,MAAQ,EAAI,CAAE;AAAA,eAC9CA,GACd,CAAC,WAAY,YAAa,kBAAkB,EAAE,SAASA,EAAM,KAAM,EAChEF,EAAAA,OAAO,WAAW,KAClB,MAAM;AAAA,WACCE,GAAUD,EAAeC,CAAK,CAAC;AAAA,IACtCA,GACFN,EAAe,CACd,SAAUM,EAAM,SAChB,UAAWA,EAAM,UACjB,qBAAsBA,EAAM,oBAC7B,CAAC,CAAC;AAAA,GACDA,GACFA,EAAM,SACH,qCACAA,EAAM,qBACHA,EAAM,qBACNF,EAAAA,OAAO,OAAO,KACjB,IACA,EAAE;AAAA,YACME,GAAWA,EAAM,UAAY,QAAU,MAAQ,KAAM;AAAA,WACtDA,GAAUA,EAAM,QAAU,MAAM;AAAA,GACxCA,GACFA,EAAM,SAAW,CAAC,QAAS,SAAS,EAAE,SAASA,EAAM,OAAO,EACzD,mBACA,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnBA,GAAWA,EAAM,QAAU,YAAc,eAAiB,EAAG;AAAA,GAC7DA,GAAWA,EAAM,QAAU,YAAc,uBAAyB,EAAG;AAAA,EAG5DG,EAAaD,EAAAA,QAAO;AAAA,eAKjBF,GAAUA,EAAM,QAAQ;AAAA,cACzBA,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAKnCA,GACFA,EAAM,OACH,eACAA,EAAM,SAAW,CAAC,QAAS,SAAS,EAAE,SAASA,EAAM,OAAO,EACzD,MACA,KACH,GACA,iBACAA,EAAM,SAAW,CAAC,QAAS,SAAS,EAAE,SAASA,EAAM,OAAO,EACzD,MACA,KACH,EAAE;AAAA,EAGDI,EAAWC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,YAqBLP,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBzBQ,EAAiBJ,EAAAA,QAAOK,aAAW;AAAA,GAO7CH,CAAQ;AAAA,GACPJ,GACFA,EAAM,QAAUA,EAAM,OAAS,YAAc,CAAE,OAAQA,EAAM,MAAA,EAAW,CAAA,CAAE;AAAA;AAAA,GAExEA,GACFA,EAAM,UACNA,EAAM,WACN;AAAA;AAAA,YAEUA,EAAM,SAAS;AAAA,gBACXA,EAAM,SAAS;AAAA,gBACfA,EAAM,WAAa,OAAO;AAAA;AAAA,EAExC;AAAA,EAGWQ,EAAsBN,EAAAA,QAAOO,eAAa;AAAA,GAIpDL,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASPJ,GACFA,EAAM,QAAUA,EAAM,OAAS,YAAc,CAAE,OAAQA,EAAM,MAAA,EAAW,CAAA,CAAE;AAAA,EAG/DU,EAAuBR,EAAAA,QAAOS,aAAW;AAAA,GAInDP,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASPJ,GACFA,EAAM,QAAUA,EAAM,OAAS,YAAc,CAAE,OAAQA,EAAM,MAAA,EAAW,CAAA,CAAE;AAAA,EAG/DY,EAAcV,EAAAA,QAAO;AAAA;AAAA;AAAA,GAM9BF,GAAWA,EAAM,iBAAmB,yBAA2B,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOhEA,GACFA,EAAM,QAAU,UAAUF,EAAAA,OAAO,QAAQ,QAAQ,cAAgB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,WAK5DA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,EAKrBe,EAAeX,EAAAA,QAAOO,eAAa;AAAA,UACtCX,EAAAA,OAAO,QAAQ,SAAS;AAAA,eAClBE,GAAWA,EAAM,WAAa,SAAW,MAAQ,KAAM;AAAA,EAG1Dc,EAAcZ,EAAAA,QAAOS,aAAW;AAAA;AAAA;AAAA,UAGlCX,GACTA,EAAM,QACHF,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAahBiB,EAAgBb,EAAAA,QAAO;AAAA,GAMhCF,GAAWA,EAAM,MAAQ,UAAUA,EAAM,KAAK,GAAK,EAAG;AAAA,GACtDA,GACFA,EAAM,QAAUA,EAAM,MAAQ,YAAc,WAAWA,EAAM,MAAM,GAAK,EAAE;AAAA,GACxEA,GACFA,EAAM,QAAU,YAAcA,EAAM,QAAU,mBAC3CK,EAAAA;AAAAA;AAAAA;AAAAA,OAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAiBMW,EAAed,EAAAA,QAAOK,aAAW;AAAA;AAAA,gBAE7BP,GACfA,EAAM,SAAW,CAAC,QAAS,SAAS,EAAE,SAASA,EAAM,OAAO,EACzD,GACA,MAAM;AAAA,cACIA,GACbA,EAAM,UAAY,UACf,OACAA,EAAM,UAAY,QAClB,OACA,MAAM;AAAA,gBACMA,GACfA,EAAM,UAAY,UACf,OACAA,EAAM,UAAY,QAClB,OACA,MAAM;AAAA,EAGEiB,EAAef,EAAAA,QAAOK,aAAW;AAAA;AAAA,iBAE5BP,GAChBA,EAAM,SAAW,CAAC,QAAS,SAAS,EAAE,SAASA,EAAM,OAAO,EACzD,GACA,MAAM;AAAA,cACIA,GACbA,EAAM,UAAY,UACf,OACAA,EAAM,UAAY,QAClB,OACA,MAAM;AAAA,gBACMA,GACfA,EAAM,UAAY,UACf,OACAA,EAAM,UAAY,QAClB,OACA,MAAM;AAAA"}
1	+ {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t&::placeholder {\n\t\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

package/dist/cjs/components/tabs/Tabs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),j=require("../../constants/Theme.js"),s=require("./Tabs.styles.js"),f=require("../tag/Tag.js"),E=e=>{const{tabs:t,initialTab:u,onTabSelected:l,TabItemStyledProps:T,selectedTab:o,extendedBorder:i,rightComponent:b,size:m="default",isSquared:x=!1,containerStyles:g}=e,[a,r]=C.useState(u||t[0].key),{colorsV2:c}=j.DEFAULT_THEME;C.useEffect(()=>{o&&o!==a&&r(o)},[o,a]);const k=e.backgroundColor,q=e.selectedTextColor??c.background.brand,I=e.textColor??c.content.secondary;return n.jsxs(s.TabHeader,{style:g??{},bgColor:k,"data-test":e["data-test"],children:[t.map((d,h)=>n.jsx(y,{hasEqualSpacing:e.hasEqualSpacing,selectedTextColor:q,textColor:I,tab:d,currentTab:a,TabItemStyledProps:T,IconComponent:d.icon,size:m,setCurrentTab:S=>{r(S),l&&l(S)},isSquared:x,isFirstlement:h==0,isLastElement:h==t.length-1,iconPosition:d.iconPosition??"left"},d.key)),i&&n.jsx(s.EmptyTab,{}),n.jsx(s.RightComponent,{children:b})]})},y=e=>{const{tab:t,currentTab:u,setCurrentTab:l,TabItemStyledProps:T,IconComponent:o,iconPosition:i="left",size:b="default",isSquared:m=!1,isFirstlement:x,isLastElement:g}=e,a=t.key===u,{colorsV2:r}=j.DEFAULT_THEME,c=C.useCallback(()=>({...T,borderRadius:e.isSquared?x?"4px 0px 0px 4px":g?"0px 4px 4px 0px":"":""}),[]);return n.jsxs(s.TabItem,{style:c(),selected:a,hasEqualSpacing:e.hasEqualSpacing,onClick:()=>l(e.tab.key),selectedTextColor:e.selectedTextColor,isSquared:m,"data-test":e["data-test"],children:[o&&i==="left"&&n.jsx(o,{selected:a?r.background.brand:r.content.secondary}),t.leadingNumber!==void 0&&t.leadingNumber!==null&&n.jsx(s.TrailingNumberContainer,{selected:a,children:n.jsx(f.Tag,{tagText:t?.leadingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:r.content.primaryInverse})}),n.jsx(s.TabItemText,{style:b==="small"?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:e.textColor,selectedTextColor:e.selectedTextColor,selected:a,children:t.title}),t.trailingNumber!==void 0&&t.trailingNumber!==null&&n.jsx(s.TrailingNumberContainer,{selected:a,children:n.jsx(f.Tag,{tagText:t?.trailingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:r.content.primaryInverse})}),o&&i==="right"&&n.jsx(o,{selected:a?r.background.brand:r.content.secondary})]})};E.displayName="Tabs";y.displayName="TabItemComponent";exports.TabItemComponent=y;exports.Tabs=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),j=require("../../constants/Theme.js"),c=require("./Tabs.styles.js"),S=require("../tag/Tag.js"),E=e=>{const{tabs:t,initialTab:u,onTabSelected:s,TabItemStyledProps:b,selectedTab:o,extendedBorder:d,rightComponent:m,size:g="default",isSquared:T=!1,containerStyles:x,gap:a,selectedNumberBackground:r}=e,[l,k]=C.useState(u||t[0].key),{colorsV2:f}=j.DEFAULT_THEME;C.useEffect(()=>{o&&o!==l&&k(o)},[o,l]);const B=e.backgroundColor,q=e.selectedTextColor??f.background.brand,I=e.textColor??f.content.secondary;return n.jsxs(c.TabHeader,{style:x??{},bgColor:B,tabGap:a,"data-test":e["data-test"],children:[t.map((i,h)=>n.jsx(y,{hasEqualSpacing:e.hasEqualSpacing,uniformBorder:!!a,selectedTextColor:q,textColor:I,tab:i,currentTab:l,TabItemStyledProps:b,IconComponent:i.icon,size:g,selectedNumberBackground:r,setCurrentTab:N=>{k(N),s&&s(N)},isSquared:T,isFirstlement:h==0,isLastElement:h==t.length-1,iconPosition:i.iconPosition??"left"},i.key)),d&&n.jsx(c.EmptyTab,{}),n.jsx(c.RightComponent,{children:m})]})},y=e=>{const{tab:t,currentTab:u,setCurrentTab:s,TabItemStyledProps:b,IconComponent:o,iconPosition:d="left",size:m="default",isSquared:g=!1,isFirstlement:T,isLastElement:x}=e,a=t.key===u,{colorsV2:r}=j.DEFAULT_THEME,l=C.useCallback(()=>({...b,borderRadius:e.isSquared?T?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""}),[]);return n.jsxs(c.TabItem,{style:l(),selected:a,uniformBorder:e.uniformBorder,hasEqualSpacing:e.hasEqualSpacing,onClick:()=>s(e.tab.key),selectedTextColor:e.selectedTextColor,isSquared:g,"data-test":e["data-test"],children:[o&&d==="left"&&n.jsx(o,{selected:a?r.background.brand:r.content.secondary}),t.leadingNumber!==void 0&&t.leadingNumber!==null&&n.jsx(c.TrailingNumberContainer,{"data-test":"tab-count-badge",selected:a,selectedBackground:e.selectedNumberBackground,children:n.jsx(S.Tag,{tagText:t?.leadingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:r.content.primaryInverse,backgroundColor:a?e.selectedNumberBackground:e.selectedNumberBackground?r.content.secondary:void 0})}),n.jsx(c.TabItemText,{style:m==="small"?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:e.textColor,selectedTextColor:e.selectedTextColor,selected:a,children:t.title}),t.trailingNumber!==void 0&&t.trailingNumber!==null&&n.jsx(c.TrailingNumberContainer,{"data-test":"tab-count-badge",selected:a,selectedBackground:e.selectedNumberBackground,children:n.jsx(S.Tag,{tagText:t?.trailingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:r.content.primaryInverse,backgroundColor:a?e.selectedNumberBackground:e.selectedNumberBackground?r.content.secondary:void 0})}),o&&d==="right"&&n.jsx(o,{selected:a?r.background.brand:r.content.secondary})]})};E.displayName="Tabs";y.displayName="TabItemComponent";exports.TabItemComponent=y;exports.Tabs=E;
 //# sourceMappingURL=Tabs.js.map

package/dist/cjs/components/tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer ~~selected~~={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer ~~selected~~={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"uOAaaA,EAAsCC,GAAU,CAC5D,KAAM,CACL,KAAAC,EACA,WAAAC,EACA,cAAAC,EACA,mBAAAC,EACA,YAAAC,EACA,eAAAC,EACA,eAAAC,EACA,KAAAC,EAAO,UACP,UAAAC,EAAY,GACZ,gBAAAC,CAAA,~~EACGV~~,EACE,~~CAACW~~,EAAYC,CAAa,EAAIC,EAAAA,~~SAASX~~,GAAcD,EAAK,CAAC,EAAE,GAAG,EAChE,CAAE,~~SAAAa~~,GAAaC,EAAAA,cAErBC,EAAAA,UAAU,IAAM,~~CACXX~~,GAAeA,~~IAAgBM~~,GAClCC,~~EAAcP~~,CAAW,CAE3B,EAAG,CAACA,~~EAAaM~~,CAAU,CAAC,EAE5B,MAAMM,~~EAAkBjB~~,EAAM,~~gBACxBkB~~,~~EACLlB~~,EAAM,~~mBAAqBc~~,EAAS,WAAW,MAC1CK,~~EAAYnB~~,EAAM,~~WAAac~~,EAAS,QAAQ,UAEtD,OACCM,EAAAA,KAACC,EAAAA,UAAA,CACA,~~MAAOX~~,GAAmB,CAAA,EAC1B,~~QAASO~~,EACT,~~YAAWjB~~,EAAM,WAAW,EAE3B,SAAA,CAAAC,EAAK,IAAI,~~CAACqB~~,EAAKC,IACfC,EAAAA,IAACC,EAAA,CACA,~~gBAAiBzB~~,EAAM,gBACvB,~~kBAAAkB~~,EACA,UAAAC,EAEA,IAAAG,EACA,WAAAX,EACA,~~mBAAAP~~,EACA,~~cAAekB~~,EAAI,KACnB,~~KAAAd~~,EACA,~~cAAgBkB~~,GAAW,CAC1Bd,EAAcc,CAAM,~~EAChBvB~~,GACHA,~~EAAcuB~~,CAAgB,CAEhC,EACA,~~UAAAjB~~,EACA,~~cAAec~~,GAAS,EACxB,cAAeA,~~GAAStB~~,EAAK,OAAS,EACtC,~~aAAcqB~~,EAAI,cAAgB,MAAA,~~EAf7BA~~,EAAI,GAAA,~~CAiBV~~,~~EACAhB~~,~~SAAmBqB~~,EAAAA,SAAA,EAAS,EAC7BH,EAAAA,IAACI,EAAAA,gBAAgB,~~SAAArB~~,CAAA,CAAe,CAAA,CAAA,CAAA,CAGnC,~~EAEakB~~,~~EAAqDzB~~,GAAU,CAC3E,KAAM,CACL,~~IAAAsB~~,EACA,WAAAX,EACA,cAAAC,EACA,~~mBAAAR~~,EACA,~~cAAAyB~~,EACA,aAAAC,EAAe,OACf,~~KAAAtB~~,EAAO,UACP,UAAAC,EAAY,GACZ,~~cAAAsB~~,EACA,cAAAC,CAAA,~~EACGhC~~,~~EACEiC~~,EAAWX,EAAI,MAAQX,EACvB,CAAE,SAAAG,GAAaC,EAAAA,cAEfmB,EAAYC,EAAAA,YAAY,KACtB,CACN,~~GAAG/B~~,EACH,aAAcJ,EAAM,~~UACjB+B~~,EACC,kBACAC,EACA,kBACA,GACD,EAAA,GAGF,CAAA,CAAE,EAEL,OACCZ,EAAAA,KAACgB,EAAAA,QAAA,CACA,MAAOF,EAAA,EACP,SAAAD,EACA,~~gBAAiBjC~~,EAAM,gBACvB,QAAS,~~IAAMY~~,~~EAAcZ~~,EAAM,IAAI,GAAG,EAC1C,kBAAmBA,EAAM,kBACzB,UAAAS,EACA,YAAWT,EAAM,WAAW,EAE3B,SAAA,~~CAAA6B~~,GAAiBC,IAAiB,QAClCN,EAAAA,IAACK,EAAA,CACA,SACCI,EAAWnB,EAAS,WAAW,MAAQA,EAAS,QAAQ,SAAA,CAAA,EAI1DQ,EAAI,gBAAkB,QAAaA,EAAI,gBAAkB,MACzDE,EAAAA,IAACa,EAAAA,~~yBAAwB~~,SAAAJ,~~EACxB~~,~~SAAAT~~,EAAAA,IAACc,EAAAA,IAAA,CACA,QAAShB,GAAK,eAAiB,EAC/B,MAAM,OACN,KAAMA,EAAI,cACV,QAAQ,SACR,MAAOR,EAAS,QAAQ,~~cAAA~~,CAAA,~~EAE1B~~,~~EAEDU~~,EAAAA,IAACe,EAAAA,YAAA,CACA,~~MACC/B~~,IAAS,QACN,CAAE,SAAU,GAAI,UAAW,SAAU,WAAY,GAAA,EACjD,OAEJ,UAAWR,EAAM,UACjB,kBAAmBA,EAAM,kBACzB,~~SAAAiC~~,EAEC,SAAAX,EAAI,KAAA,CAAA,EAELA,EAAI,iBAAmB,QAAaA,EAAI,iBAAmB,MAC3DE,EAAAA,IAACa,EAAAA,~~yBAAwB~~,SAAAJ,~~EACxB~~,~~SAAAT~~,EAAAA,IAACc,EAAAA,IAAA,CACA,QAAShB,GAAK,gBAAkB,EAChC,MAAM,OACN,KAAMA,EAAI,cACV,QAAQ,SACR,MAAOR,EAAS,QAAQ,~~cAAA~~,CAAA,~~EAE1B~~,~~EAEAe~~,GAAiBC,IAAiB,SAClCN,EAAAA,IAACK,EAAA,CACA,SACCI,EAAWnB,EAAS,WAAW,MAAQA,EAAS,QAAQ,SAAA,CAAA,CAE1D,CAAA,CAAA,CAIJ,~~EAEAf~~,EAAK,YAAc,~~OAEnB0B~~,EAAiB,YAAc"}
1	+ {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t\tselectedNumberBackground,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tuniformBorder={!!gap}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tselectedNumberBackground={selectedNumberBackground}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\tuniformBorder={props.uniformBorder}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tdata-test=\"tab-count-badge\"\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tdata-test=\"tab-count-badge\"\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","selectedNumberBackground","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}

package/dist/cjs/components/tabs/Tabs.styles.js CHANGED Viewed

@@ -1,8 +1,22 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../../constants/Theme.js"),d=require("../TypographyStyle.js"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=i(r),a=o.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../../constants/Theme.js"),i=require("../TypographyStyle.js"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=d(r),a=o.default.div`
 	display: flex;
 	flex-direction: row;
 	background-color: ${e=>e.bgColor};
-`,l=o.default.div`
+	${e=>e.tabGap?`
+		gap: ${e.tabGap}px;
+		position: relative;
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 1px;
+			background: ${t.DEFAULT_THEME.colorsV2.background.inactive};
+			z-index: -1;
+		}
+	`:""}
+`,n=o.default.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
@@ -11,8 +25,8 @@
 	align-items: center;
 	justify-content: center;
 	width: ${e=>e.hasEqualSpacing?"50%":"auto"};
-	border-bottom-color: ${e=>e.isSquared?"":e.selected?e.selectedTextColor:t.DEFAULT_THEME.colorsV2.background.inactive};
-	border-bottom-width: ${e=>e.isSquared?"":e.selected?"2px":"1px"};
+	border-bottom-color: ${e=>e.isSquared?"":e.selected?e.selectedTextColor:e.uniformBorder?"transparent":t.DEFAULT_THEME.colorsV2.background.inactive};
+	border-bottom-width: ${e=>e.isSquared?"":e.selected||e.uniformBorder?"2px":"1px"};
 	border-bottom-style: ${e=>e.isSquared?"":"solid"};
 	border: ${e=>e.isSquared?e.selected?`1px solid ${e.selectedTextColor}`:`1px solid ${t.DEFAULT_THEME.colorsV2.background.inactive}`:""};
 	flex-direction: row;
@@ -22,7 +36,7 @@
 		background-color: rgba(0, 0, 0, 0.03);
 	}
 	background-color: ${e=>e.isSquared&&e.selected?`${t.DEFAULT_THEME.colorsV2.background.brandLight}`:""};
-`,n=o.default.div`
+`,c=o.default.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -30,10 +44,10 @@
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${e=>e.selected?t.DEFAULT_THEME.colorsV2.background.inverseLight:t.DEFAULT_THEME.colorsV2.content.secondary};
+	background: ${e=>e.selected?e.selectedBackground??t.DEFAULT_THEME.colorsV2.background.inverseLight:t.DEFAULT_THEME.colorsV2.content.secondary};
 	color: ${t.DEFAULT_THEME.colorsV2.content.primaryInverse};
 	border-radius: 10px;
-`,c=o.default(d.ButtonLarge)`
+`,l=o.default(i.ButtonLarge)`
 	color: ${e=>e.selected?e.selectedTextColor:e.textColor};
 `,s=o.default.div`
 	flex-grow: 1;
@@ -42,5 +56,5 @@
 	display: flex;
 	align-items: center;
 	border-bottom: 1px solid ${t.DEFAULT_THEME.colorsV2.background.inactive};
-`;exports.EmptyTab=s;exports.RightComponent=u;exports.TabHeader=a;exports.TabItem=l;exports.TabItemText=c;exports.TrailingNumberContainer=n;
+`;exports.EmptyTab=s;exports.RightComponent=u;exports.TabHeader=a;exports.TabItem=n;exports.TabItemText=l;exports.TrailingNumberContainer=c;
 //# sourceMappingURL=Tabs.styles.js.map

package/dist/cjs/components/tabs/Tabs.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '2px' : '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","~~TabItem~~","~~DEFAULT_THEME~~","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":"6PAKaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA,qBAGVC,GAAUA,EAAM,OAAO;AAAA,~~EAGhCC~~,~~EAAUF~~,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,YAIjBC,GAAWA,EAAM,UAAY,WAAa,qBAAsB;AAAA,mBACzDA,GAClBA,EAAM,UAAY,GAAKA,EAAM,SAAW,OAAS,MAAM;AAAA;AAAA;AAAA,UAG9CA,GAAWA,EAAM,gBAAkB,MAAQ,MAAO;AAAA,wBACpCA,GACvBA,EAAM,UACH,GACAA,EAAM,SACNA,EAAM,~~kBACNE~~,EAAAA,cAAc,SAAS,WAAW,QAAQ;AAAA,~~wBACtBF~~,GACvBA,EAAM,~~UAAY~~,~~GAAKA~~,EAAM,~~SAAW~~,~~MAAQ~~,KAAK;AAAA,~~wBAC9BA~~,GAAWA,EAAM,UAAY,GAAK,OAAQ;AAAA,WACvDA,GACVA,EAAM,UACHA,EAAM,SACL,aAAaA,EAAM,iBAAiB,GACpC,~~aAAaE~~,gBAAc,SAAS,WAAW,QAAQ,GACxD,EAAE;AAAA;AAAA;AAAA,~~cAGQF~~,GAAWA,EAAM,UAAY,QAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAInCA,GACpBA,EAAM,WACHA,EAAM,SACL,~~GAAGE~~,EAAAA,cAAc,SAAS,WAAW,UAAU,GAEhD,EAAE;AAAA,~~EAGMC~~,EAA0BJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~eAU9BC~~,GACdA,EAAM,~~SACHE~~,EAAAA,cAAc,SAAS,WAAW,aAClCA,EAAAA,cAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,gBAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,~~EAI1CE~~,EAAcL,EAAAA,QAAOM,aAAW;AAAA,UAClCL,GACTA,EAAM,SAAWA,EAAM,kBAAoBA,EAAM,SAAS;AAAA,EAG/CM,EAAWP,EAAAA,QAAO;AAAA;AAAA,~~4BAEHG~~,gBAAc,SAAS,WAAW,QAAQ;AAAA,~~EAGzDK~~,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA,~~4BAGTG~~,gBAAc,SAAS,WAAW,QAAQ;AAAA"}
1	+ {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected \|\| props.uniformBorder\n\t\t\t? '2px'\n\t\t\t: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n\tselectedBackground?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? props.selectedBackground ??\n\t\t\t DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","DEFAULT_THEME","TabItem","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":"6PAKaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA,qBAGVC,GAAUA,EAAM,OAAO;AAAA,GACzCA,GACFA,EAAM,OACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,gBAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,GAItD,EAAE;AAAA,EAGMC,EAAUH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,YAIjBC,GAAWA,EAAM,UAAY,WAAa,qBAAsB;AAAA,mBACzDA,GAClBA,EAAM,UAAY,GAAKA,EAAM,SAAW,OAAS,MAAM;AAAA;AAAA;AAAA,UAG9CA,GAAWA,EAAM,gBAAkB,MAAQ,MAAO;AAAA,wBACpCA,GACvBA,EAAM,UACH,GACAA,EAAM,SACNA,EAAM,kBACNA,EAAM,cACN,cACAC,EAAAA,cAAc,SAAS,WAAW,QAAQ;AAAA,wBACtBD,GACvBA,EAAM,UACH,GACAA,EAAM,UAAYA,EAAM,cACxB,MACA,KAAK;AAAA,wBACeA,GAAWA,EAAM,UAAY,GAAK,OAAQ;AAAA,WACvDA,GACVA,EAAM,UACHA,EAAM,SACL,aAAaA,EAAM,iBAAiB,GACpC,aAAaC,gBAAc,SAAS,WAAW,QAAQ,GACxD,EAAE;AAAA;AAAA;AAAA,cAGQD,GAAWA,EAAM,UAAY,QAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAInCA,GACpBA,EAAM,WACHA,EAAM,SACL,GAAGC,EAAAA,cAAc,SAAS,WAAW,UAAU,GAEhD,EAAE;AAAA,EAGME,EAA0BJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW9BC,GACdA,EAAM,SACHA,EAAM,oBACNC,EAAAA,cAAc,SAAS,WAAW,aAClCA,EAAAA,cAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,gBAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,EAI1CG,EAAcL,EAAAA,QAAOM,aAAW;AAAA,UAClCL,GACTA,EAAM,SAAWA,EAAM,kBAAoBA,EAAM,SAAS;AAAA,EAG/CM,EAAWP,EAAAA,QAAO;AAAA;AAAA,4BAEHE,gBAAc,SAAS,WAAW,QAAQ;AAAA,EAGzDM,EAAiBR,EAAAA,QAAO;AAAA;AAAA;AAAA,4BAGTE,gBAAc,SAAS,WAAW,QAAQ;AAAA"}

package/dist/cjs/components/tag/Tag.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),P=require("react"),B=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),D=require("./model.js"),V=require("./Tag.styled.js"),v=require("./themes.js"),F=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},h=F(P),C=({tagText:o,LeadingIcon:u,TrailingIcon:j,onLeadingIconClicked:m=void 0,leadingIconId:s,trailingIconId:d,onTrailingIconClicked:T=void 0,theme:n="light",type:p="neutral",variant:c="regular",version:f,cursor:q,alignIcon:A,noBorder:E,tagHtmlText:a,contentPadding:_,padding:$,height:k,leadingIconTooltip:g,trailingIconTooltip:N,tagColor:w,numberOfLines:l,backgroundColor:R,borderRadius:S,size:t="regular"})=>{let i=o;const b=n;let x=p;D.ValidTagTypeMap[c][p]||(x="neutral"),c==="circle"&&typeof i=="number"&&i>99&&(i="99+");const M=v.getTagIconColor(n,x),y={height:c==="compressed"?12:16,width:c==="compressed"?12:16,color:M,style:{display:"block"}};return e.jsx(V.Tag,{cursor:q,theme:b,type:x,variant:c,version:f,alignIcon:A,noBorder:E,contentPadding:_,padding:$,height:k,backgroundColor:R,borderRadius:S,size:t,children:e.jsxs("div",{className:"container",children:[u&&(g?e.jsx(B.Tooltip,{...g,children:e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})}):e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})),a&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:a}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:a}):t==="small"?e.jsx(r.BodyTiny,{className:"text",numberOfLines:l,children:a}):e.jsx(r.BodyCaption,{className:"text",numberOfLines:l,children:a})),!a&&i!==""&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:i}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:i}):t==="small"?e.jsx(r.BodyTiny,{className:"text",color:w,numberOfLines:l,children:i}):e.jsx(r.BodyCaption,{className:"text",color:w,numberOfLines:l,children:i})),j&&(N?e.jsx(B.Tooltip,{...N,children:e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})})}):e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})}))]})})};C.displayName="Tag";exports.Tag=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),D=require("react"),B=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),V=require("./model.js"),v=require("./Tag.styled.js"),F=require("./themes.js"),G=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},h=G(D),C=({tagText:o,LeadingIcon:u,TrailingIcon:j,onLeadingIconClicked:m=void 0,leadingIconId:s,trailingIconId:d,onTrailingIconClicked:T=void 0,theme:n="light",type:p="neutral",variant:c="regular",version:f,cursor:q,alignIcon:A,noBorder:E,tagHtmlText:a,contentPadding:_,padding:$,height:k,leadingIconTooltip:g,trailingIconTooltip:N,tagColor:w,numberOfLines:l,backgroundColor:R,borderRadius:S,size:t="regular",hoverBackgroundColor:b})=>{let i=o;const M=n;let x=p;V.ValidTagTypeMap[c][p]||(x="neutral"),c==="circle"&&typeof i=="number"&&i>99&&(i="99+");const P=F.getTagIconColor(n,x),y={height:c==="compressed"?12:16,width:c==="compressed"?12:16,color:P,style:{display:"block"}};return e.jsx(v.Tag,{cursor:q,theme:M,type:x,variant:c,version:f,alignIcon:A,noBorder:E,contentPadding:_,padding:$,height:k,backgroundColor:R,borderRadius:S,size:t,hoverBackgroundColor:b,children:e.jsxs("div",{className:"container",children:[u&&(g?e.jsx(B.Tooltip,{...g,children:e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})}):e.jsx("button",{className:"icon-leading",onClick:m,id:`${s}-wrapper`||"leading-icon-wrapper",children:h.default.createElement(u,{...y,id:s||"leading-icon"})})),a&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:a}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:a}):t==="small"?e.jsx(r.BodyTiny,{className:"text",numberOfLines:l,children:a}):e.jsx(r.BodyCaption,{className:"text",numberOfLines:l,children:a})),!a&&i!==""&&(p==="ai"&&n==="light"?t==="small"?e.jsx(r.AiBodyTiny,{numberOfLines:l,children:i}):e.jsx(r.AiBodyCaption,{numberOfLines:l,children:i}):t==="small"?e.jsx(r.BodyTiny,{className:"text",color:w,numberOfLines:l,children:i}):e.jsx(r.BodyCaption,{className:"text",color:w,numberOfLines:l,children:i})),j&&(N?e.jsx(B.Tooltip,{...N,children:e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})})}):e.jsx("button",{className:"icon-trailing",onClick:T,id:`${d}-wrapper`||"trailing-icon-wrapper",children:h.default.createElement(j,{...y,id:d||"trailing-icon"})}))]})})};C.displayName="Tag";exports.Tag=C;
 //# sourceMappingURL=Tag.js.map

package/dist/cjs/components/tag/Tag.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"4VAYaA,EAAM,CAAC,CACnB,QAAAC,EACA,YAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuB,OACvB,cAAAC,EACA,eAAAC,EACA,sBAAAC,EAAwB,OACxB,MAAAC,EAAQ,QACR,KAAAC,EAAO,UACP,QAAAC,EAAU,UACV,QAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,QAAAC,EACA,OAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,~~SACR~~,IAAgB,CACf,IAAIC,~~EAAiBzB~~,EACrB,~~MAAM0B~~,~~EAAenB~~,EACrB,~~IAAIoB~~,~~EAAcnB~~,~~EAEboB~~,EAAAA,~~gBAAgBnB~~,CAAO,EAAED,CAAI,~~IACjCmB~~,EAAc,~~WAGXlB~~,IAAY,UACX,~~OAAOgB~~,GAAmB,UAAYA,EAAiB,KAC1DA,EAAiB,OAInB,MAAMI,EAAYC,EAAAA,~~gBAAgBvB~~,~~EAAOoB~~,CAAW,EAC9CI,EAAY,CACjB,~~OAAQtB~~,IAAY,aAAe,GAAK,GACxC,MAAOA,IAAY,aAAe,GAAK,GACvC,~~MAAOoB~~,EACP,MAAO,CAAE,QAAS,OAAA,CAAQ,EAG3B,OACCG,EAAAA,IAACC,EAAAA,IAAA,CACA,~~OAAAtB~~,EACA,~~MAAOe~~,EACP,KAAMC,EACN,~~QAAAlB~~,EACA,QAAAC,EACA,UAAAE,EACA,SAAAC,EACA,eAAAE,EACA,QAAAC,EACA,OAAAC,EACA,gBAAAK,EACA,aAAAC,EACA,KAAAC,EAEA,SAAAU,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,~~CAAAjC~~,IACCiB,~~EACAc~~,MAACG,EAAAA,QAAA,CAAS,~~GAAGjB~~,EACZ,~~SAAAc~~,EAAAA,IAAC,SAAA,CACA,UAAU,eACV,~~QAAS7B~~,EACT,GAAI,GAAGC,CAAa,YAAc,uBAEjC,~~SAAAgC~~,EAAAA,QAAM,~~cAAcnC~~,EAAa,CACjC,~~GAAG8B~~,EACH,~~GAAI3B~~,GAAiB,cAAA,CACrB,CAAA,CAAA,EAEH,~~EAEA4B~~,EAAAA,IAAC,SAAA,CACA,UAAU,eACV,~~QAAS7B~~,EACT,GAAI,GAAGC,CAAa,YAAc,uBAEjC,~~SAAAgC~~,EAAAA,QAAM,~~cAAcnC~~,EAAa,CACjC,~~GAAG8B~~,EACH,~~GAAI3B~~,GAAiB,cAAA,CACrB,CAAA,CAAA,GAIHU,IACCN,IAAS,MAAQD,IAAU,QAC3BiB,IAAS,~~QACRQ~~,EAAAA,IAACK,EAAAA,WAAA,CAAW,~~cAAAhB~~,EACV,SAAAP,CAAA,CACF,~~QAECwB~~,EAAAA,cAAA,CAAc,~~cAAAjB~~,EACb,SAAAP,CAAA,CACF,EAEEU,IAAS,~~QACZQ~~,EAAAA,IAACO,EAAAA,SAAA,CAAS,UAAU,OAAO,~~cAAAlB~~,EACzB,SAAAP,CAAA,CACF,~~EAEAkB~~,EAAAA,IAACQ,EAAAA,YAAA,CAAY,UAAU,OAAO,~~cAAAnB~~,EAC5B,SAAAP,CAAA,CACF,GAGD,CAACA,~~GACDW~~,IAAmB,~~KAClBjB~~,IAAS,MAAQD,IAAU,QAC3BiB,IAAS,~~cACPa~~,EAAAA,WAAA,CAAW,~~cAAAhB~~,EACV,WACF,~~EAEAW~~,EAAAA,IAACM,EAAAA,eAAc,~~cAAAjB~~,EACb,~~SAAAI~~,CAAA,CACF,~~EAEED~~,IAAS,~~QACZQ~~,EAAAA,IAACO,EAAAA,SAAA,CACA,UAAU,OACV,~~MAAOnB~~,EACP,cAAAC,EAEC,~~SAAAI~~,CAAA,CAAA,EAGFO,EAAAA,IAACQ,EAAAA,YAAA,CACA,UAAU,OACV,~~MAAOpB~~,EACP,cAAAC,EAEC,~~SAAAI~~,CAAA,CAAA,~~GAIHvB~~,IACCiB,~~EACAa~~,MAACG,EAAAA,QAAA,CAAS,~~GAAGhB~~,EACZ,~~SAAAa~~,EAAAA,IAAC,SAAA,CACA,UAAU,gBACV,~~QAAS1B~~,EACT,GAAI,GAAGD,CAAc,YAAc,wBAElC,~~SAAA+B~~,EAAAA,QAAM,~~cAAclC~~,EAAc,CAClC,~~GAAG6B~~,EACH,~~GAAI1B~~,GAAkB,eAAA,CACtB,CAAA,CAAA,EAEH,~~EAEA2B~~,EAAAA,IAAC,SAAA,CACA,UAAU,gBACV,~~QAAS1B~~,EACT,GAAI,GAAGD,CAAc,YAAc,wBAElC,~~SAAA+B~~,EAAAA,QAAM,~~cAAclC~~,EAAc,CAClC,~~GAAG6B~~,EACH,~~GAAI1B~~,GAAkB,eAAA,CACtB,CAAA,CAAA,EACF,CAAA,CAEH,CAAA,CAAA,CAGH,EAEAN,EAAI,YAAc"}
1	+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n\thoverBackgroundColor,\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t\thoverBackgroundColor={hoverBackgroundColor}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","hoverBackgroundColor","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"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"}

package/dist/cjs/components/tag/Tag.styled.js CHANGED Viewed

@@ -28,6 +28,10 @@
 			all: unset;
 			display: flex;
 		}
+		${e=>e.hoverBackgroundColor&&`&:hover {
+				background: ${e.hoverBackgroundColor};
+			}`}
 	}
 `;exports.Tag=n;
 //# sourceMappingURL=Tag.styled.js.map

package/dist/cjs/components/tag/Tag.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string \| number;\n\tsize?: 'regular' \| 'small';\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":"6MASaA,EAAMC,EAAAA,QAAO;AAAA,~~WAedC~~,GAAUA,EAAM,QAAU,SAAS;AAAA,GAC3CA,GACFA,EAAM,OAAS,UACdA,EAAM,UAAY,UAChB;AAAA;AAAA,IAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGPA,GAAWA,EAAM,UAAYA,EAAM,UAAY,QAAS;AAAA;AAAA,IAErEA,GACFA,EAAM,OACH,WAAWA,EAAM,MAAM,8BACvBA,EAAM,OAAS,QACf,wCACA,EAAE;AAAA,aACMA,GACXA,EAAM,QACHA,EAAM,QACNA,EAAM,OAAS,QACf,UACAA,EAAM,eACN,GAAGA,EAAM,cAAc,KACvBC,EAAAA,WAAWD,EAAM,OAAO,CAAC;AAAA,gBACdA,GACdA,EAAM,iBAAmBE,EAAAA,mBAAmBF,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEnDA,GACjBA,EAAM,eAAiB,OACpB,OAAOA,EAAM,cAAiB,SAC7B,GAAGA,EAAM,YAAY,KACrBA,EAAM,aACPA,EAAM,UAAY,UAClB,MACA,MAAM;AAAA;AAAA,IAEPA,GACF,CAACA,EAAM,UACPA,EAAM,QAAU,SAChB,WAAWA,EAAM,UAAY,MAAQ,GAAM,CAAC,YAAYG,EAAAA,eACvDH,EAAM,KACNA,EAAM,KACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGMA,GAAUI,eAAaJ,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"Tag.styled.js","sources":["../../../../src/components/tag/Tag.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TagTheme, TagType, TagVariant } from './model';\nimport {\n\tgenerateBorder,\n\tgetBackgroundColor,\n\tgetPadding,\n\tgetTextColor,\n} from './themes';\n\nexport const Tag = styled.div<{\n\ttheme: TagTheme;\n\ttype: TagType;\n\tvariant: TagVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\tcontentPadding?: number;\n\tpadding?: string;\n\theight?: number;\n\tbackgroundColor?: string;\n\tborderRadius?: string \| number;\n\tsize?: 'regular' \| 'small';\n\thoverBackgroundColor?: string;\n}>`\n\tcursor: ${(props) => props.cursor ?? 'default'};\n\t${(props) =>\n\t\tprops.size !== 'small' &&\n\t\t(props.variant === 'regular'\n\t\t\t? `display: block;\n\t\t min-height: 26px;\n\t\t`\n\t\t\t: `min-height: 20px;`)}\n\t.container {\n\t\tdisplay: flex;\n\t\talign-items: ${(props) => (props.alignIcon ? props.alignIcon : 'center')};\n\t\tgap: 6px;\n\t\t${(props) =>\n\t\t\tprops.height\n\t\t\t\t? `height: ${props.height}px; box-sizing: border-box;`\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? 'height: 16px; box-sizing: border-box;'\n\t\t\t\t: ''}\n\t\tpadding: ${(props) =>\n\t\t\tprops.padding\n\t\t\t\t? props.padding\n\t\t\t\t: props.size === 'small'\n\t\t\t\t? '2px 6px'\n\t\t\t\t: props.contentPadding\n\t\t\t\t? `${props.contentPadding}px`\n\t\t\t\t: getPadding(props.variant)};\n\t\tbackground: ${(props) =>\n\t\t\tprops.backgroundColor ?? getBackgroundColor(props.theme, props.type)};\n\n\t\tborder-radius: ${(props) =>\n\t\t\tprops.borderRadius !== undefined\n\t\t\t\t? typeof props.borderRadius === 'number'\n\t\t\t\t\t? `${props.borderRadius}px`\n\t\t\t\t\t: props.borderRadius\n\t\t\t\t: props.variant === 'regular'\n\t\t\t\t? '4px'\n\t\t\t\t: '12px'};\n\n\t\t${(props) =>\n\t\t\t!props.noBorder &&\n\t\t\tprops.theme === 'light' &&\n\t\t\t`border: ${props.version === '2.0' ? 0.5 : 1}px solid ${generateBorder(\n\t\t\t\tprops.type,\n\t\t\t\tprops.theme,\n\t\t\t)};`}\n\n\t\t.text {\n\t\t\tcolor: ${(props) => getTextColor(props.theme, props.type)};\n\t\t}\n\n\t\t.icon-trailing {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t.icon-leading {\n\t\t\tall: unset;\n\t\t\tdisplay: flex;\n\t\t}\n\n\t\t${(props) =>\n\t\t\tprops.hoverBackgroundColor &&\n\t\t\t`&:hover {\n\t\t\t\tbackground: ${props.hoverBackgroundColor};\n\t\t\t}`}\n\t}\n`;\n"],"names":["Tag","styled","props","getPadding","getBackgroundColor","generateBorder","getTextColor"],"mappings":"6MASaA,EAAMC,EAAAA,QAAO;AAAA,WAgBdC,GAAUA,EAAM,QAAU,SAAS;AAAA,GAC3CA,GACFA,EAAM,OAAS,UACdA,EAAM,UAAY,UAChB;AAAA;AAAA,IAGA,oBAAoB;AAAA;AAAA;AAAA,iBAGPA,GAAWA,EAAM,UAAYA,EAAM,UAAY,QAAS;AAAA;AAAA,IAErEA,GACFA,EAAM,OACH,WAAWA,EAAM,MAAM,8BACvBA,EAAM,OAAS,QACf,wCACA,EAAE;AAAA,aACMA,GACXA,EAAM,QACHA,EAAM,QACNA,EAAM,OAAS,QACf,UACAA,EAAM,eACN,GAAGA,EAAM,cAAc,KACvBC,EAAAA,WAAWD,EAAM,OAAO,CAAC;AAAA,gBACdA,GACdA,EAAM,iBAAmBE,EAAAA,mBAAmBF,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA,mBAEnDA,GACjBA,EAAM,eAAiB,OACpB,OAAOA,EAAM,cAAiB,SAC7B,GAAGA,EAAM,YAAY,KACrBA,EAAM,aACPA,EAAM,UAAY,UAClB,MACA,MAAM;AAAA;AAAA,IAEPA,GACF,CAACA,EAAM,UACPA,EAAM,QAAU,SAChB,WAAWA,EAAM,UAAY,MAAQ,GAAM,CAAC,YAAYG,EAAAA,eACvDH,EAAM,KACNA,EAAM,KACP,CAAC,GAAG;AAAA;AAAA;AAAA,YAGMA,GAAUI,eAAaJ,EAAM,MAAOA,EAAM,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAavDA,GACFA,EAAM,sBACN;AAAA,kBACeA,EAAM,oBAAoB;AAAA,KACvC;AAAA;AAAA"}

package/dist/cjs/components/tag/model.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' \| 'dark';\n\nexport type TagVariant = 'regular' \| 'circle' \| 'compressed';\n\nexport type TagType =\n\t\| 'negative'\n\t\| 'warning'\n\t\| 'positive'\n\t\| 'neutral'\n\t\| 'white'\n\t\| 'purple'\n\t\| 'blue'\n\t\| 'grey'\n\t\| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/*\n\t Set the theme of the Tag\n\t * @default default light\n\t /\n\ttheme?: TagTheme;\n\n\t/\n\t Set the color of the Tag\n\t * @default default neutral\n\t /\n\ttype?: TagType;\n\n\t/\n\t Set the color of the Tag\n\t * @default default regular\n\t /\n\tvariant?: TagVariant;\n\n\t/\n\t The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon id,\n\t * @default trailing-icon\n\t /\n\ttrailingIconId?: string;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t Tooltip props for the trailing icon\n\t * @default undefined\n\t /\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/\n\t The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t The left icon id,\n\t * @default leading-icon\n\t /\n\tleadingIconId?: string;\n\t/\n\t Tooltip props for the leading icon\n\t * @default undefined\n\t /\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string \| number;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\t/* Custom CSS padding string, e.g. '4px 8px' /\n\tpadding?: string;\n\t/* Custom height in px /\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/\n\t Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t /\n\tbackgroundColor?: string;\n\t/\n\t Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t /\n\tborderRadius?: string \| number;\n\t/\n\t Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t */\n\tsize?: 'regular' \| 'small';\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}
1	+ {"version":3,"file":"model.js","sources":["../../../../src/components/tag/model.ts"],"sourcesContent":["import React from 'react';\nimport { MouseEventHandler } from 'react';\nimport { TooltipProps } from '../tooltips/Tooltip';\n\nexport type TagTheme = 'light' \| 'dark';\n\nexport type TagVariant = 'regular' \| 'circle' \| 'compressed';\n\nexport type TagType =\n\t\| 'negative'\n\t\| 'warning'\n\t\| 'positive'\n\t\| 'neutral'\n\t\| 'white'\n\t\| 'purple'\n\t\| 'blue'\n\t\| 'grey'\n\t\| 'ai';\n\nexport const ValidTagTypeMap = {\n\tregular: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n\tcircle: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\tblue: true,\n\t\tgrey: true,\n\t\tai: true,\n\t},\n\tcompressed: {\n\t\tnegative: true,\n\t\twarning: true,\n\t\tpositive: true,\n\t\tneutral: true,\n\t\twhite: true,\n\t\tpurple: true,\n\t\tblue: true,\n\t\tai: true,\n\t},\n};\n\nexport interface TagProps extends React.BaseHTMLAttributes<HTMLDivElement> {\n\t/*\n\t Set the theme of the Tag\n\t * @default default light\n\t /\n\ttheme?: TagTheme;\n\n\t/\n\t Set the color of the Tag\n\t * @default default neutral\n\t /\n\ttype?: TagType;\n\n\t/\n\t Set the color of the Tag\n\t * @default default regular\n\t /\n\tvariant?: TagVariant;\n\n\t/\n\t The icon component that is the right of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tTrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon id,\n\t * @default trailing-icon\n\t /\n\ttrailingIconId?: string;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonTrailingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t Tooltip props for the trailing icon\n\t * @default undefined\n\t /\n\ttrailingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\t/\n\t The icon component that is to the left of the text\n\t * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react\n\t * @default undefined\n\t /\n\tLeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\t/\n\t The right icon on click event, defaults to () => {}\n\t /\n\tonLeadingIconClicked?: MouseEventHandler<HTMLButtonElement>;\n\t/\n\t The left icon id,\n\t * @default leading-icon\n\t /\n\tleadingIconId?: string;\n\t/\n\t Tooltip props for the leading icon\n\t * @default undefined\n\t /\n\tleadingIconTooltip?: Omit<TooltipProps, 'children'>;\n\n\ttagText: string \| number;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\t/* Custom CSS padding string, e.g. '4px 8px' /\n\tpadding?: string;\n\t/* Custom height in px /\n\theight?: number;\n\tcursor?: string;\n\talignIcon?: string;\n\tnoBorder?: boolean;\n\ttagHtmlText?: JSX.Element;\n\tcontentPadding?: number;\n\ttagColor?: string;\n\tnumberOfLines?: number;\n\t/\n\t Override the computed background color of the tag container.\n\t * @default undefined (uses theme/type color)\n\t /\n\tbackgroundColor?: string;\n\t/\n\t Override the border-radius of the tag container.\n\t * @default undefined (uses variant-based radius: 4px for regular, 12px otherwise)\n\t /\n\tborderRadius?: string \| number;\n\t/\n\t Controls the size of the tag. 'small' sets height to 16px and uses tiny font.\n\t * @default 'regular'\n\t /\n\tsize?: 'regular' \| 'small';\n\t/\n\t Background color on hover.\n\t * @default undefined (no hover effect)\n\t */\n\thoverBackgroundColor?: string;\n}\n"],"names":["ValidTagTypeMap"],"mappings":"gFAmBO,MAAMA,EAAkB,CAC9B,QAAS,CACR,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,EAEL,OAAQ,CACP,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,KAAM,GACN,KAAM,GACN,GAAI,EAAA,EAEL,WAAY,CACX,SAAU,GACV,QAAS,GACT,SAAU,GACV,QAAS,GACT,MAAO,GACP,OAAQ,GACR,KAAM,GACN,GAAI,EAAA,CAEN"}

package/dist/esm/components/bik-layout/CommonStyles.js CHANGED Viewed

@@ -87,14 +87,12 @@ const f = t.div`
 	z-index: 10;
 `, m = t.div`
 	background-color: ${o.colorsV2.surface.standard};
-	border-bottom: 1px solid #e0e0e0;
+	border-bottom: 1px solid ${o.colorsV2.stroke.primary};
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
 	height: 56px;
-	border-bottom-width: 0.5px;
-	border-color: ${o.colorsV2.background.inactive};
 	padding: 16px;
 	.cursor {
 		cursor: pointer;

package/dist/esm/components/bik-layout/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' \| 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n flex-grow: 0 !important;\n flex-shrink: 0 !important;\n flex-basis: calc(100vh - 56px) !important;\n overflow: scroll;\n `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 1px solid #e0e0e0;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tborder-bottom-width: 0.5px;\n\tborder-color: ${DEFAULT_THEME.colorsV2.background.inactive};\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}
1	+ {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/bik-layout/CommonStyles.tsx"],"sourcesContent":["import { Dropdown, Tooltip } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { ComponentZindex } from '@src/constants/zindex';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\n\nexport const GlobalContainer = styled.div`\n\t.global-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\twidth: 100%;\n\t}\n\t.component-container {\n\t\tflex: 1 1 0%;\n\t}\n`;\n\n//page spinner\nexport const LoaderWrapper = styled.div`\n\twidth: 100%;\n\theight: 100vh;\n\tmargin: 0;\n\tbackground-color: rgba(0, 0, 0, 0.6);\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\talign-content: center;\n\t.inner {\n\t\twidth: 100%;\n\t\theight: 100vh;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 40px;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);\n\t\tborder-radius: 4px;\n\t\tflex-direction: column;\n\t}\n\n\t.loader {\n\t\twidth: 48px;\n\t\theight: 48px;\n\t\tborder: 5px solid ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t\tborder-bottom-color: transparent;\n\t\tborder-radius: 50%;\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t\tanimation: rotation 1s linear infinite;\n\t}\n\n\t@keyframes rotation {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\nexport const LoadingMessageWrapper = styled.div`\n\tmargin-top: 16px;\n`;\n\n//bik-layout\nexport const BikLayoutContainer = styled.div<{\n\ttype?: 'overflow-within' \| 'overflow-body';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\t${(props) => {\n\t\tif (props.type === 'overflow-within') {\n\t\t\treturn `\n flex-grow: 0 !important;\n flex-shrink: 0 !important;\n flex-basis: calc(100vh - 56px) !important;\n overflow: scroll;\n `;\n\t\t} else {\n\t\t\treturn 'flex: 1;';\n\t\t}\n\t}}\n\tbackground-color: ${(props) =>\n\t\tprops.backgroundColor ?? DEFAULT_THEME.colorsV2.surface.hovered};\n\t.pd-24 {\n\t\tpadding: 24px;\n\t}\n\t.inner-wrapper {\n\t\twidth: 100%;\n\t}\n\t.disabled--wrapper {\n\t\tposition: fixed;\n\t\topacity: 0.5;\n\t\tz-index: 4;\n\t\theight: 500vh;\n\t\twidth: 100%;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\n//bik-\n\nexport const BikHeaderWrapper = styled.div`\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const BikHeaderContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.stroke.primary};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\talign-items: center;\n\theight: 56px;\n\tpadding: 16px;\n\t.cursor {\n\t\tcursor: pointer;\n\t}\n\t.brand {\n\t\tcolor: ${DEFAULT_THEME.colorsV2.stroke.brand};\n\t}\n\t.row--flex {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tgap: 8px;\n\t}\n`;\n\n//profile\n\nexport const MenuInnerContainer = styled.div`\n\tz-index: 1;\n\tpadding-top: 16px;\n\tpadding: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\twidth: 291px;\n\t.divider {\n\t\tborder: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\tmargin: 0px 4px;\n\t}\n\t.logout--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 8px;\n\t\tgap: 8px;\n\t\tborder-radius: 8px;\n\t\tcursor: pointer;\n\t\tmargin-top: 10px;\n\t\t&:hover {\n\t\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.negative.light};\n\t\t}\n\t}\n`;\n\nexport const ProfileDropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n .inner\n`;\n\nexport const ProfileDropdownInnerContainer = styled.div<{\n\tisDropdownOpen: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 0px 8px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-radius: 50%;\n\tpadding: 6px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDropdownOpen && DEFAULT_THEME.colorsV2.background.brandLight};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isDropdownOpen\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.brandLight\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\n\nexport const UserNameTitleSmall = styled(TitleSmall)`\n\twhite-space: nowrap;\n\tmax-width: 161px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n`;\n\nexport const UserAvatarContainer = styled.div`\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 50%;\n\t.avatar--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.background.inverse};\n\t\tborder-radius: 50%;\n\t\twidth: 32px;\n\t\theight: 32px;\n\t}\n\timg {\n\t\tobject-fit: contain;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n`;\n\nexport const StyledTooltip = styled(Tooltip)`\n\t.tooltip-inner {\n\t\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\t\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\t}\n\t.tooltip-arrow::before {\n\t\tdisplay: none;\n\t}\n`;\n\nexport const UserInfoContainer = styled.div`\n\tbackground-color: ${DEFAULT_THEME.colorsV2.surface.standard};\n\tmin-width: 188px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tborder-top-right-radius: 4px;\n\tborder-top-left-radius: 4px;\n\tmargin-bottom: 8px;\n\tpadding: 8px;\n\tborder-radius: 8px;\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground: ${DEFAULT_THEME.colorsV2.surface.hovered};\n\t}\n`;\nexport const StatusContainer = styled.div<{ isAvailable: boolean }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tmargin-top: 4px;\n\t.availability--container {\n\t\tborder-width: 1px;\n\t\tmargin-right: 4px;\n\t\theight: 6px;\n\t\twidth: 6px;\n\t\tborder-style: solid;\n\t\tborder-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isAvailable\n\t\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t\t: DEFAULT_THEME.colorsV2.surface.standard};\n\t\tborder-radius: 4px;\n\t}\n`;\n\nexport const UserStatusContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-left: 16px;\n\tjustify-content: space-between;\n\tjustify-content: flex-start;\n`;\n\nexport const StyledBodyCaption = styled(BodyCaption)<{\n\tisAvailable: boolean;\n}>`\n\tcolor: ${(props) =>\n\t\tprops.isAvailable\n\t\t\t? DEFAULT_THEME.colorsV2.background.positive.vibrant\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n`;\n\n//feature modal\n\nexport const FeatureModalContainer = styled.div<{\n\tzIndex?: number;\n\tresetHeight?: boolean;\n\trelativePostion?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: flex-end;\n\talign-items: flex-end;\n\tposition: fixed;\n\tbottom: 0;\n\twidth: fill-available;\n\theight: ${(props) => (props.resetHeight ? 'fit-content' : '650px')};\n\tpadding: 24px;\n\tz-index: ${(props) =>\n\t\tprops.zIndex ? props.zIndex : ComponentZindex.FEATURE_MODAL};\n\tbackground: linear-gradient(\n\t\t180deg,\n\t\trgba(255, 255, 255, 0) 0%,\n\t\t#ffffff 71.35%\n\t);\n\tfilter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.12));\n\t.cross-button {\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: ${COLORS.scrim.standard};\n\t\tborder-radius: 50%;\n\t\tposition: fixed;\n\t\tmargin: auto;\n\t\tbottom: 164px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tcursor: pointer;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 5)};\n\t}\n`;\n\nexport const InnerModalContainer = styled.div`\n\twidth: 100%;\n\theight: 132px;\n\tbackground: ${COLORS.background.inverse};\n\tbox-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);\n\tborder-radius: 8px;\n\n\t.mt-8 {\n\t\tmargin-top: 9px;\n\t}\n\t.content-layout {\n\t\tpadding: 24px;\n\t\tgap: 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\t.cta-buttons {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t}\n\t.title-color {\n\t\tcolor: ${COLORS.surface.subdued};\n\t}\n\t.subtitle-color {\n\t\tcolor: ${COLORS.content.secondaryInverse};\n\t}\n`;\nexport const RelativeModalContainer = styled.div`\n\twidth: fit-content;\n\tborder-radius: 8px;\n\tbox-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);\n\tposition: relative;\n\n\t.cross-container {\n\t\tposition: absolute;\n\t\tdisplay: flex;\n\t\twidth: 100%;\n\t\tjustify-content: flex-end;\n\t\tpadding: 12px;\n\t\tcursor: pointer;\n\t}\n\t.demo-container {\n\t\tpadding: 18px 24px;\n\t\tborder: 1px solid var(--stroke-color-stroke-negative-light-alt, #ffced4);\n\t\tbackground: var(--surface-color-background-negative-light, #ffebef);\n\t\tgap: 8px;\n\t\theight: 132px;\n\t\tmax-width: 494px;\n\t\tborder-radius: 8px;\n\t}\n\t.content-layout {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: flex-start;\n\t\tjustify-content: flex-start;\n\t\theight: 220px;\n\t}\n\t.left-content {\n\t\twidth: 261px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.right-content {\n\t\tpadding: 36px 24px;\n\t\theight: 100%;\n\t\tbackground-color: white;\n\t\t> * {\n\t\t\tmargin-top: 8px;\n\t\t}\n\t}\n\t.cta-button-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tmargin-top: 16px;\n\t}\n`;\n\nexport const FeatureModalV2Container = styled.div`\n\t.top-feature-content {\n\t\tmax-height: 285px;\n\t\timg {\n\t\t\theight: 100%;\n\t\t\twidth: 100%;\n\t\t\tobject-fit: contain;\n\t\t}\n\t}\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\t.bottom-feature-content {\n\t\tpadding: 36px 20px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 16px;\n\t}\n\t.cta-buttons {\n\t\twidth: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 16px;\n\t\tjustify-content: center;\n\t\tmargin-top: 8px;\n\t}\n\t.title-class {\n\t\tmax-width: 500px;\n\t}\n\t.text-align-center {\n\t\ttext-align: center;\n\t}\n`;\n"],"names":["styled","LoaderWrapper","DEFAULT_THEME","LoadingMessageWrapper","BikLayoutContainer","props","BikHeaderWrapper","BikHeaderContainer","MenuInnerContainer","ProfileDropdownToggleContainer","Dropdown","ProfileDropdownInnerContainer","UserNameTitleSmall","TitleSmall","UserAvatarContainer","StyledTooltip","Tooltip","UserInfoContainer","StatusContainer","UserStatusContainer","StyledBodyCaption","BodyCaption","FeatureModalContainer","ComponentZindex","COLORS","InnerModalContainer","RelativeModalContainer","FeatureModalV2Container"],"mappings":"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"}

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

@@ -156,7 +156,7 @@ const y = (t, n, e, a, i) => {
       n,
       r.stroke.brandLightAlt
     )}`;
-  if (t === "secondaryGray")
+  if (t === "secondaryGray" || t === "tertiaryGray")
     return `background-color: ${r.surface.hovered}; ${o(
       n,
       r.stroke.primary