newskit 0.0.0-e00e1f6 → 0.0.0-e02a96ba5

package/site/public/static/illustrations/components/grid-layout/options/order.svg

@@ -0,0 +1,90 @@
+<svg
+  id="nksvg"
+  style="width: 100%; height: 100%"
+  width="1490"
+  height="838"
+  viewBox="0 0 1490 838"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="css-0"
+>
+  <rect
+    style="fill: var(--color-illustrationBackground020)"
+    width="1490"
+    height="838"
+  ></rect>
+  <path
+    style="fill: var(--color-illustrationInterface020)"
+    d="M159 175C159 163.954 167.954 155 179 155H379C390.046 155 399 163.954 399 175V375C399 386.046 390.046 395 379 395H179C167.954 395 159 386.046 159 375V175Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface020)"
+    d="M447 462C447 450.954 455.954 442 467 442H667C678.046 442 687 450.954 687 462V662C687 673.046 678.046 682 667 682H467C455.954 682 447 673.046 447 662V462Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M159 462C159 450.954 167.954 442 179 442H379C390.046 442 399 450.954 399 462V662C399 673.046 390.046 682 379 682H179C167.954 682 159 673.046 159 662V462Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface020)"
+    d="M1028 313C1028 301.954 1036.95 293 1048 293H1298C1309.05 293 1318 301.954 1318 313V387C1318 398.046 1309.05 407 1298 407H1048C1036.95 407 1028 398.046 1028 387V313Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface020)"
+    d="M1028 588C1028 576.954 1036.95 568 1048 568H1298C1309.05 568 1318 576.954 1318 588V662C1318 673.046 1309.05 682 1298 682H1048C1036.95 682 1028 673.046 1028 662V588Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface020)"
+    d="M447 175C447 163.954 455.954 155 467 155H667C678.046 155 687 163.954 687 175V375C687 386.046 678.046 395 667 395H467C455.954 395 447 386.046 447 375V175Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M1028 175C1028 163.954 1036.95 155 1048 155H1298C1309.05 155 1318 163.954 1318 175V249C1318 260.046 1309.05 269 1298 269H1048C1036.95 269 1028 260.046 1028 249V175Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface020)"
+    d="M1028 450C1028 438.954 1036.95 430 1048 430H1298C1309.05 430 1318 438.954 1318 450V524C1318 535.046 1309.05 544 1298 544H1048C1036.95 544 1028 535.046 1028 524V450Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M273.44 265V259.84H283.08V289H277.32V265H273.44Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M1168.44 340V334.84H1178.08V364H1172.32V340H1168.44Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M556.88 282.68C559.44 280.547 561.48 278.774 563 277.36C564.52 275.92 565.787 274.427 566.8 272.88C567.813 271.334 568.32 269.814 568.32 268.32C568.32 266.96 568 265.894 567.36 265.12C566.72 264.347 565.733 263.96 564.4 263.96C563.067 263.96 562.04 264.414 561.32 265.32C560.6 266.2 560.227 267.414 560.2 268.96H554.76C554.867 265.76 555.813 263.334 557.6 261.68C559.413 260.027 561.707 259.2 564.48 259.2C567.52 259.2 569.853 260.014 571.48 261.64C573.107 263.24 573.92 265.36 573.92 268C573.92 270.08 573.36 272.067 572.24 273.96C571.12 275.854 569.84 277.507 568.4 278.92C566.96 280.307 565.08 281.987 562.76 283.96H574.56V288.6H554.8V284.44L556.88 282.68Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface010)"
+    d="M1165.2 204.52C1165.33 201.853 1166.27 199.8 1168 198.36C1169.76 196.893 1172.07 196.16 1174.92 196.16C1176.87 196.16 1178.53 196.507 1179.92 197.2C1181.31 197.867 1182.35 198.787 1183.04 199.96C1183.76 201.107 1184.12 202.413 1184.12 203.88C1184.12 205.56 1183.68 206.987 1182.8 208.16C1181.95 209.307 1180.92 210.08 1179.72 210.48V210.64C1181.27 211.12 1182.47 211.973 1183.32 213.2C1184.2 214.427 1184.64 216 1184.64 217.92C1184.64 219.52 1184.27 220.947 1183.52 222.2C1182.8 223.453 1181.72 224.44 1180.28 225.16C1178.87 225.853 1177.16 226.2 1175.16 226.2C1172.15 226.2 1169.69 225.44 1167.8 223.92C1165.91 222.4 1164.91 220.16 1164.8 217.2H1170.24C1170.29 218.507 1170.73 219.56 1171.56 220.36C1172.41 221.133 1173.57 221.52 1175.04 221.52C1176.4 221.52 1177.44 221.147 1178.16 220.4C1178.91 219.627 1179.28 218.64 1179.28 217.44C1179.28 215.84 1178.77 214.693 1177.76 214C1176.75 213.307 1175.17 212.96 1173.04 212.96H1171.88V208.36H1173.04C1176.83 208.36 1178.72 207.093 1178.72 204.56C1178.72 203.413 1178.37 202.52 1177.68 201.88C1177.01 201.24 1176.04 200.92 1174.76 200.92C1173.51 200.92 1172.53 201.267 1171.84 201.96C1171.17 202.627 1170.79 203.48 1170.68 204.52H1165.2Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationInterface010)"
+    d="M265.2 554.52C265.333 551.853 266.267 549.8 268 548.36C269.76 546.893 272.067 546.16 274.92 546.16C276.867 546.16 278.533 546.507 279.92 547.2C281.307 547.867 282.347 548.787 283.04 549.96C283.76 551.107 284.12 552.413 284.12 553.88C284.12 555.56 283.68 556.987 282.8 558.16C281.947 559.307 280.92 560.08 279.72 560.48V560.64C281.267 561.12 282.467 561.973 283.32 563.2C284.2 564.427 284.64 566 284.64 567.92C284.64 569.52 284.267 570.947 283.52 572.2C282.8 573.453 281.72 574.44 280.28 575.16C278.867 575.853 277.16 576.2 275.16 576.2C272.147 576.2 269.693 575.44 267.8 573.92C265.907 572.4 264.907 570.16 264.8 567.2H270.24C270.293 568.507 270.733 569.56 271.56 570.36C272.413 571.133 273.573 571.52 275.04 571.52C276.4 571.52 277.44 571.147 278.16 570.4C278.907 569.627 279.28 568.64 279.28 567.44C279.28 565.84 278.773 564.693 277.76 564C276.747 563.307 275.173 562.96 273.04 562.96H271.88V558.36H273.04C276.827 558.36 278.72 557.093 278.72 554.56C278.72 553.413 278.373 552.52 277.68 551.88C277.013 551.24 276.04 550.92 274.76 550.92C273.507 550.92 272.533 551.267 271.84 551.96C271.173 552.627 270.787 553.48 270.68 554.52H265.2Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M554.88 570.32V565.92L567.96 547.2H574.48V565.44H578V570.32H574.48V576H568.88V570.32H554.88ZM569.24 553.2L561.04 565.44H569.24V553.2Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M1165.88 494.68C1168.44 492.547 1170.48 490.774 1172 489.36C1173.52 487.92 1174.79 486.427 1175.8 484.88C1176.81 483.334 1177.32 481.814 1177.32 480.32C1177.32 478.96 1177 477.894 1176.36 477.12C1175.72 476.347 1174.73 475.96 1173.4 475.96C1172.07 475.96 1171.04 476.414 1170.32 477.32C1169.6 478.2 1169.23 479.414 1169.2 480.96H1163.76C1163.87 477.76 1164.81 475.334 1166.6 473.68C1168.41 472.027 1170.71 471.2 1173.48 471.2C1176.52 471.2 1178.85 472.014 1180.48 473.64C1182.11 475.24 1182.92 477.36 1182.92 480C1182.92 482.08 1182.36 484.067 1181.24 485.96C1180.12 487.854 1178.84 489.507 1177.4 490.92C1175.96 492.307 1174.08 493.987 1171.76 495.96H1183.56V500.6H1163.8V496.44L1165.88 494.68Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M1162.88 633.32V628.92L1175.96 610.2H1182.48V628.44H1186V633.32H1182.48V639H1176.88V633.32H1162.88ZM1177.24 616.2L1169.04 628.44H1177.24V616.2Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M913.64 417.682L899.513 410.418C897.881 409.579 895.941 410.764 895.941 412.598L895.941 426.725C895.941 428.535 897.835 429.721 899.463 428.93L913.59 422.066C915.407 421.184 915.436 418.606 913.64 417.682Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M781.221 419.612C781.221 420.627 782.044 421.45 783.059 421.45L787.763 421.45C788.778 421.45 789.601 420.627 789.601 419.612C789.601 418.597 788.778 417.774 787.763 417.774L783.059 417.774C782.044 417.774 781.221 418.597 781.221 419.612ZM795.331 419.612C795.331 420.627 796.154 421.45 797.17 421.45L806.576 421.45C807.592 421.45 808.415 420.627 808.415 419.612C808.415 418.597 807.592 417.774 806.576 417.774L797.17 417.774C796.154 417.774 795.331 418.597 795.331 419.612ZM814.145 419.612C814.145 420.627 814.968 421.45 815.983 421.45L825.39 421.45C826.405 421.45 827.228 420.627 827.228 419.612C827.228 418.597 826.405 417.774 825.39 417.774L815.983 417.774C814.968 417.774 814.145 418.597 814.145 419.612ZM832.958 419.612C832.958 420.627 833.781 421.45 834.797 421.45L844.203 421.45C845.219 421.45 846.042 420.627 846.042 419.612C846.042 418.597 845.219 417.774 844.203 417.774L834.797 417.774C833.781 417.774 832.958 418.597 832.958 419.612ZM851.772 419.612C851.772 420.627 852.595 421.45 853.61 421.45L863.017 421.45C864.032 421.45 864.855 420.627 864.855 419.612C864.855 418.597 864.032 417.774 863.017 417.774L853.61 417.774C852.595 417.774 851.772 418.597 851.772 419.612ZM870.585 419.612C870.585 420.627 871.408 421.45 872.424 421.45L881.83 421.45C882.846 421.45 883.669 420.627 883.669 419.612C883.669 418.597 882.846 417.774 881.83 417.774L872.424 417.774C871.408 417.774 870.585 418.597 870.585 419.612ZM889.399 419.612C889.399 420.627 890.222 421.45 891.237 421.45L895.94 421.45C896.956 421.45 897.779 420.627 897.779 419.612C897.779 418.597 896.956 417.774 895.94 417.774L891.237 417.774C890.222 417.774 889.399 418.597 889.399 419.612Z"
+  ></path>
+</svg>

