@bikdotai/bik-component-library 0.0.833 → 0.0.834

package/dist/esm/components/input/Input.styled.d.ts

@@ -6,7 +6,7 @@ export declare const InputWrapper: import('styled-components').StyledComponent<"
     isInvalid?: boolean | undefined;
     state?: InputStateI | undefined;
     variant?: InputVariant | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     hightlightInputColor?: string | undefined;
     hideBorder?: boolean | undefined;
 }, never>;
@@ -33,6 +33,13 @@ export declare const InputContainerSmall: import('styled-components').StyledComp
     height?: string | undefined;
     type?: InputTypeI | undefined;
 }, never>;
+export declare const InputContainerXSmall: import('styled-components').StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+} & {
+    height?: string | undefined;
+    type?: InputTypeI | undefined;
+}, never>;
 export declare const InputHeader: import('styled-components').StyledComponent<"div", any, {
     invalid?: boolean | undefined;
     maxCharAlignment?: boolean | undefined;

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

@@ -1,7 +1,7 @@
-import i, { css as l } from "styled-components";
-import { BodyCaption as s, BodySecondary as o, BodyPrimary as n } 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 d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || 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
@@ -30,7 +30,7 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || 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"}`};
-`, r = l`
+`, a = o`
 	flex-grow: 1;
 	overflow: hidden;
 	height: 100%;
@@ -67,8 +67,8 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 		min-height: 100px;
 		resize: none;
 	}
-`, f = i(n)`
-	${r};
+`, u = i(n)`
+	${a};
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
 
 	${(t) => t.autoGrow && t.minHeight && `
@@ -78,8 +78,8 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 		max-height: ${t.maxHeight || "100px"};
 	}
 	`}
-`, u = i(o)`
-	${r};
+`, f = i(h)`
+	${a};
 	input {
 		min-height: 20px;
 		&::-webkit-outer-spin-button,
@@ -89,7 +89,18 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 		}
 	}
 	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
-`, $ = i.div`
+`, $ = i(r)`
+	${a};
+	input {
+		min-height: 16px;
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+	}
+	${(t) => t.height && t.type !== "multiline" ? { height: t.height } : {}};
+`, b = i.div`
 	display: flex;
 	justify-content: space-between;
 	${(t) => t.maxCharAlignment ? "align-items: flex-end;" : ""}
@@ -107,10 +118,10 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 		color: ${e.content.negative};
 		padding-left: 4px;
 	}
-`, b = i(o)`
+`, w = i(h)`
 	color: ${e.content.secondary} !important;
 	margin-top: ${(t) => t.position === "BOTTOM" ? "8px" : "0px"};
-`, y = i(s)`
+`, y = i(r)`
 	white-space: pre-wrap;
 	margin-top: 8px;
 	color: ${(t) => t.invalid ? e.content.negative : e.content.secondary} !important;
@@ -124,10 +135,10 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 		width: 16px;
 		height: 16px;
 	}
-`, w = i.div`
+`, 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" ? l`
+	${(t) => t.state === "disabled" || t.state === "disabled-invalid" ? o`
 					opacity: 0.5;
 					pointer-events: none;
 			  ` : ""};
@@ -145,12 +156,12 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 		align-items: center;
 		justify-content: space-between;
 	}
