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

@bikdotai/bik-component-library 0.0.849-beta.0 → 0.0.849-beta.1

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 (112) 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"),j=require("../../constants/Theme.js"),c=require("./Tabs.styles.js"),S=require("../tag/Tag.js"),E=e=>{const{tabs:t,initialTab:u,onTabSelected:s,TabItemStyledProps:b,selectedTab:o,extendedBorder:i,rightComponent:m,size:T="default",isSquared:g=!1,containerStyles:x,gap:r,selectedNumberBackground:a}=e,[l,k]=C.useState(u||t[0].key),{colorsV2:f}=j.DEFAULT_THEME;C.useEffect(()=>{o&&o!==l&&k(o)},[o,l]);const B=e.backgroundColor,q=e.selectedTextColor??f.background.brand,I=e.textColor??f.content.secondary;return n.jsxs(c.TabHeader,{style:x??{},bgColor:B,tabGap:r,"data-test":e["data-test"],children:[t.map((d,h)=>n.jsx(y,{hasEqualSpacing:e.hasEqualSpacing,uniformBorder:!!r,selectedTextColor:q,textColor:I,tab:d,currentTab:l,TabItemStyledProps:b,IconComponent:d.icon,size:T,selectedNumberBackground:a,setCurrentTab:N=>{k(N),s&&s(N)},isSquared:g,isFirstlement:h==0,isLastElement:h==t.length-1,iconPosition:d.iconPosition??"left"},d.key)),i&&n.jsx(c.EmptyTab,{}),n.jsx(c.RightComponent,{children:m})]})},y=e=>{const{tab:t,currentTab:u,setCurrentTab:s,TabItemStyledProps:b,IconComponent:o,iconPosition:i="left",size:m="default",isSquared:T=!1,isFirstlement:g,isLastElement:x}=e,r=t.key===u,{colorsV2:a}=j.DEFAULT_THEME,l=C.useCallback(()=>({...b,borderRadius:e.isSquared?g?"4px 0px 0px 4px":x?"0px 4px 4px 0px":"":""}),[]);return n.jsxs(c.TabItem,{style:l(),selected:r,uniformBorder:e.uniformBorder,hasEqualSpacing:e.hasEqualSpacing,onClick:()=>s(e.tab.key),selectedTextColor:e.selectedTextColor,isSquared:T,"data-test":e["data-test"],children:[o&&i==="left"&&n.jsx(o,{selected:r?a.background.brand:a.content.secondary}),t.leadingNumber!==void 0&&t.leadingNumber!==null&&n.jsx(c.TrailingNumberContainer,{selected:r,selectedBackground:e.selectedNumberBackground,children:n.jsx(S.Tag,{tagText:t?.leadingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:a.content.primaryInverse,backgroundColor:r?e.selectedNumberBackground:e.selectedNumberBackground?a.content.secondary:void 0})}),n.jsx(c.TabItemText,{style:m==="small"?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:e.textColor,selectedTextColor:e.selectedTextColor,selected:r,children:t.title}),t.trailingNumber!==void 0&&t.trailingNumber!==null&&n.jsx(c.TrailingNumberContainer,{selected:r,selectedBackground:e.selectedNumberBackground,children:n.jsx(S.Tag,{tagText:t?.trailingNumber??0,theme:"dark",type:t.numberTagType,variant:"circle",color:a.content.primaryInverse,backgroundColor:r?e.selectedNumberBackground:e.selectedNumberBackground?a.content.secondary:void 0})}),o&&i==="right"&&n.jsx(o,{selected:r?a.background.brand:a.content.secondary})]})};E.displayName="Tabs";y.displayName="TabItemComponent";exports.TabItemComponent=y;exports.Tabs=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),j=require("../../constants/Theme.js"),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\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer~~\n\t\t\t\t\tselected~~={selected}~~\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t~~>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","~~gap","selectedNumberBackground","~~currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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,~~eACxB~~,~~gBACCmB,EACGnC,EAAM,yBACNA,EAAM,yBACNgB,EAAS,QAAQ,UACjB,MAAA,~~CAAA,~~CAEL~~,~~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,~~eACxB~~,~~gBACCmB,EACGnC,EAAM,yBACNA,EAAM,yBACNgB,EAAS,QAAQ,UACjB,MAAA,~~CAAA,~~CAEL~~,~~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/tag/Tag.js CHANGED Viewed

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n~~\thoverBackgroundColor,\n~~}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t~~\thoverBackgroundColor={hoverBackgroundColor}\n\t\t~~>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","~~hoverBackgroundColor","~~displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"4VAYaA,EAAM,CAAC,CACnB,QAAAC,EACA,YAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuB,OACvB,cAAAC,EACA,eAAAC,EACA,sBAAAC,EAAwB,OACxB,MAAAC,EAAQ,QACR,KAAAC,EAAO,UACP,QAAAC,EAAU,UACV,QAAAC,EACA,OAAAC,EACA,UAAAC,EACA,SAAAC,EACA,YAAAC,EACA,eAAAC,EACA,QAAAC,EACA,OAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,SAAAC,EACA,cAAAC,EACA,gBAAAC,EACA,aAAAC,EACA,KAAAC,EAAO,~~UACP~~,~~qBAAAC,CACD,~~IAAgB,CACf,IAAIC,~~EAAiB1B~~,EACrB,~~MAAM2B~~,~~EAAepB~~,EACrB,~~IAAIqB~~,~~EAAcpB~~,~~EAEbqB~~,EAAAA,~~gBAAgBpB~~,CAAO,EAAED,CAAI,~~IACjCoB~~,EAAc,~~WAGXnB~~,IAAY,UACX,~~OAAOiB~~,GAAmB,UAAYA,EAAiB,KAC1DA,EAAiB,OAInB,MAAMI,EAAYC,EAAAA,~~gBAAgBxB~~,~~EAAOqB~~,CAAW,EAC9CI,EAAY,CACjB,~~OAAQvB~~,IAAY,aAAe,GAAK,GACxC,MAAOA,IAAY,aAAe,GAAK,GACvC,~~MAAOqB~~,EACP,MAAO,CAAE,QAAS,OAAA,CAAQ,EAG3B,OACCG,EAAAA,IAACC,EAAAA,IAAA,CACA,~~OAAAvB~~,EACA,~~MAAOgB~~,EACP,KAAMC,EACN,~~QAAAnB~~,EACA,QAAAC,EACA,UAAAE,EACA,SAAAC,EACA,eAAAE,EACA,QAAAC,EACA,OAAAC,EACA,gBAAAK,EACA,aAAAC,EACA,KAAAC,~~EACA,qBAAAC,~~EAEA,SAAAU,EAAAA,KAAC,MAAA,CAAI,UAAU,YACb,SAAA,~~CAAAlC~~,IACCiB,~~EACAe~~,MAACG,EAAAA,QAAA,CAAS,~~GAAGlB~~,EACZ,~~SAAAe~~,EAAAA,IAAC,SAAA,CACA,UAAU,eACV,~~QAAS9B~~,EACT,GAAI,GAAGC,CAAa,YAAc,uBAEjC,~~SAAAiC~~,EAAAA,QAAM,~~cAAcpC~~,EAAa,CACjC,~~GAAG+B~~,EACH,~~GAAI5B~~,GAAiB,cAAA,CACrB,CAAA,CAAA,EAEH,~~EAEA6B~~,EAAAA,IAAC,SAAA,CACA,UAAU,eACV,~~QAAS9B~~,EACT,GAAI,GAAGC,CAAa,YAAc,uBAEjC,~~SAAAiC~~,EAAAA,QAAM,~~cAAcpC~~,EAAa,CACjC,~~GAAG+B~~,EACH,~~GAAI5B~~,GAAiB,cAAA,CACrB,CAAA,CAAA,GAIHU,IACCN,IAAS,MAAQD,IAAU,QAC3BiB,IAAS,~~QACRS~~,EAAAA,IAACK,EAAAA,WAAA,CAAW,~~cAAAjB~~,EACV,SAAAP,CAAA,CACF,~~QAECyB~~,EAAAA,cAAA,CAAc,~~cAAAlB~~,EACb,SAAAP,CAAA,CACF,EAEEU,IAAS,~~QACZS~~,EAAAA,IAACO,EAAAA,SAAA,CAAS,UAAU,OAAO,~~cAAAnB~~,EACzB,SAAAP,CAAA,CACF,~~EAEAmB~~,EAAAA,IAACQ,EAAAA,YAAA,CAAY,UAAU,OAAO,~~cAAApB~~,EAC5B,SAAAP,CAAA,CACF,GAGD,CAACA,~~GACDY~~,IAAmB,~~KAClBlB~~,IAAS,MAAQD,IAAU,QAC3BiB,IAAS,~~cACPc~~,EAAAA,WAAA,CAAW,~~cAAAjB~~,EACV,WACF,~~EAEAY~~,EAAAA,IAACM,EAAAA,eAAc,~~cAAAlB~~,EACb,~~SAAAK~~,CAAA,CACF,~~EAEEF~~,IAAS,~~QACZS~~,EAAAA,IAACO,EAAAA,SAAA,CACA,UAAU,OACV,~~MAAOpB~~,EACP,cAAAC,EAEC,~~SAAAK~~,CAAA,CAAA,EAGFO,EAAAA,IAACQ,EAAAA,YAAA,CACA,UAAU,OACV,~~MAAOrB~~,EACP,cAAAC,EAEC,~~SAAAK~~,CAAA,CAAA,~~GAIHxB~~,IACCiB,~~EACAc~~,MAACG,EAAAA,QAAA,CAAS,~~GAAGjB~~,EACZ,~~SAAAc~~,EAAAA,IAAC,SAAA,CACA,UAAU,gBACV,~~QAAS3B~~,EACT,GAAI,GAAGD,CAAc,YAAc,wBAElC,~~SAAAgC~~,EAAAA,QAAM,~~cAAcnC~~,EAAc,CAClC,~~GAAG8B~~,EACH,~~GAAI3B~~,GAAkB,eAAA,CACtB,CAAA,CAAA,EAEH,~~EAEA4B~~,EAAAA,IAAC,SAAA,CACA,UAAU,gBACV,~~QAAS3B~~,EACT,GAAI,GAAGD,CAAc,YAAc,wBAElC,~~SAAAgC~~,EAAAA,QAAM,~~cAAcnC~~,EAAc,CAClC,~~GAAG8B~~,EACH,~~GAAI3B~~,GAAkB,eAAA,CACtB,CAAA,CAAA,EACF,CAAA,CAEH,CAAA,CAAA,CAGH,EAEAN,EAAI,YAAc"}
1	+ {"version":3,"file":"Tag.js","sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport {\n\tAiBodyCaption,\n\tAiBodyTiny,\n\tBodyCaption,\n\tBodyTiny,\n} from '../TypographyStyle';\nimport { TagProps, ValidTagTypeMap } from './model';\nimport * as Sc from './Tag.styled';\nimport { getTagIconColor } from './themes';\n\nexport const Tag = ({\n\ttagText,\n\tLeadingIcon,\n\tTrailingIcon,\n\tonLeadingIconClicked = undefined,\n\tleadingIconId,\n\ttrailingIconId,\n\tonTrailingIconClicked = undefined,\n\ttheme = 'light',\n\ttype = 'neutral',\n\tvariant = 'regular',\n\tversion,\n\tcursor,\n\talignIcon,\n\tnoBorder,\n\ttagHtmlText,\n\tcontentPadding,\n\tpadding,\n\theight,\n\tleadingIconTooltip,\n\ttrailingIconTooltip,\n\ttagColor,\n\tnumberOfLines,\n\tbackgroundColor,\n\tborderRadius,\n\tsize = 'regular',\n}: TagProps) => {\n\tlet displayTagText = tagText;\n\tconst displayTheme = theme;\n\tlet displayType = type;\n\n\tif (!ValidTagTypeMap[variant][type]) {\n\t\tdisplayType = 'neutral';\n\t}\n\n\tif (variant === 'circle') {\n\t\tif (typeof displayTagText === 'number' && displayTagText > 99) {\n\t\t\tdisplayTagText = '99+';\n\t\t}\n\t}\n\n\tconst iconColor = getTagIconColor(theme, displayType);\n\tconst iconProps = {\n\t\theight: variant === 'compressed' ? 12 : 16,\n\t\twidth: variant === 'compressed' ? 12 : 16,\n\t\tcolor: iconColor,\n\t\tstyle: { display: 'block' },\n\t};\n\n\treturn (\n\t\t<Sc.Tag\n\t\t\tcursor={cursor}\n\t\t\ttheme={displayTheme}\n\t\t\ttype={displayType}\n\t\t\tvariant={variant}\n\t\t\tversion={version}\n\t\t\talignIcon={alignIcon}\n\t\t\tnoBorder={noBorder}\n\t\t\tcontentPadding={contentPadding}\n\t\t\tpadding={padding}\n\t\t\theight={height}\n\t\t\tbackgroundColor={backgroundColor}\n\t\t\tborderRadius={borderRadius}\n\t\t\tsize={size}\n\t\t>\n\t\t\t<div className=\"container\">\n\t\t\t\t{LeadingIcon &&\n\t\t\t\t\t(leadingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...leadingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tonClick={onLeadingIconClicked}\n\t\t\t\t\t\t\tid={`${leadingIconId}-wrapper` \|\| 'leading-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: leadingIconId \|\| 'leading-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\n\t\t\t\t{tagHtmlText &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption className=\"text\" numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t{tagHtmlText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{!tagHtmlText &&\n\t\t\t\t\tdisplayTagText !== '' &&\n\t\t\t\t\t(type === 'ai' && theme === 'light' ? (\n\t\t\t\t\t\tsize === 'small' ? (\n\t\t\t\t\t\t\t<AiBodyTiny numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyTiny>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<AiBodyCaption numberOfLines={numberOfLines}>\n\t\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t\t</AiBodyCaption>\n\t\t\t\t\t\t)\n\t\t\t\t\t) : size === 'small' ? (\n\t\t\t\t\t\t<BodyTiny\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyTiny>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tcolor={tagColor}\n\t\t\t\t\t\t\tnumberOfLines={numberOfLines}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{displayTagText}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t))}\n\n\t\t\t\t{TrailingIcon &&\n\t\t\t\t\t(trailingIconTooltip ? (\n\t\t\t\t\t\t<Tooltip {...trailingIconTooltip}>\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<button\n\t\t\t\t\t\t\tclassName=\"icon-trailing\"\n\t\t\t\t\t\t\tonClick={onTrailingIconClicked}\n\t\t\t\t\t\t\tid={`${trailingIconId}-wrapper` \|\| 'trailing-icon-wrapper'}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, {\n\t\t\t\t\t\t\t\t...iconProps,\n\t\t\t\t\t\t\t\tid: trailingIconId \|\| 'trailing-icon',\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</button>\n\t\t\t\t\t))}\n\t\t\t</div>\n\t\t</Sc.Tag>\n\t);\n};\n\nTag.displayName = 'Tag';\n"],"names":["Tag","tagText","LeadingIcon","TrailingIcon","onLeadingIconClicked","leadingIconId","trailingIconId","onTrailingIconClicked","theme","type","variant","version","cursor","alignIcon","noBorder","tagHtmlText","contentPadding","padding","height","leadingIconTooltip","trailingIconTooltip","tagColor","numberOfLines","backgroundColor","borderRadius","size","displayTagText","displayTheme","displayType","ValidTagTypeMap","iconColor","getTagIconColor","iconProps","jsx","Sc.Tag","jsxs","Tooltip","React","AiBodyTiny","AiBodyCaption","BodyTiny","BodyCaption"],"mappings":"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"}

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

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

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

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

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

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