package/site/public/static/illustrations/components/grid-layout/options/row-column-gap.svg

@@ -0,0 +1,109 @@
+<svg
+  id="nksvg"
+  style="width: 100%; height: 100%"
+  width="1490"
+  height="838"
+  viewBox="0 0 1490 838"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="css-0"
+>
+  <rect
+    style="fill: var(--color-illustrationBackground020)"
+    width="1490"
+    height="838"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="337"
+    y="487"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="337"
+    y="199"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="625"
+    y="486"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="913"
+    y="486"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="625"
+    y="199"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="913"
+    y="199"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <path
+    style="fill: var(--color-green030)"
+    opacity="0.6"
+    d="M337 477L337 449L1153 449L1153 477L337 477Z"
+  ></path>
+  <path
+    style="fill: var(--color-red020)"
+    opacity="0.6"
+    d="M587 199H615V439H587V199Z"
+  ></path>
+  <path
+    style="fill: var(--color-red020)"
+    opacity="0.6"
+    d="M875 199H903V439H875V199Z"
+  ></path>
+  <path
+    style="fill: var(--color-red020)"
+    opacity="0.6"
+    d="M587 487H615V727H587V487Z"
+  ></path>
+  <path
+    style="fill: var(--color-red020)"
+    opacity="0.6"
+    d="M875 487H903V727H875V487Z"
+  ></path>
+  <path
+    d="M625 179V155C625 143.954 616.046 135 605 135H597C585.954 135 577 143.954 577 155V179"
+    stroke="#577FFB"
+    stroke-width="3"
+  ></path>
+  <path
+    d="M317 439L293 439C281.954 439 273 447.954 273 459L273 467C273 478.046 281.954 487 293 487L317 487"
+    stroke="#577FFB"
+    stroke-width="3"
+  ></path>
+  <path
+    d="M889 135V111C889 99.9543 880.046 91 869 91H620C608.954 91 600 99.9543 600 111V135"
+    stroke="#577FFB"
+    stroke-width="3"
+  ></path>
+  <path
+    d="M913 179V155C913 143.954 904.046 135 893 135H885C873.954 135 865 143.954 865 155V179"
+    stroke="#577FFB"
+    stroke-width="3"
+  ></path>
+</svg>