-`, k = i(n)`
+`, 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"};
-`, I = i(n)`
+`, 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"};
@@ -158,14 +169,15 @@ const d = ({ isActive: t, isInvalid: h, hightlightInputColor: a }) => t ? a || e
 `;
 export {
   v as IconHolder,
-  f as InputContainer,
-  u as InputContainerSmall,
+  u as InputContainer,
+  f as InputContainerSmall,
+  $ as InputContainerXSmall,
   y as InputFooter,
-  $ as InputHeader,
+  b as InputHeader,
   p as InputWrapper,
-  b as MaxCharStyle,
-  k as PrefixHolder,
-  w as RootContainer,
-  I as SuffixHolder
+  w as MaxCharStyle,
+  I as PrefixHolder,
+  k as RootContainer,
+  C as SuffixHolder
 };
 //# sourceMappingURL=Input.styled.js.map

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';\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';\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 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","InputHeader","MaxCharStyle","InputFooter","BodyCaption","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/list-item/List.model.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type Variant = 'default' | 'selected' | 'inactive' | 'error' | 'readonly' | 'placeholder' | 'separator';
+export type Variant = 'default' | 'selected' | 'focused' | 'inactive' | 'error' | 'readonly' | 'placeholder' | 'separator';
 export interface ListItemElement {
     label: string;
     value: string;
@@ -14,5 +14,6 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
     borderBottom?: string;
     customComponent?: JSX.Element;
     customListItemLabel?: JSX.Element;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
+    brandSelectedRow?: boolean;
 }

package/dist/esm/components/list-item/ListItem.js

@@ -1,34 +1,36 @@
-import { jsx as e, Fragment as l, jsxs as s } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { getColor as v } from "./themes.js";
-import { BodySecondary as L, BodyCaption as g } from "../TypographyStyle.js";
-import { COLORS as m } from "../../constants/Theme.js";
-import { ListItem as C } from "./ListItem.styled.js";
-const O = w(
+import { jsx as e, Fragment as o, jsxs as s } from "react/jsx-runtime";
+import { forwardRef as L } from "react";
+import { getColor as g } from "./themes.js";
+import { BodySecondary as C, BodyCaption as O } from "../TypographyStyle.js";
+import { COLORS as y } from "../../constants/Theme.js";
+import { ListItem as j } from "./ListItem.styled.js";
+const k = L(
   ({
     id: a,
-    onSelect: o,
+    onSelect: t,
     variant: r = "default",
-    trailingIcon: t,
-    leadingIcon: d,
-    subText: c,
-    listItem: i,
-    borderBottom: y,
-    customComponent: f,
-    customListItemLabel: n,
-    version: p,
-    ...h
-  }, x) => /* @__PURE__ */ e(
-    C,
+    trailingIcon: d,
+    leadingIcon: f,
+    subText: p,
+    listItem: l,
+    borderBottom: h,
+    customComponent: c,
+    customListItemLabel: m,
+    version: i,
+    brandSelectedRow: n,
+    ...x
+  }, w) => /* @__PURE__ */ e(
+    j,
     {
-      ref: x,
+      ref: w,
       id: a,
       variant: r,
-      onClick: () => o && o(i),
-      borderBottom: y,
-      version: p,
-      ...h,
-      children: f ? /* @__PURE__ */ e(l, { children: f }) : /* @__PURE__ */ s(
+      onClick: () => t && t(l),
+      borderBottom: h,
+      version: i,
+      brandSelectedRow: n,
+      ...x,
+      children: c ? /* @__PURE__ */ e(o, { children: c }) : /* @__PURE__ */ s(
         "div",
         {
           style: {
@@ -38,7 +40,7 @@ const O = w(
             width: "100%"
           },
           children: [
-            !!d && d,
+            !!f && f,
             /* @__PURE__ */ s(
               "div",
               {
@@ -49,39 +51,39 @@ const O = w(
                   overflow: "hidden"
                 },
                 children: [
-                  n ? /* @__PURE__ */ e(l, { children: n }) : /* @__PURE__ */ e(l, { children: !!i && /* @__PURE__ */ e(
-                    L,
+                  m ? /* @__PURE__ */ e(o, { children: m }) : /* @__PURE__ */ e(o, { children: !!l && /* @__PURE__ */ e(
+                    C,
                     {
                       style: {
-                        fontSize: `${p === "2.0" ? 12 : 14}px`,
-                        color: v(r),
+                        fontSize: `${i === "2.0" || i === "3.0" ? 12 : 14}px`,
+                        color: g(r, i, n),
                         textOverflow: "ellipsis",
                         display: "block"
                       },
-                      children: i.label
+                      children: l.label
                     }
                   ) }),
-                  !!c && /* @__PURE__ */ e(
-                    g,
+                  !!p && /* @__PURE__ */ e(
+                    O,
                     {
                       style: {
-                        color: r === "inactive" ? m.content.inactive : m.text.secondary
+                        color: r === "inactive" ? y.content.inactive : y.text.secondary
                       },
-                      children: c
+                      children: p
                     }
                   )
                 ]
               }
             ),
-            !!t && /* @__PURE__ */ e("div", { style: { display: "flex", marginLeft: "auto" }, children: t })
+            !!d && /* @__PURE__ */ e("div", { style: { display: "flex", marginLeft: "auto" }, children: d })
           ]
         }
       )
     }
   )
 );
-O.displayName = "ListItem";
+k.displayName = "ListItem";
 export {
-  O as ListItem
+  k as ListItem
 };
 //# sourceMappingURL=ListItem.js.map

package/dist/esm/components/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${version === '2.0' ? 12 : 14}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tvariant === 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":";;;;;;AAOO,MAAMA,IAAWC;AAAA,EACvB,CACC;AAAA,IACC,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,KAAAF;AAAA,MACA,IAAAZ;AAAA,MACA,SAAAE;AAAA,MACA,SAAS,MAAMD,KAAYA,EAASK,CAAQ;AAAA,MAC5C,cAAAC;AAAA,MACA,SAAAG;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAH,IACA,gBAAAK,EAAAE,GAAA,EAAG,UAAAP,EAAA,CAAgB,IAEnB,gBAAAQ;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,UAGP,UAAA;AAAA,YAAA,CAAC,CAACZ,KAAeA;AAAA,YAClB,gBAAAY;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,eAAe;AAAA,kBACf,UAAU;AAAA,gBAAA;AAAA,gBAGV,UAAA;AAAA,kBAAAP,2BACG,UAAAA,EAAA,CAAoB,IAEvB,gBAAAI,EAAAE,GAAA,EACE,UAAA,CAAC,CAACT,KACF,gBAAAO;AAAA,oBAACI;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,UAAU,GAAGP,MAAY,QAAQ,KAAK,EAAE;AAAA,wBACxC,OAAOQ,EAAShB,CAAO;AAAA,wBACvB,cAAc;AAAA,wBACd,SAAS;AAAA,sBAAA;AAAA,sBAGT,UAAAI,EAAS;AAAA,oBAAA;AAAA,kBAAA,GAGb;AAAA,kBAGA,CAAC,CAACD,KACF,gBAAAQ;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,OACCjB,MAAY,aACTkB,EAAO,QAAQ,WACfA,EAAO,KAAK;AAAA,sBAAA;AAAA,sBAGhB,UAAAf;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,CAAC,CAACF,KACF,gBAAAU,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UACzC,UAAAV,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAAA;AAKL;AAEAL,EAAS,cAAc;"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list-item/ListItem.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { getColor } from '@src/components/list-item/themes';\nimport { BodyCaption, BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { ListItemProps } from './List.model';\nimport * as Sc from './ListItem.styled';\n\nexport const ListItem = forwardRef<HTMLDivElement, ListItemProps>(\n\t(\n\t\t{\n\t\t\tid,\n\t\t\tonSelect,\n\t\t\tvariant = 'default',\n\t\t\ttrailingIcon,\n\t\t\tleadingIcon,\n\t\t\tsubText,\n\t\t\tlistItem,\n\t\t\tborderBottom,\n\t\t\tcustomComponent,\n\t\t\tcustomListItemLabel,\n\t\t\tversion,\n\t\t\tbrandSelectedRow,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<Sc.ListItem\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tvariant={variant}\n\t\t\t\tonClick={() => onSelect && onSelect(listItem)}\n\t\t\t\tborderBottom={borderBottom}\n\t\t\t\tversion={version}\n\t\t\t\tbrandSelectedRow={brandSelectedRow}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{customComponent ? (\n\t\t\t\t\t<>{customComponent}</>\n\t\t\t\t) : (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\tgap: 8,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{!!leadingIcon && leadingIcon}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\trowGap: '4px',\n\t\t\t\t\t\t\t\tflexDirection: 'column',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customListItemLabel ? (\n\t\t\t\t\t\t\t\t<>{customListItemLabel}</>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t{!!listItem && (\n\t\t\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tfontSize: `${\n\t\t\t\t\t\t\t\t\t\t\t\t\tversion === '2.0' || version === '3.0' ? 12 : 14\n\t\t\t\t\t\t\t\t\t\t\t\t}px`,\n\t\t\t\t\t\t\t\t\t\t\t\tcolor: getColor(variant, version, brandSelectedRow),\n\t\t\t\t\t\t\t\t\t\t\t\ttextOverflow: 'ellipsis',\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'block',\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{listItem.label}\n\t\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t{!!subText && (\n\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\t\t\t\t\tvariant === 'inactive'\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{subText}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{!!trailingIcon && (\n\t\t\t\t\t\t\t<div style={{ display: 'flex', marginLeft: 'auto' }}>\n\t\t\t\t\t\t\t\t{trailingIcon}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</Sc.ListItem>\n\t\t);\n\t},\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["ListItem","forwardRef","id","onSelect","variant","trailingIcon","leadingIcon","subText","listItem","borderBottom","customComponent","customListItemLabel","version","brandSelectedRow","rest","ref","jsx","Sc.ListItem","Fragment","jsxs","BodySecondary","getColor","BodyCaption","COLORS"],"mappings":";;;;;;AAOO,MAAMA,IAAWC;AAAA,EACvB,CACC;AAAA,IACC,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,qBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACA,KAAAF;AAAA,MACA,IAAAb;AAAA,MACA,SAAAE;AAAA,MACA,SAAS,MAAMD,KAAYA,EAASK,CAAQ;AAAA,MAC5C,cAAAC;AAAA,MACA,SAAAG;AAAA,MACA,kBAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAJ,IACA,gBAAAM,EAAAE,GAAA,EAAG,UAAAR,EAAA,CAAgB,IAEnB,gBAAAS;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,SAAS;AAAA,YACT,YAAY;AAAA,YACZ,KAAK;AAAA,YACL,OAAO;AAAA,UAAA;AAAA,UAGP,UAAA;AAAA,YAAA,CAAC,CAACb,KAAeA;AAAA,YAClB,gBAAAa;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,eAAe;AAAA,kBACf,UAAU;AAAA,gBAAA;AAAA,gBAGV,UAAA;AAAA,kBAAAR,2BACG,UAAAA,EAAA,CAAoB,IAEvB,gBAAAK,EAAAE,GAAA,EACE,UAAA,CAAC,CAACV,KACF,gBAAAQ;AAAA,oBAACI;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,UAAU,GACTR,MAAY,SAASA,MAAY,QAAQ,KAAK,EAC/C;AAAA,wBACA,OAAOS,EAASjB,GAASQ,GAASC,CAAgB;AAAA,wBAClD,cAAc;AAAA,wBACd,SAAS;AAAA,sBAAA;AAAA,sBAGT,UAAAL,EAAS;AAAA,oBAAA;AAAA,kBAAA,GAGb;AAAA,kBAGA,CAAC,CAACD,KACF,gBAAAS;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACA,OAAO;AAAA,wBACN,OACClB,MAAY,aACTmB,EAAO,QAAQ,WACfA,EAAO,KAAK;AAAA,sBAAA;AAAA,sBAGhB,UAAAhB;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,YAGD,CAAC,CAACF,KACF,gBAAAW,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,UACzC,UAAAX,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEF;AAAA,EAAA;AAKL;AAEAL,EAAS,cAAc;"}

package/dist/esm/components/list-item/ListItem.styled.d.ts

@@ -2,5 +2,6 @@ import { Variant } from './List.model';
 export declare const ListItem: import('styled-components').StyledComponent<"div", any, {
     variant: Variant;
     borderBottom?: string | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+    brandSelectedRow?: boolean | undefined;
 }, never>;

package/dist/esm/components/list-item/ListItem.styled.js

@@ -1,17 +1,17 @@
 import t from "styled-components";
-import { COLORS as o } from "../../constants/Theme.js";
-import { getTheme as e } from "./themes.js";
-const s = t.div`
-	border-bottom: ${(r) => r.borderBottom || `${r.version === "2.0" ? 0 : 1}px solid ${o.stroke.primary}`};
+import { COLORS as r } from "../../constants/Theme.js";
+import { getTheme as o } from "./themes.js";
+const m = t.div`
+	border-bottom: ${(e) => e.borderBottom || `${e.version === "2.0" || e.version === "3.0" ? 0 : 1}px solid ${r.stroke.primary}`};
 	display: flex;
 	align-items: center;
 	justify-content: start;
 	column-gap: 12px;
-	padding: ${(r) => r.version === "2.0" ? "8px 12px" : "12px 16px"};
-	${(r) => e(r.variant, r.version)};
-	border-radius: ${(r) => r.version === "2.0" ? 8 : 0}px;
+	padding: ${(e) => e.version === "2.0" ? "8px 12px" : "12px 16px"};
+	${(e) => o(e.variant, e.version, e.brandSelectedRow)};
+	border-radius: ${(e) => e.brandSelectedRow ? 0 : e.version === "2.0" ? 8 : 0}px;
 `;
 export {
-  s as ListItem
+  m as ListItem
 };
 //# sourceMappingURL=ListItem.styled.js.map

