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

@bikdotai/bik-component-library 0.0.861 → 0.0.862

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

Files changed (81) hide show

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

@@ -1,11 +1,11 @@
-import i, { css as o } from "styled-components";
-import { BodyCaption as r, BodySecondary as h, BodyPrimary as n } from "../TypographyStyle.js";
+import i, { css as n } from "styled-components";
+import { BodyCaption as r, BodySecondary as d, BodyPrimary as a } from "../TypographyStyle.js";
 import { COLORS as e } from "../../constants/Theme.js";
-const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e.stroke.brand : s ? e.stroke.negative.vibrant : e.stroke.primary, x = (t) => t.hideBorder ? 0 : t.version === "2.0" ? 0.5 : 1, p = i.div`
+const s = ({ isActive: t, isInvalid: h, hightlightInputColor: o }) => t ? o || e.stroke.brand : h ? e.stroke.negative.vibrant : e.stroke.primary, x = (t) => t.hideBorder ? 0 : t.version === "2.0" ? 0.5 : 1, p = i.div`
 	border-radius: ${(t) => t.version === "2.0" ? 8 : 4}px;
 	background: ${(t) => ["disabled", "read-only", "disabled-invalid"].includes(t.state) ? e.background.base : "#fff"};
 	border: ${(t) => x(t)}px solid