package/site/public/static/illustrations/components/grid-layout/options/span.svg

@@ -0,0 +1,104 @@
+<svg
+  id="nksvg"
+  style="width: 100%; height: 100%"
+  width="1490"
+  height="838"
+  viewBox="0 0 1490 838"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="css-0"
+>
+  <rect
+    style="fill: var(--color-illustrationBackground020)"
+    width="1490"
+    height="838"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="337"
+    y="155"
+    width="816"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="337"
+    y="442"
+    width="528"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="913"
+    y="442"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M681.24 289.36C679.427 289.36 677.8 289.04 676.36 288.4C674.92 287.734 673.773 286.84 672.92 285.72C672.093 284.6 671.64 283.36 671.56 282H677.2C677.307 282.854 677.72 283.56 678.44 284.12C679.187 284.68 680.107 284.96 681.2 284.96C682.267 284.96 683.093 284.747 683.68 284.32C684.293 283.894 684.6 283.347 684.6 282.68C684.6 281.96 684.227 281.427 683.48 281.08C682.76 280.707 681.6 280.307 680 279.88C678.347 279.48 676.987 279.067 675.92 278.64C674.88 278.214 673.973 277.56 673.2 276.68C672.453 275.8 672.08 274.614 672.08 273.12C672.08 271.894 672.427 270.774 673.12 269.76C673.84 268.747 674.853 267.947 676.16 267.36C677.493 266.774 679.053 266.48 680.84 266.48C683.48 266.48 685.587 267.147 687.16 268.48C688.733 269.787 689.6 271.56 689.76 273.8H684.4C684.32 272.92 683.947 272.227 683.28 271.72C682.64 271.187 681.773 270.92 680.68 270.92C679.667 270.92 678.88 271.107 678.32 271.48C677.787 271.854 677.52 272.374 677.52 273.04C677.52 273.787 677.893 274.36 678.64 274.76C679.387 275.134 680.547 275.52 682.12 275.92C683.72 276.32 685.04 276.734 686.08 277.16C687.12 277.587 688.013 278.254 688.76 279.16C689.533 280.04 689.933 281.214 689.96 282.68C689.96 283.96 689.6 285.107 688.88 286.12C688.187 287.134 687.173 287.934 685.84 288.52C684.533 289.08 683 289.36 681.24 289.36Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M700.157 270.04C700.877 269.027 701.864 268.187 703.117 267.52C704.397 266.827 705.85 266.48 707.477 266.48C709.37 266.48 711.077 266.947 712.597 267.88C714.144 268.814 715.357 270.147 716.237 271.88C717.144 273.587 717.597 275.574 717.597 277.84C717.597 280.107 717.144 282.12 716.237 283.88C715.357 285.614 714.144 286.96 712.597 287.92C711.077 288.88 709.37 289.36 707.477 289.36C705.85 289.36 704.41 289.027 703.157 288.36C701.93 287.694 700.93 286.854 700.157 285.84V299.56H694.557V266.84H700.157V270.04ZM711.877 277.84C711.877 276.507 711.597 275.36 711.037 274.4C710.504 273.414 709.784 272.667 708.877 272.16C707.997 271.654 707.037 271.4 705.997 271.4C704.984 271.4 704.024 271.667 703.117 272.2C702.237 272.707 701.517 273.454 700.957 274.44C700.424 275.427 700.157 276.587 700.157 277.92C700.157 279.254 700.424 280.414 700.957 281.4C701.517 282.387 702.237 283.147 703.117 283.68C704.024 284.187 704.984 284.44 705.997 284.44C707.037 284.44 707.997 284.174 708.877 283.64C709.784 283.107 710.504 282.347 711.037 281.36C711.597 280.374 711.877 279.2 711.877 277.84Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M720.226 277.84C720.226 275.6 720.666 273.614 721.546 271.88C722.453 270.147 723.666 268.814 725.186 267.88C726.733 266.947 728.453 266.48 730.346 266.48C732 266.48 733.44 266.814 734.666 267.48C735.92 268.147 736.92 268.987 737.666 270V266.84H743.306V289H737.666V285.76C736.946 286.8 735.946 287.667 734.666 288.36C733.413 289.027 731.96 289.36 730.306 289.36C728.44 289.36 726.733 288.88 725.186 287.92C723.666 286.96 722.453 285.614 721.546 283.88C720.666 282.12 720.226 280.107 720.226 277.84ZM737.666 277.92C737.666 276.56 737.4 275.4 736.866 274.44C736.333 273.454 735.613 272.707 734.706 272.2C733.8 271.667 732.826 271.4 731.786 271.4C730.746 271.4 729.786 271.654 728.906 272.16C728.026 272.667 727.306 273.414 726.746 274.4C726.213 275.36 725.946 276.507 725.946 277.84C725.946 279.174 726.213 280.347 726.746 281.36C727.306 282.347 728.026 283.107 728.906 283.64C729.813 284.174 730.773 284.44 731.786 284.44C732.826 284.44 733.8 284.187 734.706 283.68C735.613 283.147 736.333 282.4 736.866 281.44C737.4 280.454 737.666 279.28 737.666 277.92Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M761.056 266.52C763.696 266.52 765.829 267.36 767.456 269.04C769.082 270.694 769.896 273.014 769.896 276V289H764.296V276.76C764.296 275 763.856 273.654 762.976 272.72C762.096 271.76 760.896 271.28 759.376 271.28C757.829 271.28 756.602 271.76 755.696 272.72C754.816 273.654 754.376 275 754.376 276.76V289H748.776V266.84H754.376V269.6C755.122 268.64 756.069 267.894 757.216 267.36C758.389 266.8 759.669 266.52 761.056 266.52Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M783.432 265V259.84H793.072V289H787.312V265H783.432Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M800.364 282.68C802.924 280.547 804.964 278.774 806.484 277.36C808.004 275.92 809.271 274.427 810.284 272.88C811.298 271.334 811.804 269.814 811.804 268.32C811.804 266.96 811.484 265.894 810.844 265.12C810.204 264.347 809.218 263.96 807.884 263.96C806.551 263.96 805.524 264.414 804.804 265.32C804.084 266.2 803.711 267.414 803.684 268.96H798.244C798.351 265.76 799.298 263.334 801.084 261.68C802.898 260.027 805.191 259.2 807.964 259.2C811.004 259.2 813.338 260.014 814.964 261.64C816.591 263.24 817.404 265.36 817.404 268C817.404 270.08 816.844 272.067 815.724 273.96C814.604 275.854 813.324 277.507 811.884 278.92C810.444 280.307 808.564 281.987 806.244 283.96H818.044V288.6H798.284V284.44L800.364 282.68Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M543.24 576.36C541.427 576.36 539.8 576.04 538.36 575.4C536.92 574.734 535.773 573.84 534.92 572.72C534.093 571.6 533.64 570.36 533.56 569H539.2C539.307 569.854 539.72 570.56 540.44 571.12C541.187 571.68 542.107 571.96 543.2 571.96C544.267 571.96 545.093 571.747 545.68 571.32C546.293 570.894 546.6 570.347 546.6 569.68C546.6 568.96 546.227 568.427 545.48 568.08C544.76 567.707 543.6 567.307 542 566.88C540.347 566.48 538.987 566.067 537.92 565.64C536.88 565.214 535.973 564.56 535.2 563.68C534.453 562.8 534.08 561.614 534.08 560.12C534.08 558.894 534.427 557.774 535.12 556.76C535.84 555.747 536.853 554.947 538.16 554.36C539.493 553.774 541.053 553.48 542.84 553.48C545.48 553.48 547.587 554.147 549.16 555.48C550.733 556.787 551.6 558.56 551.76 560.8H546.4C546.32 559.92 545.947 559.227 545.28 558.72C544.64 558.187 543.773 557.92 542.68 557.92C541.667 557.92 540.88 558.107 540.32 558.48C539.787 558.854 539.52 559.374 539.52 560.04C539.52 560.787 539.893 561.36 540.64 561.76C541.387 562.134 542.547 562.52 544.12 562.92C545.72 563.32 547.04 563.734 548.08 564.16C549.12 564.587 550.013 565.254 550.76 566.16C551.533 567.04 551.933 568.214 551.96 569.68C551.96 570.96 551.6 572.107 550.88 573.12C550.187 574.134 549.173 574.934 547.84 575.52C546.533 576.08 545 576.36 543.24 576.36Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M562.157 557.04C562.877 556.027 563.864 555.187 565.117 554.52C566.397 553.827 567.85 553.48 569.477 553.48C571.37 553.48 573.077 553.947 574.597 554.88C576.144 555.814 577.357 557.147 578.237 558.88C579.144 560.587 579.597 562.574 579.597 564.84C579.597 567.107 579.144 569.12 578.237 570.88C577.357 572.614 576.144 573.96 574.597 574.92C573.077 575.88 571.37 576.36 569.477 576.36C567.85 576.36 566.41 576.027 565.157 575.36C563.93 574.694 562.93 573.854 562.157 572.84V586.56H556.557V553.84H562.157V557.04ZM573.877 564.84C573.877 563.507 573.597 562.36 573.037 561.4C572.504 560.414 571.784 559.667 570.877 559.16C569.997 558.654 569.037 558.4 567.997 558.4C566.984 558.4 566.024 558.667 565.117 559.2C564.237 559.707 563.517 560.454 562.957 561.44C562.424 562.427 562.157 563.587 562.157 564.92C562.157 566.254 562.424 567.414 562.957 568.4C563.517 569.387 564.237 570.147 565.117 570.68C566.024 571.187 566.984 571.44 567.997 571.44C569.037 571.44 569.997 571.174 570.877 570.64C571.784 570.107 572.504 569.347 573.037 568.36C573.597 567.374 573.877 566.2 573.877 564.84Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M582.226 564.84C582.226 562.6 582.666 560.614 583.546 558.88C584.453 557.147 585.666 555.814 587.186 554.88C588.733 553.947 590.453 553.48 592.346 553.48C594 553.48 595.44 553.814 596.666 554.48C597.92 555.147 598.92 555.987 599.666 557V553.84H605.306V576H599.666V572.76C598.946 573.8 597.946 574.667 596.666 575.36C595.413 576.027 593.96 576.36 592.306 576.36C590.44 576.36 588.733 575.88 587.186 574.92C585.666 573.96 584.453 572.614 583.546 570.88C582.666 569.12 582.226 567.107 582.226 564.84ZM599.666 564.92C599.666 563.56 599.4 562.4 598.866 561.44C598.333 560.454 597.613 559.707 596.706 559.2C595.8 558.667 594.826 558.4 593.786 558.4C592.746 558.4 591.786 558.654 590.906 559.16C590.026 559.667 589.306 560.414 588.746 561.4C588.213 562.36 587.946 563.507 587.946 564.84C587.946 566.174 588.213 567.347 588.746 568.36C589.306 569.347 590.026 570.107 590.906 570.64C591.813 571.174 592.773 571.44 593.786 571.44C594.826 571.44 595.8 571.187 596.706 570.68C597.613 570.147 598.333 569.4 598.866 568.44C599.4 567.454 599.666 566.28 599.666 564.92Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M623.056 553.52C625.696 553.52 627.829 554.36 629.456 556.04C631.082 557.694 631.896 560.014 631.896 563V576H626.296V563.76C626.296 562 625.856 560.654 624.976 559.72C624.096 558.76 622.896 558.28 621.376 558.28C619.829 558.28 618.602 558.76 617.696 559.72C616.816 560.654 616.376 562 616.376 563.76V576H610.776V553.84H616.376V556.6C617.122 555.64 618.069 554.894 619.216 554.36C620.389 553.8 621.669 553.52 623.056 553.52Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M650.992 560.56C648.326 559.174 646.992 557.027 646.992 554.12C646.992 552.68 647.352 551.374 648.072 550.2C648.819 549 649.926 548.054 651.392 547.36C652.886 546.64 654.699 546.28 656.832 546.28C658.966 546.28 660.766 546.64 662.232 547.36C663.726 548.054 664.832 549 665.552 550.2C666.299 551.374 666.672 552.68 666.672 554.12C666.672 555.587 666.312 556.88 665.592 558C664.872 559.094 663.912 559.947 662.712 560.56C664.179 561.2 665.326 562.134 666.152 563.36C666.979 564.587 667.392 566.04 667.392 567.72C667.392 569.534 666.926 571.12 665.992 572.48C665.086 573.814 663.832 574.84 662.232 575.56C660.632 576.28 658.832 576.64 656.832 576.64C654.832 576.64 653.032 576.28 651.432 575.56C649.859 574.84 648.606 573.814 647.672 572.48C646.766 571.12 646.312 569.534 646.312 567.72C646.312 566.04 646.726 564.587 647.552 563.36C648.379 562.107 649.526 561.174 650.992 560.56ZM661.232 554.92C661.232 553.614 660.832 552.6 660.032 551.88C659.259 551.16 658.192 550.8 656.832 550.8C655.499 550.8 654.432 551.16 653.632 551.88C652.859 552.6 652.472 553.627 652.472 554.96C652.472 556.16 652.872 557.12 653.672 557.84C654.499 558.56 655.552 558.92 656.832 558.92C658.112 558.92 659.166 558.56 659.992 557.84C660.819 557.094 661.232 556.12 661.232 554.92ZM656.832 563C655.312 563 654.072 563.387 653.112 564.16C652.179 564.934 651.712 566.04 651.712 567.48C651.712 568.814 652.166 569.907 653.072 570.76C654.006 571.587 655.259 572 656.832 572C658.406 572 659.646 571.574 660.552 570.72C661.459 569.867 661.912 568.787 661.912 567.48C661.912 566.067 661.446 564.974 660.512 564.2C659.579 563.4 658.352 563 656.832 563Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M974.24 576.36C972.427 576.36 970.8 576.04 969.36 575.4C967.92 574.734 966.773 573.84 965.92 572.72C965.093 571.6 964.64 570.36 964.56 569H970.2C970.307 569.854 970.72 570.56 971.44 571.12C972.187 571.68 973.107 571.96 974.2 571.96C975.267 571.96 976.093 571.747 976.68 571.32C977.293 570.894 977.6 570.347 977.6 569.68C977.6 568.96 977.227 568.427 976.48 568.08C975.76 567.707 974.6 567.307 973 566.88C971.347 566.48 969.987 566.067 968.92 565.64C967.88 565.214 966.973 564.56 966.2 563.68C965.453 562.8 965.08 561.614 965.08 560.12C965.08 558.894 965.427 557.774 966.12 556.76C966.84 555.747 967.853 554.947 969.16 554.36C970.493 553.774 972.053 553.48 973.84 553.48C976.48 553.48 978.587 554.147 980.16 555.48C981.733 556.787 982.6 558.56 982.76 560.8H977.4C977.32 559.92 976.947 559.227 976.28 558.72C975.64 558.187 974.773 557.92 973.68 557.92C972.667 557.92 971.88 558.107 971.32 558.48C970.787 558.854 970.52 559.374 970.52 560.04C970.52 560.787 970.893 561.36 971.64 561.76C972.387 562.134 973.547 562.52 975.12 562.92C976.72 563.32 978.04 563.734 979.08 564.16C980.12 564.587 981.013 565.254 981.76 566.16C982.533 567.04 982.933 568.214 982.96 569.68C982.96 570.96 982.6 572.107 981.88 573.12C981.187 574.134 980.173 574.934 978.84 575.52C977.533 576.08 976 576.36 974.24 576.36Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M993.157 557.04C993.877 556.027 994.864 555.187 996.117 554.52C997.397 553.827 998.85 553.48 1000.48 553.48C1002.37 553.48 1004.08 553.947 1005.6 554.88C1007.14 555.814 1008.36 557.147 1009.24 558.88C1010.14 560.587 1010.6 562.574 1010.6 564.84C1010.6 567.107 1010.14 569.12 1009.24 570.88C1008.36 572.614 1007.14 573.96 1005.6 574.92C1004.08 575.88 1002.37 576.36 1000.48 576.36C998.85 576.36 997.41 576.027 996.157 575.36C994.93 574.694 993.93 573.854 993.157 572.84V586.56H987.557V553.84H993.157V557.04ZM1004.88 564.84C1004.88 563.507 1004.6 562.36 1004.04 561.4C1003.5 560.414 1002.78 559.667 1001.88 559.16C1001 558.654 1000.04 558.4 998.997 558.4C997.984 558.4 997.024 558.667 996.117 559.2C995.237 559.707 994.517 560.454 993.957 561.44C993.424 562.427 993.157 563.587 993.157 564.92C993.157 566.254 993.424 567.414 993.957 568.4C994.517 569.387 995.237 570.147 996.117 570.68C997.024 571.187 997.984 571.44 998.997 571.44C1000.04 571.44 1001 571.174 1001.88 570.64C1002.78 570.107 1003.5 569.347 1004.04 568.36C1004.6 567.374 1004.88 566.2 1004.88 564.84Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M1013.23 564.84C1013.23 562.6 1013.67 560.614 1014.55 558.88C1015.45 557.147 1016.67 555.814 1018.19 554.88C1019.73 553.947 1021.45 553.48 1023.35 553.48C1025 553.48 1026.44 553.814 1027.67 554.48C1028.92 555.147 1029.92 555.987 1030.67 557V553.84H1036.31V576H1030.67V572.76C1029.95 573.8 1028.95 574.667 1027.67 575.36C1026.41 576.027 1024.96 576.36 1023.31 576.36C1021.44 576.36 1019.73 575.88 1018.19 574.92C1016.67 573.96 1015.45 572.614 1014.55 570.88C1013.67 569.12 1013.23 567.107 1013.23 564.84ZM1030.67 564.92C1030.67 563.56 1030.4 562.4 1029.87 561.44C1029.33 560.454 1028.61 559.707 1027.71 559.2C1026.8 558.667 1025.83 558.4 1024.79 558.4C1023.75 558.4 1022.79 558.654 1021.91 559.16C1021.03 559.667 1020.31 560.414 1019.75 561.4C1019.21 562.36 1018.95 563.507 1018.95 564.84C1018.95 566.174 1019.21 567.347 1019.75 568.36C1020.31 569.347 1021.03 570.107 1021.91 570.64C1022.81 571.174 1023.77 571.44 1024.79 571.44C1025.83 571.44 1026.8 571.187 1027.71 570.68C1028.61 570.147 1029.33 569.4 1029.87 568.44C1030.4 567.454 1030.67 566.28 1030.67 564.92Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M1054.06 553.52C1056.7 553.52 1058.83 554.36 1060.46 556.04C1062.08 557.694 1062.9 560.014 1062.9 563V576H1057.3V563.76C1057.3 562 1056.86 560.654 1055.98 559.72C1055.1 558.76 1053.9 558.28 1052.38 558.28C1050.83 558.28 1049.6 558.76 1048.7 559.72C1047.82 560.654 1047.38 562 1047.38 563.76V576H1041.78V553.84H1047.38V556.6C1048.12 555.64 1049.07 554.894 1050.22 554.36C1051.39 553.8 1052.67 553.52 1054.06 553.52Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationPalette010)"
+    d="M1076.87 570.32V565.92L1089.95 547.2H1096.47V565.44H1099.99V570.32H1096.47V576H1090.87V570.32H1076.87ZM1091.23 553.2L1083.03 565.44H1091.23V553.2Z"
+  ></path>
+</svg>

