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

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

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

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

@@ -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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"}
+{"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/esm/components/tabs/Tabs.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/tabs/Tabs.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { Tag } from '../tag';\nimport { TabItemComponentProps, TabViewHeaderProps } from './Tabs.model';\nimport {\n\tEmptyTab,\n\tRightComponent,\n\tTabHeader,\n\tTabItem,\n\tTabItemText,\n\tTrailingNumberContainer,\n} from './Tabs.styles';\n\nexport const Tabs: React.FC<TabViewHeaderProps> = (props) => {\n\tconst {\n\t\ttabs,\n\t\tinitialTab,\n\t\tonTabSelected,\n\t\tTabItemStyledProps,\n\t\tselectedTab,\n\t\textendedBorder,\n\t\trightComponent,\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tcontainerStyles,\n\t\tgap,\n\t\tselectedNumberBackground,\n\t} = props;\n\tconst [currentTab, setCurrentTab] = useState(initialTab || tabs[0].key);\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tuseEffect(() => {\n\t\tif (selectedTab && selectedTab !== currentTab) {\n\t\t\tsetCurrentTab(selectedTab);\n\t\t}\n\t}, [selectedTab, currentTab]);\n\n\tconst backgroundColor = props.backgroundColor;\n\tconst selectedTextColor =\n\t\tprops.selectedTextColor ?? colorsV2.background.brand;\n\tconst textColor = props.textColor ?? colorsV2.content.secondary;\n\n\treturn (\n\t\t<TabHeader\n\t\t\tstyle={containerStyles ?? {}}\n\t\t\tbgColor={backgroundColor}\n\t\t\ttabGap={gap}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{tabs.map((tab, index) => (\n\t\t\t\t<TabItemComponent\n\t\t\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\t\t\tuniformBorder={!!gap}\n\t\t\t\t\tselectedTextColor={selectedTextColor}\n\t\t\t\t\ttextColor={textColor}\n\t\t\t\t\tkey={tab.key}\n\t\t\t\t\ttab={tab}\n\t\t\t\t\tcurrentTab={currentTab}\n\t\t\t\t\tTabItemStyledProps={TabItemStyledProps}\n\t\t\t\t\tIconComponent={tab.icon}\n\t\t\t\t\tsize={size}\n\t\t\t\t\tselectedNumberBackground={selectedNumberBackground}\n\t\t\t\t\tsetCurrentTab={(tabKey) => {\n\t\t\t\t\t\tsetCurrentTab(tabKey);\n\t\t\t\t\t\tif (onTabSelected) {\n\t\t\t\t\t\t\tonTabSelected(tabKey as string);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisSquared={isSquared}\n\t\t\t\t\tisFirstlement={index == 0}\n\t\t\t\t\tisLastElement={index == tabs.length - 1}\n\t\t\t\t\ticonPosition={tab.iconPosition ?? 'left'}\n\t\t\t\t/>\n\t\t\t))}\n\t\t\t{extendedBorder && <EmptyTab />}\n\t\t\t<RightComponent>{rightComponent}</RightComponent>\n\t\t</TabHeader>\n\t);\n};\n\nexport const TabItemComponent: React.FC<TabItemComponentProps> = (props) => {\n\tconst {\n\t\ttab,\n\t\tcurrentTab,\n\t\tsetCurrentTab,\n\t\tTabItemStyledProps,\n\t\tIconComponent,\n\t\ticonPosition = 'left',\n\t\tsize = 'default',\n\t\tisSquared = false,\n\t\tisFirstlement,\n\t\tisLastElement,\n\t} = props;\n\tconst selected = tab.key === currentTab;\n\tconst { colorsV2 } = DEFAULT_THEME;\n\n\tconst tabStyles = useCallback(() => {\n\t\treturn {\n\t\t\t...TabItemStyledProps,\n\t\t\tborderRadius: props.isSquared\n\t\t\t\t? isFirstlement\n\t\t\t\t\t? '4px 0px 0px 4px'\n\t\t\t\t\t: isLastElement\n\t\t\t\t\t? '0px 4px 4px 0px'\n\t\t\t\t\t: ''\n\t\t\t\t: '',\n\t\t};\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, []);\n\n\treturn (\n\t\t<TabItem\n\t\t\tstyle={tabStyles()}\n\t\t\tselected={selected}\n\t\t\tuniformBorder={props.uniformBorder}\n\t\t\thasEqualSpacing={props.hasEqualSpacing}\n\t\t\tonClick={() => setCurrentTab(props.tab.key)}\n\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\tisSquared={isSquared}\n\t\t\tdata-test={props['data-test']}\n\t\t>\n\t\t\t{IconComponent && iconPosition === 'left' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t\t{tab.leadingNumber !== undefined && tab.leadingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.leadingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t<TabItemText\n\t\t\t\tstyle={\n\t\t\t\t\tsize === 'small'\n\t\t\t\t\t\t? { fontSize: 14, fontStyle: 'normal', fontWeight: 600 }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\ttextColor={props.textColor}\n\t\t\t\tselectedTextColor={props.selectedTextColor}\n\t\t\t\tselected={selected}\n\t\t\t>\n\t\t\t\t{tab.title}\n\t\t\t</TabItemText>\n\t\t\t{tab.trailingNumber !== undefined && tab.trailingNumber !== null && (\n\t\t\t\t<TrailingNumberContainer\n\t\t\t\t\tselected={selected}\n\t\t\t\t\tselectedBackground={props.selectedNumberBackground}\n\t\t\t\t>\n\t\t\t\t\t<Tag\n\t\t\t\t\t\ttagText={tab?.trailingNumber ?? 0}\n\t\t\t\t\t\ttheme=\"dark\"\n\t\t\t\t\t\ttype={tab.numberTagType}\n\t\t\t\t\t\tvariant=\"circle\"\n\t\t\t\t\t\tcolor={colorsV2.content.primaryInverse}\n\t\t\t\t\t/>\n\t\t\t\t</TrailingNumberContainer>\n\t\t\t)}\n\t\t\t{IconComponent && iconPosition === 'right' && (\n\t\t\t\t<IconComponent\n\t\t\t\t\tselected={\n\t\t\t\t\t\tselected ? colorsV2.background.brand : colorsV2.content.secondary\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</TabItem>\n\t);\n};\n\nTabs.displayName = 'Tabs';\n\nTabItemComponent.displayName = 'TabItemComponent';\n"],"names":["Tabs","props","tabs","initialTab","onTabSelected","TabItemStyledProps","selectedTab","extendedBorder","rightComponent","size","isSquared","containerStyles","gap","selectedNumberBackground","currentTab","setCurrentTab","useState","colorsV2","DEFAULT_THEME","useEffect","backgroundColor","selectedTextColor","textColor","jsxs","TabHeader","tab","index","jsx","TabItemComponent","tabKey","EmptyTab","RightComponent","IconComponent","iconPosition","isFirstlement","isLastElement","selected","tabStyles","useCallback","TabItem","TrailingNumberContainer","Tag","TabItemText"],"mappings":"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"}
+{"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/esm/components/tabs/Tabs.model.d.ts

@@ -5,7 +5,6 @@ export interface TabItemProps {
     selected: boolean;
     selectedTextColor: string;
     isSquared?: boolean;
-    uniformBorder?: boolean;
 }
 export interface TabItemTextProps {
     selected: boolean;
@@ -42,14 +41,10 @@ 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;
@@ -65,6 +60,4 @@ 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

@@ -1,12 +1,10 @@
 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

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

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

@@ -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":";;;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;"}
+{"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;"}

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -15,7 +15,6 @@ interface WhatsNewProps {
     iconHeight?: number;
     iconColor?: string;
     iconPadding?: number;
-    buttonSize?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;