uiconfig-blueprint 0.1.0-dev.1 → 0.1.0-dev.11

package/src/components/axesIcons.tsx

@@ -0,0 +1,116 @@
+import {bpIconWrapper} from "./bpIconWrapper";
+
+export const axesXYZIcon = bpIconWrapper(
+    <>
+        <path
+            d="M7.9936 3.24224C7.93511 3.24307 7.87737 3.25542 7.82366 3.27858C7.76994 3.30174 7.72132 3.33526 7.68057 3.37721C7.63981 3.41917 7.60772 3.46874 7.58613 3.52311C7.56454 3.57747 7.55387 3.63555 7.55474 3.69403V9.42589C7.55474 9.54399 7.60165 9.65726 7.68516 9.74077C7.76868 9.82428 7.88194 9.87121 8.00004 9.87121C8.11815 9.87121 8.23141 9.82428 8.31492 9.74077C8.39843 9.65726 8.44535 9.54399 8.44535 9.42589V3.69403C8.44623 3.63446 8.43514 3.57532 8.41275 3.52011C8.39036 3.46489 8.35711 3.41473 8.31498 3.3726C8.27285 3.33047 8.2227 3.29723 8.16749 3.27483C8.11228 3.25244 8.05317 3.24136 7.9936 3.24224Z"
+            fill="#00AEEF"/>
+        <path
+            d="M8.02399 8.96912C7.93893 8.96566 7.85466 8.98665 7.78116 9.02962L2.10753 12.2316C2.05644 12.2602 2.01149 12.2986 1.97526 12.3447C1.93904 12.3907 1.91225 12.4434 1.89643 12.4998C1.88061 12.5562 1.87607 12.6152 1.88308 12.6734C1.89008 12.7315 1.90848 12.7877 1.93723 12.8387C1.96599 12.8898 2.00452 12.9346 2.05064 12.9707C2.09675 13.0069 2.14954 13.0335 2.20597 13.0492C2.26241 13.0649 2.32138 13.0693 2.37952 13.0622C2.43766 13.0551 2.49382 13.0365 2.54479 13.0077L8.21924 9.80492C8.30473 9.75827 8.37257 9.68488 8.41236 9.59599C8.45216 9.5071 8.46171 9.40761 8.43955 9.31277C8.4174 9.21794 8.36476 9.13297 8.28971 9.07091C8.21465 9.00884 8.1213 8.97307 8.02399 8.96912Z"
+            fill="#F0513F"/>
+        <path
+            d="M8.00732 8.96892C7.9074 8.96617 7.80947 8.99711 7.72928 9.05678C7.64909 9.11644 7.59131 9.20135 7.56523 9.29784C7.53915 9.39433 7.54629 9.49678 7.58551 9.58872C7.62473 9.68065 7.69373 9.75673 7.78143 9.80468L13.4551 13.0074C13.506 13.0367 13.5623 13.0557 13.6207 13.0632C13.679 13.0706 13.7383 13.0665 13.795 13.0509C13.8517 13.0354 13.9048 13.0088 13.9512 12.9726C13.9976 12.9364 14.0364 12.8914 14.0653 12.8402C14.0942 12.789 14.1127 12.7325 14.1197 12.6741C14.1267 12.6157 14.122 12.5565 14.106 12.4999C14.09 12.4433 14.063 12.3904 14.0264 12.3443C13.9899 12.2982 13.9446 12.2598 13.8931 12.2313L8.21946 9.02939C8.15494 8.99174 8.082 8.97097 8.00732 8.96892Z"
+            fill="#8DC63F"/>
+        <path
+            d="M9.17377 9.4238C9.17377 9.73511 9.0501 10.0337 8.82997 10.2538C8.60984 10.4739 8.31128 10.5976 7.99997 10.5976C7.68866 10.5976 7.3901 10.4739 7.16997 10.2538C6.94984 10.0337 6.82617 9.73511 6.82617 9.4238C6.82617 9.11249 6.94984 8.81393 7.16997 8.59379C7.3901 8.37366 7.68866 8.25 7.99997 8.25C8.31128 8.25 8.60984 8.37366 8.82997 8.59379C9.0501 8.81393 9.17377 9.11249 9.17377 9.4238Z"
+            fill="#FCB021"/>
+        <path
+            d="M8.00018 7.0625C6.70239 7.0625 5.64453 8.1204 5.64453 9.41815C5.64453 10.7159 6.70243 11.773 8.00018 11.773C9.29798 11.773 10.3558 10.7159 10.3558 9.41815C10.3558 8.12035 9.29794 7.0625 8.00018 7.0625ZM8.00018 7.59657C9.00922 7.59657 9.82181 8.40911 9.82181 9.41819C9.82181 10.4273 9.00926 11.239 8.00018 11.239C6.99115 11.239 6.17939 10.4273 6.17939 9.41819C6.17939 8.40911 6.99115 7.59657 8.00018 7.59657Z"
+            fill="#E6E6E8"/>
+        <path
+            d="M4.09471 7L3.48011 8.81691L4.13748 10.7405H3.51766L3.0421 9.26034H3.03144L2.55043 10.7405H2L2.65737 8.81691L2.04277 7H2.65189L3.09012 8.37868H3.10078L3.54971 7H4.09471Z"
+            fill="#F0513F"/>
+        <path
+            d="M9.90284 14.7822L9.16016 12.2812H9.77473L10.2182 13.9858H10.2289L10.6723 12.2812H11.2334L10.4908 14.7822V16.0218H9.90278L9.90284 14.7822Z"
+            fill="#8DC63F"/>
+        <path
+            d="M11.7207 1.00006V1.5236L10.6039 4.2063H11.7207V4.74054H10V4.21698L11.1168 1.53424H10.0535V1L11.7207 1.00006Z"
+            fill="#00AEEF"/>
+        <path
+            d="M9.16968 3.48709C8.62545 3.688 7.99939 3.68605 7.99939 3.68605C7.99939 3.68605 7.37333 3.68813 6.8291 3.48709C7.35376 2.26637 7.68353 1.55357 7.99939 1C8.31524 1.55357 8.64507 2.26637 9.16968 3.48709Z"
+            fill="#00AEEF"/>
+        <path
+            d="M13.2607 13.738C13.3589 13.1662 13.6736 12.625 13.6736 12.625C13.6736 12.625 13.9849 12.0818 14.431 11.7109C15.2259 12.7757 15.6783 13.4176 15.9997 13.968C15.3625 13.9647 14.5802 13.894 13.2607 13.738Z"
+            fill="#8DC63F"/>
+        <path
+            d="M1.56872 11.7109C2.01485 12.0818 2.32617 12.625 2.32617 12.625C2.32617 12.625 2.64087 13.1661 2.739 13.738C1.41952 13.894 0.637292 13.9648 0 13.968C0.321459 13.4177 0.773891 12.7757 1.56872 11.7109Z"
+            fill="#F0513F"/>
+    </>
+);
+
+
+export const axesCubeIcon = bpIconWrapper(
+    <>
+        <path
+            d="M512.001 462.06C512.004 461.352 511.915 460.626 511.721 459.944L498.763 414.481C496.105 405.155 481.679 409.265 484.336 418.592L492.096 445.818L378.499 377.595L378.489 247.981C378.489 245.248 376.928 242.64 374.51 241.36L263.491 182.329V59.593L282.618 80.2374C289.267 87.4098 300.176 77.1171 293.622 70.0417L261.493 35.3634C258.604 32.2482 253.378 32.2492 250.488 35.3634L218.359 70.0417C211.769 77.1582 222.77 87.3468 229.364 80.2374L248.49 59.593V182.329L137.472 241.36C135.049 242.617 133.493 245.267 133.493 247.982V377.588L19.8852 445.817L27.6457 418.591C30.3029 409.263 15.8769 405.155 13.2187 414.48L0.260889 459.943C-0.902188 464.035 1.937 468.868 6.5203 469.459L52.2933 478.804C61.4929 480.686 64.6442 466.016 55.2935 464.106L27.8877 458.511L140.877 390.654L252.471 449.991C254.644 451.146 257.341 451.147 259.514 449.991L328.24 413.447C336.802 408.895 329.705 395.679 321.141 400.232L263.492 430.885V313.638L363.489 260.466L363.499 377.481L321.141 400.232C312.78 404.723 319.876 417.94 328.24 413.447L370.904 390.532L484.097 458.51L456.691 464.105C447.326 466.018 450.622 480.659 459.691 478.803L505.473 469.457C509.114 468.984 511.977 465.561 512.001 462.06ZM255.992 300.636L210.623 276.511C202.059 271.959 195.017 285.204 203.579 289.756L248.491 313.638V430.886L148.496 377.715V260.467L203.579 289.756C212.143 294.311 219.185 281.064 210.623 276.511L156.97 247.984L255.992 195.333L355.013 247.984L255.992 300.636Z"
+            fill="currentColor"/>
+    </>
+, 512);
+
+
+export const axesTetrahedronIcon = bpIconWrapper(
+    <>
+        <path
+            d="M512 462.053C512.002 461.348 511.914 460.624 511.72 459.944L498.762 414.481C496.104 405.158 481.677 409.265 484.335 418.593L492.095 445.818L376.132 376.175L263.491 184.793V59.5944L282.617 80.2388C289.265 87.4122 300.175 77.1176 293.621 70.0431L261.493 35.3649C258.612 32.2477 253.369 32.2487 250.489 35.3649L218.361 70.0431C211.769 77.1576 222.773 87.3522 229.364 80.2388L248.491 59.5944V184.793L200.72 265.959C195.801 274.316 208.729 281.928 213.647 273.568L248.491 214.368V430.885L151.431 379.276L213.647 273.568C218.567 265.21 205.64 257.602 200.72 265.959L135.85 376.176L19.8859 445.818L27.6464 418.593C30.3046 409.265 15.8777 405.158 13.2195 414.481L0.261661 459.944C-0.904414 464.034 1.94177 468.866 6.51406 469.459L52.294 478.804C61.4936 480.686 64.6448 466.017 55.2942 464.107L27.8874 458.512L140.878 390.655L252.47 449.992C254.639 451.145 257.343 451.144 259.512 449.992L304.222 426.219C312.785 421.667 305.742 408.42 297.18 412.974L263.492 430.886V214.368L360.551 379.275L297.18 412.974C288.616 417.527 295.66 430.773 304.222 426.219L371.105 390.653L484.095 458.51L456.688 464.104C447.322 466.018 450.619 480.659 459.688 478.802L505.473 469.456C509.126 468.981 511.973 465.557 512 462.053Z"
+            fill="currentColor"/>
+    </>
+, 512);
+
+
+export const axesSphereIcon = bpIconWrapper(
+    <>
+        <path
+            d="M511.796 459.976L498.836 414.507C496.177 405.182 481.748 409.29 484.407 418.619L492.168 445.848L371.321 373.272C381.503 354.372 386.894 332.875 386.894 311.409C386.894 241.768 332.212 184.665 263.531 180.764V59.5671L282.66 80.2145C289.309 87.389 300.221 77.0929 293.665 70.0173L261.532 35.334C258.652 32.2163 253.408 32.2173 250.527 35.334L218.394 70.0173C211.802 77.1329 222.807 87.329 229.399 80.2145L248.529 59.5671V180.774C227.352 181.984 206.78 188.292 188.62 199.225C180.31 204.226 188.052 217.087 196.358 212.078C214.32 201.262 234.955 195.547 256.029 195.547C320.551 195.547 373.901 250.719 371.823 315.189C368.383 323.372 354.567 331.858 334.492 338.048C325.345 340.869 330.028 355.121 338.912 352.385C348.526 349.422 359.416 345.184 368.468 339.387C355.92 389.8 310.272 427.271 256.029 427.271C201.783 427.271 156.132 389.794 143.587 339.376C152.127 344.848 162.251 348.904 171.211 351.777C194.757 359.33 224.88 363.489 256.029 363.489C268.892 363.489 281.613 362.789 293.837 361.407C303.474 360.319 301.79 345.369 292.153 346.5C280.485 347.817 268.332 348.486 256.029 348.486C226.393 348.486 197.898 344.581 175.793 337.491C156.72 331.373 143.565 323.096 140.235 315.187C140.195 313.931 140.167 312.674 140.167 311.41C140.167 283.53 150.213 256.59 168.453 235.552C174.806 228.223 163.47 218.394 157.116 225.723C135.162 251.046 124.464 283.555 125.286 316.854C126.123 337.191 131.618 356.344 140.738 373.273L19.8889 445.848L27.6505 418.619C30.3091 409.29 15.88 405.182 13.2215 414.507L0.2617 459.976C-0.904548 464.067 1.94206 468.899 6.51503 469.492L52.3018 478.839C61.5027 480.721 64.6544 466.05 55.3024 464.139L27.8916 458.544L148.601 386.051C172.266 420.008 211.594 442.275 256.029 442.275C300.465 442.275 339.792 420.007 363.457 386.051L484.167 458.544L456.756 464.139C447.389 466.053 450.686 480.696 459.756 478.839L505.548 469.491C509.202 469.014 512.917 464.172 511.796 459.976Z"
+            fill="currentColor"/>
+    </>
+, 512);
+
+
+
+export const axesCubeFilledIcon = bpIconWrapper(
+    <>
+        <path d="M255.992 186.836L140.994 247.983L255.992 309.13L370.988 247.983L255.992 186.836Z"
+              fill="#FCF2B4"/>
+        <path d="M255.992 308.937V443.369L370.989 382.222V247.984L255.992 308.937Z" fill="#FCE767"/>
+        <path d="M320.984 274.488V408.81L370.988 382.222V247.984L320.984 274.488Z" fill="#FCDF2B"/>
+        <path d="M140.994 247.984L255.992 308.937V443.369L140.994 382.222V247.984Z" fill="#FCDC19"/>
+        <path
+            d="M512.001 462.06C512.004 461.352 511.915 460.626 511.721 459.944L498.763 414.481C496.105 405.155 481.679 409.265 484.336 418.592L492.096 445.818L378.499 377.595L378.489 247.981C378.489 245.248 376.928 242.64 374.51 241.36L263.491 182.329V59.593L282.618 80.2374C289.267 87.4098 300.176 77.1171 293.622 70.0417L261.493 35.3634C258.604 32.2482 253.378 32.2492 250.488 35.3634L218.359 70.0417C211.769 77.1582 222.77 87.3468 229.364 80.2374L248.49 59.593V182.329L137.472 241.36C135.049 242.617 133.493 245.267 133.493 247.982V377.588L19.8852 445.817L27.6457 418.591C30.3029 409.263 15.8769 405.155 13.2187 414.48L0.260889 459.943C-0.902188 464.035 1.937 468.868 6.5203 469.459L52.2933 478.804C61.4929 480.686 64.6442 466.016 55.2935 464.106L27.8877 458.511L140.877 390.654L252.471 449.991C254.644 451.146 257.341 451.147 259.514 449.991L328.24 413.447C336.802 408.895 329.705 395.679 321.141 400.232L263.492 430.885V313.638L363.489 260.466L363.499 377.481L321.141 400.232C312.78 404.723 319.876 417.94 328.24 413.447L370.904 390.532L484.097 458.51L456.691 464.105C447.326 466.018 450.622 480.659 459.691 478.803L505.473 469.457C509.114 468.984 511.977 465.561 512.001 462.06ZM255.992 300.636L210.623 276.511C202.059 271.959 195.017 285.204 203.579 289.756L248.491 313.638V430.886L148.496 377.715V260.467L203.579 289.756C212.143 294.311 219.185 281.064 210.623 276.511L156.97 247.984L255.992 195.333L355.013 247.984L255.992 300.636Z"
+            fill="currentColor"/>
+    </>
+, 512);
+
+
+export const axesTetrahedronFilledIcon = bpIconWrapper(
+    <>
+        <path d="M255.99 186.836V443.366L370.988 382.22L255.99 186.836Z" fill="#1EE3A5"/>
+        <path d="M332.903 402.47L370.988 382.22L255.99 186.836L332.903 402.47Z" fill="#1CD198"/>
+        <path d="M255.991 186.836V443.366L140.994 382.22L255.991 186.836Z" fill="#15AA78"/>
+        <path
+            d="M512 462.053C512.002 461.348 511.914 460.624 511.72 459.944L498.762 414.481C496.104 405.158 481.677 409.265 484.335 418.593L492.095 445.818L376.132 376.175L263.491 184.793V59.5944L282.617 80.2388C289.265 87.4122 300.175 77.1176 293.621 70.0431L261.493 35.3649C258.612 32.2477 253.369 32.2487 250.489 35.3649L218.361 70.0431C211.769 77.1576 222.773 87.3522 229.364 80.2388L248.491 59.5944V184.793L200.72 265.959C195.801 274.316 208.729 281.928 213.647 273.568L248.491 214.368V430.885L151.431 379.276L213.647 273.568C218.567 265.21 205.64 257.602 200.72 265.959L135.85 376.176L19.8859 445.818L27.6464 418.593C30.3046 409.265 15.8777 405.158 13.2195 414.481L0.261661 459.944C-0.904414 464.034 1.94177 468.866 6.51406 469.459L52.294 478.804C61.4936 480.686 64.6448 466.017 55.2942 464.107L27.8874 458.512L140.878 390.655L252.47 449.992C254.639 451.145 257.343 451.144 259.512 449.992L304.222 426.219C312.785 421.667 305.742 408.42 297.18 412.974L263.492 430.886V214.368L360.551 379.275L297.18 412.974C288.616 417.527 295.66 430.773 304.222 426.219L371.105 390.653L484.095 458.51L456.688 464.104C447.322 466.018 450.619 480.659 459.688 478.802L505.473 469.456C509.126 468.981 511.973 465.557 512 462.053Z"
+            fill="currentColor"/>
+    </>
+, 512);
+
+
+export const axesSphereFilledIcon = bpIconWrapper(
+    <>
+        <path
+            d="M256.027 434.773C324.159 434.773 379.391 379.542 379.391 311.41C379.391 243.278 324.159 188.047 256.027 188.047C187.896 188.047 132.664 243.278 132.664 311.41C132.664 379.542 187.896 434.773 256.027 434.773Z"
+            fill="#FF8959"/>
+        <path
+            d="M256.027 188.047C247.46 188.047 239.096 188.922 231.021 190.584C287.164 202.143 329.379 251.846 329.379 311.411C329.379 370.976 287.164 420.678 231.021 432.238C239.096 433.9 247.46 434.775 256.027 434.775C324.158 434.775 379.39 379.544 379.39 311.412C379.39 243.281 324.159 188.047 256.027 188.047Z"
+            fill="#FF7B45"/>
+        <path
+            d="M256.027 355.988C192.955 355.988 140.109 338.815 132.783 316.68C135.545 382.367 189.661 434.774 256.027 434.774C322.394 434.774 376.51 382.366 379.272 316.68C371.947 338.815 319.1 355.988 256.027 355.988Z"
+            fill="#FF6A2E"/>
+        <path
+            d="M323.616 348.746C310.256 390.871 274.895 423.197 231.021 432.231C239.097 433.894 247.459 434.774 256.027 434.774C322.393 434.774 376.509 382.366 379.271 316.68C374.83 330.101 353.656 341.695 323.616 348.746Z"
+            fill="#FC5C1C"/>
+        <path
+            d="M511.796 459.976L498.836 414.507C496.177 405.182 481.748 409.29 484.407 418.619L492.168 445.848L371.321 373.272C381.503 354.372 386.894 332.875 386.894 311.409C386.894 241.768 332.212 184.665 263.531 180.764V59.5671L282.66 80.2145C289.309 87.389 300.221 77.0929 293.665 70.0173L261.532 35.334C258.652 32.2163 253.408 32.2173 250.527 35.334L218.394 70.0173C211.802 77.1329 222.807 87.329 229.399 80.2145L248.529 59.5671V180.774C227.352 181.984 206.78 188.292 188.62 199.225C180.31 204.226 188.052 217.087 196.358 212.078C214.32 201.262 234.955 195.547 256.029 195.547C320.551 195.547 373.901 250.719 371.823 315.189C368.383 323.372 354.567 331.858 334.492 338.048C325.345 340.869 330.028 355.121 338.912 352.385C348.526 349.422 359.416 345.184 368.468 339.387C355.92 389.8 310.272 427.271 256.029 427.271C201.783 427.271 156.132 389.794 143.587 339.376C152.127 344.848 162.251 348.904 171.211 351.777C194.757 359.33 224.88 363.489 256.029 363.489C268.892 363.489 281.613 362.789 293.837 361.407C303.474 360.319 301.79 345.369 292.153 346.5C280.485 347.817 268.332 348.486 256.029 348.486C226.393 348.486 197.898 344.581 175.793 337.491C156.72 331.373 143.565 323.096 140.235 315.187C140.195 313.931 140.167 312.674 140.167 311.41C140.167 283.53 150.213 256.59 168.453 235.552C174.806 228.223 163.47 218.394 157.116 225.723C135.162 251.046 124.464 283.555 125.286 316.854C126.123 337.191 131.618 356.344 140.738 373.273L19.8889 445.848L27.6505 418.619C30.3091 409.29 15.88 405.182 13.2215 414.507L0.2617 459.976C-0.904548 464.067 1.94206 468.899 6.51503 469.492L52.3018 478.839C61.5027 480.721 64.6544 466.05 55.3024 464.139L27.8916 458.544L148.601 386.051C172.266 420.008 211.594 442.275 256.029 442.275C300.465 442.275 339.792 420.007 363.457 386.051L484.167 458.544L456.756 464.139C447.389 466.053 450.686 480.696 459.756 478.839L505.548 469.491C509.202 469.014 512.917 464.172 511.796 459.976Z"
+            fill="currentColor"/>
+    </>
+, 512);
+
+