package/site/public/static/illustrations/components/grid-layout/tutorials/designers.svg

@@ -0,0 +1,57 @@
+<svg
+  id="nksvg"
+  style="width: 100%; height: 100%"
+  width="1490"
+  height="838"
+  viewBox="0 0 1490 838"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="css-0"
+>
+  <rect
+    style="fill: var(--color-illustrationBackground020)"
+    width="1490"
+    height="838"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette030)"
+    x="249"
+    y="643"
+    width="437"
+    height="546"
+    rx="20"
+    transform="rotate(-90 249 643)"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="851"
+    y="206"
+    width="391"
+    height="108"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="851"
+    y="370"
+    width="391"
+    height="108"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette040)"
+    x="851"
+    y="535"
+    width="391"
+    height="108"
+    rx="20"
+  ></rect>
+  <path
+    style="fill: var(--color-illustrationPalette040)"
+    d="M249 147C249 142.029 253.034 138 258.01 138H582.99C587.966 138 592 142.029 592 147C592 151.971 587.966 156 582.99 156H258.01C253.034 156 249 151.971 249 147Z"
+  ></path>
+  <path
+    style="fill: var(--color-illustrationHighlight010)"
+    d="M291.75 599.375L206.25 635.456V640.152L238.74 652.85L251.28 685.625H255.935L291.75 599.375Z"
+  ></path>
+</svg>

