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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (46) 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),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`
+"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`
 	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=>h(t)}px solid
-		${t=>s({isActive:t.isActive,isInvalid:t.isInvalid,hightlightInputColor:t.hightlightInputColor})};
+	border: ${t=>s(t)}px solid
+		${t=>h({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,22 +13,9 @@
 	gap: 8px;
 	overflow: hidden;
-	${t=>t.state==="read-only"&&!t.solidDisabled?"opacity: 0.7":""};
+	${t=>t.state==="read-only"?"opacity: 0.7":""};
 	${t=>t.state==="read-only"?"pointer-events: none":""};
-	${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`
+`,g=i.default.div`
 	min-height: ${t=>t.iconSize};
 	min-width: ${t=>t.iconSize};
 	display: flex;
@@ -73,7 +60,7 @@
 		min-height: 100px;
 		resize: none;
 	}
-`,g=i.default(n.BodyPrimary)`
+`,c=i.default(n.BodyPrimary)`
 	${l};
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
@@ -95,7 +82,7 @@
 		}
 	}
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
-`,m=i.default(n.BodyCaption)`
+`,p=i.default(n.BodyCaption)`
 	${l};
 	input {
 		min-height: 16px;
@@ -106,7 +93,7 @@
 		}
 	}
 	${t=>t.height&&t.type!=="multiline"?{height:t.height}:{}};
-`,p=i.default.div`
+`,m=i.default.div`
 	display: flex;
 	justify-content: space-between;
 	${t=>t.maxCharAlignment?"align-items: flex-end;":""}
@@ -127,7 +114,7 @@
 `,f=i.default(n.BodySecondary)`
 	color: ${e.COLORS.content.secondary} !important;
 	margin-top: ${t=>t.position==="BOTTOM"?"8px":"0px"};
-`,y=i.default(n.BodyCaption)`
+`,v=i.default(n.BodyCaption)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${t=>t.invalid?e.COLORS.content.negative:e.COLORS.content.secondary} !important;
@@ -141,11 +128,11 @@
 		width: 16px;
 		height: 16px;
 	}
-`,v=i.default.div`
+`,y=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: ${t.solidDisabled?1:.5};
+					opacity: 0.5;
 					pointer-events: none;
 			  `:""};
 	display: flex;
@@ -172,5 +159,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=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;
+`;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;
 //# 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\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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"}
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":"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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"),E=require("../../constants/Theme.js"),l=require("./Tabs.styles.js"),j=require("../tag/Tag.js"),N=e=>{const{tabs:t,initialTab:u,onTabSelected:c,TabItemStyledProps:b,selectedTab:a,extendedBorder:i,rightComponent:m,size:T="default",isSquared:g=!1,containerStyles:x,gap:r,selectedNumberBackground:o}=e,[s,f]=C.useState(u||t[0].key),{colorsV2:h}=E.DEFAULT_THEME;C.useEffect(()=>{a&&a!==s&&f(a)},[a,s]);const q=e.backgroundColor,I=e.selectedTextColor??h.background.brand,B=e.textColor??h.content.secondary;return n.jsxs(l.TabHeader,{style:x??{},bgColor:q,tabGap:r,"data-test":e["data-test"],children:[t.map((d,k)=>n.jsx(y,{hasEqualSpacing:e.hasEqualSpacing,uniformBorder:!!r,selectedTextColor:I,textColor:B,tab:d,currentTab:s,TabItemStyledProps:b,IconComponent:d.icon,size:T,selectedNumberBackground:o,setCurrentTab:S=>{f(S),c&&c(S)},isSquared:g,isFirstlement:k==0,isLastElement:k==t.length-1,iconPosition:d.iconPosition??"left"},d.key)),i&&n.jsx(l.EmptyTab,{}),n.jsx(l.RightComponent,{children:m})]})},y=e=>{const{tab:t,currentTab:u,setCurrentTab:c,TabItemStyledProps:b,IconComponent:a,iconPosition:i="left",size:m="default",isSquared:T=!1,isFirstlement:g,isLastElement:x}=e,r=t.key===u,{colorsV2:o}=E.DEFAULT_THEME,s=C.useCallback(()=>({...b,borderRadius:e.isSquared?g?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""}),[]);return n.jsxs(l.TabItem,{style:s(),selected:r,uniformBorder:e.uniformBorder,hasEqualSpacing:e.hasEqualSpacing,onClick:()=>c(e.tab.key),selectedTextColor:e.selectedTextColor,isSquared:T,"data-test":e["data-test"],children:[a&&i==="left"&&n.jsx(a,{selected:r?o.background.brand:o.content.secondary}),t.leadingNumber!==void 0&&t.leadingNumber!==null&&n.jsx(l.TrailingNumberContainer,{selected:r,selectedBackground:e.selectedNumberBackground,children:n.jsx(j.Tag,{tagText:t?.leadingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:o.content.primaryInverse})}),n.jsx(l.TabItemText,{style:m==="small"?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:e.textColor,selectedTextColor:e.selectedTextColor,selected:r,children:t.title}),t.trailingNumber!==void 0&&t.trailingNumber!==null&&n.jsx(l.TrailingNumberContainer,{selected:r,selectedBackground:e.selectedNumberBackground,children:n.jsx(j.Tag,{tagText:t?.trailingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:o.content.primaryInverse})}),a&&i==="right"&&n.jsx(a,{selected:r?o.background.brand:o.content.secondary})]})};N.displayName="Tabs";y.displayName="TabItemComponent";exports.TabItemComponent=y;exports.Tabs=N;
+"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;
 //# 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~~\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\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/>\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\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/>\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":"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,~~EACA,IAAAC,EACA,yBAAAC,~~CAAA,~~EACGZ~~,EACE,~~CAACa~~,EAAYC,CAAa,EAAIC,EAAAA,~~SAASb~~,GAAcD,EAAK,CAAC,EAAE,GAAG,EAChE,CAAE,~~SAAAe~~,GAAaC,EAAAA,cAErBC,EAAAA,UAAU,IAAM,~~CACXb~~,GAAeA,~~IAAgBQ~~,GAClCC,~~EAAcT~~,CAAW,CAE3B,EAAG,CAACA,~~EAAaQ~~,CAAU,CAAC,EAE5B,MAAMM,~~EAAkBnB~~,EAAM,~~gBACxBoB~~,~~EACLpB~~,EAAM,~~mBAAqBgB~~,EAAS,WAAW,MAC1CK,~~EAAYrB~~,EAAM,~~WAAagB~~,EAAS,QAAQ,UAEtD,OACCM,EAAAA,KAACC,EAAAA,UAAA,CACA,~~MAAOb~~,GAAmB,CAAA,EAC1B,~~QAASS~~,EACT,~~OAAQR~~,~~EACR,YAAWX,~~EAAM,WAAW,EAE3B,SAAA,CAAAC,EAAK,IAAI,~~CAACuB~~,EAAKC,IACfC,EAAAA,IAACC,EAAA,CACA,~~gBAAiB3B~~,EAAM,gBACvB,~~cAAe~~,~~CAAC,CAACW,EACjB,kBAAAS,~~EACA,UAAAC,EAEA,IAAAG,EACA,WAAAX,EACA,~~mBAAAT~~,EACA,~~cAAeoB~~,EAAI,KACnB,~~KAAAhB~~,EACA,~~yBAAAI~~,~~EACA,cAAgBgB,~~GAAW,CAC1Bd,EAAcc,CAAM,~~EAChBzB~~,GACHA,~~EAAcyB~~,CAAgB,CAEhC,EACA,~~UAAAnB~~,EACA,~~cAAegB~~,GAAS,EACxB,cAAeA,~~GAASxB~~,EAAK,OAAS,EACtC,~~aAAcuB~~,EAAI,cAAgB,MAAA,~~EAhB7BA~~,EAAI,GAAA,~~CAkBV~~,~~EACAlB~~,~~SAAmBuB~~,EAAAA,SAAA,EAAS,EAC7BH,EAAAA,IAACI,EAAAA,gBAAgB,~~SAAAvB~~,CAAA,CAAe,CAAA,CAAA,CAAA,CAGnC,~~EAEaoB~~,~~EAAqD3B~~,GAAU,CAC3E,KAAM,CACL,~~IAAAwB~~,EACA,WAAAX,EACA,cAAAC,EACA,~~mBAAAV~~,EACA,~~cAAA2B~~,EACA,aAAAC,EAAe,OACf,~~KAAAxB~~,EAAO,UACP,UAAAC,EAAY,GACZ,~~cAAAwB~~,EACA,cAAAC,CAAA,~~EACGlC~~,~~EACEmC~~,EAAWX,EAAI,MAAQX,EACvB,CAAE,SAAAG,GAAaC,EAAAA,cAEfmB,EAAYC,EAAAA,YAAY,KACtB,CACN,~~GAAGjC~~,EACH,aAAcJ,EAAM,~~UACjBiC~~,EACC,kBACAC,EACA,kBACA,GACD,EAAA,GAGF,CAAA,CAAE,EAEL,OACCZ,EAAAA,KAACgB,EAAAA,QAAA,CACA,MAAOF,EAAA,EACP,SAAAD,EACA,~~cAAenC~~,EAAM,~~cACrB,gBAAiBA,EAAM,~~gBACvB,QAAS,~~IAAMc~~,~~EAAcd~~,EAAM,IAAI,GAAG,EAC1C,kBAAmBA,EAAM,kBACzB,UAAAS,EACA,YAAWT,EAAM,WAAW,EAE3B,SAAA,~~CAAA+B~~,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,~~wBAAA~~,~~CACA,~~SAAAJ,~~EACA~~,~~mBAAoBnC~~,~~EAAM,yBAE1B,SAAA0B,~~EAAAA,IAACc,EAAAA,IAAA,CACA,QAAShB,GAAK,eAAiB,EAC/B,MAAM,OACN,KAAMA,EAAI,cACV,QAAQ,SACR,MAAOR,EAAS,QAAQ,cAAA,CAAA,~~CACzB~~,~~CAAA~~,~~EAGFU,~~EAAAA,IAACe,EAAAA,YAAA,CACA,~~MACCjC~~,IAAS,QACN,CAAE,SAAU,GAAI,UAAW,SAAU,WAAY,GAAA,EACjD,OAEJ,UAAWR,EAAM,UACjB,kBAAmBA,EAAM,kBACzB,~~SAAAmC~~,EAEC,SAAAX,EAAI,KAAA,CAAA,EAELA,EAAI,iBAAmB,QAAaA,EAAI,iBAAmB,MAC3DE,EAAAA,IAACa,EAAAA,~~wBAAA~~,~~CACA,~~SAAAJ,~~EACA~~,~~mBAAoBnC~~,~~EAAM,yBAE1B,SAAA0B,~~EAAAA,IAACc,EAAAA,IAAA,CACA,QAAShB,GAAK,gBAAkB,EAChC,MAAM,OACN,KAAMA,EAAI,cACV,QAAQ,SACR,MAAOR,EAAS,QAAQ,cAAA,CAAA,~~CACzB~~,~~CAAA~~,~~EAGDe,~~GAAiBC,IAAiB,SAClCN,EAAAA,IAACK,EAAA,CACA,SACCI,EAAWnB,EAAS,WAAW,MAAQA,EAAS,QAAQ,SAAA,CAAA,CAE1D,CAAA,CAAA,CAIJ,~~EAEAjB~~,EAAK,YAAc,~~OAEnB4B~~,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} = 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":"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"}

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

@@ -1,22 +1,8 @@
-"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`
+"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`
 	display: flex;
 	flex-direction: row;
 	background-color: ${e=>e.bgColor};
-	${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`
+`,l=o.default.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
@@ -25,8 +11,8 @@
 	align-items: center;
 	justify-content: center;
 	width: ${e=>e.hasEqualSpacing?"50%":"auto"};
-	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-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-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;
@@ -36,7 +22,7 @@
 		background-color: rgba(0, 0, 0, 0.03);
 	}
 	background-color: ${e=>e.isSquared&&e.selected?`${t.DEFAULT_THEME.colorsV2.background.brandLight}`:""};
-`,c=o.default.div`
+`,n=o.default.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -44,10 +30,10 @@
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${e=>e.selected?e.selectedBackground??t.DEFAULT_THEME.colorsV2.background.inverseLight:t.DEFAULT_THEME.colorsV2.content.secondary};
+	background: ${e=>e.selected?t.DEFAULT_THEME.colorsV2.background.inverseLight:t.DEFAULT_THEME.colorsV2.content.secondary};
 	color: ${t.DEFAULT_THEME.colorsV2.content.primaryInverse};
 	border-radius: 10px;
-`,l=o.default(i.ButtonLarge)`
+`,c=o.default(d.ButtonLarge)`
 	color: ${e=>e.selected?e.selectedTextColor:e.textColor};
 `,s=o.default.div`
 	flex-grow: 1;
@@ -56,5 +42,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=n;exports.TabItemText=l;exports.TrailingNumberContainer=c;
+`;exports.EmptyTab=s;exports.RightComponent=u;exports.TabHeader=a;exports.TabItem=l;exports.TabItemText=c;exports.TrailingNumberContainer=n;
 //# 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; ~~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"}
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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* diameter is set inline per digit-count so it is always a perfect circle /\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -~~2px~~;\n\t\tright: -~~2px~~;\n\t\t/ display-only: let clicks fall through to the IconButton underneath */\n\t\tpointer-events: none;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height \|\| '200px'};\n\twidth: ${(props) => props.width \|\| '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYtBA,SAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}
1	+ {"version":3,"file":"WhatsNew.styles.js","sources":["../../../../src/components/whats-new/WhatsNew.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '../../constants/Theme';\n\nexport const WhatsNewIconContainer = styled.div<{ count?: number }>`\n\tcursor: pointer;\n\tposition: relative;\n\n\t.main-icon-class {\n\t\tpadding: 6px;\n\t\tborder-radius: 32px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\ttransition: background-color 0.2s ease;\n\t}\n\n\t.icon-active {\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\n\t.main-icon-class:hover {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t/* diameter is set inline per digit-count so it is always a perfect circle /\n\t.notification--count {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\ttop: -4px;\n\t\tright: -4px;\n\t\t/ display-only: let clicks fall through to the IconButton underneath */\n\t\tpointer-events: none;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t.count--text {\n\t\tfont-family: 'Inter';\n\t\tfont-size: 8px;\n\t\tline-height: 8px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.surface.standard};\n\t}\n`;\n\nexport const WhatsNewWrapper = styled.div`\n\toverflow-y: auto;\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n\tmax-height: calc(100vh - 60px);\n\n\t&::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 6px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground: ${COLORS.content.inactive};\n\t\tborder-radius: 3px;\n\t\tmin-height: 30px;\n\t}\n\n\t.icon--wrapper {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 64px;\n\t\theight: 64px;\n\t\tborder-radius: 50%;\n\t\tbackground: ${COLORS.background.base};\n\t\tmargin-bottom: 16px;\n\t}\n\n\t.no--data--found {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\theight: 300px;\n\t\ttext-align: center;\n\t\tpadding: 24px;\n\t}\n\n\t.text--align {\n\t\ttext-align: center;\n\t}\n\n\t.scroller {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 16px;\n\t\tpadding: 16px 0;\n\t}\n\n\t.full--width {\n\t\twidth: 100%;\n\t}\n\n\t.flex {\n\t\tdisplay: flex;\n\t}\n\n\t.flex--row {\n\t\tflex-direction: row;\n\t}\n\n\t.flex--column {\n\t\tflex-direction: column;\n\t}\n\n\t.mt-8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt-20 {\n\t\tmargin-top: 20px;\n\t}\n\n\t.mt--8 {\n\t\tmargin-top: 8px;\n\t}\n\n\t.mt--12 {\n\t\tmargin-top: 12px;\n\t}\n\n\t.mb-mt-8 {\n\t\tmargin-bottom: 8px;\n\t\tmargin-top: 8px;\n\t}\n\n\t.padding--16 {\n\t\tpadding: 16px;\n\t}\n\n\t.card--desc {\n\t\tmax-height: 200px;\n\t\toverflow-y: auto;\n\t\tfont-size: 12px;\n\t\tcolor: ${COLORS.content.secondary};\n\n\t\tp {\n\t\t\tmargin-bottom: 0px;\n\t\t}\n\t}\n\n\t.created--at {\n\t\talign-items: center;\n\t\tgap: 4px;\n\t}\n\n\t.new--content--tag {\n\t\tpadding: 2px 6px;\n\t\tgap: 4px;\n\t\tborder-radius: 14px;\n\t\tbackground: ${COLORS.background.warning.vibrant};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\tmargin-right: 8px;\n\t}\n`;\n\nexport const MainContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n`;\n\nexport const MainCardContainer = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tpadding: 16px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\ttransition: all 0.2s ease;\n\n\t&:hover {\n\t\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\t}\n`;\n\nexport const BackgroundImageContainer = styled.div<{\n\timageUrl: string;\n\theight?: string;\n\twidth?: string;\n}>`\n\tbackground-image: url(${(props) => props.imageUrl});\n\tbackground-size: cover;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\theight: ${(props) => props.height \|\| '200px'};\n\twidth: ${(props) => props.width \|\| '100%'};\n\tborder-radius: 4px;\n`;\n"],"names":["WhatsNewIconContainer","styled","COLORS","WhatsNewWrapper","MainContainer","MainCardContainer","BackgroundImageContainer","props"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAc5BC,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,gBAI5BA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYtBA,SAAO,WAAW,SAAS,OAAO;AAAA,sBAC5BA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWlCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,EAIrBC,EAAkBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAatBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAYvBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAsE3BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBnBA,SAAO,WAAW,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQpCE,EAAgBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBI,EAAoBJ,EAAAA,QAAO;AAAA,eACzBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,qBAEjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAY7BI,EAA2BL,EAAAA,QAAO;AAAA,yBAKrBM,GAAUA,EAAM,QAAQ;AAAA;AAAA;AAAA;AAAA,WAItCA,GAAUA,EAAM,QAAU,OAAO;AAAA,UAClCA,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":"mVAQaA,EAAgD,CAAC,CAC7D,QAAAC,EACA,gBAAAC,EAAkB,EAClB,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,aACV,OAAAC,EAAS,mBACT,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EACA,YAAAC,EACA,WAAAC,EAAa,GACb,WAAYC,CACb,IAAM,CACL,GAAIR,EACH,cACE,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAS,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,GACP,OAAQ,GACR,OAAQ,oBACR,UAAW,oBACX,aAAc,MACd,UAAW,yBAAA,CACZ,CAAA,QAEA,QAAA,CACC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAMF,CAAA,EACD,EAIF,MAAMC,EAAYZ,EAAkB,GAAK,MAAQ,OAAOA,CAAe,EAEjEa,EACLD,EAAU,QAAU,EAAI,GAAKA,EAAU,SAAW,EAAI,GAAK,GAE5D,OACCE,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOf,EAC7B,SAAA,CAAAW,EAAAA,IAACK,EAAAA,QAAA,CAAQ,KAAMb,EAAS,UAAW,SAClC,SAAAQ,EAAAA,IAACM,EAAAA,WAAA,CACA,KACEP,GAAcQ,EAAAA,QAIhB,MAAOb,EACP,OAAQC,EACR,YAAAE,EACA,WAAYP,EACZ,UACCM,IACCN,EAASkB,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAApB,EACA,cAAaK,EACb,MAAO,CACN,MAAOK,EACP,OAAQA,EACR,UAAW,~~YAAA~~,~~CACZ~~,CAAA,EAEF,EACCT,EAAkB,GAClBW,EAAAA,IAAC,MAAA,CACA,UAAU,sBACV,MAAO,CAAE,MAAOE,EAAW,OAAQA,CAAA,EAEnC,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAC,CAAA,CAAU,CAAA,CAAA,CACzC,EAEF,CAEF"}
1	+ {"version":3,"file":"WhatsNewButton.js","sources":["../../../../src/components/whats-new/WhatsNewButton.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '../../constants/Theme';\nimport { Marketing } from '../../icons';\nimport { IconButton } from '../icon-button';\nimport { Tooltip } from '../tooltips';\nimport { WhatsNewIconContainer } from './WhatsNew.styles';\nimport { WhatsNewButtonProps } from './WhatsNew.types';\n\nexport const WhatsNewButton: React.FC<WhatsNewButtonProps> = ({\n\tonClick,\n\tnewContentCount = 0,\n\tisOpen = false,\n\tisLoading = false,\n\ttooltip = \"What's new\",\n\ttestId = 'whats-new-button',\n\ticonWidth = 24,\n\ticonHeight = 24,\n\ticonColor,\n\ticonPadding,\n\tbuttonSize = 24,\n\tcustomIcon: CustomIcon,\n}) => {\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div style={{ margin: '0px 8px' }}>\n\t\t\t\t{/* Simple loading spinner */}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: 16,\n\t\t\t\t\t\theight: 16,\n\t\t\t\t\t\tborder: '2px solid #f3f3f3',\n\t\t\t\t\t\tborderTop: '2px solid #731DCF',\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tanimation: 'spin 1s linear infinite',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t\t<style>\n\t\t\t\t\t{`\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t`}\n\t\t\t\t</style>\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst badgeText = newContentCount > 99 ? '99+' : String(newContentCount);\n\t// diameter grows with digit count so the badge stays a perfect circle\n\tconst badgeSize =\n\t\tbadgeText.length >= 3 ? 20 : badgeText.length === 2 ? 16 : 12;\n\n\treturn (\n\t\t<WhatsNewIconContainer count={newContentCount}>\n\t\t\t<Tooltip body={tooltip} placement={'bottom'}>\n\t\t\t\t<IconButton\n\t\t\t\t\tIcon={\n\t\t\t\t\t\t(CustomIcon ?? Marketing) as React.FC<\n\t\t\t\t\t\t\tReact.SVGAttributes<SVGElement>\n\t\t\t\t\t\t>\n\t\t\t\t\t}\n\t\t\t\t\twidth={iconWidth}\n\t\t\t\t\theight={iconHeight}\n\t\t\t\t\ticonPadding={iconPadding}\n\t\t\t\t\tisSelected={isOpen}\n\t\t\t\t\ticonColor={\n\t\t\t\t\t\ticonColor ??\n\t\t\t\t\t\t(isOpen ? COLORS.content.brand : COLORS.content.primary)\n\t\t\t\t\t}\n\t\t\t\t\tonClick={onClick}\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\twidth: buttonSize,\n\t\t\t\t\t\theight: buttonSize,\n\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</Tooltip>\n\t\t\t{newContentCount > 0 && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"notification--count\"\n\t\t\t\t\tstyle={{ width: badgeSize, height: badgeSize }}\n\t\t\t\t>\n\t\t\t\t\t<div className=\"count--text\">{badgeText}</div>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</WhatsNewIconContainer>\n\t);\n};\n"],"names":["WhatsNewButton","onClick","newContentCount","isOpen","isLoading","tooltip","testId","iconWidth","iconHeight","iconColor","iconPadding","buttonSize","CustomIcon","jsx","badgeText","badgeSize","jsxs","WhatsNewIconContainer","Tooltip","IconButton","Marketing","COLORS"],"mappings":"mVAQaA,EAAgD,CAAC,CAC7D,QAAAC,EACA,gBAAAC,EAAkB,EAClB,OAAAC,EAAS,GACT,UAAAC,EAAY,GACZ,QAAAC,EAAU,aACV,OAAAC,EAAS,mBACT,UAAAC,EAAY,GACZ,WAAAC,EAAa,GACb,UAAAC,EACA,YAAAC,EACA,WAAAC,EAAa,GACb,WAAYC,CACb,IAAM,CACL,GAAIR,EACH,cACE,MAAA,CAAI,MAAO,CAAE,OAAQ,WAErB,SAAA,CAAAS,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,MAAO,GACP,OAAQ,GACR,OAAQ,oBACR,UAAW,oBACX,aAAc,MACd,UAAW,yBAAA,CACZ,CAAA,QAEA,QAAA,CACC,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA,CAMF,CAAA,EACD,EAIF,MAAMC,EAAYZ,EAAkB,GAAK,MAAQ,OAAOA,CAAe,EAEjEa,EACLD,EAAU,QAAU,EAAI,GAAKA,EAAU,SAAW,EAAI,GAAK,GAE5D,OACCE,EAAAA,KAACC,EAAAA,sBAAA,CAAsB,MAAOf,EAC7B,SAAA,CAAAW,EAAAA,IAACK,EAAAA,QAAA,CAAQ,KAAMb,EAAS,UAAW,SAClC,SAAAQ,EAAAA,IAACM,EAAAA,WAAA,CACA,KACEP,GAAcQ,EAAAA,QAIhB,MAAOb,EACP,OAAQC,EACR,YAAAE,EACA,WAAYP,EACZ,UACCM,IACCN,EAASkB,EAAAA,OAAO,QAAQ,MAAQA,EAAAA,OAAO,QAAQ,SAEjD,QAAApB,EACA,cAAaK,EACb,MAAO,CACN,MAAOK,EACP,OAAQA,EACR,UAAW,aACX,QAAS,OACT,WAAY,SACZ,eAAgB,QAAA,CACjB,CAAA,EAEF,EACCT,EAAkB,GAClBW,EAAAA,IAAC,MAAA,CACA,UAAU,sBACV,MAAO,CAAE,MAAOE,EAAW,OAAQA,CAAA,EAEnC,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAU,cAAe,SAAAC,CAAA,CAAU,CAAA,CAAA,CACzC,EAEF,CAEF"}

package/dist/cjs/editor/extensions/characterLimit/CharacterLimitExtension.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CharacterLimitExtension.js","sources":["../../../../../src/editor/extensions/characterLimit/CharacterLimitExtension.ts"],"sourcesContent":["import { Extension } from '@tiptap/core';\nimport ~~type~~ { ~~Node~~ as ~~PMNode~~ } from '@tiptap/pm/~~model~~';\nimport { ~~Plugin~~, ~~PluginKey~~ } from '@tiptap/pm/~~state~~';\nimport { ~~Decoration,~~ ~~DecorationSet~~ } from '@tiptap/pm/~~view~~';\n\nexport interface CharacterLimitOptions {\n\t/** Soft character limit. 0 / undefined disables the extension entirely. /\n\tlimit: number;\n}\n\n/\n Soft character limit with two behaviours (see CRM design):\n \n 1. Typing is BLOCKED once the content is at/over the limit — `handleTextInput`\n * rejects the insertion. This never fires for paste (paste flows through the\n * clipboard pipeline), so paste is free to push the content over the limit.\n * 2. Every character BEYOND the limit is decorated with `bik-editor-overflow`\n * (rendered grey) so pasted overflow is visible but clearly marked.\n \n Counting mirrors `extractContent` exactly — `doc.textBetween(0, size, '\\n\\n',\n * '\\n')` — so the grey boundary lines up with the `characterCount` the consumer\n * shows in its error message (paragraph break = 2 chars, soft break = 1 char).\n */\nexport const CharacterLimitExtension = Extension.create<CharacterLimitOptions>({\n\tname: 'characterLimitOverflow',\n\n\taddOptions() {\n\t\treturn { limit: 0 };\n\t},\n\n\taddProseMirrorPlugins() {\n\t\tconst limit = this.options.limit;\n\t\tif (!limit \|\| limit <= 0) return [];\n\n\t\t// Same metric as BikEditor.utils.extractContent → keeps the grey boundary\n\t\t// and the consumer's characterCount in sync.\n\t\tconst countChars = (doc: PMNode) =>\n\t\t\tdoc.textBetween(0, doc.content.size, '\\n\\n', '\\n').length;\n\n\t\treturn [\n\t\t\tnew Plugin({\n\t\t\t\tkey: new PluginKey('characterLimitOverflow'),\n\t\t\t\tprops: {\n\t\t\t\t\t// Block typed/composed input that would exceed the limit. Replacing\n\t\t\t\t\t// a selection is allowed as long as the result still fits.\n\t\t\t\t\thandleTextInput(view, from, to, text) {\n\t\t\t\t\t\tconst doc = view.state.doc;\n\t\t\t\t\t\tconst current = countChars(doc);\n\t\t\t\t\t\tconst removed = doc.textBetween(from, to, '\\n\\n', '\\n').length;\n\t\t\t\t\t\treturn current - removed + text.length > limit;\n\t\t\t\t\t},\n\t\t\t\t\tdecorations(state) {\n\t\t\t\t\t\tconst decorations: Decoration[] = [];\n\t\t\t\t\t\tlet count = 0;\n\t\t\t\t\t\tlet overflowing = false;\n\n\t\t\t\t\t\tstate.doc.descendants((node, pos, parent, index) => {\n\t\t\t\t\t\t\t// Account for the \"\\n\\n\" separator inserted between top-level\n\t\t\t\t\t\t\t// blocks so the boundary matches textBetween's counting.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!overflowing &&\n\t\t\t\t\t\t\t\tparent &&\n\t\t\t\t\t\t\t\tparent.type.name === 'doc' &&\n\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcount += 2;\n\t\t\t\t\t\t\t\tif (count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (node.isText && node.text) {\n\t\t\t\t\t\t\t\tconst len = node.text.length;\n\t\t\t\t\t\t\t\tif (overflowing) {\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if (count + len > limit) {\n\t\t\t\t\t\t\t\t\tconst startOffset = Math.max(0, limit - count);\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos + startOffset, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\toverflowing = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcount += len;\n\t\t\t\t\t\t\t} else if (node.type.name === 'hardBreak') {\n\t\t\t\t\t\t\t\t// Soft line break → \"\\n\" (1 char) in textBetween.\n\t\t\t\t\t\t\t\tcount += 1;\n\t\t\t\t\t\t\t\tif (!overflowing && count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn DecorationSet.create(state.doc, decorations);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t\t];\n\t},\n});\n"],"names":["CharacterLimitExtension","Extension","limit","countChars","doc","Plugin","PluginKey","view","from","to","text","current","removed","state","decorations","count","overflowing","node","pos","parent","index","len","Decoration","startOffset","DecorationSet"],"mappings":"+MAuBaA,EAA0BC,EAAAA,UAAU,OAA8B,CAC9E,KAAM,yBAEN,YAAa,CACZ,MAAO,CAAE,MAAO,CAAA,CACjB,EAEA,uBAAwB,CACvB,MAAMC,EAAQ,KAAK,QAAQ,MAC3B,GAAI,CAACA,GAASA,GAAS,QAAU,CAAA,EAIjC,MAAMC,EAAcC,GACnBA,EAAI,YAAY,EAAGA,EAAI,QAAQ,KAAM;AAAA;AAAA,EAAQ;AAAA,CAAI,EAAE,OAEpD,MAAO,CACN,IAAIC,SAAO,CACV,IAAK,IAAIC,EAAAA,UAAU,wBAAwB,EAC3C,MAAO,CAGN,gBAAgBC,EAAMC,EAAMC,EAAIC,EAAM,CACrC,MAAMN,EAAMG,EAAK,MAAM,IACjBI,EAAUR,EAAWC,CAAG,EACxBQ,EAAUR,EAAI,YAAYI,EAAMC,EAAI;AAAA;AAAA,EAAQ;AAAA,CAAI,EAAE,OACxD,OAAOE,EAAUC,EAAUF,EAAK,OAASR,CAC1C,EACA,YAAYW,EAAO,CAClB,MAAMC,EAA4B,CAAA,EAClC,IAAIC,EAAQ,EACRC,EAAc,GAElB,OAAAH,EAAM,IAAI,YAAY,CAACI,EAAMC,EAAKC,EAAQC,IAAU,CAanD,GATC,CAACJ,GACDG,GACAA,EAAO,KAAK,OAAS,OACrBC,EAAQ,IAERL,GAAS,EACLA,EAAQb,IAAOc,EAAc,KAG9BC,EAAK,QAAUA,EAAK,KAAM,CAC7B,MAAMI,EAAMJ,EAAK,KAAK,OACtB,GAAID,EACHF,EAAY,KACXQ,EAAAA,WAAW,OAAOJ,EAAKA,EAAMG,EAAK,CACjC,MAAO,qBAAA,CACP,CAAA,UAEQN,EAAQM,EAAMnB,EAAO,CAC/B,MAAMqB,EAAc,KAAK,IAAI,EAAGrB,EAAQa,CAAK,EAC7CD,EAAY,KACXQ,EAAAA,WAAW,OAAOJ,EAAMK,EAAaL,EAAMG,EAAK,CAC/C,MAAO,qBAAA,CACP,CAAA,EAEFL,EAAc,EACf,CACAD,GAASM,CACV,MAAWJ,EAAK,KAAK,OAAS,cAE7BF,GAAS,EACL,CAACC,GAAeD,EAAQb,IAAOc,EAAc,KAElD,MAAO,EACR,CAAC,EAEMQ,EAAAA,cAAc,OAAOX,EAAM,IAAKC,CAAW,CACnD,CAAA,CACD,CACA,CAAA,CAEH,CACD,CAAC"}
1	+ {"version":3,"file":"CharacterLimitExtension.js","sources":["../../../../../src/editor/extensions/characterLimit/CharacterLimitExtension.ts"],"sourcesContent":["import { Extension } from '@tiptap/core';\nimport { Plugin, PluginKey } from '@tiptap/pm/state';\nimport { Decoration, DecorationSet } from '@tiptap/pm/view';\nimport type { Node as PMNode } from '@tiptap/pm/model';\n\nexport interface CharacterLimitOptions {\n\t/** Soft character limit. 0 / undefined disables the extension entirely. /\n\tlimit: number;\n}\n\n/\n Soft character limit with two behaviours (see CRM design):\n \n 1. Typing is BLOCKED once the content is at/over the limit — `handleTextInput`\n * rejects the insertion. This never fires for paste (paste flows through the\n * clipboard pipeline), so paste is free to push the content over the limit.\n * 2. Every character BEYOND the limit is decorated with `bik-editor-overflow`\n * (rendered grey) so pasted overflow is visible but clearly marked.\n \n Counting mirrors `extractContent` exactly — `doc.textBetween(0, size, '\\n\\n',\n * '\\n')` — so the grey boundary lines up with the `characterCount` the consumer\n * shows in its error message (paragraph break = 2 chars, soft break = 1 char).\n */\nexport const CharacterLimitExtension = Extension.create<CharacterLimitOptions>({\n\tname: 'characterLimitOverflow',\n\n\taddOptions() {\n\t\treturn { limit: 0 };\n\t},\n\n\taddProseMirrorPlugins() {\n\t\tconst limit = this.options.limit;\n\t\tif (!limit \|\| limit <= 0) return [];\n\n\t\t// Same metric as BikEditor.utils.extractContent → keeps the grey boundary\n\t\t// and the consumer's characterCount in sync.\n\t\tconst countChars = (doc: PMNode) =>\n\t\t\tdoc.textBetween(0, doc.content.size, '\\n\\n', '\\n').length;\n\n\t\treturn [\n\t\t\tnew Plugin({\n\t\t\t\tkey: new PluginKey('characterLimitOverflow'),\n\t\t\t\tprops: {\n\t\t\t\t\t// Block typed/composed input that would exceed the limit. Replacing\n\t\t\t\t\t// a selection is allowed as long as the result still fits.\n\t\t\t\t\thandleTextInput(view, from, to, text) {\n\t\t\t\t\t\tconst doc = view.state.doc;\n\t\t\t\t\t\tconst current = countChars(doc);\n\t\t\t\t\t\tconst removed = doc.textBetween(from, to, '\\n\\n', '\\n').length;\n\t\t\t\t\t\treturn current - removed + text.length > limit;\n\t\t\t\t\t},\n\t\t\t\t\tdecorations(state) {\n\t\t\t\t\t\tconst decorations: Decoration[] = [];\n\t\t\t\t\t\tlet count = 0;\n\t\t\t\t\t\tlet overflowing = false;\n\n\t\t\t\t\t\tstate.doc.descendants((node, pos, parent, index) => {\n\t\t\t\t\t\t\t// Account for the \"\\n\\n\" separator inserted between top-level\n\t\t\t\t\t\t\t// blocks so the boundary matches textBetween's counting.\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t!overflowing &&\n\t\t\t\t\t\t\t\tparent &&\n\t\t\t\t\t\t\t\tparent.type.name === 'doc' &&\n\t\t\t\t\t\t\t\tindex > 0\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcount += 2;\n\t\t\t\t\t\t\t\tif (count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tif (node.isText && node.text) {\n\t\t\t\t\t\t\t\tconst len = node.text.length;\n\t\t\t\t\t\t\t\tif (overflowing) {\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t} else if (count + len > limit) {\n\t\t\t\t\t\t\t\t\tconst startOffset = Math.max(0, limit - count);\n\t\t\t\t\t\t\t\t\tdecorations.push(\n\t\t\t\t\t\t\t\t\t\tDecoration.inline(pos + startOffset, pos + len, {\n\t\t\t\t\t\t\t\t\t\t\tclass: 'bik-editor-overflow',\n\t\t\t\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\toverflowing = true;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tcount += len;\n\t\t\t\t\t\t\t} else if (node.type.name === 'hardBreak') {\n\t\t\t\t\t\t\t\t// Soft line break → \"\\n\" (1 char) in textBetween.\n\t\t\t\t\t\t\t\tcount += 1;\n\t\t\t\t\t\t\t\tif (!overflowing && count > limit) overflowing = true;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\treturn true;\n\t\t\t\t\t\t});\n\n\t\t\t\t\t\treturn DecorationSet.create(state.doc, decorations);\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t}),\n\t\t];\n\t},\n});\n"],"names":["CharacterLimitExtension","Extension","limit","countChars","doc","Plugin","PluginKey","view","from","to","text","current","removed","state","decorations","count","overflowing","node","pos","parent","index","len","Decoration","startOffset","DecorationSet"],"mappings":"+MAuBaA,EAA0BC,EAAAA,UAAU,OAA8B,CAC9E,KAAM,yBAEN,YAAa,CACZ,MAAO,CAAE,MAAO,CAAA,CACjB,EAEA,uBAAwB,CACvB,MAAMC,EAAQ,KAAK,QAAQ,MAC3B,GAAI,CAACA,GAASA,GAAS,QAAU,CAAA,EAIjC,MAAMC,EAAcC,GACnBA,EAAI,YAAY,EAAGA,EAAI,QAAQ,KAAM;AAAA;AAAA,EAAQ;AAAA,CAAI,EAAE,OAEpD,MAAO,CACN,IAAIC,SAAO,CACV,IAAK,IAAIC,EAAAA,UAAU,wBAAwB,EAC3C,MAAO,CAGN,gBAAgBC,EAAMC,EAAMC,EAAIC,EAAM,CACrC,MAAMN,EAAMG,EAAK,MAAM,IACjBI,EAAUR,EAAWC,CAAG,EACxBQ,EAAUR,EAAI,YAAYI,EAAMC,EAAI;AAAA;AAAA,EAAQ;AAAA,CAAI,EAAE,OACxD,OAAOE,EAAUC,EAAUF,EAAK,OAASR,CAC1C,EACA,YAAYW,EAAO,CAClB,MAAMC,EAA4B,CAAA,EAClC,IAAIC,EAAQ,EACRC,EAAc,GAElB,OAAAH,EAAM,IAAI,YAAY,CAACI,EAAMC,EAAKC,EAAQC,IAAU,CAanD,GATC,CAACJ,GACDG,GACAA,EAAO,KAAK,OAAS,OACrBC,EAAQ,IAERL,GAAS,EACLA,EAAQb,IAAOc,EAAc,KAG9BC,EAAK,QAAUA,EAAK,KAAM,CAC7B,MAAMI,EAAMJ,EAAK,KAAK,OACtB,GAAID,EACHF,EAAY,KACXQ,EAAAA,WAAW,OAAOJ,EAAKA,EAAMG,EAAK,CACjC,MAAO,qBAAA,CACP,CAAA,UAEQN,EAAQM,EAAMnB,EAAO,CAC/B,MAAMqB,EAAc,KAAK,IAAI,EAAGrB,EAAQa,CAAK,EAC7CD,EAAY,KACXQ,EAAAA,WAAW,OAAOJ,EAAMK,EAAaL,EAAMG,EAAK,CAC/C,MAAO,qBAAA,CACP,CAAA,EAEFL,EAAc,EACf,CACAD,GAASM,CACV,MAAWJ,EAAK,KAAK,OAAS,cAE7BF,GAAS,EACL,CAACC,GAAeD,EAAQb,IAAOc,EAAc,KAElD,MAAO,EACR,CAAC,EAEMQ,EAAAA,cAAc,OAAOX,EAAM,IAAKC,CAAW,CACnD,CAAA,CACD,CACA,CAAA,CAEH,CACD,CAAC"}

package/dist/esm/components/BikGiftedChat/GiftedChat/GiftedChat.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props \|\| {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement \| null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref \|\| forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string \| number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages \|\| messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\t// Group consecutive same-day messages so each day separator can stick\n\t// within its own section and get pushed out by the next day's separator.\n\tconst dayGroups = useMemo(() => {\n\t\tconst groups: { createdAt: IMessage['createdAt']; indices: number[] }[] =\n\t\t\t[];\n\t\treversedMessages.forEach((message, index) => {\n\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\tif (index === 0 \|\| !isSameDay(message, previousMessage)) {\n\t\t\t\tgroups.push({ createdAt: message.createdAt, indices: [index] });\n\t\t\t} else {\n\t\t\t\tgroups[groups.length - 1].indices.push(index);\n\t\t\t}\n\t\t});\n\t\treturn groups;\n\t}, [reversedMessages]);\n\n\tconst scrollToBottom = useScrollToBottom(scrollRef, scrollState);\n\n\tuseImperativeHandle(forwardedRef, () => scrollRef.current!);\n\n\tuseInitialMountScroll(\n\t\tscrollRef,\n\t\tscrollState,\n\t\treversedMessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseScrollCleanup(scrollState);\n\n\tuseRestoreScrollPosition(scrollRef, scrollState, reversedMessages.length);\n\n\tuseAutoScrollOnNewMessages(\n\t\tscrollRef,\n\t\tscrollState,\n\t\tmessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseResizeObserverForFirstMessage(\n\t\tmessages?.[0],\n\t\tscrollState,\n\t\tscrollToBottom,\n\t\tmessageIdGenerator,\n\t);\n\n\tconst handleScroll = useScrollHandler(\n\t\tscrollState,\n\t\tlistViewProps.onEndReached,\n\t\tlistViewProps.onScroll,\n\t\ttopThreshold,\n\t);\n\n\t// Check if a message belongs to the current user\n\tconst isUserMessage = useCallback(\n\t\t(message: IMessage) => {\n\t\t\treturn Boolean(message && user && message.user?._id === user._id);\n\t\t},\n\t\t[user],\n\t);\n\n\t// Determine if avatar should be shown for this message\n\tconst shouldShowAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar on the first message in a consecutive sender stack,\n\t\t\t// or when an activity interrupts the stack, or when the current message itself is an activity\n\t\t\treturn (\n\t\t\t\t!previousMessage \|\|\n\t\t\t\t(isActivityMessage ? isActivityMessage(message) : false) \|\|\n\t\t\t\t(isActivityMessage ? isActivityMessage(previousMessage) : false) \|\|\n\t\t\t\tpreviousMessage.user._id !== message.user._id\n\t\t\t);\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage, isActivityMessage],\n\t);\n\n\t// Render a message bubble (or call custom renderBubble)\n\tconst renderMessageBubble = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\tconst isTopOfStack = previousMessage?.user?._id !== message?.user?._id;\n\t\t\tconst isBottomOfStack = nextMessage?.user?._id !== message?.user?._id;\n\n\t\t\tconst bubbleProps: BubbleProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\t...extraProps,\n\t\t\t};\n\n\t\t\t// Use custom render function if provided\n\t\t\tif (renderBubble) {\n\t\t\t\treturn renderBubble(bubbleProps);\n\t\t\t}\n\n\t\t\t// Default bubble rendering\n\t\t\tconst messageId = message._id;\n\t\t\tconst isExpanded = expandedMessages.has(messageId);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: appType === GiftedChatAppType.Manifest ? '50%' : '70%',\n\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t...(appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t? { minWidth: '130px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tpadding: '8px 12px',\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\tposition === 'left' && appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? '1px solid rgb(224, 224, 224)'\n\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tposition === 'right'\n\t\t\t\t\t\t\t\t? appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t? COLORS.background.brandTint\n\t\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t\t: appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? COLORS.background.pureWhite\n\t\t\t\t\t\t\t\t: COLORS.background.inactive,\n\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CollapsibleBubbleText\n\t\t\t\t\t\ttext={message.text ?? ''}\n\t\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\t\tonToggle={() =>\n\t\t\t\t\t\t\tsetExpandedMessages((prev) => {\n\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\tif (isExpanded) next.delete(messageId);\n\t\t\t\t\t\t\t\telse next.add(messageId);\n\t\t\t\t\t\t\t\treturn next;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps, expandedMessages],\n\t);\n\n\t// Render a message avatar (or call custom renderAvatar)\n\tconst renderMessageAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst shouldShow = shouldShowAvatar(message, previousMessage);\n\n\t\t\tif (!shouldShow) return null;\n\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\n\t\t\tconst avatarProps: AvatarProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\trenderAvatarOnTop,\n\t\t\t\tshowUserAvatar,\n\t\t\t\tshowAvatarForEveryMessage,\n\t\t\t};\n\n\t\t\treturn renderAvatar ? renderAvatar(avatarProps) : null;\n\t\t},\n\t\t[\n\t\t\tshouldShowAvatar,\n\t\t\tisUserMessage,\n\t\t\tuser,\n\t\t\trenderAvatarOnTop,\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\trenderAvatar,\n\t\t],\n\t);\n\n\t// Render: Empty State\n\tif (!messages \|\| messages.length === 0) {\n\t\treturn renderChatEmpty ? <>{renderChatEmpty()}</> : null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={scrollRef as React.RefObject<HTMLDivElement>}\n\t\t\tstyle={{\n\t\t\t\tflex: 1,\n\t\t\t\toverflowY: 'auto',\n\t\t\t\toverflowX: 'hidden',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\t...(maxHeight ? { maxHeight, height: maxHeight } : {}),\n\t\t\t\t...listViewProps.style,\n\t\t\t}}\n\t\t\tonScroll={handleScroll}\n\t\t>\n\t\t\t{/* Spacer to push messages to bottom (newest appears last in DOM) /}\n\t\t\t<div style={{ flex: '1 0 auto' }} />\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: '0 0 auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dayGroups.map((group, groupIndex) => (\n\t\t\t\t\t<div key={`day-group-${groupIndex}`}>\n\t\t\t\t\t\t{/ Day separator — sticks to top while this day scrolls past /}\n\t\t\t\t\t\t{renderDay ? (\n\t\t\t\t\t\t\t<div style={{ position: 'sticky', top: 0, zIndex: 2 }}>\n\t\t\t\t\t\t\t\t{renderDay({ createdAt: group.createdAt })}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tcreatedAt={group.createdAt}\n\t\t\t\t\t\t\t\tappType={appType}\n\t\t\t\t\t\t\t\tscrollRootRef={scrollRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{group.indices.map((index) => {\n\t\t\t\t\t\t\tconst message = reversedMessages[index];\n\t\t\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP \|\|\n\t\t\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t\t\t: 'left';\n\t\t\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\t\t\tconst isActivity =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY && !isPrivateNote;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{/ Message container /}\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isCentered\n\t\t\t\t\t\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t\t\t\t\t\t: { display: 'flex', alignItems: 'flex-start' }),\n\t\t\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t? !isMobile && position === 'right'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && isPrivateNote ? { marginRight: 16 } : {}),\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t? // SMTP: flat 24px between mails, no same/different-user split.\n\t\t\t\t\t\t\t\t\t\t\t\t nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t\t: nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? nextMessage?.user?._id === message?.user?._id\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 4\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t\t\t\t// Activity cards: no left/bottom margin.\n\t\t\t\t\t\t\t\t\t\t\t...(isActivity ? { marginLeft: 0, marginBottom: 0 } : {}),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{/ Left avatar or placeholder (for mobile, avatar is hidden) /}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t{/ Message bubble /}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\t\t\tmessage._id ??\n\t\t\t\t\t\t\t\t\t\t\t\t`${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: isMobile \|\| isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{renderMessageBubble(\n\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/ Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["COLLAPSED_MAX_HEIGHT","CollapsibleBubbleText","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","overflows","jsxs","Fragment","jsx","BodySecondary","Button","GiftedChatInner","props","forwardedRef","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","maxHeight","isActivityMessage","extraProps","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","expandedMessages","setExpandedMessages","reversedMessages","useMemo","dayGroups","groups","message","index","previousMessage","isSameDay","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","isUserMessage","useCallback","shouldShowAvatar","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","bubbleProps","messageId","COLORS","prev","next","renderMessageAvatar","group","groupIndex","Day","isSmtp","MESSAGE_CHANNELS","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","isActivity","React","GiftedChat","forwardRef"],"mappings":"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"}
1	+ {"version":3,"file":"GiftedChat.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/GiftedChat.tsx"],"sourcesContent":["import React, {\n\tforwardRef,\n\tuseCallback,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { Button } from '../../button';\nimport { BodySecondary } from '../../TypographyStyle';\nimport { BubbleProps, GiftedChatAppType } from '../Bubble/types';\nimport { IMessage } from '../types';\nimport { Day } from './Day';\nimport { getMessagePlacement, shouldCenterAlign } from './messageHelpers';\nimport {\n\tuseAutoScrollOnNewMessages,\n\tuseInitialMountScroll,\n\tuseResizeObserverForFirstMessage,\n\tuseRestoreScrollPosition,\n\tuseScrollCleanup,\n\tuseScrollHandler,\n\tuseScrollToBottom,\n} from './scrollHooks';\nimport { AvatarProps, GiftedChatProps, MESSAGE_CHANNELS } from './types';\nimport { isSameDay, normalizeRef } from './utils';\nimport { Constants, TOP_THRESHOLD } from './utils';\n\nconst COLLAPSED_MAX_HEIGHT = 204;\n\nconst CollapsibleBubbleText: React.FC<{\n\ttext: string;\n\tisExpanded: boolean;\n\tonToggle: () => void;\n}> = ({ text, isExpanded, onToggle }) => {\n\tconst textRef = useRef<HTMLDivElement>(null);\n\tconst [isOverflowing, setIsOverflowing] = useState(false);\n\n\tuseEffect(() => {\n\t\tconst el = textRef.current;\n\t\tif (el) {\n\t\t\t// Temporarily remove max-height to measure true scroll height\n\t\t\tel.style.maxHeight = 'none';\n\t\t\tconst overflows = el.scrollHeight > COLLAPSED_MAX_HEIGHT;\n\t\t\tel.style.maxHeight = isExpanded ? 'none' : `${COLLAPSED_MAX_HEIGHT}px`;\n\t\t\tsetIsOverflowing(overflows);\n\t\t}\n\t}, [text, isExpanded]);\n\n\treturn (\n\t\t<>\n\t\t\t<div\n\t\t\t\tref={textRef}\n\t\t\t\tstyle={{\n\t\t\t\t\tmaxHeight: isExpanded ? 'none' : COLLAPSED_MAX_HEIGHT,\n\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodySecondary>{text}</BodySecondary>\n\t\t\t</div>\n\t\t\t{isOverflowing && (\n\t\t\t\t<Button\n\t\t\t\t\tbuttonType=\"text\"\n\t\t\t\t\tsize=\"xs\"\n\t\t\t\t\tbuttonText={isExpanded ? 'Show less' : 'Read more'}\n\t\t\t\t\tonClick={onToggle}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst GiftedChatInner = (\n\tprops: Omit<GiftedChatProps<IMessage>, 'ref'>,\n\tforwardedRef: React.Ref<HTMLDivElement>,\n) => {\n\tconst {\n\t\tmessages = [],\n\t\tuser,\n\t\trenderBubble,\n\t\trenderAvatar,\n\t\trenderDay,\n\t\trenderLoading,\n\t\trenderChatEmpty,\n\t\tlistViewProps = {},\n\t\trenderAvatarOnTop = false,\n\t\tshowUserAvatar = false,\n\t\tshowAvatarForEveryMessage = false,\n\t\tinverted = false,\n\t\tmessageIdGenerator,\n\t\ttopThreshold = TOP_THRESHOLD,\n\t\tappType = GiftedChatAppType.Bik,\n\t\tmaxHeight,\n\t\tisActivityMessage,\n\t\t...extraProps\n\t} = props \|\| {};\n\n\tconst isMobile = useWindowSize();\n\n\tconst internalScrollRef = useRef<HTMLDivElement \| null>(null);\n\tconst scrollRef = normalizeRef(\n\t\tlistViewProps.ref \|\| forwardedRef,\n\t\tinternalScrollRef,\n\t);\n\n\tconst scrollState = useRef({\n\t\tisInitialMount: true,\n\t\tisUserScrolling: false,\n\t\tisLoadingOldMessages: false,\n\t\tisAtBottom: true,\n\t\thasTriggeredEndReached: false,\n\t\tlastMessagesLength: messages?.length ?? 0,\n\t\tpreviousScrollHeight: 0,\n\t\tpreviousScrollTop: 0,\n\t\tscrollTimeout: null,\n\t});\n\n\tconst [expandedMessages, setExpandedMessages] = useState<\n\t\tSet<string \| number>\n\t>(new Set());\n\n\t// Reverse messages so newest appears last in DOM (natural reading order)\n\tconst reversedMessages = useMemo(() => {\n\t\tif (!messages \|\| messages.length === 0) return [] as IMessage[];\n\t\treturn [...messages].reverse() as IMessage[];\n\t}, [messages]);\n\n\t// Group consecutive same-day messages so each day separator can stick\n\t// within its own section and get pushed out by the next day's separator.\n\tconst dayGroups = useMemo(() => {\n\t\tconst groups: { createdAt: IMessage['createdAt']; indices: number[] }[] =\n\t\t\t[];\n\t\treversedMessages.forEach((message, index) => {\n\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\tif (index === 0 \|\| !isSameDay(message, previousMessage)) {\n\t\t\t\tgroups.push({ createdAt: message.createdAt, indices: [index] });\n\t\t\t} else {\n\t\t\t\tgroups[groups.length - 1].indices.push(index);\n\t\t\t}\n\t\t});\n\t\treturn groups;\n\t}, [reversedMessages]);\n\n\tconst scrollToBottom = useScrollToBottom(scrollRef, scrollState);\n\n\tuseImperativeHandle(forwardedRef, () => scrollRef.current!);\n\n\tuseInitialMountScroll(\n\t\tscrollRef,\n\t\tscrollState,\n\t\treversedMessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseScrollCleanup(scrollState);\n\n\tuseRestoreScrollPosition(scrollRef, scrollState, reversedMessages.length);\n\n\tuseAutoScrollOnNewMessages(\n\t\tscrollRef,\n\t\tscrollState,\n\t\tmessages.length,\n\t\tscrollToBottom,\n\t);\n\n\tuseResizeObserverForFirstMessage(\n\t\tmessages?.[0],\n\t\tscrollState,\n\t\tscrollToBottom,\n\t\tmessageIdGenerator,\n\t);\n\n\tconst handleScroll = useScrollHandler(\n\t\tscrollState,\n\t\tlistViewProps.onEndReached,\n\t\tlistViewProps.onScroll,\n\t\ttopThreshold,\n\t);\n\n\t// Check if a message belongs to the current user\n\tconst isUserMessage = useCallback(\n\t\t(message: IMessage) => {\n\t\t\treturn Boolean(message && user && message.user?._id === user._id);\n\t\t},\n\t\t[user],\n\t);\n\n\t// Determine if avatar should be shown for this message\n\tconst shouldShowAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage) => {\n\t\t\tif (!showUserAvatar) return false;\n\t\t\tif (showAvatarForEveryMessage) return true;\n\n\t\t\t// Show avatar on the first message in a consecutive sender stack,\n\t\t\t// or when an activity interrupts the stack, or when the current message itself is an activity\n\t\t\treturn (\n\t\t\t\t!previousMessage \|\|\n\t\t\t\t(isActivityMessage ? isActivityMessage(message) : false) \|\|\n\t\t\t\t(isActivityMessage ? isActivityMessage(previousMessage) : false) \|\|\n\t\t\t\tpreviousMessage.user._id !== message.user._id\n\t\t\t);\n\t\t},\n\t\t[showUserAvatar, showAvatarForEveryMessage, isActivityMessage],\n\t);\n\n\t// Render a message bubble (or call custom renderBubble)\n\tconst renderMessageBubble = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\t\t\tconst isTopOfStack = previousMessage?.user?._id !== message?.user?._id;\n\t\t\tconst isBottomOfStack = nextMessage?.user?._id !== message?.user?._id;\n\n\t\t\tconst bubbleProps: BubbleProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\t...extraProps,\n\t\t\t};\n\n\t\t\t// Use custom render function if provided\n\t\t\tif (renderBubble) {\n\t\t\t\treturn renderBubble(bubbleProps);\n\t\t\t}\n\n\t\t\t// Default bubble rendering\n\t\t\tconst messageId = message._id;\n\t\t\tconst isExpanded = expandedMessages.has(messageId);\n\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: appType === GiftedChatAppType.Manifest ? '50%' : '70%',\n\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t...(appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t? { minWidth: '130px' }\n\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\tpadding: '8px 12px',\n\t\t\t\t\t\tborderTopLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderTopRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isTopOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomLeftRadius:\n\t\t\t\t\t\t\tposition === 'left' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborderBottomRightRadius:\n\t\t\t\t\t\t\tposition === 'right' ? (isBottomOfStack ? 12 : 2) : 12,\n\t\t\t\t\t\tborder:\n\t\t\t\t\t\t\tposition === 'left' && appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? '1px solid rgb(224, 224, 224)'\n\t\t\t\t\t\t\t\t: 'none',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tposition === 'right'\n\t\t\t\t\t\t\t\t? appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t? COLORS.background.brandTint\n\t\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t\t: appType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t? COLORS.background.pureWhite\n\t\t\t\t\t\t\t\t: COLORS.background.inactive,\n\t\t\t\t\t\tcolor: COLORS.content.primary,\n\t\t\t\t\t\twordBreak: 'break-word',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<CollapsibleBubbleText\n\t\t\t\t\t\ttext={message.text ?? ''}\n\t\t\t\t\t\tisExpanded={isExpanded}\n\t\t\t\t\t\tonToggle={() =>\n\t\t\t\t\t\t\tsetExpandedMessages((prev) => {\n\t\t\t\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\t\t\t\tif (isExpanded) next.delete(messageId);\n\t\t\t\t\t\t\t\telse next.add(messageId);\n\t\t\t\t\t\t\t\treturn next;\n\t\t\t\t\t\t\t})\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t);\n\t\t},\n\t\t[isUserMessage, user, renderBubble, extraProps, expandedMessages],\n\t);\n\n\t// Render a message avatar (or call custom renderAvatar)\n\tconst renderMessageAvatar = useCallback(\n\t\t(message: IMessage, previousMessage?: IMessage, nextMessage?: IMessage) => {\n\t\t\tconst shouldShow = shouldShowAvatar(message, previousMessage);\n\n\t\t\tif (!shouldShow) return null;\n\n\t\t\tconst position = isUserMessage(message) ? 'right' : 'left';\n\n\t\t\tconst avatarProps: AvatarProps<IMessage> = {\n\t\t\t\tcurrentMessage: message,\n\t\t\t\tpreviousMessage,\n\t\t\t\tnextMessage,\n\t\t\t\tposition,\n\t\t\t\tuser,\n\t\t\t\trenderAvatarOnTop,\n\t\t\t\tshowUserAvatar,\n\t\t\t\tshowAvatarForEveryMessage,\n\t\t\t};\n\n\t\t\treturn renderAvatar ? renderAvatar(avatarProps) : null;\n\t\t},\n\t\t[\n\t\t\tshouldShowAvatar,\n\t\t\tisUserMessage,\n\t\t\tuser,\n\t\t\trenderAvatarOnTop,\n\t\t\tshowUserAvatar,\n\t\t\tshowAvatarForEveryMessage,\n\t\t\trenderAvatar,\n\t\t],\n\t);\n\n\t// Render: Empty State\n\tif (!messages \|\| messages.length === 0) {\n\t\treturn renderChatEmpty ? <>{renderChatEmpty()}</> : null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tref={scrollRef as React.RefObject<HTMLDivElement>}\n\t\t\tstyle={{\n\t\t\t\tflex: 1,\n\t\t\t\toverflowY: 'auto',\n\t\t\t\toverflowX: 'hidden',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: 'column',\n\t\t\t\t...(maxHeight ? { maxHeight, height: maxHeight } : {}),\n\t\t\t\t...listViewProps.style,\n\t\t\t}}\n\t\t\tonScroll={handleScroll}\n\t\t>\n\t\t\t{/* Spacer to push messages to bottom (newest appears last in DOM) /}\n\t\t\t<div style={{ flex: '1 0 auto' }} />\n\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\tflex: '0 0 auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{dayGroups.map((group, groupIndex) => (\n\t\t\t\t\t<div key={`day-group-${groupIndex}`}>\n\t\t\t\t\t\t{/ Day separator — sticks to top while this day scrolls past /}\n\t\t\t\t\t\t{renderDay ? (\n\t\t\t\t\t\t\t<div style={{ position: 'sticky', top: 0, zIndex: 2 }}>\n\t\t\t\t\t\t\t\t{renderDay({ createdAt: group.createdAt })}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Day\n\t\t\t\t\t\t\t\tcreatedAt={group.createdAt}\n\t\t\t\t\t\t\t\tappType={appType}\n\t\t\t\t\t\t\t\tscrollRootRef={scrollRef}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{group.indices.map((index) => {\n\t\t\t\t\t\t\tconst message = reversedMessages[index];\n\t\t\t\t\t\t\tconst isSmtp =\n\t\t\t\t\t\t\t\tmessage?.['channelId'] === MESSAGE_CHANNELS.SMTP \|\|\n\t\t\t\t\t\t\t\tmessage?.['channelName'] === MESSAGE_CHANNELS.SMTP;\n\t\t\t\t\t\t\tconst position = isSmtp\n\t\t\t\t\t\t\t\t? 'left'\n\t\t\t\t\t\t\t\t: isUserMessage(message)\n\t\t\t\t\t\t\t\t? 'right'\n\t\t\t\t\t\t\t\t: 'left';\n\t\t\t\t\t\t\tconst previousMessage = reversedMessages[index - 1];\n\t\t\t\t\t\t\tconst nextMessage = reversedMessages[index + 1];\n\t\t\t\t\t\t\tconst placement = getMessagePlacement(message, position);\n\t\t\t\t\t\t\tconst isCentered = shouldCenterAlign(message);\n\t\t\t\t\t\t\t// Check if message is a private note\n\t\t\t\t\t\t\tconst isPrivateNote =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY &&\n\t\t\t\t\t\t\t\tmessage['activityType'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Type.PRIVATE_NOTE;\n\t\t\t\t\t\t\tconst isActivity =\n\t\t\t\t\t\t\t\tmessage['category'] ===\n\t\t\t\t\t\t\t\t\tConstants.ChatActivity.Category.ACTIVITY && !isPrivateNote;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<React.Fragment\n\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\tmessage._id ?? `${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{/ Message container /}\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t...(isMobile ? { margin: '0 4px' } : {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isCentered\n\t\t\t\t\t\t\t\t\t\t\t\t? {}\n\t\t\t\t\t\t\t\t\t\t\t\t: { display: 'flex', alignItems: 'flex-start' }),\n\t\t\t\t\t\t\t\t\t\t\t...(appType !== GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t? !isMobile && position === 'right'\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: { marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && !isPrivateNote && isMobile\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginLeft: 8, marginRight: 8 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\t...(isSmtp && isPrivateNote\n\t\t\t\t\t\t\t\t\t\t\t\t? { marginRight: 16 }\n\t\t\t\t\t\t\t\t\t\t\t\t: {}),\n\t\t\t\t\t\t\t\t\t\t\tjustifyContent: placement,\n\t\t\t\t\t\t\t\t\t\t\tmarginBottom: isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t? // SMTP: flat 24px between mails, no same/different-user split.\n\t\t\t\t\t\t\t\t\t\t\t\t nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0\n\t\t\t\t\t\t\t\t\t\t\t\t: nextMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? nextMessage?.user?._id === message?.user?._id\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 4\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 20\n\t\t\t\t\t\t\t\t\t\t\t\t: 0,\n\t\t\t\t\t\t\t\t\t\t\t// Activity cards: no left/bottom margin.\n\t\t\t\t\t\t\t\t\t\t\t...(isActivity ? { marginLeft: 0, marginBottom: 0 } : {}),\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{/ Left avatar or placeholder (for mobile, avatar is hidden) /}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'left' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginRight: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t\t\t{/ Message bubble /}\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tid={`message-bubble-${\n\t\t\t\t\t\t\t\t\t\t\t\tmessage._id ??\n\t\t\t\t\t\t\t\t\t\t\t\t`${index}-${messageIdGenerator?.() ?? 'id'}`\n\t\t\t\t\t\t\t\t\t\t\t}`}\n\t\t\t\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t\t\t\tappType === GiftedChatAppType.Manifest\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: isMobile \|\| isSmtp\n\t\t\t\t\t\t\t\t\t\t\t\t\t? { display: 'flex', flexGrow: 1, width: '100%' }\n\t\t\t\t\t\t\t\t\t\t\t\t\t: {}\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{renderMessageBubble(\n\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t\t\t{/ Right avatar or placeholder (for mobile, avatar is hidden) */}\n\t\t\t\t\t\t\t\t\t\t{!isMobile && position === 'right' && (\n\t\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\tmarginLeft: '4px',\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth: '24px',\n\t\t\t\t\t\t\t\t\t\t\t\t\tflexShrink: 0,\n\t\t\t\t\t\t\t\t\t\t\t\t\talignSelf: 'flex-start',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{renderMessageAvatar(\n\t\t\t\t\t\t\t\t\t\t\t\t\tmessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tpreviousMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t\tnextMessage,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</React.Fragment>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport default forwardRef<HTMLDivElement, GiftedChatProps<IMessage>>(\n\tGiftedChatInner,\n);\n"],"names":["COLLAPSED_MAX_HEIGHT","CollapsibleBubbleText","text","isExpanded","onToggle","textRef","useRef","isOverflowing","setIsOverflowing","useState","useEffect","el","overflows","jsxs","Fragment","jsx","BodySecondary","Button","GiftedChatInner","props","forwardedRef","messages","user","renderBubble","renderAvatar","renderDay","renderLoading","renderChatEmpty","listViewProps","renderAvatarOnTop","showUserAvatar","showAvatarForEveryMessage","inverted","messageIdGenerator","topThreshold","TOP_THRESHOLD","appType","GiftedChatAppType","maxHeight","isActivityMessage","extraProps","isMobile","useWindowSize","internalScrollRef","scrollRef","normalizeRef","scrollState","expandedMessages","setExpandedMessages","reversedMessages","useMemo","dayGroups","groups","message","index","previousMessage","isSameDay","scrollToBottom","useScrollToBottom","useImperativeHandle","useInitialMountScroll","useScrollCleanup","useRestoreScrollPosition","useAutoScrollOnNewMessages","useResizeObserverForFirstMessage","handleScroll","useScrollHandler","isUserMessage","useCallback","shouldShowAvatar","renderMessageBubble","nextMessage","position","isTopOfStack","isBottomOfStack","bubbleProps","messageId","COLORS","prev","next","renderMessageAvatar","group","groupIndex","Day","isSmtp","MESSAGE_CHANNELS","placement","getMessagePlacement","isCentered","shouldCenterAlign","isPrivateNote","Constants","isActivity","React","GiftedChat","forwardRef"],"mappings":"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"}

package/dist/esm/components/dropdown/ChipInput.d.ts CHANGED Viewed

@@ -9,7 +9,6 @@ interface ChipInputProps {
     sizeToUse?: 'default' | 'small' | 'x-small';
     errorMessage?: string;
     showLabelsOnMoreHover?: boolean;
-    placeholderColor?: string;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;