package/dist/cjs/editor/BikEditor.styles.js CHANGED Viewed

@@ -89,6 +89,12 @@
 		border-radius: 4px;
 		font-weight: 500;
 	}
+	.bik-mention[data-kind='variable'] {
+		color: #067647;
+		background: #ecfdf3;
+		border-radius: 4px;
+		font-weight: 500;
+	}
 	.bik-variable {
 	}

package/dist/cjs/editor/BikEditor.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BikEditor.styles.js","sources":["../../../src/editor/BikEditor.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '../constants/Theme';\n\nexport const BikEditorShell = styled.div<{\n\tminHeight?: string;\n\tmaxHeight?: string;\n\ttightParagraphs?: boolean;\n\tjsonMode?: boolean;\n}>`\n\tposition: relative;\n\twidth: 100%;\n\n\t.ProseMirror {\n\t\tmin-height: ${({ minHeight }) => minHeight ?? '60px'};\n\t\tmax-height: ${({ maxHeight }) => maxHeight ?? 'none'};\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t\tword-break: break-word;\n\n\t\t/* Paragraph spacing.\n\t\t Email/signature (rich): paragraphs carry the browser-default 1em block\n\t\t margin — the SAME spacing the sent HTML gets (we emit plain <p>, which\n\t\t renders against the default <p> margin in Gmail and our email viewer),\n\t\t so editor view == emitted HTML == Gmail. A single Enter = a new\n\t\t paragraph with a visible gap, like pasted Gmail/ChatGPT/Docs content.\n\t\t Other channels (WhatsApp/IG/FB/comments) are plain-text messaging, with\n\t\t no paragraph-gap concept — paragraphs are tight (margin:0) regardless of\n\t\t typed vs pasted. (A margin:0 attr still overrides to tight either way.) /\n\t\tp {\n\t\t\tmargin: ${({ tightParagraphs }) => (tightParagraphs ? '0' : '1em 0')};\n\t\t\tpadding: 0;\n\t\t}\n\n\t\tul,\n\t\tol {\n\t\t\tmargin: 0;\n\t\t\tpadding-left: 1.5em;\n\t\t}\n\n\t\tli + li {\n\t\t\tmargin-top: 2px;\n\t\t}\n\n\t\t/ The empty placeholder paragraph shouldn't inherit the rich-mode 1em\n\t\t block margin (email/SMTP/signature) — otherwise the placeholder text\n\t\t is pushed down. Real (non-empty) paragraphs keep their spacing. /\n\t\tp.is-editor-empty:first-child {\n\t\t\tmargin: 0;\n\t\t}\n\n\t\tp.is-editor-empty:first-child::before {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tfloat: left;\n\t\t\tcolor: #adb5bd;\n\t\t\tpointer-events: none;\n\t\t\theight: 0;\n\t\t}\n\n\t\t/ hidden in-flow copy of the placeholder so a multi-line\n\t\t placeholder grows the editor instead of showing a scrollbar (the\n\t\t zero-height float above adds no height). -1lh cancels the caret line. /\n\t\tp.is-editor-empty:first-child::after {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tdisplay: block;\n\t\t\tvisibility: hidden;\n\t\t\tpointer-events: none;\n\t\t\tmargin-top: -1.5em; / one line at the editor's line-height: 1.5 /\n\t\t\tmargin-top: -1lh;\n\t\t}\n\n\t\t/ Characters pasted beyond the soft character limit — rendered grey so the\n\t\t overflow is visible but clearly marked (see CharacterLimitExtension). /\n\t\t.bik-editor-overflow {\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\t}\n\n\t.bik-mention {\n\t\tcolor: ${COLORS.content.brand};\n\t\tpadding: 1px 4px;\n\t}\n\t.bik-mention--team {\n\t\tcolor: ${COLORS.content.brand};\n\t}\n\t/ Typed mention chips (agent-builder): distinct colour per reference kind. /\n\t.bik-mention[data-kind='tool'] {\n\t\tcolor: #1570ef;\n\t\tbackground: #eff8ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-mention[data-kind='subagent'] {\n\t\tcolor: #6938ef;\n\t\tbackground: #f4f3ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-variable {\n\t}\n\n\t/ JSON body mode — scoped so normal-mode code blocks keep their default look\n\t (no reserved gutter, no monospace override). The frame is split: the header\n\t bar owns the top rounded border, the code area (BikJsonBody) owns its own\n\t full border so it can recolour on focus / error without touching the\n\t header. /\n\t${({ jsonMode }) =>\n\t\tjsonMode &&\n\t\tcss`\n\t\t\t/ The code block IS the editor surface, sitting below the header bar.\n\t\t\t White fills the scroller down to the min-height (no blank strip below\n\t\t\t short JSON); the header owns the grey. /\n\t\t\t.ProseMirror {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: ${COLORS.surface.standard};\n\t\t\t}\n\t\t\t/ ProseMirror appends an empty trailing paragraph AFTER the code block\n\t\t\t (a <p><br class=\"ProseMirror-trailingBreak\"></p> caret-escape node).\n\t\t\t In JSON mode there's nothing to escape to — it only renders as a blank\n\t\t\t line under the JSON, which is the \"extra space at the bottom\". Hide it. /\n\t\t\t.ProseMirror pre + p {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t.ProseMirror pre {\n\t\t\t\tposition: relative;\n\t\t\t\tmargin: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\t/ Left padding reserves the line-number gutter; each .bik-json-lineno\n\t\t\t\t widget hangs back into it with a matching negative margin. Wide\n\t\t\t\t enough for a 3-digit line number (up to 999). /\n\t\t\t\tpadding: 12px 12px 12px 4.2em;\n\t\t\t\tfont-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo,\n\t\t\t\t\tConsolas, 'Liberation Mono', monospace;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.6;\n\t\t\t\twhite-space: pre;\n\t\t\t\toverflow-x: auto;\n\t\t\t\ttab-size: 2;\n\t\t\t}\n\t\t\t.ProseMirror pre code {\n\t\t\t\tbackground: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tfont-size: inherit;\n\t\t\t\tcolor: #1f2328;\n\t\t\t}\n\t\t\t/ Line-number gutter — a contenteditable=false sibling of <code> rendered\n\t\t\t by the code-block node view (JsonCodeBlockView), absolutely positioned\n\t\t\t into the reserved left padding. It scrolls with <pre> as one block, so\n\t\t\t numbers stay aligned with their lines. Stacked right borders form one\n\t\t\t continuous divider. /\n\t\t\t.bik-json-gutter {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 12px; / == the code block's padding-top /\n\t\t\t\twidth: 3.5em; / within the 4.2em reserved left padding /\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tuser-select: none;\n\t\t\t\t-webkit-user-select: none;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t.bik-json-lineno {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\theight: 1.6em; / == code line-height (13px × 1.6) so rows align /\n\t\t\t\tline-height: 1.6;\n\t\t\t\tpadding-right: 0.7em;\n\t\t\t\ttext-align: right;\n\t\t\t\t/ Never let a 3-digit number (e.g. 210) break across two lines. /\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t\t\tborder-right: 1px solid ${COLORS.stroke.primary};\n\t\t\t}\n\t\t\t.bik-json-key {\n\t\t\t\tcolor: #0550ae;\n\t\t\t}\n\t\t\t.bik-json-string {\n\t\t\t\tcolor: #0a7d33;\n\t\t\t}\n\t\t\t.bik-json-number {\n\t\t\t\tcolor: #b5590a;\n\t\t\t}\n\t\t\t.bik-json-boolean,\n\t\t\t.bik-json-null {\n\t\t\t\tcolor: #8250df;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\t.bik-json-punct {\n\t\t\t\tcolor: #57606a;\n\t\t\t}\n\t\t`}\n\n\ta,\n\t.bik-link {\n\t\tcolor: #4f46e5;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-color: #a5b4fc;\n\t\ttext-underline-offset: 2px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tcolor: #3730a3;\n\t\t\ttext-decoration-color: #6366f1;\n\t\t}\n\t}\n`;\n\n/\n jsonMode header bar: a \"JSON\" label on the left and the Beautify / Copy actions\n * on the right. Owns the frame's top rounded border (no bottom edge — the code\n * area below draws its own top border, so the seam stays a single line even when\n * it recolours on focus/error). Grey fill sets it apart from the white code\n * surface below.\n /\nexport const BikJsonHeader = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tbackground: ${COLORS.surface.subdued};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-bottom: none;\n\tborder-radius: 4px 4px 0 0;\n\n\t.bik-json-header-label {\n\t\tfont-family: inherit;\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tuser-select: none;\n\t}\n\n\t.bik-json-header-actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\tbutton {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\theight: 28px;\n\t\tpadding: 0 8px;\n\t\tfont-family: inherit;\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground: ${COLORS.surface.standard};\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tcursor: pointer;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\t\t&:disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n`;\n\n/\n jsonMode code surface below the header. Owns the recolourable border: brand on\n * focus, negative when the JSON is invalid (error wins over focus).\n /\nexport const BikJsonBody = styled.div<{ $error?: boolean }>`\n\tposition: relative;\n\toverflow: hidden;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid\n\t\t${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : COLORS.stroke.primary};\n\tborder-radius: 0 0 4px 4px;\n\n\t&:focus-within {\n\t\tborder-color: ${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : BASE_COLORS.brand['800']};\n\t}\n`;\n\n/\n jsonMode empty state: a centered code glyph + placeholder line over the code\n * area. Pointer-events off so clicks focus the editor.\n /\nexport const BikJsonEmptyState = styled.div`\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tcolor: ${COLORS.content.placeholder};\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpointer-events: none;\n\tuser-select: none;\n`;\n\n/\n JSON parse-error alert rendered by BikEditor in jsonMode: a standalone rounded\n * card below the code area.\n */\nexport const BikJsonError = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\tmargin-top: 8px;\n\tpadding: 12px;\n\tfont-size: 12px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.negative};\n\tbackground: ${COLORS.background.negative.light};\n\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\tborder-radius: 4px;\n\tword-break: break-word;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t}\n\n\tstrong {\n\t\tfont-weight: 600;\n\t}\n`;\n"],"names":["BikEditorShell","styled","minHeight","maxHeight","tightParagraphs","COLORS","jsonMode","css","BikJsonHeader","BikJsonBody","$error","BASE_COLORS","BikJsonEmptyState","BikJsonError"],"mappings":"uNAGaA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,gBAUrB,CAAC,CAAE,UAAAC,KAAgBA,GAAa,MAAM;AAAA,gBACtC,CAAC,CAAE,UAAAC,KAAgBA,GAAa,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAiBzC,CAAC,CAAE,gBAAAC,CAAA,IAAuBA,EAAkB,IAAM,OAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YA4C3DC,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,WAK3BA,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA,WAIpBA,EAAAA,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAuB5B,CAAC,CAAE,SAAAC,KACJA,GACAC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA;AAAAA,kBAMgBF,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAuD5BA,EAAAA,OAAO,QAAQ,WAAW;AAAA,8BACTA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAmBhD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuBUG,EAAgBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMrBI,EAAAA,OAAO,QAAQ,OAAO;AAAA,qBAChBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAS/BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAkBxBA,EAAAA,OAAO,QAAQ,SAAS;AAAA,gBACnBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,sBACjBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,iBAK1BA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAa1BI,EAAcR,EAAAA,QAAO;AAAA;AAAA;AAAA,eAGnBI,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,IAElC,CAAC,CAAE,OAAAK,CAAA,IACJA,EAASL,EAAAA,OAAO,QAAQ,SAAWA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIzC,CAAC,CAAE,OAAAK,KAClBA,EAASL,EAAAA,OAAO,QAAQ,SAAWM,EAAAA,YAAY,MAAM,GAAK,CAAC;AAAA;AAAA,EAQjDC,EAAoBX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQ9BI,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBQ,EAAeZ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAQzBI,EAAAA,OAAO,QAAQ,QAAQ;AAAA,eAClBA,SAAO,WAAW,SAAS,KAAK;AAAA,qBAC1BA,SAAO,OAAO,SAAS,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"BikEditor.styles.js","sources":["../../../src/editor/BikEditor.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BASE_COLORS, COLORS } from '../constants/Theme';\n\nexport const BikEditorShell = styled.div<{\n\tminHeight?: string;\n\tmaxHeight?: string;\n\ttightParagraphs?: boolean;\n\tjsonMode?: boolean;\n}>`\n\tposition: relative;\n\twidth: 100%;\n\n\t.ProseMirror {\n\t\tmin-height: ${({ minHeight }) => minHeight ?? '60px'};\n\t\tmax-height: ${({ maxHeight }) => maxHeight ?? 'none'};\n\t\toverflow-y: auto;\n\t\toutline: none;\n\t\tfont-size: 14px;\n\t\tline-height: 1.5;\n\t\tword-break: break-word;\n\n\t\t/* Paragraph spacing.\n\t\t Email/signature (rich): paragraphs carry the browser-default 1em block\n\t\t margin — the SAME spacing the sent HTML gets (we emit plain <p>, which\n\t\t renders against the default <p> margin in Gmail and our email viewer),\n\t\t so editor view == emitted HTML == Gmail. A single Enter = a new\n\t\t paragraph with a visible gap, like pasted Gmail/ChatGPT/Docs content.\n\t\t Other channels (WhatsApp/IG/FB/comments) are plain-text messaging, with\n\t\t no paragraph-gap concept — paragraphs are tight (margin:0) regardless of\n\t\t typed vs pasted. (A margin:0 attr still overrides to tight either way.) /\n\t\tp {\n\t\t\tmargin: ${({ tightParagraphs }) => (tightParagraphs ? '0' : '1em 0')};\n\t\t\tpadding: 0;\n\t\t}\n\n\t\tul,\n\t\tol {\n\t\t\tmargin: 0;\n\t\t\tpadding-left: 1.5em;\n\t\t}\n\n\t\tli + li {\n\t\t\tmargin-top: 2px;\n\t\t}\n\n\t\t/ The empty placeholder paragraph shouldn't inherit the rich-mode 1em\n\t\t block margin (email/SMTP/signature) — otherwise the placeholder text\n\t\t is pushed down. Real (non-empty) paragraphs keep their spacing. /\n\t\tp.is-editor-empty:first-child {\n\t\t\tmargin: 0;\n\t\t}\n\n\t\tp.is-editor-empty:first-child::before {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tfloat: left;\n\t\t\tcolor: #adb5bd;\n\t\t\tpointer-events: none;\n\t\t\theight: 0;\n\t\t}\n\n\t\t/ hidden in-flow copy of the placeholder so a multi-line\n\t\t placeholder grows the editor instead of showing a scrollbar (the\n\t\t zero-height float above adds no height). -1lh cancels the caret line. /\n\t\tp.is-editor-empty:first-child::after {\n\t\t\tcontent: attr(data-placeholder);\n\t\t\tdisplay: block;\n\t\t\tvisibility: hidden;\n\t\t\tpointer-events: none;\n\t\t\tmargin-top: -1.5em; / one line at the editor's line-height: 1.5 /\n\t\t\tmargin-top: -1lh;\n\t\t}\n\n\t\t/ Characters pasted beyond the soft character limit — rendered grey so the\n\t\t overflow is visible but clearly marked (see CharacterLimitExtension). /\n\t\t.bik-editor-overflow {\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\t}\n\n\t.bik-mention {\n\t\tcolor: ${COLORS.content.brand};\n\t\tpadding: 1px 4px;\n\t}\n\t.bik-mention--team {\n\t\tcolor: ${COLORS.content.brand};\n\t}\n\t/ Typed mention chips (agent-builder): distinct colour per reference kind. /\n\t.bik-mention[data-kind='tool'] {\n\t\tcolor: #1570ef;\n\t\tbackground: #eff8ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-mention[data-kind='subagent'] {\n\t\tcolor: #6938ef;\n\t\tbackground: #f4f3ff;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-mention[data-kind='variable'] {\n\t\tcolor: #067647;\n\t\tbackground: #ecfdf3;\n\t\tborder-radius: 4px;\n\t\tfont-weight: 500;\n\t}\n\t.bik-variable {\n\t}\n\n\t/ JSON body mode — scoped so normal-mode code blocks keep their default look\n\t (no reserved gutter, no monospace override). The frame is split: the header\n\t bar owns the top rounded border, the code area (BikJsonBody) owns its own\n\t full border so it can recolour on focus / error without touching the\n\t header. /\n\t${({ jsonMode }) =>\n\t\tjsonMode &&\n\t\tcss`\n\t\t\t/ The code block IS the editor surface, sitting below the header bar.\n\t\t\t White fills the scroller down to the min-height (no blank strip below\n\t\t\t short JSON); the header owns the grey. /\n\t\t\t.ProseMirror {\n\t\t\t\tpadding: 0;\n\t\t\t\tbackground: ${COLORS.surface.standard};\n\t\t\t}\n\t\t\t/ ProseMirror appends an empty trailing paragraph AFTER the code block\n\t\t\t (a <p><br class=\"ProseMirror-trailingBreak\"></p> caret-escape node).\n\t\t\t In JSON mode there's nothing to escape to — it only renders as a blank\n\t\t\t line under the JSON, which is the \"extra space at the bottom\". Hide it. /\n\t\t\t.ProseMirror pre + p {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t.ProseMirror pre {\n\t\t\t\tposition: relative;\n\t\t\t\tmargin: 0;\n\t\t\t\tbackground: transparent;\n\t\t\t\t/ Left padding reserves the line-number gutter; each .bik-json-lineno\n\t\t\t\t widget hangs back into it with a matching negative margin. Wide\n\t\t\t\t enough for a 3-digit line number (up to 999). /\n\t\t\t\tpadding: 12px 12px 12px 4.2em;\n\t\t\t\tfont-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo,\n\t\t\t\t\tConsolas, 'Liberation Mono', monospace;\n\t\t\t\tfont-size: 13px;\n\t\t\t\tline-height: 1.6;\n\t\t\t\twhite-space: pre;\n\t\t\t\toverflow-x: auto;\n\t\t\t\ttab-size: 2;\n\t\t\t}\n\t\t\t.ProseMirror pre code {\n\t\t\t\tbackground: none;\n\t\t\t\tpadding: 0;\n\t\t\t\tfont-size: inherit;\n\t\t\t\tcolor: #1f2328;\n\t\t\t}\n\t\t\t/ Line-number gutter — a contenteditable=false sibling of <code> rendered\n\t\t\t by the code-block node view (JsonCodeBlockView), absolutely positioned\n\t\t\t into the reserved left padding. It scrolls with <pre> as one block, so\n\t\t\t numbers stay aligned with their lines. Stacked right borders form one\n\t\t\t continuous divider. /\n\t\t\t.bik-json-gutter {\n\t\t\t\tposition: absolute;\n\t\t\t\tleft: 0;\n\t\t\t\ttop: 12px; / == the code block's padding-top /\n\t\t\t\twidth: 3.5em; / within the 4.2em reserved left padding /\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\tuser-select: none;\n\t\t\t\t-webkit-user-select: none;\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\t\t\t.bik-json-lineno {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\theight: 1.6em; / == code line-height (13px × 1.6) so rows align /\n\t\t\t\tline-height: 1.6;\n\t\t\t\tpadding-right: 0.7em;\n\t\t\t\ttext-align: right;\n\t\t\t\t/ Never let a 3-digit number (e.g. 210) break across two lines. /\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t\t\tborder-right: 1px solid ${COLORS.stroke.primary};\n\t\t\t}\n\t\t\t.bik-json-key {\n\t\t\t\tcolor: #0550ae;\n\t\t\t}\n\t\t\t.bik-json-string {\n\t\t\t\tcolor: #0a7d33;\n\t\t\t}\n\t\t\t.bik-json-number {\n\t\t\t\tcolor: #b5590a;\n\t\t\t}\n\t\t\t.bik-json-boolean,\n\t\t\t.bik-json-null {\n\t\t\t\tcolor: #8250df;\n\t\t\t\tfont-weight: 500;\n\t\t\t}\n\t\t\t.bik-json-punct {\n\t\t\t\tcolor: #57606a;\n\t\t\t}\n\t\t`}\n\n\ta,\n\t.bik-link {\n\t\tcolor: #4f46e5;\n\t\ttext-decoration: underline;\n\t\ttext-decoration-color: #a5b4fc;\n\t\ttext-underline-offset: 2px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tcolor: #3730a3;\n\t\t\ttext-decoration-color: #6366f1;\n\t\t}\n\t}\n`;\n\n/\n jsonMode header bar: a \"JSON\" label on the left and the Beautify / Copy actions\n * on the right. Owns the frame's top rounded border (no bottom edge — the code\n * area below draws its own top border, so the seam stays a single line even when\n * it recolours on focus/error). Grey fill sets it apart from the white code\n * surface below.\n /\nexport const BikJsonHeader = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 8px;\n\tpadding: 8px 12px;\n\tbackground: ${COLORS.surface.subdued};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-bottom: none;\n\tborder-radius: 4px 4px 0 0;\n\n\t.bik-json-header-label {\n\t\tfont-family: inherit;\n\t\tfont-size: 14px;\n\t\tline-height: 20px;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tuser-select: none;\n\t}\n\n\t.bik-json-header-actions {\n\t\tdisplay: flex;\n\t\tgap: 8px;\n\t}\n\n\tbutton {\n\t\tdisplay: inline-flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\theight: 28px;\n\t\tpadding: 0 8px;\n\t\tfont-family: inherit;\n\t\tfont-size: 12px;\n\t\tline-height: 16px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground: ${COLORS.surface.standard};\n\t\tborder: 1px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tcursor: pointer;\n\n\t\t&:hover:not(:disabled) {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\t\t&:disabled {\n\t\t\topacity: 0.5;\n\t\t\tcursor: not-allowed;\n\t\t}\n\t}\n`;\n\n/\n jsonMode code surface below the header. Owns the recolourable border: brand on\n * focus, negative when the JSON is invalid (error wins over focus).\n /\nexport const BikJsonBody = styled.div<{ $error?: boolean }>`\n\tposition: relative;\n\toverflow: hidden;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid\n\t\t${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : COLORS.stroke.primary};\n\tborder-radius: 0 0 4px 4px;\n\n\t&:focus-within {\n\t\tborder-color: ${({ $error }) =>\n\t\t\t$error ? COLORS.content.negative : BASE_COLORS.brand['800']};\n\t}\n`;\n\n/\n jsonMode empty state: a centered code glyph + placeholder line over the code\n * area. Pointer-events off so clicks focus the editor.\n /\nexport const BikJsonEmptyState = styled.div`\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 8px;\n\tcolor: ${COLORS.content.placeholder};\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpointer-events: none;\n\tuser-select: none;\n`;\n\n/\n JSON parse-error alert rendered by BikEditor in jsonMode: a standalone rounded\n * card below the code area.\n */\nexport const BikJsonError = styled.div`\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 8px;\n\tmargin-top: 8px;\n\tpadding: 12px;\n\tfont-size: 12px;\n\tline-height: 16px;\n\tcolor: ${COLORS.content.negative};\n\tbackground: ${COLORS.background.negative.light};\n\tborder: 1px solid ${COLORS.stroke.negative.lightAlt};\n\tborder-radius: 4px;\n\tword-break: break-word;\n\n\tsvg {\n\t\tflex-shrink: 0;\n\t}\n\n\tstrong {\n\t\tfont-weight: 600;\n\t}\n`;\n"],"names":["BikEditorShell","styled","minHeight","maxHeight","tightParagraphs","COLORS","jsonMode","css","BikJsonHeader","BikJsonBody","$error","BASE_COLORS","BikJsonEmptyState","BikJsonError"],"mappings":"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"}