package/site/public/static/illustrations/components/grid-layout/usage/do-01.svg

@@ -0,0 +1,56 @@
+<svg
+  id="nksvg"
+  style="width: 100%; height: 100%"
+  width="1490"
+  height="838"
+  viewBox="0 0 1490 838"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="css-0"
+>
+  <rect
+    style="fill: var(--color-illustrationBackground010)"
+    width="1490"
+    height="838"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationInterface020)"
+    x="479"
+    y="443"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationInterface020)"
+    x="479"
+    y="155"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationInterface020)"
+    x="767"
+    y="155"
+    width="240"
+    height="240"
+    rx="20"
+  ></rect>
+  <line
+    x1="482"
+    y1="94"
+    x2="481"
+    y2="744"
+    stroke="#577FFB"
+    stroke-width="6"
+  ></line>
+  <line
+    x1="1070"
+    y1="158"
+    x2="420"
+    y2="157"
+    stroke="#577FFB"
+    stroke-width="6"
+  ></line>
+</svg>

package/site/public/static/illustrations/components/grid-layout/usage/dont-01.svg

@@ -0,0 +1,48 @@
+<svg id="nksvg" style="width: 100%; height: 100%" width="1490" height="838" viewBox="0 0 1490 838" fill="none" xmlns="http://www.w3.org/2000/svg" class="css-0">
+  <rect style="fill: var(--color-illustrationBackground010)" width="1490" height="838"></rect>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M237 130L285 130L285 708H237L237 130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M325 130L373 130L373 708H325L325 130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M413 130L461 130L461 708H413L413 130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M501 130L549 130V708H501L501 130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M589 130L637 130V708H589V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M677 130L725 130V708H677V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M765 130L813 130V708H765V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M853 130L901 130V708H853V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M941 130L989 130V708H941V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M1029 130L1077 130V708H1029V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M1117 130L1165 130V708H1117V130Z"></path>
+  <path style="fill: var(--color-red020)" opacity="0.6" d="M1205 130L1253 130V708H1205V130Z"></path>
+  <g>
+    <rect style="fill: var(--color-illustrationInterface010)" x="237" y="262" width="488" height="313" rx="9.75959"></rect>
+    <rect style="fill: var(--color-illustrationPalette020)" x="324" y="336" width="310" height="16.266" rx="8.13299"></rect>
+    <rect style="fill: var(--color-illustrationPalette020)" x="324" y="371.118" width="203.554" height="16.266" rx="8.13299"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="324" y="436.286" width="310" height="9.57798" rx="4.78899"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="324" y="458.634" width="310" height="9.57798" rx="4.78899"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="324" y="413.936" width="310" height="9.57798" rx="4.78899"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="324" y="480.981" width="156.867" height="9.57798" rx="4.78899"></rect>
+  </g>
+  <g>
+    <rect style="fill: var(--color-illustrationInterface010)" x="765" y="262" width="488" height="313" rx="9.75959"></rect>
+    <rect style="fill: var(--color-illustrationPalette020)" x="1029" y="336" width="130" height="16.266" rx="8.13299"></rect>
+    <rect style="fill: var(--color-illustrationPalette020)" x="1029" y="371.118" width="85.3613" height="16.266" rx="8.13299"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="1029" y="436.286" width="130" height="9.57798" rx="4.78899"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="1029" y="458.634" width="130" height="9.57798" rx="4.78899"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="1029" y="413.936" width="130" height="9.57798" rx="4.78899"></rect>
+    <rect style="fill: var(--color-illustrationInterface020)" x="1029" y="480.981" width="65.783" height="9.57798" rx="4.78899"></rect>
+  </g>
+  <line x1="327.5" y1="616" x2="327.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="634.5" y1="616" x2="634.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="766.5" y1="616" x2="766.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="239.5" y1="616" x2="239.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="722.5" y1="616" x2="722.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="1250.5" y1="616" x2="1250.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <rect style="fill: var(--color-illustrationPalette020)" x="853" y="327" width="136" height="136" rx="9.74179"></rect>
+  <line x1="853.5" y1="616" x2="853.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="986.5" y1="616" x2="986.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="1031.5" y1="616" x2="1031.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <line x1="1162.5" y1="616" x2="1162.5" y2="222" stroke="#577FFB" stroke-width="5"></line>
+  <defs>
+    
+    
+  </defs>
+</svg>