-		${(t) => d({
+		${(t) => s({
   isActive: t.isActive,
   isInvalid: t.isInvalid,
   hightlightInputColor: t.hightlightInputColor
@@ -20,9 +20,22 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 	gap: 8px;
 	overflow: hidden;
-	${(t) => t.state === "read-only" ? "opacity: 0.7" : ""};
+	${(t) => t.state === "read-only" && !t.solidDisabled ? "opacity: 0.7" : ""};
 	${(t) => t.state === "read-only" ? "pointer-events: none" : ""};
-`, v = i.div`
+	${(t) => t.solidDisabled && ["disabled", "read-only", "disabled-invalid"].includes(t.state) ? n`
+					input,
+					textarea {
+						color: ${e.content.secondary};
+						-webkit-text-fill-color: ${e.content.secondary};
+						opacity: 1;
+						&::placeholder {
+							color: ${e.content.secondary};
+							-webkit-text-fill-color: ${e.content.secondary};
+							opacity: 1;
+						}
+					}
+			  ` : ""};
+`, u = i.div`
 	min-height: ${(t) => t.iconSize};
 	min-width: ${(t) => t.iconSize};
 	display: flex;
@@ -30,7 +43,7 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 	justify-content: center;
 	overflow: hidden;
 	${(t) => t.isLeft ? `margin-left:${t.variant && ["small", "x-small"].includes(t.variant) ? "0px" : "8px"}` : `margin-right: ${t.variant && ["small", "x-small"].includes(t.variant) ? "0px" : "8px"}`};
-`, a = o`
+`, l = n`
 	flex-grow: 1;
 	overflow: hidden;
 	height: 100%;
@@ -67,8 +80,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		min-height: 100px;
 		resize: none;
 	}
-`, u = i(n)`
-	${a};
+`, v = i(a)`
+	${l};
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
 	${(t) => t.autoGrow && t.minHeight && `
@@ -78,8 +91,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		max-height: ${t.maxHeight || "100px"};
 	}
 	`}
-`, f = i(h)`
-	${a};
+`, $ = i(d)`
+	${l};
 	input {
 		min-height: 20px;
 		&::-webkit-outer-spin-button,
@@ -89,8 +102,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		}
 	}
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
-`, $ = i(r)`
-	${a};
+`, f = i(r)`
+	${l};
 	input {
 		min-height: 16px;
 		&::-webkit-outer-spin-button,
@@ -118,10 +131,10 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		color: ${e.content.negative};
 		padding-left: 4px;
 	}
-`, w = i(h)`
+`, y = i(d)`
 	color: ${e.content.secondary} !important;
 	margin-top: ${(t) => t.position === "BOTTOM" ? "8px" : "0px"};
-`, y = i(r)`
+`, w = i(r)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${(t) => t.invalid ? e.content.negative : e.content.secondary} !important;
@@ -138,8 +151,8 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 `, k = i.div`
 	${(t) => t.width ? `width: ${t.width}` : ""};
 	${(t) => t.height && t.type == "multiline" ? `height: ${t.height}` : ""};
-	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? o`
-					opacity: 0.5;
+	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? n`
+					opacity: ${t.solidDisabled ? 1 : 0.5};
 					pointer-events: none;
 			  ` : ""};
 	display: flex;
@@ -156,26 +169,26 @@ const d = ({ isActive: t, isInvalid: s, hightlightInputColor: l }) => t ? l || e
 		align-items: center;
 		justify-content: space-between;
 	}
-`, I = i(n)`
+`, I = i(a)`
 	overflow: unset;
 	margin-left: ${(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"};
-`, C = i(n)`
+`, C = i(a)`
 	overflow: unset;
 	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"};
 `;
 export {
-  v as IconHolder,
-  u as InputContainer,
-  f as InputContainerSmall,
-  $ as InputContainerXSmall,
-  y as InputFooter,
+  u as IconHolder,
+  v as InputContainer,
+  $ as InputContainerSmall,
+  f as InputContainerXSmall,
+  w as InputFooter,
   b as InputHeader,
   p as InputWrapper,
-  w as MaxCharStyle,
+  y as MaxCharStyle,
   I as PrefixHolder,
   k as RootContainer,
   C as SuffixHolder

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.styled.js","sources":["../../../../src/components/input/Input.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { InputStateI, InputTypeI, InputVariant } from './Input.model';\n\nconst getBorderColor = ({ isActive, isInvalid, hightlightInputColor }) => {\n\tif (isActive) {\n\t\treturn hightlightInputColor ? hightlightInputColor : COLORS.stroke.brand;\n\t} else if (isInvalid) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\treturn COLORS.stroke.primary;\n};\n\nconst getBorderWidth = (props: {\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thideBorder?: boolean;\n}) => {\n\treturn props.hideBorder ? 0 : props.version === '2.0' ? 0.5 : 1;\n};\n\nexport const InputWrapper = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tisActive?: boolean;\n\tisInvalid?: boolean;\n\tstate?: InputStateI;\n\tvariant?: InputVariant;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\thightlightInputColor?: string;\n\thideBorder?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) => (props.state === 'read-only' ? 'opacity: 0.7' : '')};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: 0.5;\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","IconHolder","inputCss","css","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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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\tsolidDisabled?: boolean;\n}>`\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 4)}px;\n\tbackground: ${(props) =>\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? COLORS.background.base\n\t\t\t: '#fff'};\n\tborder: ${(props) => getBorderWidth(props)}px solid\n\t\t${(props) =>\n\t\t\tgetBorderColor({\n\t\t\t\tisActive: props.isActive,\n\t\t\t\tisInvalid: props.isInvalid,\n\t\t\t\thightlightInputColor: props.hightlightInputColor,\n\t\t\t})};\n\t${(props) =>\n\t\tprops.isActive\n\t\t\t? `box-shadow: inset 0px 0px 0px 1px ${\n\t\t\t\t\tprops.hightlightInputColor\n\t\t\t\t\t\t? props.hightlightInputColor\n\t\t\t\t\t\t: COLORS.stroke.brand\n\t\t\t };`\n\t\t\t: ''};\n\tpadding: ${(props) => (props.variant === 'small' ? '6px' : '8px')};\n\theight: ${(props) => props.height \|\| '100%'};\n\t${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? 'max-height: 44px'\n\t\t\t: 'min-height: 48px'};\n\tdisplay: flex;\n\talign-items: center;\n\tbox-sizing: border-box;\n\tgap: 8px;\n\toverflow: hidden;\n\n\t${(props) =>\n\t\tprops.state === 'read-only' && !props.solidDisabled ? 'opacity: 0.7' : ''};\n\t${(props) => (props.state === 'read-only' ? 'pointer-events: none' : '')};\n\t${(props) =>\n\t\tprops.solidDisabled &&\n\t\t['disabled', 'read-only', 'disabled-invalid'].includes(props.state!)\n\t\t\t? css`\n\t\t\t\t\tinput,\n\t\t\t\t\ttextarea {\n\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t&::placeholder {\n\t\t\t\t\t\t\tcolor: ${COLORS.content.secondary};\n\t\t\t\t\t\t\t-webkit-text-fill-color: ${COLORS.content.secondary};\n\t\t\t\t\t\t\topacity: 1;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t `\n\t\t\t: ''};\n`;\n\nexport const IconHolder = styled.div<{\n\tisLeft?: boolean;\n\ticonSize?: string;\n\tvariant?: InputVariant;\n}>`\n\tmin-height: ${(props) => props.iconSize};\n\tmin-width: ${(props) => props.iconSize};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\toverflow: hidden;\n\t${(props) =>\n\t\tprops.isLeft\n\t\t\t? `margin-left:${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`\n\t\t\t: `margin-right: ${\n\t\t\t\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t\t\t\t? '0px'\n\t\t\t\t\t\t: '8px'\n\t\t\t }`};\n`;\n\nconst inputCss = css`\n\tflex-grow: 1;\n\toverflow: hidden;\n\theight: 100%;\n\n\tinput,\n\ttextarea {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tborder: none;\n\t\tmin-height: 24px;\n\t\toutline: none;\n\t\tfont-size: inherit;\n\t\tline-height: inherit;\n\t\tfont-weight: inherit;\n\t\tpadding: 0px;\n\t\tmargin: 0px;\n\t\tbackground: transparent;\n\t\t&::placeholder {\n\t\t\tfont-family: Inter;\n\t\t\tcolor: ${COLORS.content.placeholder};\n\t\t}\n\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\ttextarea {\n\t\theight: 100%;\n\t\tfont-family: Inter;\n\t\tmin-height: 100px;\n\t\tresize: none;\n\t}\n`;\n\nexport const InputContainer = styled(BodyPrimary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n\tautoGrow?: boolean;\n\tminHeight?: string;\n\tmaxHeight?: string;\n}>`\n\t${inputCss};\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n\n\t${(props) =>\n\t\tprops.autoGrow &&\n\t\tprops.minHeight &&\n\t\t`\n\ttextarea {\n\t\theight: ${props.minHeight};\n\t\tmin-height: ${props.minHeight};\n\t\tmax-height: ${props.maxHeight \|\| '100px'};\n\t}\n\t`}\n`;\n\nexport const InputContainerSmall = styled(BodySecondary)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 20px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputContainerXSmall = styled(BodyCaption)<{\n\theight?: string;\n\ttype?: InputTypeI;\n}>`\n\t${inputCss};\n\tinput {\n\t\tmin-height: 16px;\n\t\t&::-webkit-outer-spin-button,\n\t\t&::-webkit-inner-spin-button {\n\t\t\t-webkit-appearance: none;\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\t${(props) =>\n\t\tprops.height && props.type !== 'multiline' ? { height: props.height } : {}};\n`;\n\nexport const InputHeader = styled.div<{\n\tinvalid?: boolean;\n\tmaxCharAlignment?: boolean;\n}>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\t${(props) => (props.maxCharAlignment ? 'align-items: flex-end;' : '')}\n\tmargin-bottom: 8px;\n\t.label__container {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 2px;\n\t\t> div:first-of-type {\n\t\t\t${(props) =>\n\t\t\t\tprops.invalid ? `color: ${COLORS.content.negative} !important` : ''};\n\t\t}\n\t}\n\n\tspan {\n\t\tcolor: ${COLORS.content.negative};\n\t\tpadding-left: 4px;\n\t}\n`;\n\nexport const MaxCharStyle = styled(BodySecondary)<{ position?: string }>`\n\tcolor: ${COLORS.content.secondary} !important;\n\tmargin-top: ${(props) => (props.position === 'BOTTOM' ? '8px' : '0px')};\n`;\n\nexport const InputFooter = styled(BodyCaption)<{ invalid?: boolean }>`\n\twhite-space: pre-wrap;\n\tmargin-top: 8px;\n\tcolor: ${(props) =>\n\t\tprops.invalid\n\t\t\t? COLORS.content.negative\n\t\t\t: COLORS.content.secondary} !important;\n\t/* position: absolute; /\n\t/ left: 0px;\n\ttop: 100%; */\n\tdisplay: flex !important;\n\tgap: 6px;\n\tmin-height: 16px;\n\t> svg {\n\t\twidth: 16px;\n\t\theight: 16px;\n\t}\n`;\n\nexport const RootContainer = styled.div<{\n\twidth?: string;\n\theight?: string;\n\tstate?: InputStateI;\n\ttype: InputTypeI;\n\tsolidDisabled?: boolean;\n}>`\n\t${(props) => (props.width ? `width: ${props.width}` : '')};\n\t${(props) =>\n\t\tprops.height && props.type == 'multiline' ? `height: ${props.height}` : ''};\n\t${(props) =>\n\t\tprops.state === 'disabled' \|\| props.state === 'disabled-invalid'\n\t\t\t? css`\n\t\t\t\t\topacity: ${props.solidDisabled ? 1 : 0.5};\n\t\t\t\t\tpointer-events: none;\n\t\t\t `\n\t\t\t: ''};\n\tdisplay: flex;\n\tflex-direction: column-reverse;\n\tposition: relative;\n\t.truncate-class {\n\t\tmax-width: 180px;\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t}\n\t.flex-align-center {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n`;\n\nexport const PrefixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-left: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n\nexport const SuffixHolder = styled(BodyPrimary)<{ variant?: InputVariant }>`\n\toverflow: unset;\n\tmargin-right: ${(props) =>\n\t\tprops.variant && ['small', 'x-small'].includes(props.variant)\n\t\t\t? ''\n\t\t\t: '16px'};\n\tfont-size: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '12px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '14px'\n\t\t\t: '16px'};\n\tline-height: ${(props) =>\n\t\tprops.variant === 'x-small'\n\t\t\t? '16px'\n\t\t\t: props.variant === 'small'\n\t\t\t? '20px'\n\t\t\t: '24px'};\n`;\n"],"names":["getBorderColor","isActive","isInvalid","hightlightInputColor","COLORS","getBorderWidth","props","InputWrapper","styled","css","IconHolder","inputCss","InputContainer","BodyPrimary","InputContainerSmall","BodySecondary","InputContainerXSmall","BodyCaption","InputHeader","MaxCharStyle","InputFooter","RootContainer","PrefixHolder","SuffixHolder"],"mappings":"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"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer ~~selected~~={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer ~~selected~~={selected}>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":";;;;;AAaO,MAAMA,IAAqC,CAACC,MAAU;AAC5D,QAAM;AAAA,IACL,MAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,iBAAAC;AAAA,EAAA,~~IACGV~~,GACE,~~CAACW~~,GAAYC,CAAa,IAAIC,~~EAASX~~,KAAcD,EAAK,CAAC,EAAE,GAAG,GAChE,EAAE,~~UAAAa~~,MAAaC;AAErB,EAAAC,EAAU,MAAM;AACf,~~IAAIX~~,KAAeA,~~MAAgBM~~,KAClCC,~~EAAcP~~,CAAW;AAAA,EAE3B,GAAG,CAACA,~~GAAaM~~,CAAU,CAAC;AAE5B,QAAMM,~~IAAkBjB~~,EAAM,~~iBACxBkB~~,~~IACLlB~~,EAAM,~~qBAAqBc~~,EAAS,WAAW,OAC1CK,~~IAAYnB~~,EAAM,~~aAAac~~,EAAS,QAAQ;AAEtD,SACC,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,~~OAAOX~~,KAAmB,CAAA;AAAA,MAC1B,~~SAASO~~;AAAA,MACT,~~aAAWjB~~,EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,QAAAC,EAAK,IAAI,~~CAACqB~~,GAAKC,MACf,gBAAAC;AAAA,UAACC;AAAA,UAAA;AAAA,YACA,~~iBAAiBzB~~,EAAM;AAAA,YACvB,~~mBAAAkB~~;AAAA,YACA,WAAAC;AAAA,YAEA,KAAAG;AAAA,YACA,YAAAX;AAAA,YACA,~~oBAAAP~~;AAAA,YACA,~~eAAekB~~,EAAI;AAAA,YACnB,~~MAAAd~~;AAAA,YACA,eAAe,~~CAACkB~~,MAAW;AAC1B,cAAAd,EAAcc,CAAM,~~GAChBvB~~,KACHA,~~EAAcuB~~,CAAgB;AAAA,YAEhC;AAAA,YACA,~~WAAAjB~~;AAAA,YACA,~~eAAec~~,KAAS;AAAA,YACxB,eAAeA,~~KAAStB~~,EAAK,SAAS;AAAA,YACtC,~~cAAcqB~~,EAAI,gBAAgB;AAAA,UAAA;AAAA,~~UAf7BA~~,EAAI;AAAA,QAAA,~~CAiBV~~;AAAA,~~QACAhB~~,~~uBAAmBqB~~,GAAA,EAAS;AAAA,QAC7B,gBAAAH,EAACI,KAAgB,~~UAAArB~~,EAAA,CAAe;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGnC,~~GAEakB~~,IAAoD,~~CAACzB~~,MAAU;AAC3E,QAAM;AAAA,IACL,~~KAAAsB~~;AAAA,IACA,YAAAX;AAAA,IACA,eAAAC;AAAA,IACA,~~oBAAAR~~;AAAA,IACA,~~eAAAyB~~;AAAA,IACA,cAAAC,IAAe;AAAA,IACf,~~MAAAtB~~,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,~~eAAAsB~~;AAAA,IACA,eAAAC;AAAA,EAAA,~~IACGhC~~,~~GACEiC~~,IAAWX,EAAI,QAAQX,GACvB,EAAE,UAAAG,MAAaC,GAEfmB,IAAYC,EAAY,OACtB;AAAA,IACN,~~GAAG/B~~;AAAA,IACH,cAAcJ,EAAM,~~YACjB+B~~,IACC,oBACAC,IACA,oBACA,KACD;AAAA,EAAA,IAGF,CAAA,CAAE;AAEL,SACC,gBAAAZ;AAAA,IAACgB;AAAA,IAAA;AAAA,MACA,OAAOF,EAAA;AAAA,MACP,UAAAD;AAAA,MACA,~~iBAAiBjC~~,EAAM;AAAA,MACvB,SAAS,~~MAAMY~~,~~EAAcZ~~,EAAM,IAAI,GAAG;AAAA,MAC1C,mBAAmBA,EAAM;AAAA,MACzB,WAAAS;AAAA,MACA,aAAWT,EAAM,WAAW;AAAA,MAE3B,UAAA;AAAA,~~QAAA6B~~,KAAiBC,MAAiB,UAClC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,UACCI,IAAWnB,EAAS,WAAW,QAAQA,EAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,QAI1DQ,EAAI,kBAAkB,UAAaA,EAAI,kBAAkB,QACzD,gBAAAE,~~EAACa~~,~~KAAwB~~,UAAAJ,~~GACxB~~,UAAA,~~gBAAAT~~;AAAA,~~UAACc~~;AAAA,~~UAAA~~;AAAA,~~YACA~~,SAAShB,GAAK,iBAAiB;AAAA,~~YAC~~/B,OAAM;AAAA,~~YACN~~,MAAMA,EAAI;AAAA,~~YACV~~,SAAQ;AAAA,~~YACR~~,OAAOR,EAAS,QAAQ;AAAA,~~UAAA~~;AAAA,~~QAAA~~,~~GAE1B~~;AAAA,~~QAED~~,gBAAAU;AAAA,UAACe;AAAA,UAAA;AAAA,YACA,~~OACC/B~~,MAAS,UACN,EAAE,UAAU,IAAI,WAAW,UAAU,YAAY,IAAA,IACjD;AAAA,YAEJ,WAAWR,EAAM;AAAA,YACjB,mBAAmBA,EAAM;AAAA,YACzB,~~UAAAiC~~;AAAA,YAEC,UAAAX,EAAI;AAAA,UAAA;AAAA,QAAA;AAAA,QAELA,EAAI,mBAAmB,UAAaA,EAAI,mBAAmB,QAC3D,gBAAAE,~~EAACa~~,~~KAAwB~~,UAAAJ,~~GACxB~~,UAAA,~~gBAAAT~~;AAAA,~~UAACc~~;AAAA,~~UAAA~~;AAAA,~~YACA~~,SAAShB,GAAK,kBAAkB;AAAA,~~YAChC~~,OAAM;AAAA,~~YACN~~,MAAMA,EAAI;AAAA,~~YACV~~,SAAQ;AAAA,~~YACR~~,OAAOR,EAAS,QAAQ;AAAA,~~UAAA~~;AAAA,~~QAAA~~,~~GAE1B~~;AAAA,~~QAEAe~~,KAAiBC,MAAiB,WAClC,gBAAAN;AAAA,UAACK;AAAA,UAAA;AAAA,YACA,UACCI,IAAWnB,EAAS,WAAW,QAAQA,EAAS,QAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,MAE1D;AAAA,IAAA;AAAA,EAAA;AAIJ;~~AAEAf~~,EAAK,cAAc;~~AAEnB0B~~,EAAiB,cAAc;"}
1	+ {"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t\tselectedNumberBackground,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab \|\| tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tuniformBorder={!!gap}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tselectedNumberBackground={selectedNumberBackground}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\tuniformBorder={props.uniformBorder}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tdata-test=\"tab-count-badge\"\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tdata-test=\"tab-count-badge\"\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t\tbackgroundColor={\n\t\t\t\t\t\t\tselected\n\t\t\t\t\t\t\t\t? props.selectedNumberBackground\n\t\t\t\t\t\t\t\t: props.selectedNumberBackground\n\t\t\t\t\t\t\t\t? colorsV2.content.secondary\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","selectedNumberBackground","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}

package/dist/esm/components/tabs/Tabs.model.d.ts CHANGED Viewed

@@ -5,6 +5,7 @@ export interface TabItemProps {
     selected: boolean;
     selectedTextColor: string;
     isSquared?: boolean;
+    uniformBorder?: boolean;
 }
 export interface TabItemTextProps {
     selected: boolean;
@@ -41,10 +42,14 @@ export interface TabViewHeaderProps {
     size?: 'small' | 'default';
     isSquared?: boolean;
     containerStyles?: React.CSSProperties;
+    gap?: number;
+    /** Overrides the background of the leading/trailing number badge on the selected tab. */
+    selectedNumberBackground?: string;
     'data-test'?: string;
 }
 export interface TabItemComponentProps {
     hasEqualSpacing?: boolean;
+    uniformBorder?: boolean;
     tab: TabInterface;
     currentTab: string;
     setCurrentTab: (tabKey: string) => void;
@@ -60,4 +65,6 @@ export interface TabItemComponentProps {
     isLastElement?: boolean;
     'data-test'?: string;
     iconPosition?: 'left' | 'right';
+    /** Overrides the background of the leading/trailing number badge on the selected tab. */
+    selectedNumberBackground?: string;
 }

package/dist/esm/components/tabs/Tabs.styles.d.ts CHANGED Viewed

@@ -1,10 +1,12 @@
 import { TabItemProps, TabItemTextProps } from './Tabs.model';
 export declare const TabHeader: import('styled-components').StyledComponent<"div", any, {
     bgColor?: string | undefined;
+    tabGap?: number | undefined;
 }, never>;
 export declare const TabItem: import('styled-components').StyledComponent<"div", any, TabItemProps, never>;
 export declare const TrailingNumberContainer: import('styled-components').StyledComponent<"div", any, {
     selected: boolean;
+    selectedBackground?: string | undefined;
 }, never>;
 export declare const TabItemText: import('styled-components').StyledComponent<"div", any, {
     numberOfLines?: number | undefined;

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

@@ -1,11 +1,25 @@
 import t from "styled-components";
 import { DEFAULT_THEME as o } from "../../constants/Theme.js";
 import { ButtonLarge as r } from "../TypographyStyle.js";
-const n = t.div`
+const c = t.div`
 	display: flex;
 	flex-direction: row;
 	background-color: ${(e) => e.bgColor};
-`, l = t.div`
+	${(e) => e.tabGap ? `
+		gap: ${e.tabGap}px;
+		position: relative;
+		&::after {
+			content: '';
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			height: 1px;
+			background: ${o.colorsV2.background.inactive};
+			z-index: -1;
+		}
+	` : ""}
+`, a = t.div`
 	display: flex;
 	flex-direction: row;
 	column-gap: 8px;
@@ -14,8 +28,8 @@ const n = t.div`
 	align-items: center;
 	justify-content: center;
 	width: ${(e) => e.hasEqualSpacing ? "50%" : "auto"};
-	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : o.colorsV2.background.inactive};
-	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected ? "2px" : "1px"};
+	border-bottom-color: ${(e) => e.isSquared ? "" : e.selected ? e.selectedTextColor : e.uniformBorder ? "transparent" : o.colorsV2.background.inactive};
+	border-bottom-width: ${(e) => e.isSquared ? "" : e.selected || e.uniformBorder ? "2px" : "1px"};
 	border-bottom-style: ${(e) => e.isSquared ? "" : "solid"};
 	border: ${(e) => e.isSquared ? e.selected ? `1px solid ${e.selectedTextColor}` : `1px solid ${o.colorsV2.background.inactive}` : ""};
 	flex-direction: row;
@@ -25,7 +39,7 @@ const n = t.div`
 		background-color: rgba(0, 0, 0, 0.03);
 	}
 	background-color: ${(e) => e.isSquared && e.selected ? `${o.colorsV2.background.brandLight}` : ""};
-`, a = t.div`
+`, l = t.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
@@ -33,7 +47,7 @@ const n = t.div`
 	justify-content: center;
 	min-width: 20px;
 	height: 20px;
-	background: ${(e) => e.selected ? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
+	background: ${(e) => e.selected ? e.selectedBackground ?? o.colorsV2.background.inverseLight : o.colorsV2.content.secondary};
 	color: ${o.colorsV2.content.primaryInverse};
 	border-radius: 10px;
 `, s = t(r)`
@@ -49,9 +63,9 @@ const n = t.div`
 export {
   x as EmptyTab,
   b as RightComponent,
-  n as TabHeader,
-  l as TabItem,
+  c as TabHeader,
+  a as TabItem,
   s as TabItemText,
-  a as TrailingNumberContainer
+  l as TrailingNumberContainer
 };
 //# sourceMappingURL=Tabs.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '2px' : '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","~~TabItem~~","~~DEFAULT_THEME~~","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,~~GAGhCC~~,~~IAAUF~~,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,~~oBACNE~~,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,~~CAACF~~,MACvBA,EAAM,~~YAAY~~,~~KAAKA~~,EAAM,~~WAAW~~,~~QAAQ~~,KAAK;AAAA,~~wBAC/B~~,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,~~aAAaE~~,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,~~CAACF~~,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,~~GAAGE~~,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,~~GAGMC~~,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~eAU~~/B,CAACC,MACdA,EAAM,~~WACHE~~,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,~~GAI1CE~~,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,~~4BAEHG~~,EAAc,SAAS,WAAW,QAAQ;AAAA,~~GAGzDK~~,IAAiBR,EAAO;AAAA;AAAA;AAAA,~~4BAGTG~~,EAAc,SAAS,WAAW,QAAQ;AAAA;"}
1	+ {"version":3,"file":"Tabs.styles.js","sources":["../../../../src/components/tabs/Tabs.styles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { ButtonLarge } from '../TypographyStyle';\nimport { TabItemProps, TabItemTextProps } from './Tabs.model';\n\nexport const TabHeader = styled.div<{ bgColor?: string; tabGap?: number }>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tbackground-color: ${(props) => props.bgColor};\n\t${(props) =>\n\t\tprops.tabGap\n\t\t\t? `\n\t\tgap: ${props.tabGap}px;\n\t\tposition: relative;\n\t\t&::after {\n\t\t\tcontent: '';\n\t\t\tposition: absolute;\n\t\t\tbottom: 0;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\theight: 1px;\n\t\t\tbackground: ${DEFAULT_THEME.colorsV2.background.inactive};\n\t\t\tz-index: -1;\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const TabItem = styled.div<TabItemProps>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 8px;\n\tpadding: ${(props) => (props.isSquared ? '8px 24px' : '14px 24px 12px 24px')};\n\tpadding-bottom: ${(props) =>\n\t\tprops.isSquared ? '' : props.selected ? '12px' : '13px'};\n\talign-items: center;\n\tjustify-content: center;\n\twidth: ${(props) => (props.hasEqualSpacing ? '50%' : 'auto')};\n\tborder-bottom-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected\n\t\t\t? props.selectedTextColor\n\t\t\t: props.uniformBorder\n\t\t\t? 'transparent'\n\t\t\t: DEFAULT_THEME.colorsV2.background.inactive};\n\tborder-bottom-width: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? ''\n\t\t\t: props.selected \|\| props.uniformBorder\n\t\t\t? '2px'\n\t\t\t: '1px'};\n\tborder-bottom-style: ${(props) => (props.isSquared ? '' : 'solid')};\n\tborder: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `1px solid ${props.selectedTextColor}`\n\t\t\t\t: `1px solid ${DEFAULT_THEME.colorsV2.background.inactive}`\n\t\t\t: ''};\n\tflex-direction: row;\n\tcursor: pointer;\n\tmin-width: ${(props) => (props.isSquared ? '120px' : '')};\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t}\n\tbackground-color: ${(props) =>\n\t\tprops.isSquared\n\t\t\t? props.selected\n\t\t\t\t? `${DEFAULT_THEME.colorsV2.background.brandLight}`\n\t\t\t\t: ''\n\t\t\t: ''};\n`;\n\nexport const TrailingNumberContainer = styled.div<{\n\tselected: boolean;\n\tselectedBackground?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tjustify-content: center;\n\tmin-width: 20px;\n\theight: 20px;\n\tbackground: ${(props) =>\n\t\tprops.selected\n\t\t\t? props.selectedBackground ??\n\t\t\t DEFAULT_THEME.colorsV2.background.inverseLight\n\t\t\t: DEFAULT_THEME.colorsV2.content.secondary};\n\tcolor: ${DEFAULT_THEME.colorsV2.content.primaryInverse};\n\tborder-radius: 10px;\n`;\n\nexport const TabItemText = styled(ButtonLarge)<TabItemTextProps>`\n\tcolor: ${(props) =>\n\t\tprops.selected ? props.selectedTextColor : props.textColor};\n`;\n\nexport const EmptyTab = styled.div`\n\tflex-grow: 1;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n\nexport const RightComponent = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tborder-bottom: 1px solid ${DEFAULT_THEME.colorsV2.background.inactive};\n`;\n"],"names":["TabHeader","styled","props","DEFAULT_THEME","TabItem","TrailingNumberContainer","TabItemText","ButtonLarge","EmptyTab","RightComponent"],"mappings":";;;AAKO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA,qBAGX,CAACC,MAAUA,EAAM,OAAO;AAAA,GAC1C,CAACA,MACFA,EAAM,SACH;AAAA,SACIA,EAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASJC,EAAc,SAAS,WAAW,QAAQ;AAAA;AAAA;AAAA,KAItD,EAAE;AAAA,GAGMC,IAAUH,EAAO;AAAA;AAAA;AAAA;AAAA,YAIlB,CAACC,MAAWA,EAAM,YAAY,aAAa,qBAAsB;AAAA,mBAC1D,CAACA,MAClBA,EAAM,YAAY,KAAKA,EAAM,WAAW,SAAS,MAAM;AAAA;AAAA;AAAA,UAG/C,CAACA,MAAWA,EAAM,kBAAkB,QAAQ,MAAO;AAAA,wBACrC,CAACA,MACvBA,EAAM,YACH,KACAA,EAAM,WACNA,EAAM,oBACNA,EAAM,gBACN,gBACAC,EAAc,SAAS,WAAW,QAAQ;AAAA,wBACvB,CAACD,MACvBA,EAAM,YACH,KACAA,EAAM,YAAYA,EAAM,gBACxB,QACA,KAAK;AAAA,wBACc,CAACA,MAAWA,EAAM,YAAY,KAAK,OAAQ;AAAA,WACxD,CAACA,MACVA,EAAM,YACHA,EAAM,WACL,aAAaA,EAAM,iBAAiB,KACpC,aAAaC,EAAc,SAAS,WAAW,QAAQ,KACxD,EAAE;AAAA;AAAA;AAAA,cAGO,CAACD,MAAWA,EAAM,YAAY,UAAU,EAAG;AAAA;AAAA;AAAA;AAAA,qBAIpC,CAACA,MACpBA,EAAM,aACHA,EAAM,WACL,GAAGC,EAAc,SAAS,WAAW,UAAU,KAEhD,EAAE;AAAA,GAGME,IAA0BJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW/B,CAACC,MACdA,EAAM,WACHA,EAAM,sBACNC,EAAc,SAAS,WAAW,eAClCA,EAAc,SAAS,QAAQ,SAAS;AAAA,UACnCA,EAAc,SAAS,QAAQ,cAAc;AAAA;AAAA,GAI1CG,IAAcL,EAAOM,CAAW;AAAA,UACnC,CAACL,MACTA,EAAM,WAAWA,EAAM,oBAAoBA,EAAM,SAAS;AAAA,GAG/CM,IAAWP,EAAO;AAAA;AAAA,4BAEHE,EAAc,SAAS,WAAW,QAAQ;AAAA,GAGzDM,IAAiBR,EAAO;AAAA;AAAA;AAAA,4BAGTE,EAAc,SAAS,WAAW,QAAQ;AAAA;"}