@x15ventures/x15-ui-library 3.11.4

package/dist/cjs/components/navigation/bubbleNavigator/bubbleNavigator.css

@@ -0,0 +1,563 @@
+/* Popovers */
+:root {
+  --childBubbleFg: #fff;
+  --childBubbleBgGradient: radial-gradient(circle at 50% 35%, var(--childBubbleBgLightColor), var(--childBubbleBgDarkColor));
+  --childBubbleBgLightColor: #5cabff;
+  --childBubbleBgDarkColor: #000;
+  --childBubbleAnimation: glowBubble 10s ease infinite;
+  --childBubbleTextShadow: 1px 1px 3px #000;
+  --parentBubbleFg: #222;
+  --parentBubbleBgGradient: radial-gradient(circle at 50% 35%, var(--parentBubbleBgLightColor), var(--parentBubbleBgDarkColor));
+  --parentBubbleBgLightColor: #eee;
+  --parentBubbleBgDarkColor: #000;
+  --parentBubbleAnimation: animateBubble 10s ease infinite;
+  --parentBubbleTextShadow: 1px 1px 3px #fff;
+}
+
+.bubbleNavigator .bubbleTree {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+}
+.bubbleNavigator .bubbleTree .bubbleBranch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 520px;
+  height: 520px;
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .parentBranch {
+  position: fixed;
+  top: 0;
+  width: 200px;
+  height: 200px;
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .bubbleDiagram {
+  position: relative;
+  width: 200px;
+  height: 200px;
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .parentReturnButton {
+  position: absolute;
+  left: 0;
+  width: 120px;
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_1 .bubble:nth-child(1) {
+  transform: translate(127.2792206136px, 127.2792206136px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_1 .bubble:nth-child(1):after {
+  transform: translate(-56.5685424949px, -56.5685424949px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_2 .bubble:nth-child(1) {
+  transform: translate(-127.2792206136px, 127.2792206136px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_2 .bubble:nth-child(1):after {
+  transform: translate(56.5685424949px, -56.5685424949px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_2 .bubble:nth-child(2) {
+  transform: translate(180px, 0px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_2 .bubble:nth-child(2):after {
+  transform: translate(-80px, 0px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_3 .bubble:nth-child(1) {
+  transform: translate(-127.2792206136px, 127.2792206136px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_3 .bubble:nth-child(1):after {
+  transform: translate(56.5685424949px, -56.5685424949px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_3 .bubble:nth-child(2) {
+  transform: translate(180px, 0px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_3 .bubble:nth-child(2):after {
+  transform: translate(-80px, 0px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_3 .bubble:nth-child(3) {
+  transform: translate(-61.5636257986px, -169.1446717415px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_3 .bubble:nth-child(3):after {
+  transform: translate(27.361611466px, 75.1754096629px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(1) {
+  transform: translate(-76.0712871133px, 163.1354016666px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(1):after {
+  transform: translate(33.8094609393px, -72.5046229629px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(2) {
+  transform: translate(155.8845726812px, 90px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(2):after {
+  transform: translate(-69.2820323027px, -40px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(3) {
+  transform: translate(-61.5636257986px, -169.1446717415px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(3):after {
+  transform: translate(27.361611466px, 75.1754096629px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(4) {
+  transform: translate(90.0000000001px, -155.8845726812px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_4 .bubble:nth-child(4):after {
+  transform: translate(-40px, 69.2820323027px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(1) {
+  transform: translate(76.0712871133px, 163.1354016666px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(1):after {
+  transform: translate(-33.8094609392px, -72.5046229629px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(2) {
+  transform: translate(177.2653955422px, 31.25667198px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(2):after {
+  transform: translate(-78.784620241px, -13.8918542134px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(3) {
+  transform: translate(-169.1446717414px, -61.5636257987px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(3):after {
+  transform: translate(75.1754096629px, 27.3616114661px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(4) {
+  transform: translate(0.0000000001px, -180px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(4):after {
+  transform: translate(0px, 80px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(5) {
+  transform: translate(-173.866648732px, 46.5874281184px);
+}
+.bubbleNavigator .bubbleTree .bubbleBranch .childBubbles_5 .bubble:nth-child(5):after {
+  transform: translate(77.2740661031px, -20.7055236082px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(1) {
+  transform: translate(-120.2081528017px, 120.2081528017px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) {
+  transform: translate(120.2081528018px, -120.2081528017px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_1 .bubble:nth-child(1) {
+  transform: translate(-46.5874281185px, 173.866648732px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_1 .bubble:nth-child(1):after {
+  transform: translate(20.7055236082px, -77.2740661031px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(1) {
+  transform: translate(-173.866648732px, -46.5874281185px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(1):after {
+  transform: translate(77.2740661031px, 20.7055236082px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(2) {
+  transform: translate(90px, 155.8845726812px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(2):after {
+  transform: translate(-40px, -69.2820323028px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(1) {
+  transform: translate(-173.866648732px, -46.5874281185px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(1):after {
+  transform: translate(77.2740661031px, 20.7055236082px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(2) {
+  transform: translate(90px, 155.8845726812px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(2):after {
+  transform: translate(-40px, -69.2820323028px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(3) {
+  transform: translate(115.7017697436px, -137.8879997614px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(3):after {
+  transform: translate(-51.423008775px, 61.2835554495px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(1) {
+  transform: translate(-179.3150456565px, 15.6880336945px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(1):after {
+  transform: translate(79.6955758473px, -6.9724594198px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(2) {
+  transform: translate(0px, 180px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(2):after {
+  transform: translate(0px, -80px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(3) {
+  transform: translate(115.7017697436px, -137.8879997614px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(3):after {
+  transform: translate(-51.423008775px, 61.2835554495px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(4) {
+  transform: translate(180px, 0.0000000001px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(4):after {
+  transform: translate(-80px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(1) {
+  transform: translate(-103.2437585432px, 147.447367972px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(1):after {
+  transform: translate(45.8861149081px, -65.5321635431px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(2) {
+  transform: translate(61.5636257986px, 169.1446717415px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(2):after {
+  transform: translate(-27.361611466px, -75.1754096629px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(3) {
+  transform: translate(-31.25667198px, -177.2653955422px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(3):after {
+  transform: translate(13.8918542133px, 78.784620241px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(4) {
+  transform: translate(155.8845726812px, -89.9999999999px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(4):after {
+  transform: translate(-69.2820323028px, 40px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(5) {
+  transform: translate(-127.2792206135px, -127.2792206136px);
+}
+.bubbleNavigator.mainBubbleCount_2 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(5):after {
+  transform: translate(56.5685424949px, 56.568542495px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_1 .bubble:nth-child(1) {
+  transform: translate(0px, 180px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_1 .bubble:nth-child(1):after {
+  transform: translate(0px, -80px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(1) {
+  transform: translate(-180px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(1):after {
+  transform: translate(80px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(2) {
+  transform: translate(127.2792206136px, 127.2792206136px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_2 .bubble:nth-child(2):after {
+  transform: translate(-56.5685424949px, -56.5685424949px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(1) {
+  transform: translate(-180px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(1):after {
+  transform: translate(80px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(2) {
+  transform: translate(127.2792206136px, 127.2792206136px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(2):after {
+  transform: translate(-56.5685424949px, -56.5685424949px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(3) {
+  transform: translate(76.0712871134px, -163.1354016666px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_3 .bubble:nth-child(3):after {
+  transform: translate(-33.8094609393px, 72.5046229629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(1) {
+  transform: translate(-169.1446717415px, 61.5636257986px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(1):after {
+  transform: translate(75.1754096629px, -27.361611466px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(2) {
+  transform: translate(46.5874281184px, 173.866648732px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(2):after {
+  transform: translate(-20.7055236082px, -77.2740661031px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(3) {
+  transform: translate(76.0712871134px, -163.1354016666px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(3):after {
+  transform: translate(-33.8094609393px, 72.5046229629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(4) {
+  transform: translate(173.8666487321px, -46.5874281184px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_4 .bubble:nth-child(4):after {
+  transform: translate(-77.2740661031px, 20.7055236082px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(1) {
+  transform: translate(-61.5636257986px, 169.1446717415px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(1):after {
+  transform: translate(27.3616114661px, -75.1754096629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(2) {
+  transform: translate(103.2437585432px, 147.447367972px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(2):after {
+  transform: translate(-45.8861149081px, -65.5321635431px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(3) {
+  transform: translate(-76.0712871133px, -163.1354016666px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(3):after {
+  transform: translate(33.8094609392px, 72.5046229629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(4) {
+  transform: translate(127.2792206136px, -127.2792206135px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(4):after {
+  transform: translate(-56.568542495px, 56.5685424949px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(5) {
+  transform: translate(-155.8845726812px, -90px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(2) .childBubbles_5 .bubble:nth-child(5):after {
+  transform: translate(69.2820323027px, 40px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_1 .bubble:nth-child(1) {
+  transform: translate(-163.1354016666px, 76.0712871133px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_1 .bubble:nth-child(1):after {
+  transform: translate(72.5046229629px, -33.8094609392px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_2 .bubble:nth-child(1) {
+  transform: translate(-76.0712871133px, -163.1354016666px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_2 .bubble:nth-child(1):after {
+  transform: translate(33.8094609392px, 72.5046229629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_2 .bubble:nth-child(2) {
+  transform: translate(-61.5636257986px, 169.1446717415px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_2 .bubble:nth-child(2):after {
+  transform: translate(27.3616114661px, -75.1754096629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_3 .bubble:nth-child(1) {
+  transform: translate(-76.0712871133px, -163.1354016666px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_3 .bubble:nth-child(1):after {
+  transform: translate(33.8094609392px, 72.5046229629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_3 .bubble:nth-child(2) {
+  transform: translate(-61.5636257986px, 169.1446717415px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_3 .bubble:nth-child(2):after {
+  transform: translate(27.3616114661px, -75.1754096629px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_3 .bubble:nth-child(3) {
+  transform: translate(180px, 0.0000000001px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_3 .bubble:nth-child(3):after {
+  transform: translate(-80px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(1) {
+  transform: translate(-127.2792206135px, -127.2792206136px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(1):after {
+  transform: translate(56.5685424949px, 56.568542495px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(2) {
+  transform: translate(-137.8879997614px, 115.7017697436px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(2):after {
+  transform: translate(61.2835554495px, -51.4230087749px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(3) {
+  transform: translate(180px, 0.0000000001px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(3):after {
+  transform: translate(-80px, 0px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(4) {
+  transform: translate(115.7017697435px, 137.8879997615px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_4 .bubble:nth-child(4):after {
+  transform: translate(-51.4230087749px, -61.2835554496px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(1) {
+  transform: translate(-179.3150456565px, 15.6880336945px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(1):after {
+  transform: translate(79.6955758473px, -6.9724594198px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(2) {
+  transform: translate(-90px, 155.8845726812px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(2):after {
+  transform: translate(40px, -69.2820323027px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(3) {
+  transform: translate(115.7017697436px, -137.8879997614px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(3):after {
+  transform: translate(-51.423008775px, 61.2835554495px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(4) {
+  transform: translate(169.1446717414px, 61.5636257987px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(4):after {
+  transform: translate(-75.1754096629px, -27.3616114661px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(5) {
+  transform: translate(15.6880336946px, -179.3150456565px);
+}
+.bubbleNavigator.mainBubbleCount_3 .bubbleTree .bubbleBranch:nth-child(3) .childBubbles_5 .bubble:nth-child(5):after {
+  transform: translate(-6.9724594199px, 79.6955758473px);
+}
+.bubbleNavigator .parentBubble {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  z-index: 2;
+}
+.bubbleNavigator .bubble {
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  box-sizing: border-box;
+  background: var(--childBubbleBgColor, #5cabff);
+  background-image: var(--childBubbleBgGradient, radial-gradient(circle at 50% 35%, var(--childBubbleBgLightColor), var(--childBubbleBgDarkColor)));
+  outline: 20px solid transparent;
+}
+.bubbleNavigator .bubble:before {
+  animation: var(--childBubbleAnimation, glowBubble 10s ease infinite);
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 100%;
+  background: radial-gradient(circle at 35% 35%, rgb(255, 255, 255), rgba(255, 255, 255, 0.5) 15%, rgba(255, 255, 255, 0) 25%);
+}
+.bubbleNavigator .bubble button.bubbleButton {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  border-radius: 100%;
+  color: var(--childBubbleFg, #fff);
+  border: none;
+  text-shadow: var(--childBubbleTextShadow, 1px 1px 3px #000);
+  background: none;
+}
+.bubbleNavigator .parentBubble .bubble {
+  color: var(--parentBubbleFg, #222);
+  background: var(--parentBubbleBgColor, #eee);
+  background-image: var(--parentBubbleBgGradient, radial-gradient(circle at 50% 35%, var(--parentBubbleBgLightColor), var(--parentBubbleBgDarkColor)));
+  text-shadow: var(--parentBubbleTextShadow, 1px 1px 3px #fff);
+}
+.bubbleNavigator .parentBubble .bubble:before {
+  animation: var(--parentBubbleAnimation, animateBubble 10s ease infinite);
+}
+.bubbleNavigator .parentBubble .bubble .parentBubbleContent {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  width: 150px;
+  height: 150px;
+}
+.bubbleNavigator .parentBubble .bubble .parentBubbleContent .labelText {
+  position: relative;
+  z-index: 5;
+}
+.bubbleNavigator .childBubbles {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 3;
+}
+.bubbleNavigator .childBubbles .bubble {
+  position: absolute;
+  left: 50%;
+  top: 100px;
+  margin: -75px;
+  width: 150px;
+  height: 150px;
+}
+.bubbleNavigator .childBubbles .bubble:after {
+  content: "";
+  position: absolute;
+  background: radial-gradient(circle at 50% 35%, #c00, #000);
+  height: 20px;
+  border-radius: 100%;
+  width: 20px;
+  z-index: 4;
+}
+.bubbleNavigator .childBubbles button.bubbleButton {
+  width: 113px;
+  height: 113px;
+  border-radius: 100%;
+  row-gap: 10px;
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+  align-items: center;
+  justify-content: center;
+}
+.bubbleNavigator .childBubbles button.bubbleButton .bubbleDetails {
+  font-size: 11px;
+}
+.bubbleNavigator .childBubbles button.bubbleButton .bubbleDetails .labelValuePair {
+  display: flex;
+  flex-direction: row;
+  column-gap: 5px;
+  align-items: flex-start;
+  justify-content: center;
+}
+.bubbleNavigator .childBubbles button.bubbleButton .bubbleDetails .labelValuePair .labelText {
+  flex: 1;
+}
+.bubbleNavigator .childBubbles button.bubbleButton .bubbleDetails .labelValuePair .valueText {
+  flex: 1;
+}
+
+@keyframes animateBubble {
+  0% {
+    left: 100%;
+    transform: scaleX(50%);
+    opacity: 1;
+  }
+  50% {
+    transform: none;
+  }
+  65% {
+    opacity: 0.75;
+    transform: scale(75%) translateY(-10px);
+  }
+  90% {
+    opacity: 0.5;
+  }
+  100% {
+    left: 0;
+    opacity: 0;
+    transform: scale(125%);
+  }
+}
+@keyframes glowBubble {
+  0% {
+    transform: scale(50%);
+    opacity: 0;
+  }
+  65% {
+    opacity: 0.5;
+    transform: scale(75%);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(125%);
+  }
+}

package/dist/cjs/components/navigation/bubbleNavigator/bubbleNavigator.interface.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=bubbleNavigator.interface.js.map

package/dist/cjs/components/navigation/bubbleNavigator/bubbleNavigator.interface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bubbleNavigator.interface.js","names":[],"sources":["../../../../../src/components/navigation/bubbleNavigator/bubbleNavigator.interface.ts"],"sourcesContent":["import { ReactNode } from 'react';\nimport { JSONObject } from '../../../interfaces/generic.interface';\n\nexport interface KeyValueFilter { [key: string]: string | number | boolean }\n\nexport interface BubbleFilter extends Array<never> {\n  search: string | number | KeyValueFilter;\n  caseSensitive?: boolean;\n}\n\nexport interface BubbleItem extends JSONObject {\n  name: string;\n  id: string;\n  url?: string;\n  label: string;\n  description: string;\n  status: string;\n  path: number[];\n  childItems: BubbleItem[];\n}\n\nexport interface BubbleNavigatorProps {\n  bubblesData: BubbleItem[];\n  filters?: BubbleFilter[];\n  bubbleTemplate?: ReactNode;\n}\n"],"mappings":"","ignoreList":[]}

package/dist/cjs/components/navigation/bubbleNavigator/bubbleNavigatorContext/BubbleNavigatorContext.js

@@ -0,0 +1,28 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BubbleNavigatorContextProvider = exports.BubbleNavigatorContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Define the shape of the context value
+
+// Initialize context with the correct type
+const BubbleNavigatorContext = exports.BubbleNavigatorContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+const BubbleNavigatorContextProvider = ({
+  bubblesData,
+  children
+}) => {
+  const [bubbleNavigatorContext, setBubbleNavigatorContext] = (0, _react.useState)(bubblesData);
+  const bubbleContextProviderValue = (0, _react.useMemo)(() => ({
+    bubbleNavigatorContext,
+    setBubbleNavigatorContext
+  }), [bubbleNavigatorContext, setBubbleNavigatorContext]);
+  return /*#__PURE__*/_react.default.createElement(BubbleNavigatorContext.Provider, {
+    value: bubbleContextProviderValue
+  }, children);
+};
+exports.BubbleNavigatorContextProvider = BubbleNavigatorContextProvider;
+//# sourceMappingURL=BubbleNavigatorContext.js.map

package/dist/cjs/components/navigation/bubbleNavigator/bubbleNavigatorContext/BubbleNavigatorContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BubbleNavigatorContext.js","names":["Object","defineProperty","exports","value","BubbleNavigatorContextProvider","BubbleNavigatorContext","_react","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","getOwnPropertyDescriptor","createContext","undefined","bubblesData","children","bubbleNavigatorContext","setBubbleNavigatorContext","useState","bubbleContextProviderValue","useMemo","createElement","Provider"],"sources":["../../../../../../src/components/navigation/bubbleNavigator/bubbleNavigatorContext/BubbleNavigatorContext.tsx"],"sourcesContent":["'use client';\n\nimport React, {\n  createContext, ReactNode, useState, useMemo\n} from 'react';\nimport { BubbleItem } from '../bubbleNavigator.interface';\n\n// Define the shape of the context value\ninterface BubbleNavigatorContextType {\n  bubbleNavigatorContext: BubbleItem[] | undefined;\n  setBubbleNavigatorContext: React.Dispatch<React.SetStateAction<BubbleItem[] | undefined>>;\n}\n\n// Initialize context with the correct type\nexport const BubbleNavigatorContext = createContext<BubbleNavigatorContextType | undefined>(undefined);\n\nexport interface BubbleNavigatorContextProviderProps {\n  bubblesData: BubbleItem[] | undefined;\n  children: ReactNode;\n}\n\nexport const BubbleNavigatorContextProvider: React.FC<BubbleNavigatorContextProviderProps> = ({\n  bubblesData,\n  children\n}) => {\n  const [bubbleNavigatorContext, setBubbleNavigatorContext] = useState<BubbleItem[] | undefined>(bubblesData);\n\n  const bubbleContextProviderValue = useMemo(\n    () => ({ bubbleNavigatorContext, setBubbleNavigatorContext }),\n    [bubbleNavigatorContext, setBubbleNavigatorContext]\n  );\n\n  return (\n    <BubbleNavigatorContext.Provider value={ bubbleContextProviderValue }>\n      { children }\n    </BubbleNavigatorContext.Provider>\n  );\n};\n"],"mappings":";AAAA,YAAY;;AAACA,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,KAAA;AAAA;AAAAD,OAAA,CAAAE,8BAAA,GAAAF,OAAA,CAAAG,sBAAA;AAEb,IAAAC,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEe,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAf,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAyB,wBAAA,CAAAhB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAGf;;AAMA;AACO,MAAML,sBAAsB,GAAAH,OAAA,CAAAG,sBAAA,gBAAG,IAAAqB,oBAAa,EAAyCC,SAAS,CAAC;AAO/F,MAAMvB,8BAA6E,GAAGA,CAAC;EAC5FwB,WAAW;EACXC;AACF,CAAC,KAAK;EACJ,MAAM,CAACC,sBAAsB,EAAEC,yBAAyB,CAAC,GAAG,IAAAC,eAAQ,EAA2BJ,WAAW,CAAC;EAE3G,MAAMK,0BAA0B,GAAG,IAAAC,cAAO,EACxC,OAAO;IAAEJ,sBAAsB;IAAEC;EAA0B,CAAC,CAAC,EAC7D,CAACD,sBAAsB,EAAEC,yBAAyB,CACpD,CAAC;EAED,oBACEzB,MAAA,CAAAa,OAAA,CAAAgB,aAAA,CAAC9B,sBAAsB,CAAC+B,QAAQ;IAACjC,KAAK,EAAG8B;EAA4B,GACjEJ,QAC6B,CAAC;AAEtC,CAAC;AAAC3B,OAAA,CAAAE,8BAAA,GAAAA,8BAAA","ignoreList":[]}

package/dist/cjs/components/navigation/bubbleNavigator/bubbleNavigatorFilter/BubbleNavigatorFilter.js

@@ -0,0 +1,71 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BubbleNavigatorFilter = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactHookForm = require("react-hook-form");
+var _helpers = require("../../../../helpers");
+var _Accordion = require("../../../design/accordion/Accordion");
+var _InputCheckbox = require("../../../form/formFields/subComponents/inputs/checkbox/InputCheckbox");
+var _SimpleButton = require("../../../form/buttons/SimpleButton");
+var _FormField = require("../../../form/formFields/formFieldWrapper/FormField");
+require("./bubbleNavigatorFilter.css");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const BubbleNavigatorFilter = ({
+  filterOptions,
+  filterPanelHeight = 's',
+  onFilterChange
+}) => {
+  const {
+    getValues
+  } = (0, _reactHookForm.useFormContext)();
+  const [activeFilterOptions, setActiveFilterOptions] = (0, _react.useState)([]);
+  const ApplyFilters = () => {
+    // TODO: Get the form context
+    const filterKeys = getValues('bubbleFilterKeys');
+    setActiveFilterOptions(filterKeys);
+    if (onFilterChange) {
+      onFilterChange(filterKeys);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "bubbleNavigatorFilter"
+  }, /*#__PURE__*/_react.default.createElement("fieldset", {
+    className: "filterSearchTerm"
+  }, /*#__PURE__*/_react.default.createElement(_FormField.FormField, {
+    label: {
+      text: 'Search text'
+    },
+    field: {
+      type: 'search',
+      id: 'bubbleFilterSearchText',
+      name: 'bubbleFilterSearchText'
+    }
+  }), /*#__PURE__*/_react.default.createElement(_SimpleButton.SimpleButton, {
+    label: "apply filters",
+    id: "bubbleFilterApplyButton",
+    onClickHandler: ApplyFilters
+  })), /*#__PURE__*/_react.default.createElement(_Accordion.Accordion, {
+    restrictHeight: filterPanelHeight,
+    id: "bubbleNavigatorFilterAccordion",
+    heading: "Filter based on category"
+  }, /*#__PURE__*/_react.default.createElement("fieldset", {
+    className: "filterKeys"
+  }, filterOptions && filterOptions.map(key => /*#__PURE__*/_react.default.createElement(_InputCheckbox.InputCheckbox, {
+    key: key,
+    label: {
+      text: (0, _helpers.splitCamelCase)(key)
+    },
+    field: {
+      name: 'bubbleFilterKeys',
+      id: key,
+      value: key,
+      defaultChecked: activeFilterOptions && activeFilterOptions.indexOf(key) !== -1
+    }
+  })))));
+};
+exports.BubbleNavigatorFilter = BubbleNavigatorFilter;
+//# sourceMappingURL=BubbleNavigatorFilter.js.map