package/dist/esm/components/list-item/ListItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0';\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' ? 0 : 1}px solid ${COLORS.stroke.primary}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version)};\n\tborder-radius: ${(props) => (props.version === '2.0' ? 8 : 0)}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":";;;AAKO,MAAMA,IAAWC,EAAO;AAAA,kBAKb,CAACC,MACjBA,EAAM,gBACN,GAAGA,EAAM,YAAY,QAAQ,IAAI,CAAC,YAAYC,EAAO,OAAO,OAAO,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAK3D,CAACD,MAAWA,EAAM,YAAY,QAAQ,aAAa,WAAY;AAAA,GACxE,CAACA,MAAUE,EAASF,EAAM,SAASA,EAAM,OAAO,CAAC;AAAA,kBAClC,CAACA,MAAWA,EAAM,YAAY,QAAQ,IAAI,CAAE;AAAA;"}
+{"version":3,"file":"ListItem.styled.js","sources":["../../../../src/components/list-item/ListItem.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\nimport { getTheme } from './themes';\n\nexport const ListItem = styled.div<{\n\tvariant: Variant;\n\tborderBottom?: string;\n\tversion?: '1.0' | '2.0' | '3.0';\n\tbrandSelectedRow?: boolean;\n}>`\n\tborder-bottom: ${(props) =>\n\t\tprops.borderBottom ||\n\t\t`${props.version === '2.0' || props.version === '3.0' ? 0 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t}`};\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 12px;\n\tpadding: ${(props) => (props.version === '2.0' ? '8px 12px' : '12px 16px')};\n\t${(props) => getTheme(props.variant, props.version, props.brandSelectedRow)};\n\tborder-radius: ${(props) =>\n\t\tprops.brandSelectedRow ? 0 : props.version === '2.0' ? 8 : 0}px;\n`;\n"],"names":["ListItem","styled","props","COLORS","getTheme"],"mappings":";;;AAKO,MAAMA,IAAWC,EAAO;AAAA,kBAMb,CAACC,MACjBA,EAAM,gBACN,GAAGA,EAAM,YAAY,SAASA,EAAM,YAAY,QAAQ,IAAI,CAAC,YAC5DC,EAAO,OAAO,OACf,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKQ,CAACD,MAAWA,EAAM,YAAY,QAAQ,aAAa,WAAY;AAAA,GACxE,CAACA,MAAUE,EAASF,EAAM,SAASA,EAAM,SAASA,EAAM,gBAAgB,CAAC;AAAA,kBAC1D,CAACA,MACjBA,EAAM,mBAAmB,IAAIA,EAAM,YAAY,QAAQ,IAAI,CAAC;AAAA;"}

