@ultraviolet/ui 3.19.1 → 3.20.0

package/dist/components/Pagination/PaginationButtons.js

@@ -2,8 +2,9 @@
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack, init_Stack } from "../Stack/index.js";
 import { Button, init_Button } from "../Button/index.js";
-import { getPageNumbers, init_getPageNumbers } from "./getPageNumbers.js";
 import { init_styles_css, paginationStyle } from "./styles.css.js";
+import { Ellipsis, init_Ellipsis } from "./Ellipsis.js";
+import { getPageNumbers, init_getPageNumbers } from "./getPageNumbers.js";
 import { MakeButton, init_PaginationButton } from "./PaginationButton.js";
 import { useCallback, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,20 +16,23 @@ var PaginationButtons;
 var init_PaginationButtons = __esmMin(() => {
 	init_Button();
 	init_Stack();
+	init_Ellipsis();
 	init_getPageNumbers();
 	init_PaginationButton();
 	init_styles_css();
-	PaginationButtons = ({ page, disabled, onChange, pageCount, pageTabCount, "data-testid": dataTestId, className, perPage }) => {
+	PaginationButtons = ({ page, disabled, onChange, pageCount, pageTabCount, "data-testid": dataTestId, className, hideFirstPage, hideLastPage, size }) => {
 		const goToNextPage = useCallback(() => {
 			onChange(page + 1);
 		}, [onChange, page]);
 		const goToPreviousPage = useCallback(() => {
 			onChange(page - 1);
 		}, [onChange, page]);
-		const pageNumbersToDisplay = useMemo(() => pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount) : [1], [
+		const pageNumbersToDisplay = useMemo(() => pageCount > 1 ? getPageNumbers(page, pageCount, pageTabCount, hideFirstPage, hideLastPage) : [1], [
 			page,
 			pageCount,
-			pageTabCount
+			pageTabCount,
+			hideFirstPage,
+			hideLastPage
 		]);
 		const handlePageClick = useCallback((pageNumber) => () => {
 			onChange(pageNumber);
@@ -45,23 +49,26 @@ var init_PaginationButtons = __esmMin(() => {
 						disabled: page <= 1 || disabled,
 						onClick: goToPreviousPage,
 						sentiment: "primary",
-						size: perPage ? "small" : "medium",
+						size,
 						variant: "outlined",
 						children: /* @__PURE__ */ jsx(ArrowLeftIcon, {})
 					})
 				}),
-				/* @__PURE__ */ jsx(Stack, {
+				/* @__PURE__ */ jsxs(Stack, {
 					className: paginationStyle.pageNumbersContainer,
 					direction: "row",
 					gap: 1,
-					children: pageNumbersToDisplay.map((pageNumber, index) => /* @__PURE__ */ jsx(MakeButton, {
+					children: [pageNumbersToDisplay.map((pageNumber, index) => /* @__PURE__ */ jsx(MakeButton, {
 						disabled,
 						handlePageClick,
-						hasEllipsisBefore: !(index === 0 || pageNumbersToDisplay[index - 1] === pageNumber - 1),
+						hasEllipsisBefore: !(index === 0 || pageNumbersToDisplay[index - 1] === pageNumber - 1) || index === 0 && pageNumber !== 1,
 						page,
 						pageNumber,
-						perPage
-					}, pageNumber))
+						size
+					}, pageNumber)), pageNumbersToDisplay.at(-1) === pageCount ? null : /* @__PURE__ */ jsx(Ellipsis, {
+						disabled,
+						size
+					})]
 				}),
 				/* @__PURE__ */ jsx(Stack, {
 					gap: 1,
@@ -70,7 +77,7 @@ var init_PaginationButtons = __esmMin(() => {
 						disabled: page >= pageCount || disabled,
 						onClick: goToNextPage,
 						sentiment: "primary",
-						size: perPage ? "small" : "medium",
+						size,
 						variant: "outlined",
 						children: /* @__PURE__ */ jsx(ArrowRightIcon, {})
 					})

package/dist/components/Pagination/getPageNumbers.d.ts

@@ -5,5 +5,5 @@
  * @param range The number of pages wanted
  * @returns List of page numbers to display
  */
-export declare const getPageNumbers: (currentPage: number, pageCount: number, range?: number) => number[];
+export declare const getPageNumbers: (currentPage: number, pageCount: number, range?: number, hideFirstPage?: boolean, hideLastPage?: boolean) => number[];
 //# sourceMappingURL=getPageNumbers.d.ts.map

package/dist/components/Pagination/getPageNumbers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPageNumbers.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/getPageNumbers.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,gBAAiB,MAAM,aAAa,MAAM,qBAAc,MAAM,EAmBxF,CAAA"}
+{"version":3,"file":"getPageNumbers.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/getPageNumbers.ts"],"names":[],"mappings":"AACA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,gBACZ,MAAM,aACR,MAAM,kCAED,OAAO,iBACR,OAAO,KACrB,MAAM,EA0BR,CAAA"}

package/dist/components/Pagination/getPageNumbers.js

@@ -4,12 +4,14 @@ import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
 var NUMBER_OF_BUTTONS_IN_BETWEEN, getPageNumbers;
 var init_getPageNumbers = __esmMin(() => {
 	NUMBER_OF_BUTTONS_IN_BETWEEN = 3;
-	getPageNumbers = (currentPage, pageCount, range = 5) => {
+	getPageNumbers = (currentPage, pageCount, range = 5, hideFirstPage, hideLastPage) => {
 		const truncationBefore = currentPage >= range;
 		const truncationAfter = currentPage <= pageCount - range + 1 || currentPage < range;
 		if (pageCount <= range) return Array.from({ length: pageCount }, (_, index) => index + 1);
-		const pagesToShowBeforeTruncation = truncationBefore ? [1] : Array.from({ length: range }, (_, index) => index + 1);
-		const pagesToShowAfterTruncation = truncationAfter ? [pageCount] : Array.from({ length: range }, (_, index) => index + pageCount - range + 1);
+		const firstPage = hideFirstPage ? [] : [1];
+		const lastPage = hideLastPage ? [] : [pageCount];
+		const pagesToShowBeforeTruncation = truncationBefore ? firstPage : Array.from({ length: range }, (_, index) => index + 1);
+		const pagesToShowAfterTruncation = truncationAfter ? lastPage : Array.from({ length: range }, (_, index) => index + pageCount - range + 1);
 		const pagesToShowBetweenTruncation = truncationBefore && truncationAfter ? Array.from({ length: NUMBER_OF_BUTTONS_IN_BETWEEN }, (_, index) => currentPage + index - 1) : [];
 		return [
 			...pagesToShowBeforeTruncation,

package/dist/components/Pagination/index.d.ts

@@ -13,9 +13,11 @@ type PaginationProps = {
     */
     pageCount: number;
     /**
-      How many page button you want to have
+      How many page button you want to have before truncation
     */
     pageTabCount?: number;
+    hideFirstPage?: boolean;
+    hideLastPage?: boolean;
     /**
       Disable all buttons
     */
@@ -48,6 +50,7 @@ type PaginationProps = {
      * Defines the target element for the perPage dropdown menu
      */
     perPagePortalTarget?: HTMLElement;
+    size?: never;
 } | {
     perPage?: never;
     onChangePerPage?: never;
@@ -55,11 +58,12 @@ type PaginationProps = {
     numberOfItemsText?: never;
     numberOfItems?: never;
     perPagePortalTarget?: never;
+    size?: 'small' | 'medium';
 });
 /**
  * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
  * and a list of buttons to go to a specific page.
  */
-export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, 'data-testid': dataTestId, style, }: PaginationProps) => import("react").JSX.Element;
+export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, hideFirstPage, hideLastPage, size, 'data-testid': dataTestId, style, }: PaginationProps) => import("react").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAK1C,KAAK,eAAe,GAAG;IACrB;;MAEE;IACF,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;MAEE;IACF,IAAI,EAAE,MAAM,CAAA;IACZ;;MAEE;IACF,SAAS,EAAE,MAAM,CAAA;IACjB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;MAEE;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,CACA;IACE;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAA;CAClC,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,mBAAmB,CAAC,EAAE,KAAK,CAAA;CAC5B,CACJ,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,sMAepB,eAAe,gCA4CjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Pagination/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAK1C,KAAK,eAAe,GAAG;IACrB;;MAEE;IACF,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;MAEE;IACF,IAAI,EAAE,MAAM,CAAA;IACZ;;MAEE;IACF,SAAS,EAAE,MAAM,CAAA;IACjB;;MAEE;IACF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB;;MAEE;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,GAAG,CACA;IACE;;OAEG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAA;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,WAAW,CAAA;IACjC,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,GACD;IACE,OAAO,CAAC,EAAE,KAAK,CAAA;IACf,eAAe,CAAC,EAAE,KAAK,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,iBAAiB,CAAC,EAAE,KAAK,CAAA;IACzB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,mBAAmB,CAAC,EAAE,KAAK,CAAA;IAC3B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CACJ,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,yOAkBpB,eAAe,gCA8CjB,CAAA"}

package/dist/components/Pagination/index.js

@@ -12,7 +12,7 @@ var init_Pagination = __esmMin(() => {
 	init_Stack();
 	init_PaginationButtons();
 	init_PerPage();
-	Pagination = ({ disabled = false, page, pageCount, onChange, pageTabCount = 5, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, "data-testid": dataTestId, style }) => {
+	Pagination = ({ disabled = false, page, pageCount, onChange, pageTabCount = 5, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, perPagePortalTarget, hideFirstPage, hideLastPage, size = "medium", "data-testid": dataTestId, style }) => {
 		const [perPageComputed, setPerPage] = useState(perPage !== null && perPage !== void 0 ? perPage : 10);
 		useEffect(() => {
 			if (page < 1) onChange(1);
@@ -46,7 +46,9 @@ var init_Pagination = __esmMin(() => {
 				page,
 				pageCount,
 				pageTabCount,
-				perPage: !!perPage
+				size: perPage ? "small" : size,
+				hideFirstPage,
+				hideLastPage
 			})]
 		});
 	};

package/dist/components/PhoneInput/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAA;AAG/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAMtD,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B,CAAA;AAED,KAAK,UAAU,GAAG,OAAO,CACvB,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,YAAY,GACZ,iBAAiB,GACjB,WAAW,GACX,kBAAkB,GAClB,UAAU,GACV,IAAI,GACJ,MAAM,GACN,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,CACb,CACF,GACC,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAE3B,KAAK,eAAe,GAAG,oBAAoB,GAAG;IAC5C,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACtF,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,UAAU,EAAE,MAAM,CAAA;QAClB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;QACtB,KAAK,EAAE,OAAO,CAAA;QACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;QACnB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAC7B,KAAK,IAAI,CAAA;CACX,GAAG,UAAU,CAAA;AAEd,KAAK,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAEpD,eAAO,MAAM,UAAU,EAAE,cAoKxB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PhoneInput/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAA;AAG/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAMtD,KAAK,oBAAoB,GAAG;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAA;CAC5B,CAAA;AAED,KAAK,UAAU,GAAG,OAAO,CACvB,IAAI,CACF,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,YAAY,GACZ,iBAAiB,GACjB,WAAW,GACX,kBAAkB,GAClB,UAAU,GACV,IAAI,GACJ,MAAM,GACN,QAAQ,GACR,SAAS,GACT,aAAa,GACb,UAAU,CACb,CACF,GACC,OAAO,CAAC,gBAAgB,CAAC,CAAA;AAE3B,KAAK,eAAe,GAAG,oBAAoB,GAAG;IAC5C,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;QAAE,KAAK,EAAE,KAAK,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACtF,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;QACtB,UAAU,EAAE,MAAM,CAAA;QAClB,SAAS,EAAE,MAAM,CAAA;QACjB,OAAO,EAAE,MAAM,GAAG,IAAI,CAAA;QACtB,KAAK,EAAE,OAAO,CAAA;QACd,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;QACnB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAA;KAC7B,KAAK,IAAI,CAAA;CACX,GAAG,UAAU,CAAA;AAEd,KAAK,cAAc,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;AAEpD,eAAO,MAAM,UAAU,EAAE,cAmKxB,CAAA"}

package/dist/components/SelectInput/components/Dropdown/Option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/Option.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAG7C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,0EAKvB,kBAAkB,gCAoGpB,CAAA"}
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/Option.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AAG7C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,WAAW,EAAE,MAAM,GAAG,WAAW,CAAA;CAClC,CAAA;AAED,eAAO,MAAM,aAAa,0EAKvB,kBAAkB,gCAuGpB,CAAA"}

package/dist/components/SelectInput/components/Dropdown/Option.js

@@ -27,28 +27,23 @@ var init_Option = __esmMin(() => {
 		if (descriptionDirection === "row" && optionalInfoPlacement === "left") return /* @__PURE__ */ jsx(Tooltip, {
 			disableAnimation: true,
 			text: option.tooltip,
-			children: /* @__PURE__ */ jsx(Stack, {
-				"data-testid": `option-stack-${option.value}`,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				alignItems: optionDescription ? "flex-start" : "center",
+				className: selectInputStyle.dropdownInfoContainer,
 				direction: "row",
+				"data-testid": `option-stack-${option.value}`,
 				gap: .5,
-				justifyContent: "left",
-				children: /* @__PURE__ */ jsxs(Stack, {
-					alignItems: "flex-start",
-					className: selectInputStyle.dropdownInfoContainer,
-					direction: "row",
-					gap: .5,
-					children: [
-						option.optionalInfo,
-						/* @__PURE__ */ jsx(Text, {
-							as: "span",
-							className: selectInputStyle.dropdownInfoTextItem,
-							placement: "left",
-							variant: textVariant,
-							children: option.label
-						}),
-						optionDescription
-					]
-				})
+				children: [
+					option.optionalInfo,
+					/* @__PURE__ */ jsx(Text, {
+						as: "span",
+						className: selectInputStyle.dropdownInfoTextItem,
+						placement: "left",
+						variant: textVariant,
+						children: option.label
+					}),
+					optionDescription
+				]
 			})
 		});
 		if (descriptionDirection === "row" && optionalInfoPlacement === "right") return /* @__PURE__ */ jsx(Tooltip, {

package/dist/components/SelectInput/components/Dropdown/dropdown.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB;;QAY9B,KAAK;YACH,WAAW;;QAEb,KAAK;QACL,MAAM;;EAMV,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAK3B,CAAA;AAEF,eAAO,MAAM,YAAY;;QAoBnB,IAAI;YACF,eAAe;;;;QAIjB,KAAK;QACL,MAAM;QACN,KAAK;YACH,OAAO;;;;;;;;;;;;;;;;;EAkBb,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAAY,CAAA"}
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/Dropdown/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB;;QAY9B,KAAK;YACH,WAAW;;QAEb,KAAK;QACL,MAAM;;EAMV,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAO/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,YAAY;;QAoBnB,IAAI;YACF,eAAe;;;;QAIjB,KAAK;QACL,MAAM;QACN,KAAK;YACH,OAAO;;;;;;;;;;;;;;;;;EAkBb,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA;AAEF,eAAO,MAAM,cAAc,QAWzB,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAAY,CAAA"}

package/dist/components/SelectInput/components/SelectBar/SelectBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/SelectBar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,SAAS,iNAkBZ,cAAc,gCAsNhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/SelectBar.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAcjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,QAAA,MAAM,SAAS,iNAkBZ,cAAc,gCAuNhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/SelectInput/components/SelectBar/SelectBar.js

@@ -161,6 +161,7 @@ var init_SelectBar = __esmMin(() => {
 					prominence: "weak",
 					sentiment: "neutral",
 					variant: textVariant,
+					whiteSpace: "nowrap",
 					children: placeholder
 				}), /* @__PURE__ */ jsxs(Stack, {
 					alignItems: "center",

package/dist/components/SelectInput/components/SelectBar/selectBar.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/selectBar.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AA+BF,eAAO,MAAM,aAAa,QAuCxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;gBAoCZ,SAAS;oBACP,WAAW;;;;;;QAMjB,IAAI;YACF,WAAW;;;;;;;;;gBAUT,SAAS;oBACP,WAAW;;;;;;QAMjB,KAAK;YACH,MAAM;YACN,aAAa;;QAEf,MAAM;YACJ,MAAM;YACN,aAAa;;QAEf,KAAK;YACH,MAAM;YACN,OAAO;YACP,aAAa;;;;QAIf,MAAM;;gBA1IN,+BAA+B;oBAC7B,MAAM;;gBAER,kEAAkE;oBAChE,WAAW;oBACX,SAAS,EAEJ,MAAM;;gBAEb,yEAAyE;oBACvE,OAAO;;gBAET,iEAAiE;oBAC/D,WAAW;oBACX,OAAO;;;;QA6HT,OAAO;;;;;;;;;;;;;;;;;;QACP,OAAO;;;;;;;;;;;;;;;;;;;EAGX,CAAA;AAQF,eAAO,MAAM,aAAa,sCAGxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}
+{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../../src/components/SelectInput/components/SelectBar/selectBar.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,mCASzB,CAAA;AAEF,eAAO,MAAM,WAAW,QAKtB,CAAA;AA+BF,eAAO,MAAM,aAAa,QAuCxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;gBAoCZ,SAAS;oBACP,WAAW;;;;;;QAMjB,IAAI;YACF,WAAW;;;;;;;;;gBAUT,SAAS;oBACP,WAAW;;;;;;QAMjB,KAAK;YACH,MAAM;YACN,aAAa;;QAEf,MAAM;YACJ,MAAM;YACN,aAAa;;QAEf,KAAK;YACH,MAAM;YACN,OAAO;YACP,aAAa;;;;QAIf,MAAM;;gBA1IN,+BAA+B;oBAC7B,MAAM;;gBAER,kEAAkE;oBAChE,WAAW;oBACX,SAAS,EAEJ,MAAM;;gBAEb,yEAAyE;oBACvE,OAAO;;gBAET,iEAAiE;oBAC/D,WAAW;oBACX,OAAO;;;;QA6HT,OAAO;;;;;;;;;;;;;;;;;;QACP,OAAO;;;;;;;;;;;;;;;;;;;EAGX,CAAA;AAQF,eAAO,MAAM,aAAa,sCAGxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}

package/dist/components/Separator/styles.css.d.ts

@@ -155,6 +155,9 @@ export declare const separatorStyle: {
                     [x: string]: {
                         backgroundColor: `var(--${string})`;
                         minHeight: number;
+                    } | {
+                        minHeight?: undefined;
+                        backgroundColor: `var(--${string})`;
                     };
                 };
             };

package/dist/components/Separator/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/styles.css.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAI9D,eAAO,MAAM,kBAAkB,oBAAc,CAAA;AAc7C,QAAA,MAAM,UAAU;;;;;;;;;;QAmBV,MAAM;;;;;;;QACN,IAAI;;;;;;;QACJ,OAAO;YACL,KAAK;;QAEP,OAAO;;;;;;;QACP,SAAS;;;;;;;QACT,OAAO;;;;;;;QACP,OAAO;;;;;;;;EAGX,CAAA;AA2CF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAA;AAE9E,eAAO,MAAM,cAAc;;;;;;;;;;;;YAxDrB,MAAM;;;;;;;YACN,IAAI;;;;;;;YACJ,OAAO;gBACL,KAAK;;YAEP,OAAO;;;;;;;YACP,SAAS;;;;;;;YACT,OAAO;;;;;;;YACP,OAAO;;;;;;;;;;;;;;;;;;;;;YAqBP,KAAK;YACL,IAAI;gBACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BX,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/styles.css.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAK9D,eAAO,MAAM,kBAAkB,oBAAc,CAAA;AAc7C,QAAA,MAAM,UAAU;;;;;;;;;;QAmBV,MAAM;;;;;;;QACN,IAAI;;;;;;;QACJ,OAAO;YACL,KAAK;;QAEP,OAAO;;;;;;;QACP,SAAS;;;;;;;QACT,OAAO;;;;;;;QACP,OAAO;;;;;;;;EAGX,CAAA;AAiDF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,CAAC,CAAA;AAE9E,eAAO,MAAM,cAAc;;;;;;;;;;;;YA9DrB,MAAM;;;;;;;YACN,IAAI;;;;;;;YACJ,OAAO;gBACL,KAAK;;YAEP,OAAO;;;;;;;YACP,SAAS;;;;;;;YACT,OAAO;;;;;;;YACP,OAAO;;;;;;;;;;;;;;;;;;;;;YAqBP,KAAK;YACL,IAAI;gBACF,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCX,CAAA"}

package/dist/components/Separator/styles.css.js

@@ -1,13 +1,15 @@
 import { __esmMin } from "../../_virtual/_rolldown/runtime.js";
-import { init_styles_css_ts_vanilla } from "../Drawer/styles.css.ts.vanilla.js";
-import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "./styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla } from "../Tag/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$1 } from "../Drawer/styles.css.ts.vanilla.js";
+import { init_styles_css_ts_vanilla as init_styles_css_ts_vanilla$2 } from "./styles.css.ts.vanilla.js";
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 
 //#region src/components/Separator/styles.css.ts
 var thicknessSeparator, separatorStyle;
 var init_styles_css = __esmMin(() => {
-	init_styles_css_ts_vanilla();
 	init_styles_css_ts_vanilla$1();
+	init_styles_css_ts_vanilla();
+	init_styles_css_ts_vanilla$2();
 	thicknessSeparator = "var(--uv_bu43fb0)";
 	separatorStyle = {
 		thicknessSeparator: "var(--uv_bu43fb0)",

package/dist/components/Skeleton/List.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/List.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,IAAI,oBAA6B;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,gCAY9E,CAAA"}
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/List.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,oBAA6B;IAAE,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,gCAY9E,CAAA"}

package/dist/components/Table/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAW1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAgC1C,eAAO,MAAM,SAAS;iBAlBP,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;sBACJ,OAAO;YACjB,aAAa;oDAkEtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;iBAtFH,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;sBACJ,OAAO;YACjB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ErB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAW1C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AACxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAgC1C,eAAO,MAAM,SAAS;iBAlBP,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;sBACJ,OAAO;YACjB,aAAa;oDAiEtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK;iBArFH,OAAO;IACpB;;OAEG;cACO,OAAO;eACN,OAAO;eACP,OAAO;iBACL,OAAO;IACpB;;OAEG;mBACY,OAAO;mBACP,OAAO;aACb,WAAW,EAAE;sBACJ,OAAO;YACjB,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ErB,CAAA"}

package/dist/components/Tag/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC;;;GAGG;AACH,eAAO,MAAM,GAAG,uKAeb,QAAQ,gCAqHV,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAKtC;;;GAGG;AACH,eAAO,MAAM,GAAG,uKAeb,QAAQ,gCA8FV,CAAA"}

package/dist/components/Tag/index.js

@@ -1,103 +1,100 @@
 'use client';
 import { __esmMin, __name } from "../../_virtual/_rolldown/runtime.js";
+import { Stack, init_Stack } from "../Stack/index.js";
 import { Tooltip, init_Tooltip } from "../Tooltip/index.js";
+import { Text, init_Text } from "../Text/index.js";
+import { Loader, init_Loader } from "../Loader/index.js";
+import { Separator, init_Separator } from "../Separator/index.js";
 import { init_styles_css, tagStyle } from "./styles.css.js";
-import { TagInner, init_TagInner } from "./TagInner.js";
 import { useMemo } from "react";
 import { cn } from "@ultraviolet/utils";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CloseIcon } from "@ultraviolet/icons/CloseIcon";
 import { useClipboard } from "@scaleway/use-clipboard";
+import { CopyContentIcon } from "@ultraviolet/icons/CopyContentIcon";
 
 //#region src/components/Tag/index.tsx
 var COPY_DURATION, Tag;
 var init_Tag = __esmMin(() => {
+	init_Loader();
+	init_Separator();
+	init_Stack();
+	init_Text();
 	init_Tooltip();
-	init_TagInner();
 	init_styles_css();
 	COPY_DURATION = 2500;
 	Tag = ({ children, isLoading, onClose, copiable = false, copyButton, copyText = "Copy", copiedText = "Copied!", disabled, sentiment = "neutral", variant = "default", className, style, keyValue, "data-testid": dataTestId }) => {
 		const [isCopied, setCopied] = useClipboard(useMemo(() => {
 			if (typeof children === "string") return children;
 			if (Array.isArray(children)) return children.filter((child) => typeof child === "string").join("");
+			if (typeof children === "number") return children.toString();
+			if (keyValue) return `${keyValue.key}:${keyValue.value}`;
 			return "";
-		}, [children]), { successDuration: COPY_DURATION });
-		if (keyValue) return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
-			className: cn(className, tagStyle.container({
-				disabled,
-				sentiment,
-				isKey: true,
-				isKeyValue: true
-			})),
-			"data-testid": dataTestId,
-			style,
-			children: /* @__PURE__ */ jsx(TagInner, {
-				copyButton,
-				disabled,
-				isLoading,
-				onClose,
-				variant,
-				children: keyValue.key
-			})
-		}), /* @__PURE__ */ jsx("span", {
-			className: cn(className, tagStyle.container({
-				disabled,
-				sentiment,
-				isValue: true,
-				isKeyValue: true
-			})),
-			"data-testid": dataTestId,
-			style,
-			children: /* @__PURE__ */ jsx(TagInner, {
-				copyButton,
-				disabled,
-				isLoading,
-				onClose,
-				variant,
-				children: keyValue.value
-			})
-		})] });
-		if (copiable && !disabled) return /* @__PURE__ */ jsx(Tooltip, {
-			text: isCopied ? copiedText : copyText,
-			children: /* @__PURE__ */ jsx("button", {
-				className: cn(className, tagStyle.container({
-					copiable,
-					disabled,
-					sentiment,
-					closable: !!onClose
-				})),
-				"data-testid": dataTestId,
-				disabled,
-				onClick: () => {
-					setCopied().catch(() => null);
-				},
-				type: "button",
-				children: /* @__PURE__ */ jsx(TagInner, {
-					copiable: true,
-					copyButton,
+		}, [children, keyValue]), { successDuration: COPY_DURATION });
+		const isCopiable = copiable && !disabled;
+		const TagInner = copiable ? "button" : "span";
+		return /* @__PURE__ */ jsx(Tooltip, {
+			text: isCopiable ? isCopied ? copiedText : copyText : null,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				className: tagStyle.wrapper[copiable ? "copiable" : "notCopiable"],
+				width: "fit-content",
+				children: [/* @__PURE__ */ jsxs(TagInner, {
+					className: cn(className, tagStyle.content[copiable ? "copiable" : "notCopiable"], tagStyle.container({
+						disabled,
+						sentiment,
+						closable: !!onClose,
+						copiable: copiable && !disabled,
+						isButton: false
+					})),
+					"data-testid": dataTestId,
+					style,
+					onClick: () => {
+						if (isCopiable) setCopied().catch(() => null);
+					},
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							"aria-disabled": disabled,
+							as: "span",
+							className: tagStyle.text,
+							oneLine: true,
+							variant: variant === "code" ? "code" : "caption",
+							sentiment: disabled ? "neutral" : sentiment,
+							disabled,
+							children: keyValue ? /* @__PURE__ */ jsxs(Stack, {
+								direction: "row",
+								gap: 1,
+								children: [
+									keyValue.key,
+									/* @__PURE__ */ jsx(Separator, {
+										sentiment: disabled ? "neutral" : sentiment,
+										direction: "vertical",
+										thickness: 1,
+										className: tagStyle.separator
+									}),
+									keyValue.value
+								]
+							}) : children
+						}),
+						copiable && copyButton && !isLoading ? /* @__PURE__ */ jsx(CopyContentIcon, { size: "xsmall" }) : null,
+						isLoading ? /* @__PURE__ */ jsx(Loader, {
+							active: true,
+							size: "small"
+						}) : null
+					]
+				}), onClose ? /* @__PURE__ */ jsx("button", {
+					"aria-label": "Close tag",
+					"data-testid": "close-tag",
 					disabled,
-					isLoading,
-					onClose,
-					sentiment,
-					variant,
-					children
-				})
-			})
-		});
-		return /* @__PURE__ */ jsx("span", {
-			className: cn(className, tagStyle.container({
-				disabled,
-				sentiment,
-				closable: !!onClose
-			})),
-			"data-testid": dataTestId,
-			style,
-			children: /* @__PURE__ */ jsx(TagInner, {
-				disabled,
-				isLoading,
-				onClose,
-				sentiment,
-				variant,
-				children
+					onClick: onClose,
+					type: "button",
+					className: tagStyle.container({
+						disabled,
+						isButton: true,
+						sentiment
+					}),
+					children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" })
+				}) : null]
 			})
 		});
 	};

package/dist/components/Tag/styles.css.d.ts

@@ -23,8 +23,8 @@ export declare const tagStyle: {
         };
         closable: {
             true: {
-                paddingRight: `var(--${string})`;
                 gap: `var(--${string})`;
+                borderRadius: `var(--${string}) 0 0 var(--${string})`;
             };
         };
         sentiment: {
@@ -34,20 +34,24 @@ export declare const tagStyle: {
                 color: `var(--${string})`;
             };
         };
-        isKey: {
-            true: {
-                borderRadius: `var(--${string}) 0 0 var(--${string})`;
-            };
-        };
-        isValue: {
+        isButton: {
             true: {
                 borderRadius: `0 var(--${string}) var(--${string}) 0`;
+                width: `var(--${string})`;
+                marginLeft: number;
+            };
+            false: {
+                selectors: {
+                    [x: string]: {
+                        borderRightColor: "transparent";
+                    };
+                };
             };
-        };
-        isKeyValue: {
-            true: {};
         };
     }>;
     text: string;
+    separator: string;
+    wrapper: Record<"copiable" | "notCopiable", string>;
+    content: Record<"copiable" | "notCopiable", string>;
 };
 //# sourceMappingURL=styles.css.d.ts.map

package/dist/components/Tag/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,YAAI,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,CAAU,CAAA;AAwH9G,eAAO,MAAM,QAAQ;;;;;;wBApGT,SAAS;;;;;;;;;;;;;;;;;YAiBf,IAAI;gBACF,YAAY;gBACZ,GAAG;;;;;;;;;;;;;;;;;;;;;YAyBL,IAAI;;;;CAwDiC,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,YAAI,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,CAAU,CAAA;AAuI9G,eAAO,MAAM,QAAQ;;;;;;wBAxGT,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwGmD,CAAA"}