package/site/public/static/illustrations/components/grid-layout-illustration.svg

@@ -0,0 +1,73 @@
+<svg
+  id="nksvg"
+  style="width: 100%; height: 100%"
+  width="1490"
+  height="838"
+  viewBox="0 0 1490 838"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+  class="css-0"
+>
+  <rect
+    style="fill: var(--color-illustrationBackground020)"
+    width="1490"
+    height="838"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette060)"
+    x="356"
+    y="439.823"
+    width="256.824"
+    height="427.576"
+    rx="8"
+    transform="rotate(-90 356 439.823)"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette050)"
+    x="356"
+    y="484.247"
+    width="191.576"
+    height="169.365"
+    rx="8"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette050)"
+    x="592"
+    y="484.247"
+    width="191.576"
+    height="169.365"
+    rx="8"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette070)"
+    x="828"
+    y="183"
+    width="306.8"
+    height="84.6824"
+    rx="8"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette070)"
+    x="828"
+    y="312.106"
+    width="306.8"
+    height="84.6824"
+    rx="8"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette070)"
+    x="828"
+    y="441.212"
+    width="306.8"
+    height="84.6824"
+    rx="8"
+  ></rect>
+  <rect
+    style="fill: var(--color-illustrationPalette070)"
+    x="828"
+    y="570.318"
+    width="306.8"
+    height="84.6824"
+    rx="8"
+  ></rect>
+</svg>