From 28e0ff9d2fd53027b4b049da7f4bc3b3211df02b Mon Sep 17 00:00:00 2001
From: "Markus T." <19794318+marcus-wishes@users.noreply.github.com>
Date: Thu, 30 Jan 2025 19:25:01 +0100
Subject: [PATCH] new component: SlideOpen, slightly improved TruncatedText one

---
 library/src/components/SlideOpen.tsx          |  43 +++
 library/src/components/TruncatedText.tsx      |   8 +-
 library/src/components/index.ts               |   1 +
 package-lock.json                             | 288 +++++++-----------
 package.json                                  |   2 +-
 showcase/public/showcase-sources.txt          | 109 +++++++
 .../showcase/wrapper/SlideOpenShowcase.tsx    | 108 +++++++
 showcase/src/useShowcases.tsx                 |   4 +
 8 files changed, 386 insertions(+), 177 deletions(-)
 create mode 100644 library/src/components/SlideOpen.tsx
 create mode 100644 showcase/src/components/showcase/wrapper/SlideOpenShowcase.tsx

diff --git a/library/src/components/SlideOpen.tsx b/library/src/components/SlideOpen.tsx
new file mode 100644
index 0000000..5d28ca0
--- /dev/null
+++ b/library/src/components/SlideOpen.tsx
@@ -0,0 +1,43 @@
+import type { CSSProperties, RefObject } from "react"
+import { twMerge } from "tailwind-merge"
+
+export function SlideOpen({
+	children,
+	containerClassName,
+	containerStyle,
+	contentStyle,
+	contentClassName,
+	open,
+	ref,
+}: {
+	children: React.ReactNode
+	containerClassName?: string
+	containerStyle?: CSSProperties
+	contentClassName?: string
+	contentStyle?: CSSProperties
+	open: boolean
+	ref?: RefObject<HTMLDivElement>
+}) {
+	return (
+		<div
+			className={twMerge(
+				"grid relative p-0 m-0 box-border overflow-hidden ease-in-out min-h-0 transition-all data-[open=true]:grid-rows-[1fr] data-[open=false]:grid-rows-[0fr]",
+				containerClassName,
+			)}
+			style={containerStyle}
+			data-open={open}
+			ref={ref}
+		>
+			<div
+				className={twMerge(
+					"relative bottom-0 min-h-0 data-[open=false]:p-0 data-[open=false]:border-0 m-0 box-border transition-all",
+					contentClassName,
+				)}
+				style={contentStyle}
+				data-open={open}
+			>
+				{children}
+			</div>
+		</div>
+	)
+}
diff --git a/library/src/components/TruncatedText.tsx b/library/src/components/TruncatedText.tsx
index f6375a2..772cf84 100644
--- a/library/src/components/TruncatedText.tsx
+++ b/library/src/components/TruncatedText.tsx
@@ -15,7 +15,6 @@ const TruncatedText = ({
 	moreButtonStyle,
 	className,
 	style,
-	testId,
 	duration = 150,
 }: {
 	children: React.ReactNode
@@ -29,7 +28,6 @@ const TruncatedText = ({
 	moreButtonStyle?: React.CSSProperties
 	className?: string
 	style?: React.CSSProperties
-	testId?: string
 	duration?: number
 }) => {
 	const ref = useRef<HTMLParagraphElement>(null)
@@ -56,7 +54,6 @@ const TruncatedText = ({
 				className,
 			)}
 			style={style}
-			data-testid={testId}
 		>
 			<div
 				className={`transition-[grid-template-rows] ease-in-out ${
@@ -75,12 +72,15 @@ const TruncatedText = ({
 				<div
 					style={{
 						...textStyle,
-						display: open || animating ? "block" : "-webkit-box",
+						display: open ? "block" : "-webkit-box",
+						//display: "-webkit-box",
 						WebkitLineClamp: lines,
 						WebkitBoxOrient: "vertical",
 						overflow: "hidden",
 						textOverflow: "ellipsis",
 						whiteSpace: "normal",
+						lineClamp: lines,
+						minHeight: `${lines + 0.5}rem`,
 					}}
 					ref={ref}
 					className={textClassName}
diff --git a/library/src/components/index.ts b/library/src/components/index.ts
index e958a62..b2c0149 100644
--- a/library/src/components/index.ts
+++ b/library/src/components/index.ts
@@ -38,3 +38,4 @@ export * from "./tour"
 export * from "./form"
 export * from "./EventList"
 export * from "./HighlightedText"
+export * from "./SlideOpen"
diff --git a/package-lock.json b/package-lock.json
index 99d01ba..236f4ee 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
 				"react-day-picker": "^8.10.1",
 				"react-intl": "^7.1.5",
 				"react-joyride": "^2.9.3",
-				"react-router-dom": "^6.28.2",
+				"react-router-dom": "^6.29.0",
 				"react-select": "^5.10.0",
 				"react-syntax-highlighter": "^15.6.1",
 				"react-toastify": "^10.0.6",
@@ -271,14 +271,13 @@
 			}
 		},
 		"node_modules/@atlaskit/css": {
-			"version": "0.7.4",
-			"resolved": "https://registry.npmjs.org/@atlaskit/css/-/css-0.7.4.tgz",
-			"integrity": "sha512-RJtR3jzO7qe/b0n7mlTV/x4Ct3jeXdW4aNDg6KTuzNqMciV+i4MaD2gtyAc8whqwP+VTolW/j8qSleVRGSEHnA==",
+			"version": "0.7.5",
+			"resolved": "https://registry.npmjs.org/@atlaskit/css/-/css-0.7.5.tgz",
+			"integrity": "sha512-cu7hNMWG/n+D3o0Y2mODA5b5/iJbEA6gTAy5kzel3GPpmfbGPwNvnG3CndZlPY6wgQfczWNgAp6sl4BrW0Fy5g==",
 			"license": "Apache-2.0",
 			"dependencies": {
-				"@atlaskit/tokens": "^3.1.0",
+				"@atlaskit/tokens": "^3.2.0",
 				"@babel/runtime": "^7.0.0",
-				"@compiled/jest": "^0.10.5",
 				"@compiled/react": "^0.18.1"
 			},
 			"peerDependencies": {
@@ -349,14 +348,16 @@
 			}
 		},
 		"node_modules/@atlaskit/heading": {
-			"version": "4.0.1",
-			"resolved": "https://registry.npmjs.org/@atlaskit/heading/-/heading-4.0.1.tgz",
-			"integrity": "sha512-WCs1RGePH41oSmBNoRm/va6wVOPTpEim0QrZioBsQgf/lPN1tb9FYXQpnBl5F3431Zfx3pXQL85GP30gxHUWMg==",
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/@atlaskit/heading/-/heading-4.0.2.tgz",
+			"integrity": "sha512-UgqSGzteQBwebvEa2OOHvEodjhz3gdLJ1r2Ma9msijATJr9v3XkSI6GuFcZiaMraZz/0pZUgP50P1vik8Xomaw==",
 			"license": "Apache-2.0",
 			"dependencies": {
+				"@atlaskit/css": "^0.7.0",
 				"@atlaskit/primitives": "^13.3.0",
-				"@atlaskit/tokens": "^3.0.0",
+				"@atlaskit/tokens": "^3.2.0",
 				"@babel/runtime": "^7.0.0",
+				"@compiled/react": "^0.18.1",
 				"@emotion/react": "^11.7.1"
 			},
 			"peerDependencies": {
@@ -1098,15 +1099,6 @@
 				"node": ">=14.21.3"
 			}
 		},
-		"node_modules/@compiled/jest": {
-			"version": "0.10.5",
-			"resolved": "https://registry.npmjs.org/@compiled/jest/-/jest-0.10.5.tgz",
-			"integrity": "sha512-8H/FEgfcIWzmnYZ3Sezl3dv14huymhEHMtgSuX3BBw4+gxmn/xVJxFFlVLYgU1GqHr16nY+ouViCTDHLnAf8bA==",
-			"license": "Apache-2.0",
-			"dependencies": {
-				"css": "^3.0.0"
-			}
-		},
 		"node_modules/@compiled/react": {
 			"version": "0.18.1",
 			"resolved": "https://registry.npmjs.org/@compiled/react/-/react-0.18.1.tgz",
@@ -2371,19 +2363,19 @@
 			}
 		},
 		"node_modules/@microsoft/api-extractor": {
-			"version": "7.49.1",
-			"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.49.1.tgz",
-			"integrity": "sha512-jRTR/XbQF2kb+dYn8hfYSicOGA99+Fo00GrsdMwdfE3eIgLtKdH6Qa2M3wZV9S2XmbgCaGX1OdPtYctbfu5jQg==",
+			"version": "7.49.2",
+			"resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-7.49.2.tgz",
+			"integrity": "sha512-DI/WnvhbkHcucxxc4ys00ejCiViFls5EKPrEfe4NV3GGpVkoM5ZXF61HZNSGA8IG0oEV4KfTqIa59Rc3wdMopw==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@microsoft/api-extractor-model": "7.30.2",
+				"@microsoft/api-extractor-model": "7.30.3",
 				"@microsoft/tsdoc": "~0.15.1",
 				"@microsoft/tsdoc-config": "~0.17.1",
-				"@rushstack/node-core-library": "5.10.2",
+				"@rushstack/node-core-library": "5.11.0",
 				"@rushstack/rig-package": "0.5.3",
-				"@rushstack/terminal": "0.14.5",
-				"@rushstack/ts-command-line": "4.23.3",
+				"@rushstack/terminal": "0.14.6",
+				"@rushstack/ts-command-line": "4.23.4",
 				"lodash": "~4.17.15",
 				"minimatch": "~3.0.3",
 				"resolve": "~1.22.1",
@@ -2396,15 +2388,15 @@
 			}
 		},
 		"node_modules/@microsoft/api-extractor-model": {
-			"version": "7.30.2",
-			"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.30.2.tgz",
-			"integrity": "sha512-3/t2F+WhkJgBzSNwlkTIL0tBgUoBqDqL66pT+nh2mPbM0NIDGVGtpqbGWPgHIzn/mn7kGS/Ep8D8po58e8UUIw==",
+			"version": "7.30.3",
+			"resolved": "https://registry.npmjs.org/@microsoft/api-extractor-model/-/api-extractor-model-7.30.3.tgz",
+			"integrity": "sha512-yEAvq0F78MmStXdqz9TTT4PZ05Xu5R8nqgwI5xmUmQjWBQ9E6R2n8HB/iZMRciG4rf9iwI2mtuQwIzDXBvHn1w==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@microsoft/tsdoc": "~0.15.1",
 				"@microsoft/tsdoc-config": "~0.17.1",
-				"@rushstack/node-core-library": "5.10.2"
+				"@rushstack/node-core-library": "5.11.0"
 			}
 		},
 		"node_modules/@microsoft/api-extractor/node_modules/brace-expansion": {
@@ -3789,9 +3781,9 @@
 			"license": "MIT"
 		},
 		"node_modules/@remix-run/router": {
-			"version": "1.21.1",
-			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.1.tgz",
-			"integrity": "sha512-KeBYSwohb8g4/wCcnksvKTYlg69O62sQeLynn2YE+5z7JWEj95if27kclW9QqbrlsQ2DINI8fjbV3zyuKfwjKg==",
+			"version": "1.22.0",
+			"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.22.0.tgz",
+			"integrity": "sha512-MBOl8MeOzpK0HQQQshKB7pABXbmyHizdTpqnrIseTbsv0nAepwC2ENZa1aaBExNQcpLoXmWthhak8SABLzvGPw==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=14.0.0"
@@ -4123,16 +4115,16 @@
 			]
 		},
 		"node_modules/@rushstack/node-core-library": {
-			"version": "5.10.2",
-			"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.10.2.tgz",
-			"integrity": "sha512-xOF/2gVJZTfjTxbo4BDj9RtQq/HFnrrKdtem4JkyRLnwsRz2UDTg8gA1/et10fBx5RxmZD9bYVGST69W8ME5OQ==",
+			"version": "5.11.0",
+			"resolved": "https://registry.npmjs.org/@rushstack/node-core-library/-/node-core-library-5.11.0.tgz",
+			"integrity": "sha512-I8+VzG9A0F3nH2rLpPd7hF8F7l5Xb7D+ldrWVZYegXM6CsKkvWc670RlgK3WX8/AseZfXA/vVrh0bpXe2Y2UDQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"ajv": "~8.13.0",
 				"ajv-draft-04": "~1.0.0",
 				"ajv-formats": "~3.0.1",
-				"fs-extra": "~7.0.1",
+				"fs-extra": "~11.3.0",
 				"import-lazy": "~4.0.0",
 				"jju": "~1.4.0",
 				"resolve": "~1.22.1",
@@ -4227,13 +4219,13 @@
 			}
 		},
 		"node_modules/@rushstack/terminal": {
-			"version": "0.14.5",
-			"resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.14.5.tgz",
-			"integrity": "sha512-TEOpNwwmsZVrkp0omnuTUTGZRJKTr6n6m4OITiNjkqzLAkcazVpwR1SOtBg6uzpkIBLgrcNHETqI8rbw3uiUfw==",
+			"version": "0.14.6",
+			"resolved": "https://registry.npmjs.org/@rushstack/terminal/-/terminal-0.14.6.tgz",
+			"integrity": "sha512-4nMUy4h0u5PGXVG71kEA9uYI3l8GjVqewoHOFONiM6fuqS51ORdaJZ5ZXB2VZEGUyfg1TOTSy88MF2cdAy+lqA==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@rushstack/node-core-library": "5.10.2",
+				"@rushstack/node-core-library": "5.11.0",
 				"supports-color": "~8.1.1"
 			},
 			"peerDependencies": {
@@ -4262,13 +4254,13 @@
 			}
 		},
 		"node_modules/@rushstack/ts-command-line": {
-			"version": "4.23.3",
-			"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.23.3.tgz",
-			"integrity": "sha512-HazKL8fv4HMQMzrKJCrOrhyBPPdzk7iajUXgsASwjQ8ROo1cmgyqxt/k9+SdmrNLGE1zATgRqMUH3s/6smbRMA==",
+			"version": "4.23.4",
+			"resolved": "https://registry.npmjs.org/@rushstack/ts-command-line/-/ts-command-line-4.23.4.tgz",
+			"integrity": "sha512-pqmzDJCm0TS8VyeqnzcJ7ncwXgiLDQ6LVmXXfqv2nPL6VIz+UpyTpNVfZRJpyyJ+UDxqob1vIj2liaUfBjv8/A==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"@rushstack/terminal": "0.14.5",
+				"@rushstack/terminal": "0.14.6",
 				"@types/argparse": "1.0.38",
 				"argparse": "~1.0.9",
 				"string-argv": "~0.3.1"
@@ -4285,9 +4277,9 @@
 			}
 		},
 		"node_modules/@swc/core": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.11.tgz",
-			"integrity": "sha512-3zGU5y3S20cAwot9ZcsxVFNsSVaptG+dKdmAxORSE3EX7ixe1Xn5kUwLlgIsM4qrwTUWCJDLNhRS+2HLFivcDg==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core/-/core-1.10.12.tgz",
+			"integrity": "sha512-+iUL0PYpPm6N9AdV1wvafakvCqFegQus1aoEDxgFsv3/uNVNIyRaupf/v/Zkp5hbep2EzhtoJR0aiJIzDbXWHg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "Apache-2.0",
@@ -4303,16 +4295,16 @@
 				"url": "https://opencollective.com/swc"
 			},
 			"optionalDependencies": {
-				"@swc/core-darwin-arm64": "1.10.11",
-				"@swc/core-darwin-x64": "1.10.11",
-				"@swc/core-linux-arm-gnueabihf": "1.10.11",
-				"@swc/core-linux-arm64-gnu": "1.10.11",
-				"@swc/core-linux-arm64-musl": "1.10.11",
-				"@swc/core-linux-x64-gnu": "1.10.11",
-				"@swc/core-linux-x64-musl": "1.10.11",
-				"@swc/core-win32-arm64-msvc": "1.10.11",
-				"@swc/core-win32-ia32-msvc": "1.10.11",
-				"@swc/core-win32-x64-msvc": "1.10.11"
+				"@swc/core-darwin-arm64": "1.10.12",
+				"@swc/core-darwin-x64": "1.10.12",
+				"@swc/core-linux-arm-gnueabihf": "1.10.12",
+				"@swc/core-linux-arm64-gnu": "1.10.12",
+				"@swc/core-linux-arm64-musl": "1.10.12",
+				"@swc/core-linux-x64-gnu": "1.10.12",
+				"@swc/core-linux-x64-musl": "1.10.12",
+				"@swc/core-win32-arm64-msvc": "1.10.12",
+				"@swc/core-win32-ia32-msvc": "1.10.12",
+				"@swc/core-win32-x64-msvc": "1.10.12"
 			},
 			"peerDependencies": {
 				"@swc/helpers": "*"
@@ -4324,9 +4316,9 @@
 			}
 		},
 		"node_modules/@swc/core-darwin-arm64": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.11.tgz",
-			"integrity": "sha512-ZpgEaNcx2e5D+Pd0yZGVbpSrEDOEubn7r2JXoNBf0O85lPjUm3HDzGRfLlV/MwxRPAkwm93eLP4l7gYnc50l3g==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.10.12.tgz",
+			"integrity": "sha512-pOANQegUTAriW7jq3SSMZGM5l89yLVMs48R0F2UG6UZsH04SiViCnDctOGlA/Sa++25C+rL9MGMYM1jDLylBbg==",
 			"cpu": [
 				"arm64"
 			],
@@ -4341,9 +4333,9 @@
 			}
 		},
 		"node_modules/@swc/core-darwin-x64": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.10.11.tgz",
-			"integrity": "sha512-szObinnq2o7spXMDU5pdunmUeLrfV67Q77rV+DyojAiGJI1RSbEQotLOk+ONOLpoapwGUxOijFG4IuX1xiwQ2g==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.10.12.tgz",
+			"integrity": "sha512-m4kbpIDDsN1FrwfNQMU+FTrss356xsXvatLbearwR+V0lqOkjLBP0VmRvQfHEg+uy13VPyrT9gj4HLoztlci7w==",
 			"cpu": [
 				"x64"
 			],
@@ -4358,9 +4350,9 @@
 			}
 		},
 		"node_modules/@swc/core-linux-arm-gnueabihf": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.11.tgz",
-			"integrity": "sha512-tVE8aXQwd8JUB9fOGLawFJa76nrpvp3dvErjozMmWSKWqtoeO7HV83aOrVtc8G66cj4Vq7FjTE9pOJeV1FbKRw==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.10.12.tgz",
+			"integrity": "sha512-OY9LcupgqEu8zVK+rJPes6LDJJwPDmwaShU96beTaxX2K6VrXbpwm5WbPS/8FfQTsmpnuA7dCcMPUKhNgmzTrQ==",
 			"cpu": [
 				"arm"
 			],
@@ -4375,9 +4367,9 @@
 			}
 		},
 		"node_modules/@swc/core-linux-arm64-gnu": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.11.tgz",
-			"integrity": "sha512-geFkENU5GMEKO7FqHOaw9HVlpQEW10nICoM6ubFc0hXBv8dwRXU4vQbh9s/isLSFRftw1m4jEEWixAnXSw8bxQ==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.10.12.tgz",
+			"integrity": "sha512-nJD587rO0N4y4VZszz3xzVr7JIiCzSMhEMWnPjuh+xmPxDBz0Qccpr8xCr1cSxpl1uY7ERkqAGlKr6CwoV5kVg==",
 			"cpu": [
 				"arm64"
 			],
@@ -4392,9 +4384,9 @@
 			}
 		},
 		"node_modules/@swc/core-linux-arm64-musl": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.11.tgz",
-			"integrity": "sha512-2mMscXe/ivq8c4tO3eQSbQDFBvagMJGlalXCspn0DgDImLYTEnt/8KHMUMGVfh0gMJTZ9q4FlGLo7mlnbx99MQ==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.10.12.tgz",
+			"integrity": "sha512-oqhSmV+XauSf0C//MoQnVErNUB/5OzmSiUzuazyLsD5pwqKNN+leC3JtRQ/QVzaCpr65jv9bKexT9+I2Tt3xDw==",
 			"cpu": [
 				"arm64"
 			],
@@ -4409,9 +4401,9 @@
 			}
 		},
 		"node_modules/@swc/core-linux-x64-gnu": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.11.tgz",
-			"integrity": "sha512-eu2apgDbC4xwsigpl6LS+iyw6a3mL6kB4I+6PZMbFF2nIb1Dh7RGnu70Ai6mMn1o80fTmRSKsCT3CKMfVdeNFg==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.10.12.tgz",
+			"integrity": "sha512-XldSIHyjD7m1Gh+/8rxV3Ok711ENLI420CU2EGEqSe3VSGZ7pHJvJn9ZFbYpWhsLxPqBYMFjp3Qw+J6OXCPXCA==",
 			"cpu": [
 				"x64"
 			],
@@ -4426,9 +4418,9 @@
 			}
 		},
 		"node_modules/@swc/core-linux-x64-musl": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.11.tgz",
-			"integrity": "sha512-0n+wPWpDigwqRay4IL2JIvAqSKCXv6nKxPig9M7+epAlEQlqX+8Oq/Ap3yHtuhjNPb7HmnqNJLCXT1Wx+BZo0w==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.10.12.tgz",
+			"integrity": "sha512-wvPXzJxzPgTqhyp1UskOx1hRTtdWxlyFD1cGWOxgLsMik0V9xKRgqKnMPv16Nk7L9xl6quQ6DuUHj9ID7L3oVw==",
 			"cpu": [
 				"x64"
 			],
@@ -4443,9 +4435,9 @@
 			}
 		},
 		"node_modules/@swc/core-win32-arm64-msvc": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.11.tgz",
-			"integrity": "sha512-7+bMSIoqcbXKosIVd314YjckDRPneA4OpG1cb3/GrkQTEDXmWT3pFBBlJf82hzJfw7b6lfv6rDVEFBX7/PJoLA==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.10.12.tgz",
+			"integrity": "sha512-TUYzWuu1O7uyIcRfxdm6Wh1u+gNnrW5M1DUgDOGZLsyQzgc2Zjwfh2llLhuAIilvCVg5QiGbJlpibRYJ/8QGsg==",
 			"cpu": [
 				"arm64"
 			],
@@ -4460,9 +4452,9 @@
 			}
 		},
 		"node_modules/@swc/core-win32-ia32-msvc": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.11.tgz",
-			"integrity": "sha512-6hkLl4+3KjP/OFTryWxpW7YFN+w4R689TSPwiII4fFgsFNupyEmLWWakKfkGgV2JVA59L4Oi02elHy/O1sbgtw==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.10.12.tgz",
+			"integrity": "sha512-4Qrw+0Xt+Fe2rz4OJ/dEPMeUf/rtuFWWAj/e0vL7J5laUHirzxawLRE5DCJLQTarOiYR6mWnmadt9o3EKzV6Xg==",
 			"cpu": [
 				"ia32"
 			],
@@ -4477,9 +4469,9 @@
 			}
 		},
 		"node_modules/@swc/core-win32-x64-msvc": {
-			"version": "1.10.11",
-			"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.11.tgz",
-			"integrity": "sha512-kKNE2BGu/La2k2WFHovenqZvGQAHRIU+rd2/6a7D6EiQ6EyimtbhUqjCCZ+N1f5fIAnvM+sMdLiQJq4jdd/oOQ==",
+			"version": "1.10.12",
+			"resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.10.12.tgz",
+			"integrity": "sha512-YiloZXLW7rUxJpALwHXaGjVaAEn+ChoblG7/3esque+Y7QCyheoBUJp2DVM1EeVA43jBfZ8tvYF0liWd9Tpz1A==",
 			"cpu": [
 				"x64"
 			],
@@ -5338,18 +5330,6 @@
 			"license": "MIT",
 			"peer": true
 		},
-		"node_modules/atob": {
-			"version": "2.1.2",
-			"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
-			"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
-			"license": "(MIT OR Apache-2.0)",
-			"bin": {
-				"atob": "bin/atob.js"
-			},
-			"engines": {
-				"node": ">= 4.5.0"
-			}
-		},
 		"node_modules/autoprefixer": {
 			"version": "10.4.20",
 			"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -5908,17 +5888,6 @@
 				"node": ">= 8"
 			}
 		},
-		"node_modules/css": {
-			"version": "3.0.0",
-			"resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
-			"integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
-			"license": "MIT",
-			"dependencies": {
-				"inherits": "^2.0.4",
-				"source-map": "^0.6.1",
-				"source-map-resolve": "^0.6.0"
-			}
-		},
 		"node_modules/css-box-model": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
@@ -5953,15 +5922,6 @@
 				"node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
 			}
 		},
-		"node_modules/css/node_modules/source-map": {
-			"version": "0.6.1",
-			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-			"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-			"license": "BSD-3-Clause",
-			"engines": {
-				"node": ">=0.10.0"
-			}
-		},
 		"node_modules/cssesc": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -6044,15 +6004,6 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
-		"node_modules/decode-uri-component": {
-			"version": "0.2.2",
-			"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.2.tgz",
-			"integrity": "sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==",
-			"license": "MIT",
-			"engines": {
-				"node": ">=0.10"
-			}
-		},
 		"node_modules/deep-diff": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
@@ -6197,9 +6148,9 @@
 			"license": "MIT"
 		},
 		"node_modules/electron-to-chromium": {
-			"version": "1.5.88",
-			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz",
-			"integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==",
+			"version": "1.5.90",
+			"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.90.tgz",
+			"integrity": "sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==",
 			"dev": true,
 			"license": "ISC"
 		},
@@ -6678,9 +6629,9 @@
 			}
 		},
 		"node_modules/fastq": {
-			"version": "1.18.0",
-			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
-			"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
+			"version": "1.19.0",
+			"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
+			"integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
 			"dev": true,
 			"license": "ISC",
 			"dependencies": {
@@ -6887,18 +6838,18 @@
 			}
 		},
 		"node_modules/fs-extra": {
-			"version": "7.0.1",
-			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
-			"integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
+			"version": "11.3.0",
+			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz",
+			"integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"graceful-fs": "^4.1.2",
-				"jsonfile": "^4.0.0",
-				"universalify": "^0.1.0"
+				"graceful-fs": "^4.2.0",
+				"jsonfile": "^6.0.1",
+				"universalify": "^2.0.0"
 			},
 			"engines": {
-				"node": ">=6 <7 || >=8"
+				"node": ">=14.14"
 			}
 		},
 		"node_modules/fs.realpath": {
@@ -7394,6 +7345,7 @@
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+			"dev": true,
 			"license": "ISC"
 		},
 		"node_modules/ini": {
@@ -7685,11 +7637,14 @@
 			}
 		},
 		"node_modules/jsonfile": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
-			"integrity": "sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==",
+			"version": "6.1.0",
+			"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+			"integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
 			"dev": true,
 			"license": "MIT",
+			"dependencies": {
+				"universalify": "^2.0.0"
+			},
 			"optionalDependencies": {
 				"graceful-fs": "^4.1.6"
 			}
@@ -9856,12 +9811,12 @@
 			}
 		},
 		"node_modules/react-router": {
-			"version": "6.28.2",
-			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.2.tgz",
-			"integrity": "sha512-BgFY7+wEGVjHCiqaj2XiUBQ1kkzfg6UoKYwEe0wv+FF+HNPCxtS/MVPvLAPH++EsuCMReZl9RYVGqcHLk5ms3A==",
+			"version": "6.29.0",
+			"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.29.0.tgz",
+			"integrity": "sha512-DXZJoE0q+KyeVw75Ck6GkPxFak63C4fGqZGNijnWgzB/HzSP1ZfTlBj5COaGWwhrMQ/R8bXiq5Ooy4KG+ReyjQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@remix-run/router": "1.21.1"
+				"@remix-run/router": "1.22.0"
 			},
 			"engines": {
 				"node": ">=14.0.0"
@@ -9871,13 +9826,13 @@
 			}
 		},
 		"node_modules/react-router-dom": {
-			"version": "6.28.2",
-			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.2.tgz",
-			"integrity": "sha512-O81EWqNJWqvlN/a7eTudAdQm0TbI7hw+WIi7OwwMcTn5JMyZ0ibTFNGz+t+Lju0df4LcqowCegcrK22lB1q9Kw==",
+			"version": "6.29.0",
+			"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.29.0.tgz",
+			"integrity": "sha512-pkEbJPATRJ2iotK+wUwHfy0xs2T59YPEN8BQxVCPeBZvK7kfPESRc/nyxzdcxR17hXgUPYx2whMwl+eo9cUdnQ==",
 			"license": "MIT",
 			"dependencies": {
-				"@remix-run/router": "1.21.1",
-				"react-router": "6.28.2"
+				"@remix-run/router": "1.22.0",
+				"react-router": "6.29.0"
 			},
 			"engines": {
 				"node": ">=14.0.0"
@@ -10404,9 +10359,9 @@
 			"license": "ISC"
 		},
 		"node_modules/semver": {
-			"version": "7.6.3",
-			"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-			"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
+			"version": "7.7.0",
+			"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
+			"integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
 			"dev": true,
 			"license": "ISC",
 			"bin": {
@@ -10507,17 +10462,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/source-map-resolve": {
-			"version": "0.6.0",
-			"resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
-			"integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
-			"deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
-			"license": "MIT",
-			"dependencies": {
-				"atob": "^2.1.2",
-				"decode-uri-component": "^0.2.0"
-			}
-		},
 		"node_modules/space-separated-tokens": {
 			"version": "2.0.2",
 			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
@@ -11498,13 +11442,13 @@
 			}
 		},
 		"node_modules/universalify": {
-			"version": "0.1.2",
-			"resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-			"integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+			"integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
-				"node": ">= 4.0.0"
+				"node": ">= 10.0.0"
 			}
 		},
 		"node_modules/update-browserslist-db": {
diff --git a/package.json b/package.json
index 52e1e60..556aed3 100644
--- a/package.json
+++ b/package.json
@@ -110,7 +110,7 @@
 		"react-day-picker": "^8.10.1",
 		"react-intl": "^7.1.5",
 		"react-joyride": "^2.9.3",
-		"react-router-dom": "^6.28.2",
+		"react-router-dom": "^6.29.0",
 		"react-select": "^5.10.0",
 		"react-syntax-highlighter": "^15.6.1",
 		"react-toastify": "^10.0.6",
diff --git a/showcase/public/showcase-sources.txt b/showcase/public/showcase-sources.txt
index f51fa20..06a1b59 100644
--- a/showcase/public/showcase-sources.txt
+++ b/showcase/public/showcase-sources.txt
@@ -7046,6 +7046,115 @@ export function SidebarShowcase(props: ShowcaseProps) {
 	)
 }
 
+import { Button, SlideOpen } from "@linked-planet/ui-kit-ts"
+import ShowcaseWrapperItem, {
+	type ShowcaseProps,
+} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
+import { useState } from "react"
+
+//#region slideopen
+function SlideOpenExample() {
+	const [opened, setOpened] = useState(false)
+	return (
+		<>
+			<Button onClick={() => setOpened(!opened)} type="button">
+				{opened ? "Close" : "Open"}
+			</Button>
+			<div>before</div>
+			<hr className="border-border" />
+			<SlideOpen
+				open={opened}
+				contentClassName="p-2 border-border border-solid rounded border bg-surface max-w-[50%]"
+			>
+				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis
+				debitis ullam ab voluptatibus, fuga, voluptas voluptates sed
+				voluptate adipisci necessitatibus illo ipsa cupiditate amet eos
+				eveniet ducimus dicta corporis et.
+				<br />
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam
+				eius consequuntur modi nisi corporis sit, odio expedita quisquam
+				assumenda libero debitis, rerum tempore nobis excepturi facilis,
+				mollitia recusandae dicta in.
+				<br />
+				Lorem ipsum dolor sit amet consectetur adipisicing elit.
+				Provident, corporis aperiam quaerat odit quos dolore
+				voluptatibus distinctio voluptate, deleniti esse repudiandae
+				dolorum sit nam! Ex voluptate provident repellendus rem id.
+			</SlideOpen>
+			<hr className="border-border" />
+			<div>after</div>
+		</>
+	)
+}
+//#endregion slideopen
+
+//#region slideopen-bottomup
+function SlideOpenBottomUpExample() {
+	const [opened, setOpened] = useState(false)
+	return (
+		<>
+			<Button onClick={() => setOpened(!opened)} type="button">
+				{opened ? "Close" : "Open"}
+			</Button>
+			<div>before</div>
+			<hr className="border-border" />
+			<div className="h-96 bg-surface-overlay relative">
+				<SlideOpen
+					open={opened}
+					contentClassName="p-2 border-border border-solid rounded border bg-surface max-w-[50%]"
+					containerClassName="absolute duration-1000 bottom-0 inset-x-0 data-[open=true]:top-0 data-[open=false]:top-full"
+				>
+					Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+					Nobis debitis ullam ab voluptatibus, fuga, voluptas
+					voluptates sed voluptate adipisci necessitatibus illo ipsa
+					cupiditate amet eos eveniet ducimus dicta corporis et.
+					<br />
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+					Veniam eius consequuntur modi nisi corporis sit, odio
+					expedita quisquam assumenda libero debitis, rerum tempore
+					nobis excepturi facilis, mollitia recusandae dicta in.
+					<br />
+					Lorem ipsum dolor sit amet consectetur adipisicing elit.
+					Provident, corporis aperiam quaerat odit quos dolore
+					voluptatibus distinctio voluptate, deleniti esse repudiandae
+					dolorum sit nam! Ex voluptate provident repellendus rem id.
+				</SlideOpen>
+			</div>
+			<hr className="border-border" />
+			<div>after</div>
+		</>
+	)
+}
+//#endregion slideopen-bottomup
+
+export default function SLideOpenShowcase(props: ShowcaseProps) {
+	return (
+		<ShowcaseWrapperItem
+			name="SlideOpen"
+			description="A minimal and simple component using dynamic height to hide or show the children. It only slides from top to bottom when opening."
+			{...props}
+			packages={[
+				{
+					name: "@linked-planet/ui-kit-ts",
+					url: "https://linked-planet.github.io/ui-kit-ts/single?component=SlideOpen",
+				},
+			]}
+			examples={[
+				{
+					title: "Top Down",
+					example: <SlideOpenExample />,
+					sourceCodeExampleId: "slideopen",
+				},
+				{
+					title: "Bottom Up",
+					example: <SlideOpenBottomUpExample />,
+					sourceCodeExampleId: "slideopen-bottomup",
+				},
+			]}
+		/>
+	)
+}
+
 import ShowcaseWrapperItem, {
 	type ShowcaseProps,
 } from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
diff --git a/showcase/src/components/showcase/wrapper/SlideOpenShowcase.tsx b/showcase/src/components/showcase/wrapper/SlideOpenShowcase.tsx
new file mode 100644
index 0000000..7ba03ce
--- /dev/null
+++ b/showcase/src/components/showcase/wrapper/SlideOpenShowcase.tsx
@@ -0,0 +1,108 @@
+import { Button, SlideOpen } from "@linked-planet/ui-kit-ts"
+import ShowcaseWrapperItem, {
+	type ShowcaseProps,
+} from "../../ShowCaseWrapperItem/ShowcaseWrapperItem"
+import { useState } from "react"
+
+//#region slideopen
+function SlideOpenExample() {
+	const [opened, setOpened] = useState(false)
+	return (
+		<>
+			<Button onClick={() => setOpened(!opened)} type="button">
+				{opened ? "Close" : "Open"}
+			</Button>
+			<div>before</div>
+			<hr className="border-border" />
+			<SlideOpen
+				open={opened}
+				contentClassName="p-2 border-border border-solid rounded border bg-surface max-w-[50%]"
+			>
+				Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis
+				debitis ullam ab voluptatibus, fuga, voluptas voluptates sed
+				voluptate adipisci necessitatibus illo ipsa cupiditate amet eos
+				eveniet ducimus dicta corporis et.
+				<br />
+				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam
+				eius consequuntur modi nisi corporis sit, odio expedita quisquam
+				assumenda libero debitis, rerum tempore nobis excepturi facilis,
+				mollitia recusandae dicta in.
+				<br />
+				Lorem ipsum dolor sit amet consectetur adipisicing elit.
+				Provident, corporis aperiam quaerat odit quos dolore
+				voluptatibus distinctio voluptate, deleniti esse repudiandae
+				dolorum sit nam! Ex voluptate provident repellendus rem id.
+			</SlideOpen>
+			<hr className="border-border" />
+			<div>after</div>
+		</>
+	)
+}
+//#endregion slideopen
+
+//#region slideopen-bottomup
+function SlideOpenBottomUpExample() {
+	const [opened, setOpened] = useState(false)
+	return (
+		<>
+			<Button onClick={() => setOpened(!opened)} type="button">
+				{opened ? "Close" : "Open"}
+			</Button>
+			<div>before</div>
+			<hr className="border-border" />
+			<div className="h-96 bg-surface-overlay relative">
+				<SlideOpen
+					open={opened}
+					contentClassName="max-w-[50%]"
+					containerClassName="absolute duration-1000 bottom-0 inset-x-0 data-[open=true]:top-0 data-[open=false]:top-full"
+				>
+					Lorem ipsum dolor sit, amet consectetur adipisicing elit.
+					Nobis debitis ullam ab voluptatibus, fuga, voluptas
+					voluptates sed voluptate adipisci necessitatibus illo ipsa
+					cupiditate amet eos eveniet ducimus dicta corporis et.
+					<br />
+					Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+					Veniam eius consequuntur modi nisi corporis sit, odio
+					expedita quisquam assumenda libero debitis, rerum tempore
+					nobis excepturi facilis, mollitia recusandae dicta in.
+					<br />
+					Lorem ipsum dolor sit amet consectetur adipisicing elit.
+					Provident, corporis aperiam quaerat odit quos dolore
+					voluptatibus distinctio voluptate, deleniti esse repudiandae
+					dolorum sit nam! Ex voluptate provident repellendus rem id.
+				</SlideOpen>
+			</div>
+			<hr className="border-border" />
+			<div>after</div>
+		</>
+	)
+}
+//#endregion slideopen-bottomup
+
+export default function SLideOpenShowcase(props: ShowcaseProps) {
+	return (
+		<ShowcaseWrapperItem
+			name="SlideOpen"
+			description="A minimal and simple component using dynamic height to hide or show the children. It only slides from top to bottom when opening."
+			{...props}
+			packages={[
+				{
+					name: "@linked-planet/ui-kit-ts",
+					url: "https://linked-planet.github.io/ui-kit-ts/single?component=SlideOpen",
+				},
+			]}
+			examples={[
+				{
+					title: "Top Down",
+					example: <SlideOpenExample />,
+					sourceCodeExampleId: "slideopen",
+				},
+				{
+					title: "Bottom Up",
+					example: <SlideOpenBottomUpExample />,
+					sourceCodeExampleId: "slideopen-bottomup",
+				},
+			]}
+		/>
+	)
+}
diff --git a/showcase/src/useShowcases.tsx b/showcase/src/useShowcases.tsx
index d3a4077..214a6ff 100644
--- a/showcase/src/useShowcases.tsx
+++ b/showcase/src/useShowcases.tsx
@@ -55,6 +55,7 @@ import TourShowcase from "./components/showcase/wrapper/TourShowcase"
 import FormShowcase from "./components/showcase/wrapper/FormShowcase"
 import EventListShowcase from "./components/showcase/wrapper/EventListShowcase"
 import HighlightedTextShowcase from "./components/showcase/wrapper/HighlightedTextShowcase"
+import SLideOpenShowcase from "./components/showcase/wrapper/SlideOpenShowcase"
 export default function useShowcases({
 	overallSourceCode,
 }: {
@@ -164,6 +165,9 @@ export default function useShowcases({
 			"Side Navigation": (
 				<SideNavigationShowcase overallSourceCode={overallSourceCode} />
 			),
+			"Slide Open": (
+				<SLideOpenShowcase overallSourceCode={overallSourceCode} />
+			),
 			Tabs: <TabsShowcase overallSourceCode={overallSourceCode} />,
 			Tag: <TagShowcase overallSourceCode={overallSourceCode} />,
 			"Table Tree": (