package/dist/esm/components/list-item/themes.d.ts

@@ -1,3 +1,3 @@
 import { Variant } from './List.model';
-export declare function getColor(variant: Variant): string;
-export declare function getTheme(variant: Variant, version?: '1.0' | '2.0'): import('styled-components').FlattenSimpleInterpolation;
+export declare function getColor(variant: Variant, version?: '1.0' | '2.0' | '3.0', brandSelectedRow?: boolean): string;
+export declare function getTheme(variant: Variant, version?: '1.0' | '2.0' | '3.0', brandSelectedRow?: boolean): import('styled-components').FlattenSimpleInterpolation;

package/dist/esm/components/list-item/themes.js

@@ -1,12 +1,12 @@
 import { css as e } from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-function n(o) {
+function u(o, t, c) {
   switch (o) {
     case "default":
     case "readonly":
       return `${r.text.primary}`;
     case "selected":
-      return `${r.content.positive}`;
+      return t === "3.0" || c ? `${r.text.primary}` : `${r.content.positive}`;
     case "inactive":
       return `${r.content.inactive}`;
     case "error":
@@ -17,7 +17,15 @@ function n(o) {
       return `${r.text.primary}`;
   }
 }
-function u(o, t) {
+function d(o, t, c) {
+  if (c && o === "selected")
+    return e`
+			color: ${r.text.primary};
+			background: ${r.background.brandLight};
+			&:hover {
+				background: ${r.background.brandLight};
+			}
+		`;
   switch (o) {
     case "default":
       return e`
@@ -28,8 +36,23 @@ function u(o, t) {
 					background-color: ${r.surface.hovered};
 				}
 			`;
-    case "selected":
+    case "focused":
       return e`
+				cursor: pointer;
+				color: ${r.text.primary};
+				background-color: ${r.surface.hovered};
+				&:hover {
+					background-color: ${r.surface.hovered};
+				}
+			`;
+    case "selected":
+      return t === "3.0" ? e`
+					color: ${r.text.primary};
+					background: ${r.background.brandLight};
+					&:hover {
+						background: ${r.background.brandLight};
+					}
+				` : e`
 				color: ${r.content.positive};
 				background: ${r.background.positive.light};
 				box-shadow: ${t === "2.0" ? "0" : "0 2px 8px rgba(0, 0, 0, 0.12)"};
@@ -62,7 +85,7 @@ function u(o, t) {
   }
 }
 export {
-  n as getColor,
-  u as getTheme
+  u as getColor,
+  d as getTheme
 };
 //# sourceMappingURL=themes.js.map

package/dist/esm/components/list-item/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(variant: Variant) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(variant: Variant, version?: '1.0' | '2.0') {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","COLORS","getTheme","version","css"],"mappings":";;AAIO,SAASA,EAASC,GAAkB;AAC1C,UAAQA,GAAA;AAAA,IACP,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,GAAGC,EAAO,KAAK,OAAO;AAAA,IAC9B,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,WAAW;AAAA,IACrC;AACC,aAAO,GAAGA,EAAO,KAAK,OAAO;AAAA,EAAA;AAEhC;AAEO,SAASC,EAASF,GAAkBG,GAAyB;AACnE,UAAQH,GAAA;AAAA,IACP,KAAK;AACJ,aAAOI;AAAA;AAAA,aAEGH,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAOG;AAAA,aACGH,EAAO,QAAQ,QAAQ;AAAA,kBAClBA,EAAO,WAAW,SAAS,KAAK;AAAA,kBAChCE,MAAY,QACvB,MACA,+BAA+B;AAAA;AAAA,IAEpC,KAAK;AACJ,aAAOC;AAAA,aACGH,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAOG;AAAA,aACGH,EAAO,KAAK,OAAO;AAAA;AAAA,IAE9B,KAAK;AACJ,aAAOG;AAAA,aACGH,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,IAI5C;AACC,aAAOG;AAAA,aACGH,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAAA;AAI/C;"}
+{"version":3,"file":"themes.js","sources":["../../../../src/components/list-item/themes.tsx"],"sourcesContent":["import { css } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport type { Variant } from './List.model';\n\nexport function getColor(\n\tvariant: Variant,\n\tversion?: '1.0' | '2.0' | '3.0',\n\tbrandSelectedRow?: boolean,\n) {\n\tswitch (variant) {\n\t\tcase 'default':\n\t\tcase 'readonly':\n\t\t\treturn `${COLORS.text.primary}`;\n\t\tcase 'selected':\n\t\t\tif (version === '3.0' || brandSelectedRow)\n\t\t\t\treturn `${COLORS.text.primary}`;\n\t\t\treturn `${COLORS.content.positive}`;\n\t\tcase 'inactive':\n\t\t\treturn `${COLORS.content.inactive}`;\n\t\tcase 'error':\n\t\t\treturn `${COLORS.content.negative}`;\n\t\tcase 'placeholder':\n\t\t\treturn `${COLORS.content.placeholder}`;\n\t\tdefault:\n\t\t\treturn `${COLORS.text.primary}`;\n\t}\n}\n\nexport function getTheme(\n\tvariant: Variant,\n\tversion?: '1.0' | '2.0' | '3.0',\n\tbrandSelectedRow?: boolean,\n) {\n\tif (brandSelectedRow && variant === 'selected') {\n\t\treturn css`\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t&:hover {\n\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t}\n\t\t`;\n\t}\n\tswitch (variant) {\n\t\tcase 'default':\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'focused':\n\t\t\t// Keyboard-navigation highlight: use the hover background, not brand.\n\t\t\treturn css`\n\t\t\t\tcursor: pointer;\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t\tcase 'selected':\n\t\t\tif (version === '3.0') {\n\t\t\t\treturn css`\n\t\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t&:hover {\n\t\t\t\t\t\tbackground: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t`;\n\t\t\t}\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.positive};\n\t\t\t\tbackground: ${COLORS.background.positive.light};\n\t\t\t\tbox-shadow: ${version === '2.0'\n\t\t\t\t\t? '0'\n\t\t\t\t\t: '0 2px 8px rgba(0, 0, 0, 0.12)'};\n\t\t\t`;\n\t\tcase 'inactive':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\tcursor: not-allowed;\n\t\t\t`;\n\t\tcase 'readonly':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t`;\n\t\tcase 'separator':\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.content.inactive};\n\t\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\t\tcursor: none;\n\t\t\t\tpadding: 8px 16px;\n\t\t\t`;\n\t\tdefault:\n\t\t\treturn css`\n\t\t\t\tcolor: ${COLORS.text.primary};\n\t\t\t\tbackground-color: ${COLORS.surface.standard};\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t\t\t}\n\t\t\t`;\n\t}\n}\n"],"names":["getColor","variant","version","brandSelectedRow","COLORS","getTheme","css"],"mappings":";;AAIO,SAASA,EACfC,GACAC,GACAC,GACC;AACD,UAAQF,GAAA;AAAA,IACP,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,GAAGG,EAAO,KAAK,OAAO;AAAA,IAC9B,KAAK;AACJ,aAAIF,MAAY,SAASC,IACjB,GAAGC,EAAO,KAAK,OAAO,KACvB,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,QAAQ;AAAA,IAClC,KAAK;AACJ,aAAO,GAAGA,EAAO,QAAQ,WAAW;AAAA,IACrC;AACC,aAAO,GAAGA,EAAO,KAAK,OAAO;AAAA,EAAA;AAEhC;AAEO,SAASC,EACfJ,GACAC,GACAC,GACC;AACD,MAAIA,KAAoBF,MAAY;AACnC,WAAOK;AAAA,YACGF,EAAO,KAAK,OAAO;AAAA,iBACdA,EAAO,WAAW,UAAU;AAAA;AAAA,kBAE3BA,EAAO,WAAW,UAAU;AAAA;AAAA;AAI7C,UAAQH,GAAA;AAAA,IACP,KAAK;AACJ,aAAOK;AAAA;AAAA,aAEGF,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,IAG7C,KAAK;AAEJ,aAAOE;AAAA;AAAA,aAEGF,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,OAAO;AAAA;AAAA,yBAErBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAIF,MAAY,QACRI;AAAA,cACGF,EAAO,KAAK,OAAO;AAAA,mBACdA,EAAO,WAAW,UAAU;AAAA;AAAA,oBAE3BA,EAAO,WAAW,UAAU;AAAA;AAAA,QAItCE;AAAA,aACGF,EAAO,QAAQ,QAAQ;AAAA,kBAClBA,EAAO,WAAW,SAAS,KAAK;AAAA,kBAChCF,MAAY,QACvB,MACA,+BAA+B;AAAA;AAAA,IAEpC,KAAK;AACJ,aAAOI;AAAA,aACGF,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA,IAG7C,KAAK;AACJ,aAAOE;AAAA,aACGF,EAAO,KAAK,OAAO;AAAA;AAAA,IAE9B,KAAK;AACJ,aAAOE;AAAA,aACGF,EAAO,QAAQ,QAAQ;AAAA,wBACZA,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,IAI5C;AACC,aAAOE;AAAA,aACGF,EAAO,KAAK,OAAO;AAAA,wBACRA,EAAO,QAAQ,QAAQ;AAAA;AAAA,yBAEtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAAA;AAI/C;"}

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.d.ts

@@ -10,4 +10,5 @@ export declare const GroupedMenuList: React.FC<{
     hideGroupLabel?: boolean;
     currentLevel: number;
     renderNestedMenu: RenderNestedMenu;
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js

@@ -1,46 +1,48 @@
-import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { COLORS as x } from "../../constants/Theme.js";
-import { BodyTiny as a } from "../TypographyStyle.js";
-import { MenuItem as f } from "./MenuItem.js";
-import { GroupedMenuListContainer as h } from "./MultiLevelDropdown.styled.js";
-const G = ({
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+import { COLORS as a } from "../../constants/Theme.js";
+import { BodyTiny as f } from "../TypographyStyle.js";
+import { MenuItem as h } from "./MenuItem.js";
+import { GroupedMenuListContainer as y } from "./MultiLevelDropdown.styled.js";
+const O = ({
   width: e,
-  onDropdownItemClick: t,
+  onDropdownItemClick: p,
   option: o,
-  parents: p,
-  allowParentSelection: n,
-  maxLevels: i,
-  hideGroupLabel: m,
-  currentLevel: d,
-  renderNestedMenu: l
-}) => /* @__PURE__ */ c(h, { children: [
-  !m && /* @__PURE__ */ r(
-    a,
+  parents: n,
+  allowParentSelection: i,
+  maxLevels: m,
+  hideGroupLabel: d,
+  currentLevel: l,
+  renderNestedMenu: s,
+  version: r
+}) => /* @__PURE__ */ x(y, { version: r, children: [
+  !d && /* @__PURE__ */ t(
+    f,
     {
       style: {
         padding: "4px 8px 4px 12px",
         cursor: "default"
       },
-      color: x.content.placeholder,
+      color: a.content.placeholder,
       children: o.label
     }
   ),
-  o.options.map((s, u) => /* @__PURE__ */ r(
-    f,
+  o.options.map((u, c) => /* @__PURE__ */ t(
+    h,
     {
       width: e,
-      onDropdownItemClick: t,
-      option: s,
-      parents: p,
-      allowParentSelection: n,
-      maxLevels: i,
-      currentLevel: d,
-      renderNestedMenu: l
+      onDropdownItemClick: p,
+      option: u,
+      parents: n,
+      allowParentSelection: i,
+      maxLevels: m,
+      currentLevel: l,
+      renderNestedMenu: s,
+      version: r
     },
-    u
+    c
   ))
 ] });
 export {
-  G as GroupedMenuList
+  O as GroupedMenuList
 };
 //# sourceMappingURL=GroupedMenuList.js.map

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":";;;;;AAWO,MAAMA,IAaR,CAAC;AAAA,EACL,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AACD,wBAEGC,GAAA,EACC,UAAA;AAAA,EAAA,CAACH,KACD,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAET,OAAOC,EAAO,QAAQ;AAAA,MAErB,UAAAV,EAAO;AAAA,IAAA;AAAA,EAAA;AAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,GAAQW,MAC5B,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MAEA,OAAAd;AAAA,MACA,qBAAAC;AAAA,MACA,QAAQC;AAAAA,MACR,SAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAAE;AAAA,MACA,kBAAAC;AAAA,IAAA;AAAA,IARKK;AAAA,EAAA,CAUN;AAAA,GACF;"}
+{"version":3,"file":"GroupedMenuList.js","sources":["../../../../src/components/multi-level-dropdown/GroupedMenuList.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny } from '../TypographyStyle';\nimport { MenuItem } from './MenuItem';\nimport { GroupedMenuListContainer } from './MultiLevelDropdown.styled';\nimport {\n\tGroupedOption,\n\tMultiLevelDropdownOption,\n\tRenderNestedMenu,\n} from './type';\n\nexport const GroupedMenuList: React.FC<{\n\twidth: string;\n\tonDropdownItemClick?: (\n\t\toption: MultiLevelDropdownOption,\n\t\tparents: MultiLevelDropdownOption[],\n\t) => void;\n\toption: GroupedOption;\n\tparents: MultiLevelDropdownOption[];\n\tallowParentSelection?: boolean;\n\tmaxLevels?: number;\n\thideGroupLabel?: boolean;\n\tcurrentLevel: number;\n\trenderNestedMenu: RenderNestedMenu;\n\tversion?: '1.0' | '2.0' | '3.0';\n}> = ({\n\twidth,\n\tonDropdownItemClick,\n\toption,\n\tparents,\n\tallowParentSelection,\n\tmaxLevels,\n\thideGroupLabel,\n\tcurrentLevel,\n\trenderNestedMenu,\n\tversion,\n}) => {\n\treturn (\n\t\t<GroupedMenuListContainer version={version}>\n\t\t\t{!hideGroupLabel && (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tpadding: '4px 8px 4px 12px',\n\t\t\t\t\t\tcursor: 'default',\n\t\t\t\t\t}}\n\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t>\n\t\t\t\t\t{option.label}\n\t\t\t\t</BodyTiny>\n\t\t\t)}\n\t\t\t{option.options.map((option, index) => (\n\t\t\t\t<MenuItem\n\t\t\t\t\tkey={index}\n\t\t\t\t\twidth={width}\n\t\t\t\t\tonDropdownItemClick={onDropdownItemClick}\n\t\t\t\t\toption={option}\n\t\t\t\t\tparents={parents}\n\t\t\t\t\tallowParentSelection={allowParentSelection}\n\t\t\t\t\tmaxLevels={maxLevels}\n\t\t\t\t\tcurrentLevel={currentLevel}\n\t\t\t\t\trenderNestedMenu={renderNestedMenu}\n\t\t\t\t\tversion={version}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</GroupedMenuListContainer>\n\t);\n};\n"],"names":["GroupedMenuList","width","onDropdownItemClick","option","parents","allowParentSelection","maxLevels","hideGroupLabel","currentLevel","renderNestedMenu","version","jsxs","GroupedMenuListContainer","jsx","BodyTiny","COLORS","index","MenuItem"],"mappings":";;;;;AAWO,MAAMA,IAcR,CAAC;AAAA,EACL,OAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,SAAAC;AACD,MAEE,gBAAAC,EAACC,KAAyB,SAAAF,GACxB,UAAA;AAAA,EAAA,CAACH,KACD,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MAAA;AAAA,MAET,OAAOC,EAAO,QAAQ;AAAA,MAErB,UAAAZ,EAAO;AAAA,IAAA;AAAA,EAAA;AAAA,EAGTA,EAAO,QAAQ,IAAI,CAACA,GAAQa,MAC5B,gBAAAH;AAAA,IAACI;AAAA,IAAA;AAAA,MAEA,OAAAhB;AAAA,MACA,qBAAAC;AAAA,MACA,QAAQC;AAAAA,MACR,SAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAAE;AAAA,MACA,kBAAAC;AAAA,MACA,SAAAC;AAAA,IAAA;AAAA,IATKM;AAAA,EAAA,CAWN;AAAA,GACF;"}

package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts

@@ -9,4 +9,5 @@ export declare const MenuItem: React.FC<{
     maxLevels?: number;
     currentLevel: number;
     renderNestedMenu: RenderNestedMenu;
+    version?: '1.0' | '2.0' | '3.0';
 }>;