package/src/components/bpIconWrapper.tsx

@@ -1,9 +1,9 @@
-// https://github.com/palantir/blueprint/issues/2348#issuecomment-389322440
-import {ReactNode} from "react";
+import {HTMLAttributes, ReactNode} from "react";
 
-export const bpIconWrapper = (path: ReactNode, viewbox = 16) => {
+// https://github.com/palantir/blueprint/issues/2348#issuecomment-389322440
+export const bpIconWrapper = (path: ReactNode, viewbox = 16, svgProps?: HTMLAttributes<SVGElement>, className?: string) => {
     return (
-        <span className="bp5-icon">
+        <span className={"bp5-icon" + (className ? ` ${className}` : '')} role="img" aria-label="icon">
             <svg
                 xmlns="http://www.w3.org/2000/svg"
                 x="0"
@@ -12,6 +12,7 @@ export const bpIconWrapper = (path: ReactNode, viewbox = 16) => {
                 height="16"
                 role="img"
                 viewBox={`0 0 ${viewbox} ${viewbox}`}
+                {...svgProps}
             >
                 {path}
             </svg>

package/src/components/common.scss

@@ -1,7 +1,10 @@
+@import './tree2.scss';
 
 .bpButton {
   display: flex;
   justify-content: space-between;
+  min-height: 24px;
+  //max-height: 40px;
 }
 
 .bpIconButton {
@@ -25,3 +28,17 @@
 .hidden{
   display: none;
 }
+
+
+// see iconMapping.ts
+// https://stackoverflow.com/a/19563399/2229899
+// https://stackoverflow.com/a/72792696/2229899
+.bpIconWrapperMonoFilter{
+  filter: sepia(1) hue-rotate(calc(215deg - 50deg)) saturate(0.5) brightness(0.5);
+  .bp5-dark & {
+    filter: sepia(1) hue-rotate(calc(215deg - 50deg)) saturate(0.5) brightness(0.8);
+    :hover{
+      filter: sepia(1) hue-rotate(calc(215deg - 50deg)) saturate(0.5) brightness(1.1);
+    }
+  }
+}

package/src/components/iconMapping.ts

@@ -0,0 +1,354 @@
+import {
+    hIcon3,
+    uIcon3,
+    vIcon3,
+    wIcon3,
+    xIcon1,
+    xIcon10,
+    xIcon11,
+    xIcon12,
+    xIcon2,
+    xIcon3,
+    xIcon4,
+    xIcon5,
+    xIcon6,
+    xIcon7,
+    xIcon8,
+    xIcon9,
+    yIcon1,
+    yIcon10,
+    yIcon11,
+    yIcon12,
+    yIcon2,
+    yIcon3,
+    yIcon4,
+    yIcon5,
+    yIcon6,
+    yIcon7,
+    yIcon8,
+    yIcon9,
+    zIcon1,
+    zIcon10,
+    zIcon11,
+    zIcon12,
+    zIcon2,
+    zIcon3,
+    zIcon4,
+    zIcon5,
+    zIcon6,
+    zIcon7,
+    zIcon8,
+    zIcon9
+} from './variableIcons'
+import {
+    axesCubeFilledIcon,
+    axesCubeIcon,
+    axesSphereFilledIcon,
+    axesSphereIcon,
+    axesTetrahedronFilledIcon,
+    axesTetrahedronIcon,
+    axesXYZIcon,
+} from './axesIcons'
+import {
+    shape3dAbstract1Icon,
+    shape3dAbstract2Icon,
+    shape3dAbstract3Icon,
+    shape3dAbstractFilled1Icon,
+    shape3dAbstractFilled2Icon,
+    shape3dAbstractFilled3Icon,
+    shape3dHexagon1Icon,
+    shape3dHexagonFilled1Icon,
+    shape3dMultiplicationFilledIcon,
+    shape3dMultiplicationIcon,
+    shape3dPentagon1Icon,
+    shape3dPentagonFilled1Icon,
+    shape3dPlusFilledIcon,
+    shape3dPlusIcon,
+    shape3dShapesIcon,
+    shape3dStar1Icon,
+    shape3dStarFilled1Icon,
+    shapeAxesCubeFilledIcon,
+    shapeAxesCubeIcon,
+    shapeAxesPyramidFilledIcon,
+    shapeAxesPyramidIcon,
+    shapeAxesSphereFilledIcon,
+    shapeAxesSphereIcon,
+    shapeCone1Icon,
+    shapeCone2Icon,
+    shapeConeFilled1Icon,
+    shapeConeFilled2Icon,
+    shapeCube1Icon,
+    shapeCubeCut1Icon,
+    shapeCubeCut2Icon,
+    shapeCubeCutFilled1Icon,
+    shapeCubeCutFilled2Icon,
+    shapeCubeFilled1Icon,
+    shapeCubeTransparentFilledIcon,
+    shapeCubeTransparentIcon,
+    shapeCuboid1Icon,
+    shapeCuboidFilled1Icon,
+    shapeCylinder1Icon,
+    shapeCylinder2Icon,
+    shapeCylinderFilled1Icon,
+    shapeCylinderFilled2Icon,
+    shapeCylinderSkewedFilledIcon,
+    shapeCylinderSkewedIcon,
+    shapeCylinderSteps1Icon,
+    shapeCylinderStepsFilled1Icon,
+    shapeCylinderTransparentFilledIcon,
+    shapeCylinderTransparentIcon,
+    shapeDiamond1Icon,
+    shapeDiamond2Icon,
+    shapeDiamond3Icon,
+    shapeDiamondFilled1Icon,
+    shapeDiamondFilled2Icon,
+    shapeDiamondFilled3Icon,
+    shapeDodecahedronFilledIcon,
+    shapeDodecahedronIcon,
+    shapeHorseshoe1Icon,
+    shapeHorseshoe2Icon,
+    shapeHorseshoeFilled1Icon,
+    shapeHorseshoeFilled2Icon,
+    shapeHourglass1Icon,
+    shapeHourglass2Icon,
+    shapeHourglassFilled1Icon,
+    shapeHourglassFilled2Icon,
+    shapeOctahedronTransparentFilledIcon,
+    shapeOctahedronTransparentIcon,
+    shapePyramid1Icon,
+    shapePyramid2Icon,
+    shapePyramid3Icon,
+    shapePyramid4Icon,
+    shapePyramid5Icon,
+    shapePyramidFilled1Icon,
+    shapePyramidFilled2Icon,
+    shapePyramidFilled3Icon,
+    shapePyramidFilled4Icon,
+    shapePyramidFilled5Icon,
+    shapePyramidTransparentFilledIcon,
+    shapePyramidTransparentIcon,
+    shapeRhombus1Icon,
+    shapeRhombusFilled1Icon,
+    shapeSphere1Icon,
+    shapeSphere2Icon,
+    shapeSphereCut1Icon,
+    shapeSphereCutFilled1Icon,
+    shapeSphereFilled1Icon,
+    shapeSphereFilled2Icon,
+    shapeSphereMultiFilledIcon,
+    shapeSphereMultiIcon,
+    shapeSphereSkewedFilledIcon,
+    shapeSphereSkewedIcon,
+    shapeSphereTransparentFilledIcon,
+    shapeSphereTransparentIcon,
+    shapeStepsFilledIcon,
+    shapeStepsIcon,
+    shapeTorusFilledIcon,
+    shapeTorusIcon,
+    shapeTrapezium1Icon,
+    shapeTrapezium2Icon,
+    shapeTrapeziumFilled1Icon,
+    shapeTrapeziumFilled2Icon
+} from './shapesIcons'
+import {HTMLAttributes, ReactElement} from 'react'
+
+const monoIcon = (icon: (props: HTMLAttributes<SVGElement>)=>ReactElement)=>(props?: HTMLAttributes<SVGElement>)=>icon({...props, className: 'bpIconWrapperMonoFilter ' + (props?.className||'')})
+
+export const bpUiConfigIcons = {
+    'x-1': xIcon1,
+    'y-1': yIcon1,
+    'z-1': zIcon1,
+    'x-2': xIcon2,
+    'y-2': yIcon2,
+    'z-2': zIcon2,
+    'x-3': xIcon3,
+    'y-3': yIcon3,
+    'z-3': zIcon3,
+    'u-3': uIcon3,
+    'v-3': vIcon3,
+    'w-3': wIcon3,
+    'h-3': hIcon3,
+    'x-4': xIcon4,
+    'y-4': yIcon4,
+    'z-4': zIcon4,
+    'x-5': xIcon5,
+    'y-5': yIcon5,
+    'z-5': zIcon5,
+    'x-6': xIcon6,
+    'y-6': yIcon6,
+    'z-6': zIcon6,
+    'x-7': xIcon7,
+    'y-7': yIcon7,
+    'z-7': zIcon7,
+    'x-8': xIcon8,
+    'y-8': yIcon8,
+    'z-8': zIcon8,
+    'x-9': xIcon9,
+    'y-9': yIcon9,
+    'z-9': zIcon9,
+    'x-10': xIcon10,
+    'y-10': yIcon10,
+    'z-10': zIcon10,
+    'x-11': xIcon11,
+    'y-11': yIcon11,
+    'z-11': zIcon11,
+    'x-12': xIcon12,
+    'y-12': yIcon12,
+    'z-12': zIcon12,
+    'axes-xyz': axesXYZIcon,
+    'axes-cube': axesCubeIcon,
+    'axes-tetrahedron': axesTetrahedronIcon,
+    'axes-sphere': axesSphereIcon,
+    'axes-cube-filled': axesCubeFilledIcon,
+    'axes-tetrahedron-filled': axesTetrahedronFilledIcon,
+    'axes-sphere-filled': axesSphereFilledIcon,
+
+    'shape-cone-filled-1': shapeConeFilled1Icon,
+    'shape-cone-filled-mono-1': monoIcon(shapeConeFilled1Icon),
+    'shape-cone-1': shapeCone1Icon,
+    'shape-sphere-filled-1': shapeSphereFilled1Icon,
+    'shape-sphere-filled-mono-1': monoIcon(shapeSphereFilled1Icon),
+    'shape-sphere-1': shapeSphere1Icon,
+    'shape-cube-filled-1': shapeCubeFilled1Icon,
+    'shape-cube-filled-mono-1': monoIcon(shapeCubeFilled1Icon),
+    'shape-cube-1': shapeCube1Icon,
+    'shape-cylinder-filled-1': shapeCylinderFilled1Icon,
+    'shape-cylinder-filled-mono-1': monoIcon(shapeCylinderFilled1Icon),
+    'shape-cylinder-1': shapeCylinder1Icon,
+    'shape-pyramid-filled-1': shapePyramidFilled1Icon,
+    'shape-pyramid-filled-mono-1': monoIcon(shapePyramidFilled1Icon),
+    'shape-pyramid-1': shapePyramid1Icon,
+    'shape-rhombus-filled-1': shapeRhombusFilled1Icon,
+    'shape-rhombus-filled-mono-1': monoIcon(shapeRhombusFilled1Icon),
+    'shape-rhombus-1': shapeRhombus1Icon,
+    'shape-3d-hexagon-filled-1': shape3dHexagonFilled1Icon,
+    'shape-3d-hexagon-filled-mono-1': monoIcon(shape3dHexagonFilled1Icon),
+    'shape-3d-hexagon-1': shape3dHexagon1Icon,
+    'shape-pyramid-filled-2': shapePyramidFilled2Icon,
+    'shape-pyramid-filled-mono-2': monoIcon(shapePyramidFilled2Icon),
+    'shape-pyramid-2': shapePyramid2Icon,
+    'shape-3d-star-filled-1': shape3dStarFilled1Icon,
+    'shape-3d-star-filled-mono-1': monoIcon(shape3dStarFilled1Icon),
+    'shape-3d-star-1': shape3dStar1Icon,
+    'shape-cuboid-filled-1': shapeCuboidFilled1Icon,
+    'shape-cuboid-filled-mono-1': monoIcon(shapeCuboidFilled1Icon),
+    'shape-cuboid-1': shapeCuboid1Icon,
+    'shape-cylinder-steps-filled-1': shapeCylinderStepsFilled1Icon,
+    'shape-cylinder-steps-filled-mono-1': monoIcon(shapeCylinderStepsFilled1Icon),
+    'shape-cylinder-steps-1': shapeCylinderSteps1Icon,
+    'shape-trapezium-filled-1': shapeTrapeziumFilled1Icon,
+    'shape-trapezium-filled-mono-1': monoIcon(shapeTrapeziumFilled1Icon),
+    'shape-trapezium-1': shapeTrapezium1Icon,
+    'shape-sphere-cut-filled-1': shapeSphereCutFilled1Icon,
+    'shape-sphere-cut-filled-mono-1': monoIcon(shapeSphereCutFilled1Icon),
+    'shape-sphere-cut-1': shapeSphereCut1Icon,
+    'shape-trapezium-filled-2': shapeTrapeziumFilled2Icon,
+    'shape-trapezium-filled-mono-2': monoIcon(shapeTrapeziumFilled2Icon),
+    'shape-trapezium-2': shapeTrapezium2Icon,
+    'shape-pyramid-filled-3': shapePyramidFilled3Icon,
+    'shape-pyramid-filled-mono-3': monoIcon(shapePyramidFilled3Icon),
+    'shape-pyramid-3': shapePyramid3Icon,
+    'shape-hourglass-filled-1': shapeHourglassFilled1Icon,
+    'shape-hourglass-filled-mono-1': monoIcon(shapeHourglassFilled1Icon),
+    'shape-hourglass-1': shapeHourglass1Icon,
+    'shape-cube-cut-filled-1': shapeCubeCutFilled1Icon,
+    'shape-cube-cut-filled-mono-1': monoIcon(shapeCubeCutFilled1Icon),
+    'shape-cube-cut-1': shapeCubeCut1Icon,
+    'shape-torus-filled': shapeTorusFilledIcon,
+    'shape-torus-filled-mono': monoIcon(shapeTorusFilledIcon),
+    'shape-torus': shapeTorusIcon,
+    'shape-3d-abstract-filled-1': shape3dAbstractFilled1Icon,
+    'shape-3d-abstract-filled-mono-1': monoIcon(shape3dAbstractFilled1Icon),
+    'shape-3d-abstract-1': shape3dAbstract1Icon,
+    'shape-cylinder-filled-2': shapeCylinderFilled2Icon,
+    'shape-cylinder-filled-mono-2': monoIcon(shapeCylinderFilled2Icon),
+    'shape-cylinder-2': shapeCylinder2Icon,
+    'shape-3d-pentagon-filled-1': shape3dPentagonFilled1Icon,
+    'shape-3d-pentagon-filled-mono-1': monoIcon(shape3dPentagonFilled1Icon),
+    'shape-3d-pentagon-1': shape3dPentagon1Icon,
+    'shape-horseshoe-filled-1': shapeHorseshoeFilled1Icon,
+    'shape-horseshoe-filled-mono-1': monoIcon(shapeHorseshoeFilled1Icon),
+    'shape-horseshoe-1': shapeHorseshoe1Icon,
+    'shape-steps-filled': shapeStepsFilledIcon,
+    'shape-steps-filled-mono': monoIcon(shapeStepsFilledIcon),
+    'shape-steps': shapeStepsIcon,
+    'shape-hourglass-filled-2': shapeHourglassFilled2Icon,
+    'shape-hourglass-filled-mono-2': monoIcon(shapeHourglassFilled2Icon),
+    'shape-hourglass-2': shapeHourglass2Icon,
+    'shape-3d-abstract-filled-2': shape3dAbstractFilled2Icon,
+    'shape-3d-abstract-filled-mono-2': monoIcon(shape3dAbstractFilled2Icon),
+    'shape-3d-abstract-2': shape3dAbstract2Icon,
+    'shape-diamond-filled-1': shapeDiamondFilled1Icon,
+    'shape-diamond-filled-mono-1': monoIcon(shapeDiamondFilled1Icon),
+    'shape-diamond-1': shapeDiamond1Icon,
+    'shape-diamond-filled-2': shapeDiamondFilled2Icon,
+    'shape-diamond-filled-mono-2': monoIcon(shapeDiamondFilled2Icon),
+    'shape-diamond-2': shapeDiamond2Icon,
+    'shape-dodecahedron-filled': shapeDodecahedronFilledIcon,
+    'shape-dodecahedron-filled-mono': monoIcon(shapeDodecahedronFilledIcon),
+    'shape-dodecahedron': shapeDodecahedronIcon,
+    'shape-3d-plus-filled': shape3dPlusFilledIcon,
+    'shape-3d-plus-filled-mono': monoIcon(shape3dPlusFilledIcon),
+    'shape-3d-plus': shape3dPlusIcon,
+    'shape-diamond-filled-3': shapeDiamondFilled3Icon,
+    'shape-diamond-filled-mono-3': monoIcon(shapeDiamondFilled3Icon),
+    'shape-diamond-3': shapeDiamond3Icon,
+    'shape-cone-filled-2': shapeConeFilled2Icon,
+    'shape-cone-filled-mono-2': monoIcon(shapeConeFilled2Icon),
+    'shape-cone-2': shapeCone2Icon,
+    'shape-3d-multiplication-filled': shape3dMultiplicationFilledIcon,
+    'shape-3d-multiplication-filled-mono': monoIcon(shape3dMultiplicationFilledIcon),
+    'shape-3d-multiplication': shape3dMultiplicationIcon,
+    'shape-3d-abstract-filled-3': shape3dAbstractFilled3Icon,
+    'shape-3d-abstract-filled-mono-3': monoIcon(shape3dAbstractFilled3Icon),
+    'shape-3d-abstract-3': shape3dAbstract3Icon,
+    'shape-sphere-skewed-filled': shapeSphereSkewedFilledIcon,
+    'shape-sphere-skewed-filled-mono': monoIcon(shapeSphereSkewedFilledIcon),
+    'shape-sphere-skewed': shapeSphereSkewedIcon,
+    'shape-cylinder-skewed-filled': shapeCylinderSkewedFilledIcon,
+    'shape-cylinder-skewed-filled-mono': monoIcon(shapeCylinderSkewedFilledIcon),
+    'shape-cylinder-skewed': shapeCylinderSkewedIcon,
+    'shape-horseshoe-filled-2': shapeHorseshoeFilled2Icon,
+    'shape-horseshoe-filled-mono-2': monoIcon(shapeHorseshoeFilled2Icon),
+    'shape-horseshoe-2': shapeHorseshoe2Icon,
+    'shape-sphere-filled-2': shapeSphereFilled2Icon,
+    'shape-sphere-filled-mono-2': monoIcon(shapeSphereFilled2Icon),
+    'shape-sphere-2': shapeSphere2Icon,
+    'shape-pyramid-filled-4': shapePyramidFilled4Icon,
+    'shape-pyramid-filled-mono-4': monoIcon(shapePyramidFilled4Icon),
+    'shape-pyramid-4': shapePyramid4Icon,
+    'shape-pyramid-filled-5': shapePyramidFilled5Icon,
+    'shape-pyramid-filled-mono-5': monoIcon(shapePyramidFilled5Icon),
+    'shape-pyramid-5': shapePyramid5Icon,
+    'shape-octahedron-transparent-filled': shapeOctahedronTransparentFilledIcon,
+    'shape-octahedron-transparent-filled-mono': monoIcon(shapeOctahedronTransparentFilledIcon),
+    'shape-octahedron-transparent': shapeOctahedronTransparentIcon,
+    'shape-cube-transparent-filled': shapeCubeTransparentFilledIcon,
+    'shape-cube-transparent-filled-mono': monoIcon(shapeCubeTransparentFilledIcon),
+    'shape-cube-transparent': shapeCubeTransparentIcon,
+    'shape-pyramid-transparent-filled': shapePyramidTransparentFilledIcon,
+    'shape-pyramid-transparent-filled-mono': monoIcon(shapePyramidTransparentFilledIcon),
+    'shape-pyramid-transparent': shapePyramidTransparentIcon,
+    'shape-sphere-transparent-filled': shapeSphereTransparentFilledIcon,
+    'shape-sphere-transparent-filled-mono': monoIcon(shapeSphereTransparentFilledIcon),
+    'shape-sphere-transparent': shapeSphereTransparentIcon,
+    'shape-cylinder-transparent-filled': shapeCylinderTransparentFilledIcon,
+    'shape-cylinder-transparent-filled-mono': monoIcon(shapeCylinderTransparentFilledIcon),
+    'shape-cylinder-transparent': shapeCylinderTransparentIcon,
+    'shape-axes-cube-filled': shapeAxesCubeFilledIcon,
+    'shape-axes-cube-filled-mono': monoIcon(shapeAxesCubeFilledIcon),
+    'shape-axes-cube': shapeAxesCubeIcon,
+    'shape-axes-pyramid-filled': shapeAxesPyramidFilledIcon,
+    'shape-axes-pyramid-filled-mono': monoIcon(shapeAxesPyramidFilledIcon),
+    'shape-axes-pyramid': shapeAxesPyramidIcon,
+    'shape-axes-sphere-filled': shapeAxesSphereFilledIcon,
+    'shape-axes-sphere-filled-mono': monoIcon(shapeAxesSphereFilledIcon),
+    'shape-axes-sphere': shapeAxesSphereIcon,
+    'shape-3d-shapes': shape3dShapesIcon,
+    'shape-cube-cut-filled-2': shapeCubeCutFilled2Icon,
+    'shape-cube-cut-filled-mono-2': monoIcon(shapeCubeCutFilled2Icon),
+    'shape-cube-cut-2': shapeCubeCut2Icon,
+    'shape-sphere-multi-filled': shapeSphereMultiFilledIcon,
+    'shape-sphere-multi-filled-mono': monoIcon(shapeSphereMultiFilledIcon),
+    'shape-sphere-multi': shapeSphereMultiIcon,
+} as const

package/src/components/loadingState.tsx

@@ -9,3 +9,12 @@ export function useLoadingState(){
     }, [loadingState])
     return {loadingState, updateLoading}
 }
+export function useLoadingStateKey(){
+    const [loadingState, setLoadingState] = useState<boolean>(false)
+    const updateLoading = useCallback(async (promise?: Promise<any>|void) => {
+        if(!promise || promise.then === undefined) return setLoadingState(false)
+        setLoadingState(true)
+        await promise.then(() => setLoadingState(false))
+    }, [loadingState])
+    return {loadingState, updateLoading}
+}