plain-design 1.0.0-beta.146 → 1.0.0-beta.147

package/src/packages/components/Grid/grid.scss

@@ -1,109 +1,109 @@
-$screen-sm: 768px;
-$screen-md: 992px;
-$screen-lg: 1200px;
-$screen-xl: 1920px;
-$cell-num: 24;
-$flexs: (
-  start:(justify-content:flex-start),
-  center:(justify-content:center),
-  end:(justify-content:flex-end),
-  space-between:(justify-content:space-between),
-  space-around:(justify-content:space-around),
-  top:(align-items:flex-start),
-  middle:(align-items:center),
-  bottom:(align-items:flex-end),
-);
-$screens: (
-  xs:(max-width:$screen-sm),
-  sm:(min-width:$screen-sm),
-  md:(min-width:$screen-md),
-  lg:(min-width:$screen-lg),
-  xl:(min-width:$screen-xl),
-);
-
-@mixin res($key, $map: $screens) {
-  // 循环断点Map，如果存在则返回
-  @if map-has-key($map, $key) {
-    @media only screen and #{inspect(map-get($map, $key))} {
-      @content;
-    }
-  } @else {
-    @warn "Undefeined points: `#{$map}`";
-  }
-}
-
-@include prefix(grid-row) {
-  height: auto;
-  position: relative;
-  margin-right: 0 !important;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-
-  &:last-child {
-    margin-bottom: 0 !important;
-  }
-
-  &, & * {
-    box-sizing: border-box;
-  }
-
-  /*flex布局*/
-  &:before,
-  &:after {
-    display: flex;
-  }
-
-  /*flex布局*/
-  @each $flexType, $flexValue in $flexs {
-    &.grid-row-flex-#{$flexType} {
-      @each $key, $value in $flexValue {
-        #{$key}: #{$value}
-      }
-    }
-  }
-
-  /*响应式*/
-  @include prefix(grid-col) {
-    display: block;
-    float: left;
-
-    @for $i from 1 through $cell-num {
-      &.grid-col-span-#{$i} {
-        width: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-offset-#{$i} {
-        margin-left: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-pull-#{$i} {
-        position: relative;
-        right: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-push-#{$i} {
-        position: relative;
-        left: (1 / $cell-num * $i * 100) * 1%;
-      }
-      &.grid-col-order-#{$i} {
-        order: $i;
-      }
-    }
-
-    @each $size, $px in $screens {
-      @include res(inspect($size)) {
-        @for $i from 1 through $cell-num {
-          &.grid-col-#{$size}-#{$i} {
-            width: (1 / $cell-num * $i * 100) * 1%;
-          }
-        }
-      }
-    }
-  }
-}
-
-@each $size, $px in $screens {
-  @include res(inspect($size)) {
-    .hidden-#{$size}-only {
-      display: none;
-    }
-  }
-}
+$screen-sm: 768px;
+$screen-md: 992px;
+$screen-lg: 1200px;
+$screen-xl: 1920px;
+$cell-num: 24;
+$flexs: (
+  start:(justify-content:flex-start),
+  center:(justify-content:center),
+  end:(justify-content:flex-end),
+  space-between:(justify-content:space-between),
+  space-around:(justify-content:space-around),
+  top:(align-items:flex-start),
+  middle:(align-items:center),
+  bottom:(align-items:flex-end),
+);
+$screens: (
+  xs:(max-width:$screen-sm),
+  sm:(min-width:$screen-sm),
+  md:(min-width:$screen-md),
+  lg:(min-width:$screen-lg),
+  xl:(min-width:$screen-xl),
+);
+
+@mixin res($key, $map: $screens) {
+  // 循环断点Map，如果存在则返回
+  @if map-has-key($map, $key) {
+    @media only screen and #{inspect(map-get($map, $key))} {
+      @content;
+    }
+  } @else {
+    @warn "Undefeined points: `#{$map}`";
+  }
+}
+
+@include prefix(grid-row) {
+  height: auto;
+  position: relative;
+  margin-right: 0 !important;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  &, & * {
+    box-sizing: border-box;
+  }
+
+  /*flex布局*/
+  &:before,
+  &:after {
+    display: flex;
+  }
+
+  /*flex布局*/
+  @each $flexType, $flexValue in $flexs {
+    &.grid-row-flex-#{$flexType} {
+      @each $key, $value in $flexValue {
+        #{$key}: #{$value}
+      }
+    }
+  }
+
+  /*响应式*/
+  @include prefix(grid-col) {
+    display: block;
+    float: left;
+
+    @for $i from 1 through $cell-num {
+      &.grid-col-span-#{$i} {
+        width: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-offset-#{$i} {
+        margin-left: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-pull-#{$i} {
+        position: relative;
+        right: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-push-#{$i} {
+        position: relative;
+        left: (1 / $cell-num * $i * 100) * 1%;
+      }
+      &.grid-col-order-#{$i} {
+        order: $i;
+      }
+    }
+
+    @each $size, $px in $screens {
+      @include res(inspect($size)) {
+        @for $i from 1 through $cell-num {
+          &.grid-col-#{$size}-#{$i} {
+            width: (1 / $cell-num * $i * 100) * 1%;
+          }
+        }
+      }
+    }
+  }
+}
+
+@each $size, $px in $screens {
+  @include res(inspect($size)) {
+    .hidden-#{$size}-only {
+      display: none;
+    }
+  }
+}

package/src/packages/components/Grid/grid.utils.ts

@@ -1,21 +1,21 @@
-export enum eGridAlign {
-  left = 'left',
-  center = 'center',
-  right = 'right',
-  top = 'top',
-  middle = 'middle',
-  bottom = 'bottom',
-}
-
-export enum eGridJustify {
-  start = "start",
-  end = "start",
-  center = "start",
-  'space-around' = "space-around",
-  'space-between' = "space-between",
-}
-
-export type GridColSize = number | {
-  span: number,
-  offset: number,
-}
+export enum eGridAlign {
+  left = 'left',
+  center = 'center',
+  right = 'right',
+  top = 'top',
+  middle = 'middle',
+  bottom = 'bottom',
+}
+
+export enum eGridJustify {
+  start = "start",
+  end = "start",
+  center = "start",
+  'space-around' = "space-around",
+  'space-between' = "space-between",
+}
+
+export type GridColSize = number | {
+  span: number,
+  offset: number,
+}

package/src/packages/components/GridCol/index.tsx

@@ -1,5 +1,5 @@
-import {GridCol} from "../Grid/GridCol";
-
-export {GridCol};
-
-export default GridCol;
+import {GridCol} from "../Grid/GridCol";
+
+export {GridCol};
+
+export default GridCol;

package/src/packages/components/GridRow/index.tsx

@@ -1,5 +1,5 @@
-import {GridRow} from "../Grid/GridRow";
-
-export {GridRow};
-
-export default GridRow;
+import {GridRow} from "../Grid/GridRow";
+
+export {GridRow};
+
+export default GridRow;

package/src/packages/components/Icon/icon.external.tsx

@@ -97,5 +97,11 @@ export const IconExternal: Record<string, () => RenderNode> = {
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
       <path d="M8.99988 4.99976L16.0002 12L8.99988 18.9998V12.9998L2.9999 13.0001L2.99988 11.0001L8.99988 10.9998V4.99976ZM17.9999 18.9999L18 4.99993H20L19.9999 18.9999H17.9999Z"></path>
     </svg>
+  ),
+  'ie-dropper': () => (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+      <path
+        d="M15.5355 2.80744C17.0976 1.24534 19.6303 1.24534 21.1924 2.80744C22.7545 4.36953 22.7545 6.90219 21.1924 8.46429L18.3638 11.2929L18.7175 11.6466C19.108 12.0371 19.108 12.6703 18.7175 13.0608C18.327 13.4513 17.6938 13.4513 17.3033 13.0608L16.9498 12.7073L10.7351 18.922C10.1767 19.4804 9.46547 19.861 8.6911 20.0159L6.93694 20.3667C6.54976 20.4442 6.19416 20.6345 5.91496 20.9137L4.92894 21.8997C4.53841 22.2902 3.90525 22.2902 3.51472 21.8997L2.10051 20.4855C1.70999 20.095 1.70999 19.4618 2.10051 19.0713L3.08653 18.0852C3.36574 17.806 3.55605 17.4504 3.63348 17.0633L3.98431 15.3091C4.13919 14.5347 4.51981 13.8235 5.07821 13.2651L11.2929 7.05045L10.9393 6.69686C10.5488 6.30634 10.5488 5.67317 10.9393 5.28265C11.3299 4.89212 11.963 4.89212 12.3535 5.28265L12.7069 5.63604L15.5355 2.80744ZM12.7071 8.46466L6.49242 14.6794C6.21322 14.9586 6.02291 15.3142 5.94548 15.7013L5.59464 17.4555C5.43977 18.2299 5.05915 18.9411 4.50075 19.4995C5.05915 18.9411 5.77035 18.5604 6.54471 18.4056L8.29887 18.0547C8.68605 17.9773 9.04165 17.787 9.32085 17.5078L15.5355 11.2931L12.7071 8.46466Z"></path>
+    </svg>
   )
 };

package/src/packages/components/Icon/icon.registry.tsx

@@ -1,21 +1,21 @@
-import {RenderNode} from "@peryl/react-compose";
-import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
-
-interface iIconGetter {(data: { props: { icon?: string | undefined, strokeWidth: number | undefined, strokeLinecap: tStrokeLinecap | undefined, strokeLinejoin: tStrokeLinejoin | undefined }, attrs: any }): RenderNode | Promise<RenderNode>;}
-
-export const IconRegistration = (() => {
-
-  const icons: { prefix: string, getter: iIconGetter }[] = [];
-
-  const registry = (prefix: string, getter: iIconGetter) => {icons.unshift({ prefix, getter });};
-
-  const getIconRenderer = async (data: Parameters<iIconGetter>[0]): Promise<null | RenderNode> => {
-    const { icon: iconName } = data.props;
-    if (!iconName) {return null;}
-    const icon = icons.find(i => iconName.indexOf(i.prefix) === 0);
-    if (!icon) {return null;}
-    return icon.getter(data);
-  };
-
-  return { registry, getIconRenderer };
-})();
+import {RenderNode} from "@peryl/react-compose";
+import {tStrokeLinecap, tStrokeLinejoin} from "@peryl/icon/src/packages/component/icon/useIcon";
+
+interface iIconGetter {(data: { props: { icon?: string | undefined, strokeWidth: number | undefined, strokeLinecap: tStrokeLinecap | undefined, strokeLinejoin: tStrokeLinejoin | undefined }, attrs: any }): RenderNode | Promise<RenderNode>;}
+
+export const IconRegistration = (() => {
+
+  const icons: { prefix: string, getter: iIconGetter }[] = [];
+
+  const registry = (prefix: string, getter: iIconGetter) => {icons.unshift({ prefix, getter });};
+
+  const getIconRenderer = async (data: Parameters<iIconGetter>[0]): Promise<null | RenderNode> => {
+    const { icon: iconName } = data.props;
+    if (!iconName) {return null;}
+    const icon = icons.find(i => iconName.indexOf(i.prefix) === 0);
+    if (!icon) {return null;}
+    return icon.getter(data);
+  };
+
+  return { registry, getIconRenderer };
+})();

package/src/packages/components/Icon/icon.scss

@@ -1,12 +1,12 @@
-@include prefix(icon) {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 1em;
-  width: 1em;
-  vertical-align: baseline;
-
-  @include statusMixin(icon) {
-    color: $color-6;
-  }
-}
+@include prefix(icon) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 1em;
+  width: 1em;
+  vertical-align: baseline;
+
+  @include statusMixin(icon) {
+    color: $color-6;
+  }
+}

package/src/packages/components/Illustration/index.tsx

@@ -1,28 +1,28 @@
-import {designComponent, RenderNode} from '@peryl/react-compose';
-
-export const Illustration = designComponent({
-  name: 'illustration',
-  props: {
-    code: { type: String },
-  },
-  setup({ props }) {
-    return () => (
-      !!props.code && IllustrationTypes[props.code]
-    );
-  },
-});
-
-export default Illustration;
-
-export const IllustrationTypes: Record<string, RenderNode> = {
-  noSearch: (
-    /*@formatter:off*/
-    <svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M225.643 181.179c-8.137-.656-78.565-2.685-98.24 8.704-19.675 11.389-18.119 24.773-3.551 32.918 10.784 6.029 22.477 8.793 41.255 10.713 27.178 2.779 59.843.848 70.28-1.029 17.648-3.173 19.574-9.71 19.574-14.484 0-4.775 11.28-8.31 14.285-16.729 3.006-8.419-2.897-12.94-24.939-17.807-1.568-.306-10.527-1.629-18.664-2.286Z" fill="url(#a)"/><path d="m157.194 194.324-20.846 5.698c-.437 4.623-.089 8.554 1.042 11.793 1.089 3.12 3.513 5.43 8.263 6.227.124.02.477-.045 1.06-.195a.665.665 0 0 0 .231-.033c4.758-1.795 8.023-5.693 9.794-11.696 1.803-6.113 1.955-10.045.456-11.794Z" fill="url(#b)"/><path d="M146.73 82.266c.19-.02.406-.047.648-.08.363-.051.841-.033 1.032.03 6.306 2.08 8.927 7.428 8.927 13.19V197.27c-.196 5.615-.826 9.519-1.889 11.714-1.883 3.888-5.673 7.101-9.778 9.059.239.028.593.053 1.06.076h.648c2.737 0 6.235.085 12.805-1.597 19.746-5.055 52.733-16.381 57.682-18.34 7.02-2.778 13.93-10.066 13.93-17.781 0-5.143.34-37.63 1.018-97.46.135-6.099-1.093-10.76-3.685-13.985-3.887-4.837-9.594-3.944-12.177-3.64-1.722.203-24.711 5.673-68.966 16.41-.198.06-.4.133-.607.218a5.415 5.415 0 0 0-.648.322Z" fill="url(#c)"/><path d="M142.098 92.52c-.118-3.84.29-6.4 1.223-7.677 1.401-1.917 2.478-2.24 3.183-2.5.705-.26 1.527-.216 1.834-.176a6.969 6.969 0 0 1 2.221.723c.756.401 1.786 1.215 2.406 1.787a12.827 12.827 0 0 1 2.617 3.37l-13.484 4.473Z" fill="url(#d)"/><path d="m171.434 115.156 47.822-11.923a.88.88 0 0 1 1.094.854v3.301a.882.882 0 0 1-.668.855l-47.821 11.923a.881.881 0 0 1-1.095-.855v-3.3c0-.405.276-.757.668-.855ZM171.171 102.668l28.046-6.993a.881.881 0 0 1 1.09.771l.31 3.223a.882.882 0 0 1-.664.939l-28.046 6.993a.88.88 0 0 1-1.09-.771l-.31-3.223a.881.881 0 0 1 .664-.939Z" fill="#EBEBF2"/><path d="m223.562 203.363-.126 1.773-1.363.522-1.265-.195-.211-2.42 2.965.32Z" fill="#FFB8A3"/><path d="M220.592 204.877a.266.266 0 0 0-.164-.012c-.904.287-1.653.685-2.143.831-.807.241-1.538.523-2.048.647s-1.421.225-1.888.473c-.466.248-.579.62-.618.859-.023.147-.133.392-.127.76.003.14.053.293.166.312 2.071.339 4.293.279 5.537.243 1.23-.036 3.082-.05 4.697-.085.167-.004.293-.183.292-.373-.007-1.102-.017-1.693-.113-2.135-.091-.423-.137-.93-.423-1.468-.048-.091-.125-.193-.213-.146l-.732.39c-.442.235-1.09.138-1.363.081-.182-.039-.469-.164-.86-.377Z" fill="#3E3E6E"/><path d="m235.159 200.084.234 2.339-2.684.02-.146-2.501 2.596.142Z" fill="#FFB8A3"/><path d="M232.649 201.598a.256.256 0 0 0-.151-.029c-.874.167-1.364.177-1.948.269-.584.093-.725.009-1.083.047a2.625 2.625 0 0 0-.86.212c-.365.143-.692.484-.757.7-.064.216-.09.369-.128.707-.014.129.162.343.269.369 1.834.429 2.295.455 3.287.624.992.168 2.705.44 4.21.581.155.015.293-.136.315-.311.125-1.013.036-.97 0-1.386-.035-.398-.017-.869-.218-1.394-.034-.089-.093-.191-.181-.157l-.726.279c-.439.168-1.029.01-1.276-.073-.164-.054-.415-.2-.753-.438Z" fill="#3E3E6E"/><path d="M223.162 140.701c.318-1.436-.046-2.153-1.092-2.153-1.643 0-2.228-2.078-2.075-4.243.311-4.404 1.888-5.939 3.957-5.939s3.215.242 3.612 2.697c.397 2.454.514 3.92 0 5.603-.513 1.682-.513 2.712 0 3.17.343.305-1.125.593-4.402.865Z" fill="url(#e)"/><path d="M227.427 137.163c.752-3.122 3.089-4.245 2.712-6.393-.252-1.432-.688-1.96-1.309-1.584-.259-1.556-1.504-2.346-3.736-2.37-.497-.005-1.219.411-1.719.322-.896-.16-1.185-.271-1.805-.284-.816-.016-1.317.286-1.644.841-.4.681-.087 1.747.831 2.518.827.694 1.748.47 2.362.759.412.193.983 1.177 1.716 2.951l.168-.509c.411-1.007.89-1.359 1.439-1.057.548.303.648.769.299 1.401-.41 1.246-.597 2.058-.559 2.434.037.376.453.7 1.245.971Z" fill="#353564"/><path d="M214.124 152.252c-1.066.682-1.951-.062-2.297-.654-.231-.394-1.795-3.163-4.694-8.307l2.51-1.246 4.871 8.213s.676 1.313-.39 1.994Z" fill="#EFAB23"/><path d="M215.326 148.018c-.293-.061-.675-.323-1.147-.788-.709-.696-1.081-1.543-1.671-1.643-.589-.099-1.378.071-1.718.274-.34.203-.427.85.038.85.465 0 .332-.005 1.003-.188.671-.183.749.524.749 1.066 0 .541.282 1.15.518 1.378.235.227.324.398.908.455.269.026.777.719.966.706.262-.017.048.278.2.202.169-.083-.315-.997.154-2.184a.268.268 0 0 0 0-.128Z" fill="url(#f)"/><path d="M210.205 147.071c-.712-.344-.743.173-.863.558a1.837 1.837 0 0 0 .259 1.614c.349.499 1.11 1.2 1.588 1.239.104.009.011-.095-.058-.223-.195-.364-.35-.502-.172-1.016.104-.301.182-.47.113-.908-.059-.375-.539-1.105-.867-1.264Z" fill="#FFB8A3"/><path d="M203.275 142.813c6.351 0 11.5-5.037 11.5-11.25s-5.149-11.25-11.5-11.25-11.5 5.037-11.5 11.25 5.149 11.25 11.5 11.25Z" fill="url(#g)"/><path d="M202.842 119.313c6.941 0 12.567 5.626 12.567 12.567 0 6.94-5.626 12.567-12.567 12.567-6.94 0-12.567-5.627-12.567-12.567 0-6.941 5.627-12.567 12.567-12.567Zm0 2.121c-5.769 0-10.446 4.677-10.446 10.446s4.677 10.446 10.446 10.446 10.446-4.677 10.446-10.446-4.677-10.446-10.446-10.446Z" fill="url(#h)"/><path d="M216.195 147.813a256.62 256.62 0 0 0-2.463 4.086c-.835 1.429-1.823 3.913-2.55 3.913-.726 0-4.924-1.649-6.808-2.434-1.256-.524-2.713-1.017-4.37-1.479-.607-1.326-1.141-2.158-1.6-2.496-.69-.506-3.387 0-3.387 0s-.845 1.018 1.541 2.496c2.386 1.479 6.527 4.425 8.756 6.155 2.229 1.73 5.574 3.386 7.554 3.386 1.98 0 1.727-.415 2.584-1.453.572-.692 2.47-3.598 5.694-8.718l-4.951-3.456Z" fill="#FFB8A3"/><path d="M217.452 169.555c-.777 6.058-.893 11.865-.35 17.42.814 8.333 2.927 17.114 3.307 17.114.381 0 2.468.211 3.149 0 .68-.21.98-6.815.597-9.312-.382-2.498-.115-5.892 0-7.326.116-1.434 2.833-9.218 3.369-9.218s1.095 5.884 1.095 7.697c0 1.812 1.811 5.737 2.274 7.674.462 1.938 1.299 6.302 1.299 6.949 0 .432 1.075.521 3.225.268.129-4.146.129-6.839 0-8.079-.195-1.859-1.051-5.624-1.311-7.024-.26-1.401 0-3.621.561-7.076.374-2.303.868-5.63 1.481-9.981l-18.696.894Z" fill="url(#i)"/><path opacity=".303" d="M231.008 170.862a40.19 40.19 0 0 1-.899 2.805c-.858 2.314-2.637 4.415-2.637 4.588 0 0 .056-.064.121 0 .065.065.169.265.237.515.257.953.55 3.606.879 7.958l6.263-10.352c.597-4.501.597-7.113 0-7.837-.288-.35-.697 1.236-1.168 1.075-1.936-.66-2.868-.244-2.796 1.248Z" fill="url(#j)"/><path d="M222.327 139.539c-2.503 1.806-4.349 3.641-5.535 5.504-1.186 1.863-2.057 3.348-2.613 4.454l5.513 3.845-1.047 1.901a357.656 357.656 0 0 1-.603 8.264c-.346 4.089-2.472 7.445-1.707 7.944.764.5 6.377.429 11.57 0 3.462-.286 6.403-1.142 8.821-2.568.124-2.021.124-4.277 0-6.769-.185-3.739-.462-5.988-.707-7.487-.302-1.852-1.458-7.491-1.641-8.084-.183-.593-1.154-3.487-2.831-5.278-1.118-1.195-2.551-1.77-4.3-1.726-1.332.316-2.257.474-2.774.474-.518 0-1.233-.158-2.146-.474Z" fill="#5B5BEA"/><g opacity=".745"><path opacity=".302" d="M66.261 162.338v79.767l28.727 10.589v-82.801l-28.727-7.555Z" fill="url(#k)"/><path opacity=".302" d="m94.942 169.777 26.638-9.819v82.519l-26.638 10.097v-82.797Z" fill="url(#l)"/><path opacity=".302" d="m66.08 162.258 27.131-9.996 28.363 7.759-26.646 9.822-28.849-7.585Z" fill="url(#m)"/></g><g opacity=".465"><path opacity=".302" d="M256.532 128.366v63.12l22.799 8.38v-65.522l-22.799-5.978Z" fill="url(#n)"/><path opacity=".302" d="m279.295 134.252 21.141-7.769v65.298l-21.141 7.99v-65.519Z" fill="url(#o)"/><path opacity=".302" d="m256.388 128.303 21.533-7.91 22.511 6.14-21.149 7.772-22.895-6.002Z" fill="url(#p)"/></g><path opacity=".302" d="M305.914 156.824c7.753 0 14.399 4.065 17.198 9.845h1.438c7.608 0 13.776 6.168 13.776 13.776v1.369c0 7.608-6.168 13.776-13.776 13.776h-35.884c-7.608 0-13.776-6.168-13.776-13.776v-1.369c0-7.608 6.168-13.776 13.776-13.776h.049c2.799-5.78 9.446-9.845 17.199-9.845Z" fill="url(#q)"/><path opacity=".302" d="M108.557 88.101c7.753 0 14.399 4.065 17.198 9.845h1.438c7.608 0 13.776 6.169 13.776 13.777v1.368c0 7.609-6.168 13.777-13.776 13.777H91.309c-7.608 0-13.776-6.168-13.776-13.777v-1.368c0-7.608 6.168-13.776 13.776-13.776h.05c2.799-5.78 9.445-9.846 17.198-9.846Z" fill="url(#r)"/><defs><linearGradient id="a" x1="191.375" y1="202.433" x2="191.375" y2="250.617" gradientUnits="userSpaceOnUse"><stop stopColor="#FCFCFE"/><stop offset="1" stopColor="#EBEBF0"/></linearGradient><linearGradient id="b" x1="147.19" y1="194.324" x2="147.19" y2="218.045" gradientUnits="userSpaceOnUse"><stop stopColor="#EEEEF8"/><stop offset="1" stopColor="#BDBDC8"/></linearGradient><linearGradient id="c" x1="197.419" y1="197.037" x2="160.283" y2="72.313" gradientUnits="userSpaceOnUse"><stop stopColor="#D8D8E4"/><stop offset=".232" stopColor="#E2E2EA"/><stop offset=".925" stopColor="#F2F2F9"/><stop offset="1" stopColor="#E6E6EB"/></linearGradient><linearGradient id="d" x1="146.335" y1="84.373" x2="149.502" y2="91.145" gradientUnits="userSpaceOnUse"><stop stopColor="#CED0D6"/><stop offset="1" stopColor="#F6F8FC"/></linearGradient><linearGradient id="e" x1="222.872" y1="133.254" x2="225.215" y2="138.704" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="f" x1="210.813" y1="145.864" x2="215.446" y2="149.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFB8A3"/><stop offset="1" stopColor="#EDA48E"/></linearGradient><linearGradient id="g" x1="203.275" y1="120.313" x2="203.275" y2="142.813" gradientUnits="userSpaceOnUse"><stop stopColor="#FCFCFF"/><stop offset="1" stopColor="#FAFAFC"/></linearGradient><linearGradient id="h" x1="209.452" y1="141.29" x2="194.907" y2="123.886" gradientUnits="userSpaceOnUse"><stop stopColor="#FAC251"/><stop offset="1" stopColor="#FFDE9B"/></linearGradient><linearGradient id="i" x1="224.791" y1="201.579" x2="236.444" y2="176.655" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="j" x1="231.945" y1="177.584" x2="230.73" y2="177.181" gradientUnits="userSpaceOnUse"><stop stopColor="#5360B8" stopOpacity="0"/><stop offset="1" stopColor="#223196" stopOpacity=".569"/></linearGradient><linearGradient id="k" x1="71.619" y1="172.338" x2="71.619" y2="250.159" gradientUnits="userSpaceOnUse"><stop stopColor="#EEE"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="l" x1="108.261" y1="159.958" x2="108.261" y2="252.574" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="m" x1="93.827" y1="152.262" x2="93.827" y2="169.843" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="n" x1="260.784" y1="136.279" x2="260.784" y2="197.859" gradientUnits="userSpaceOnUse"><stop stopColor="#EEE"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="o" x1="289.865" y1="126.483" x2="289.865" y2="199.771" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="p" x1="278.41" y1="120.393" x2="278.41" y2="134.305" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="q" x1="306.608" y1="156.824" x2="306.608" y2="195.59" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="r" x1="109.251" y1="88.101" x2="109.251" y2="126.868" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient></defs></svg>
-    /*@formatter:on*/
-  ),
-  404: (
-    /*@formatter:off*/
-    <svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".302" d="M124.645 102.87c19.586-33.838 44.775-29.344 60.392 15.667 15.617 45.01 52.771 62.396 90.399 31.714 14.027-13.618 35.238-14.088 44.079 21.393 2.103 11.917 3.029 18.858 2.777 20.821H34.701c0-11.435 4.968-23.114 14.905-35.035 22.97-24.944 55.453-20.722 75.039-54.56Z" fill="url(#a)"/><path opacity=".302" d="M189.371 202.561s-66.757 0-99.856-35.488C68.719 145.127 46.857 156.842 39 206.941c-.011.605 50.112.605 150.371 0v-4.38Z" fill="url(#b)"/><path d="M245.065 90.676h-71.406a4.01 4.01 0 0 0-4.01 4.01v109.192a4.01 4.01 0 0 0 4.01 4.01h71.406a4.01 4.01 0 0 0 4.01-4.01V94.686a4.01 4.01 0 0 0-4.01-4.01Z" fill="url(#c)"/><path d="M251.234 90.676h-71.406a4.01 4.01 0 0 0-4.01 4.01v109.192a4.01 4.01 0 0 0 4.01 4.01h71.406a4.01 4.01 0 0 0 4.01-4.01V94.686a4.01 4.01 0 0 0-4.01-4.01Z" fill="url(#d)"/><path d="M244.22 106.87h-57.377a1 1 0 0 0-1 1v2.856a1 1 0 0 0 1 1h57.377a1 1 0 0 0 1-1v-2.856a1 1 0 0 0-1-1ZM244.22 118.437h-57.377a1 1 0 0 0-1 1v2.856a1 1 0 0 0 1 1h57.377a1 1 0 0 0 1-1v-2.856a1 1 0 0 0-1-1ZM214.917 130.004h-28.074a1 1 0 0 0-1 1v2.856a1 1 0 0 0 1 1h28.074a1 1 0 0 0 1-1v-2.856a1 1 0 0 0-1-1Z" fill="#EBEBF2"/><path fillRule="evenodd" clipRule="evenodd" d="M256.73 202.64c2.094 1.502 3.558 2.253 4.39 2.253 1.248 0 1.922 1.295.762 1.995-1.161.699-4.878-.309-5.83-.309s-3.403.4-2.464-2.766c.626-2.111 1.201-3.009 1.725-2.695l1.417.445v1.077ZM239.322 202.64c-2.094 1.502-3.558 2.253-4.39 2.253-1.248 0-1.923 1.295-.762 1.995 1.161.699 4.878-.309 5.83-.309s3.403.4 2.464-2.766c-.626-2.111-1.201-3.009-1.725-2.695l-1.417.445v1.077Z" fill="#3E3E6E"/><path fillRule="evenodd" clipRule="evenodd" d="M256.786 165.405c1.22 8.869 1.577 17.923 1.07 27.161-.71 9.967.034 9.746-1.07 9.746-.417 0-2.114.224-2.489-.432-.895-1.571-2.34-14.741-1.783-17.389.055-.398-5.566-12.757-5.566-17.564.209-.938 3.488-1.445 9.838-1.522Z" fill="url(#e)"/><path fillRule="evenodd" clipRule="evenodd" d="M239.438 165.405c-1.22 8.869-1.576 17.923-1.07 27.161.71 9.967-.034 9.746 1.07 9.746.417 0 2.114.224 2.489-.432.895-1.571 2.341-14.741 1.784-17.389-.056-.398 5.565-12.757 5.565-17.564-.209-.938-3.488-1.445-9.838-1.522Z" fill="url(#f)"/><path fillRule="evenodd" clipRule="evenodd" d="M236.322 147.073c-2.059 4.61-3.316 7.523-3.77 8.737-.211.503-2.934 1.757-8.169 3.761-1.755.154-2.758.675-3.01 1.564-.143.571-.079 1.549.814 1.63.596.054 1.445-.395 2.547-1.346 5.848.21 9.326-.765 10.434-2.926 1.108-2.16 2.795-5.505 5.062-10.032l-3.637-1.776-.271.388Z" fill="url(#g)"/><path fillRule="evenodd" clipRule="evenodd" d="M255.534 140.219c0-.833 3.366-3.689 4.432-4.84.295-.049-5.363-1.05-9.219-3.385-2.571-1.556-2.77-2.066-.597-1.531 5.485 1.021 9.572 1.925 12.261 2.711 2.655 1.199-.052 5.12-2.69 9.879-2.639 4.759-4.187-2-4.187-2.834Z" fill="url(#h)"/><path fillRule="evenodd" clipRule="evenodd" d="M245.115 131.007c-.638 3.18-.338 5.05.898 5.609 1.619.674.476 2.065.149 2.236-.219.114-.165.501.16 1.159 1.023.541 1.776.756 2.256.646.481-.11 1.068-.651 1.76-1.623-1.289-.926-1.738-1.669-1.347-2.229.392-.56.987-1.143 1.786-1.751.775-.593.745-1.045-.09-1.354.202-.561.277-1.201.224-1.919l-2.717-.774-2.765-.603-.314.603Z" fill="url(#i)"/><path fillRule="evenodd" clipRule="evenodd" d="M246.402 138.592c-5.133.106-8.706 2.95-10.719 8.531.269.1 4.02 1.899 4.02 3.066 0 1.166-2.079 12.823-1.824 15.255.255 2.432 10.209 4.724 19.948 1.518.664-.638.039-14.731-1.672-18.467-.089-.156 4.194-4.077 3.894-5.489-.3-1.411-2.958-3.906-4.41-3.906s-4.972.227-5.793-.508c-.346-.311-.001 1.005-1.792 1.005-.717 0-1.268-.335-1.652-1.005Z" fill="#5B5BEA"/><path fillRule="evenodd" clipRule="evenodd" d="M246.932 131.729c2.648-.753 3.352.405 3.352.895 0 .326-.084.867-.251 1.624.326-.145.555-.255.688-.33a3.473 3.473 0 0 0 1.541-1.908c.358-1.185-.694-3.698-3.421-3.324-.95-.18-1.101-1.579-2.753-.718-1.652.861-2.209.199-2.209 1.081 0 .883.068 3.602 3.053 2.68Z" fill="#353564"/><path d="M119.525 207.117c7.666 0 13.881-6.215 13.881-13.88 0-7.666-6.215-13.881-13.881-13.881s-13.88 6.215-13.88 13.881c0 7.665 6.214 13.88 13.88 13.88Z" fill="url(#j)"/><path d="M120.296 185.525a.77.77 0 1 0-1.542 0v3.085a.77.77 0 1 0 1.542 0v-3.085Z" fill="#5B5BEA"/><path opacity=".9" d="M125.073 187.825a.772.772 0 0 0-1.182-.991l-1.982 2.363a.77.77 0 1 0 1.181.991l1.983-2.363Z" fill="#5B5BEA"/><path opacity=".7" d="M127.254 192.657a.771.771 0 0 0-.268-1.519l-3.038.536a.771.771 0 0 0 .268 1.519l3.038-.536Z" fill="#5B5BEA"/><path opacity=".6" d="M125.818 197.76a.77.77 0 1 0 .771-1.336l-2.671-1.542a.772.772 0 0 0-.771 1.336l2.671 1.542Z" fill="#5B5BEA"/><path opacity=".5" d="M121.438 200.747a.77.77 0 1 0 1.449-.528l-1.055-2.898a.77.77 0 1 0-1.449.527l1.055 2.899Z" fill="#5B5BEA"/><path opacity=".4" d="M116.163 200.219a.771.771 0 0 0 1.45.528l1.055-2.899a.771.771 0 0 0-1.45-.527l-1.055 2.898Z" fill="#5B5BEA"/><path opacity=".3" d="M112.462 196.424a.772.772 0 1 0 .771 1.336l2.671-1.542a.772.772 0 0 0-.771-1.336l-2.671 1.542Z" fill="#5B5BEA"/><path opacity=".2" d="M112.065 191.138a.77.77 0 0 0-.268 1.519l3.038.536a.77.77 0 0 0 .268-1.519l-3.038-.536Z" fill="#5B5BEA"/><path opacity=".1" d="M115.159 186.834a.77.77 0 1 0-1.181.991l1.983 2.363a.77.77 0 1 0 1.181-.991l-1.983-2.363Z" fill="#5B5BEA"/><path opacity=".398" d="M58.606 199.034c14.326 6.056 25.976 1.959 34.952-12.293 13.462-21.377 31.62-22.663 45.691-8.927 14.072 13.736 22.498 27.157 50.847 24.819 15.36-1.653 25.738-14.549 31.134-38.688" stroke="url(#k)" strokeWidth=".881" strokeLinecap="round" strokeDasharray="2.64 2.64"/><path fillRule="evenodd" clipRule="evenodd" d="M216.128 150.301c.248.318 4.804 6.277 13.666 17.876l-6.059.72c-5.319-12.715-7.855-18.914-7.607-18.596Z" fill="#FCC55E"/><path fillRule="evenodd" clipRule="evenodd" d="M216.128 150.301c.154.512.908 7.816 2.262 21.914l5.345-3.318c-5.225-12.909-7.76-19.108-7.607-18.596Z" fill="#DB9710"/><path fillRule="evenodd" clipRule="evenodd" d="m216.128 150.301-4.077 20.333 7.645-1.791-3.568-18.542Z" fill="#FCC55E"/><defs><linearGradient id="a" x1="178.517" y1="80.651" x2="178.517" y2="192.465" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="b" x1="114.185" y1="156.5" x2="114.185" y2="207.395" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="c" x1="209.362" y1="90.676" x2="209.362" y2="207.888" gradientUnits="userSpaceOnUse"><stop stopColor="#ECECF0"/><stop offset="1" stopColor="#D8D8E4"/></linearGradient><linearGradient id="d" x1="215.531" y1="90.676" x2="215.531" y2="198.457" gradientUnits="userSpaceOnUse"><stop stopColor="#F8F8FB"/><stop offset="1" stopColor="#FAFAFE"/></linearGradient><linearGradient id="e" x1="252.786" y1="200.587" x2="249.807" y2="167.076" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="f" x1="243.438" y1="200.587" x2="246.417" y2="167.076" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="g" x1="223.714" y1="159.807" x2="236.303" y2="148.233" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="h" x1="256.079" y1="131.823" x2="258.907" y2="141.093" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="i" x1="246.119" y1="132.063" x2="251.203" y2="137.72" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="j" x1="117.3" y1="181.72" x2="125.255" y2="205.315" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#E8E8EF"/></linearGradient><linearGradient id="k" x1="74.439" y1="184.426" x2="137.17" y2="166.175" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD685" stopOpacity=".252"/><stop offset="1" stopColor="#FFB829"/></linearGradient></defs></svg>
-    /*@formatter:on*/
-  ),
-}
+import {designComponent, RenderNode} from '@peryl/react-compose';
+
+export const Illustration = designComponent({
+  name: 'illustration',
+  props: {
+    code: { type: String },
+  },
+  setup({ props }) {
+    return () => (
+      !!props.code && IllustrationTypes[props.code]
+    );
+  },
+});
+
+export default Illustration;
+
+export const IllustrationTypes: Record<string, RenderNode> = {
+  noSearch: (
+    /*@formatter:off*/
+    <svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M225.643 181.179c-8.137-.656-78.565-2.685-98.24 8.704-19.675 11.389-18.119 24.773-3.551 32.918 10.784 6.029 22.477 8.793 41.255 10.713 27.178 2.779 59.843.848 70.28-1.029 17.648-3.173 19.574-9.71 19.574-14.484 0-4.775 11.28-8.31 14.285-16.729 3.006-8.419-2.897-12.94-24.939-17.807-1.568-.306-10.527-1.629-18.664-2.286Z" fill="url(#a)"/><path d="m157.194 194.324-20.846 5.698c-.437 4.623-.089 8.554 1.042 11.793 1.089 3.12 3.513 5.43 8.263 6.227.124.02.477-.045 1.06-.195a.665.665 0 0 0 .231-.033c4.758-1.795 8.023-5.693 9.794-11.696 1.803-6.113 1.955-10.045.456-11.794Z" fill="url(#b)"/><path d="M146.73 82.266c.19-.02.406-.047.648-.08.363-.051.841-.033 1.032.03 6.306 2.08 8.927 7.428 8.927 13.19V197.27c-.196 5.615-.826 9.519-1.889 11.714-1.883 3.888-5.673 7.101-9.778 9.059.239.028.593.053 1.06.076h.648c2.737 0 6.235.085 12.805-1.597 19.746-5.055 52.733-16.381 57.682-18.34 7.02-2.778 13.93-10.066 13.93-17.781 0-5.143.34-37.63 1.018-97.46.135-6.099-1.093-10.76-3.685-13.985-3.887-4.837-9.594-3.944-12.177-3.64-1.722.203-24.711 5.673-68.966 16.41-.198.06-.4.133-.607.218a5.415 5.415 0 0 0-.648.322Z" fill="url(#c)"/><path d="M142.098 92.52c-.118-3.84.29-6.4 1.223-7.677 1.401-1.917 2.478-2.24 3.183-2.5.705-.26 1.527-.216 1.834-.176a6.969 6.969 0 0 1 2.221.723c.756.401 1.786 1.215 2.406 1.787a12.827 12.827 0 0 1 2.617 3.37l-13.484 4.473Z" fill="url(#d)"/><path d="m171.434 115.156 47.822-11.923a.88.88 0 0 1 1.094.854v3.301a.882.882 0 0 1-.668.855l-47.821 11.923a.881.881 0 0 1-1.095-.855v-3.3c0-.405.276-.757.668-.855ZM171.171 102.668l28.046-6.993a.881.881 0 0 1 1.09.771l.31 3.223a.882.882 0 0 1-.664.939l-28.046 6.993a.88.88 0 0 1-1.09-.771l-.31-3.223a.881.881 0 0 1 .664-.939Z" fill="#EBEBF2"/><path d="m223.562 203.363-.126 1.773-1.363.522-1.265-.195-.211-2.42 2.965.32Z" fill="#FFB8A3"/><path d="M220.592 204.877a.266.266 0 0 0-.164-.012c-.904.287-1.653.685-2.143.831-.807.241-1.538.523-2.048.647s-1.421.225-1.888.473c-.466.248-.579.62-.618.859-.023.147-.133.392-.127.76.003.14.053.293.166.312 2.071.339 4.293.279 5.537.243 1.23-.036 3.082-.05 4.697-.085.167-.004.293-.183.292-.373-.007-1.102-.017-1.693-.113-2.135-.091-.423-.137-.93-.423-1.468-.048-.091-.125-.193-.213-.146l-.732.39c-.442.235-1.09.138-1.363.081-.182-.039-.469-.164-.86-.377Z" fill="#3E3E6E"/><path d="m235.159 200.084.234 2.339-2.684.02-.146-2.501 2.596.142Z" fill="#FFB8A3"/><path d="M232.649 201.598a.256.256 0 0 0-.151-.029c-.874.167-1.364.177-1.948.269-.584.093-.725.009-1.083.047a2.625 2.625 0 0 0-.86.212c-.365.143-.692.484-.757.7-.064.216-.09.369-.128.707-.014.129.162.343.269.369 1.834.429 2.295.455 3.287.624.992.168 2.705.44 4.21.581.155.015.293-.136.315-.311.125-1.013.036-.97 0-1.386-.035-.398-.017-.869-.218-1.394-.034-.089-.093-.191-.181-.157l-.726.279c-.439.168-1.029.01-1.276-.073-.164-.054-.415-.2-.753-.438Z" fill="#3E3E6E"/><path d="M223.162 140.701c.318-1.436-.046-2.153-1.092-2.153-1.643 0-2.228-2.078-2.075-4.243.311-4.404 1.888-5.939 3.957-5.939s3.215.242 3.612 2.697c.397 2.454.514 3.92 0 5.603-.513 1.682-.513 2.712 0 3.17.343.305-1.125.593-4.402.865Z" fill="url(#e)"/><path d="M227.427 137.163c.752-3.122 3.089-4.245 2.712-6.393-.252-1.432-.688-1.96-1.309-1.584-.259-1.556-1.504-2.346-3.736-2.37-.497-.005-1.219.411-1.719.322-.896-.16-1.185-.271-1.805-.284-.816-.016-1.317.286-1.644.841-.4.681-.087 1.747.831 2.518.827.694 1.748.47 2.362.759.412.193.983 1.177 1.716 2.951l.168-.509c.411-1.007.89-1.359 1.439-1.057.548.303.648.769.299 1.401-.41 1.246-.597 2.058-.559 2.434.037.376.453.7 1.245.971Z" fill="#353564"/><path d="M214.124 152.252c-1.066.682-1.951-.062-2.297-.654-.231-.394-1.795-3.163-4.694-8.307l2.51-1.246 4.871 8.213s.676 1.313-.39 1.994Z" fill="#EFAB23"/><path d="M215.326 148.018c-.293-.061-.675-.323-1.147-.788-.709-.696-1.081-1.543-1.671-1.643-.589-.099-1.378.071-1.718.274-.34.203-.427.85.038.85.465 0 .332-.005 1.003-.188.671-.183.749.524.749 1.066 0 .541.282 1.15.518 1.378.235.227.324.398.908.455.269.026.777.719.966.706.262-.017.048.278.2.202.169-.083-.315-.997.154-2.184a.268.268 0 0 0 0-.128Z" fill="url(#f)"/><path d="M210.205 147.071c-.712-.344-.743.173-.863.558a1.837 1.837 0 0 0 .259 1.614c.349.499 1.11 1.2 1.588 1.239.104.009.011-.095-.058-.223-.195-.364-.35-.502-.172-1.016.104-.301.182-.47.113-.908-.059-.375-.539-1.105-.867-1.264Z" fill="#FFB8A3"/><path d="M203.275 142.813c6.351 0 11.5-5.037 11.5-11.25s-5.149-11.25-11.5-11.25-11.5 5.037-11.5 11.25 5.149 11.25 11.5 11.25Z" fill="url(#g)"/><path d="M202.842 119.313c6.941 0 12.567 5.626 12.567 12.567 0 6.94-5.626 12.567-12.567 12.567-6.94 0-12.567-5.627-12.567-12.567 0-6.941 5.627-12.567 12.567-12.567Zm0 2.121c-5.769 0-10.446 4.677-10.446 10.446s4.677 10.446 10.446 10.446 10.446-4.677 10.446-10.446-4.677-10.446-10.446-10.446Z" fill="url(#h)"/><path d="M216.195 147.813a256.62 256.62 0 0 0-2.463 4.086c-.835 1.429-1.823 3.913-2.55 3.913-.726 0-4.924-1.649-6.808-2.434-1.256-.524-2.713-1.017-4.37-1.479-.607-1.326-1.141-2.158-1.6-2.496-.69-.506-3.387 0-3.387 0s-.845 1.018 1.541 2.496c2.386 1.479 6.527 4.425 8.756 6.155 2.229 1.73 5.574 3.386 7.554 3.386 1.98 0 1.727-.415 2.584-1.453.572-.692 2.47-3.598 5.694-8.718l-4.951-3.456Z" fill="#FFB8A3"/><path d="M217.452 169.555c-.777 6.058-.893 11.865-.35 17.42.814 8.333 2.927 17.114 3.307 17.114.381 0 2.468.211 3.149 0 .68-.21.98-6.815.597-9.312-.382-2.498-.115-5.892 0-7.326.116-1.434 2.833-9.218 3.369-9.218s1.095 5.884 1.095 7.697c0 1.812 1.811 5.737 2.274 7.674.462 1.938 1.299 6.302 1.299 6.949 0 .432 1.075.521 3.225.268.129-4.146.129-6.839 0-8.079-.195-1.859-1.051-5.624-1.311-7.024-.26-1.401 0-3.621.561-7.076.374-2.303.868-5.63 1.481-9.981l-18.696.894Z" fill="url(#i)"/><path opacity=".303" d="M231.008 170.862a40.19 40.19 0 0 1-.899 2.805c-.858 2.314-2.637 4.415-2.637 4.588 0 0 .056-.064.121 0 .065.065.169.265.237.515.257.953.55 3.606.879 7.958l6.263-10.352c.597-4.501.597-7.113 0-7.837-.288-.35-.697 1.236-1.168 1.075-1.936-.66-2.868-.244-2.796 1.248Z" fill="url(#j)"/><path d="M222.327 139.539c-2.503 1.806-4.349 3.641-5.535 5.504-1.186 1.863-2.057 3.348-2.613 4.454l5.513 3.845-1.047 1.901a357.656 357.656 0 0 1-.603 8.264c-.346 4.089-2.472 7.445-1.707 7.944.764.5 6.377.429 11.57 0 3.462-.286 6.403-1.142 8.821-2.568.124-2.021.124-4.277 0-6.769-.185-3.739-.462-5.988-.707-7.487-.302-1.852-1.458-7.491-1.641-8.084-.183-.593-1.154-3.487-2.831-5.278-1.118-1.195-2.551-1.77-4.3-1.726-1.332.316-2.257.474-2.774.474-.518 0-1.233-.158-2.146-.474Z" fill="#5B5BEA"/><g opacity=".745"><path opacity=".302" d="M66.261 162.338v79.767l28.727 10.589v-82.801l-28.727-7.555Z" fill="url(#k)"/><path opacity=".302" d="m94.942 169.777 26.638-9.819v82.519l-26.638 10.097v-82.797Z" fill="url(#l)"/><path opacity=".302" d="m66.08 162.258 27.131-9.996 28.363 7.759-26.646 9.822-28.849-7.585Z" fill="url(#m)"/></g><g opacity=".465"><path opacity=".302" d="M256.532 128.366v63.12l22.799 8.38v-65.522l-22.799-5.978Z" fill="url(#n)"/><path opacity=".302" d="m279.295 134.252 21.141-7.769v65.298l-21.141 7.99v-65.519Z" fill="url(#o)"/><path opacity=".302" d="m256.388 128.303 21.533-7.91 22.511 6.14-21.149 7.772-22.895-6.002Z" fill="url(#p)"/></g><path opacity=".302" d="M305.914 156.824c7.753 0 14.399 4.065 17.198 9.845h1.438c7.608 0 13.776 6.168 13.776 13.776v1.369c0 7.608-6.168 13.776-13.776 13.776h-35.884c-7.608 0-13.776-6.168-13.776-13.776v-1.369c0-7.608 6.168-13.776 13.776-13.776h.049c2.799-5.78 9.446-9.845 17.199-9.845Z" fill="url(#q)"/><path opacity=".302" d="M108.557 88.101c7.753 0 14.399 4.065 17.198 9.845h1.438c7.608 0 13.776 6.169 13.776 13.777v1.368c0 7.609-6.168 13.777-13.776 13.777H91.309c-7.608 0-13.776-6.168-13.776-13.777v-1.368c0-7.608 6.168-13.776 13.776-13.776h.05c2.799-5.78 9.445-9.846 17.198-9.846Z" fill="url(#r)"/><defs><linearGradient id="a" x1="191.375" y1="202.433" x2="191.375" y2="250.617" gradientUnits="userSpaceOnUse"><stop stopColor="#FCFCFE"/><stop offset="1" stopColor="#EBEBF0"/></linearGradient><linearGradient id="b" x1="147.19" y1="194.324" x2="147.19" y2="218.045" gradientUnits="userSpaceOnUse"><stop stopColor="#EEEEF8"/><stop offset="1" stopColor="#BDBDC8"/></linearGradient><linearGradient id="c" x1="197.419" y1="197.037" x2="160.283" y2="72.313" gradientUnits="userSpaceOnUse"><stop stopColor="#D8D8E4"/><stop offset=".232" stopColor="#E2E2EA"/><stop offset=".925" stopColor="#F2F2F9"/><stop offset="1" stopColor="#E6E6EB"/></linearGradient><linearGradient id="d" x1="146.335" y1="84.373" x2="149.502" y2="91.145" gradientUnits="userSpaceOnUse"><stop stopColor="#CED0D6"/><stop offset="1" stopColor="#F6F8FC"/></linearGradient><linearGradient id="e" x1="222.872" y1="133.254" x2="225.215" y2="138.704" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="f" x1="210.813" y1="145.864" x2="215.446" y2="149.71" gradientUnits="userSpaceOnUse"><stop stopColor="#FFB8A3"/><stop offset="1" stopColor="#EDA48E"/></linearGradient><linearGradient id="g" x1="203.275" y1="120.313" x2="203.275" y2="142.813" gradientUnits="userSpaceOnUse"><stop stopColor="#FCFCFF"/><stop offset="1" stopColor="#FAFAFC"/></linearGradient><linearGradient id="h" x1="209.452" y1="141.29" x2="194.907" y2="123.886" gradientUnits="userSpaceOnUse"><stop stopColor="#FAC251"/><stop offset="1" stopColor="#FFDE9B"/></linearGradient><linearGradient id="i" x1="224.791" y1="201.579" x2="236.444" y2="176.655" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="j" x1="231.945" y1="177.584" x2="230.73" y2="177.181" gradientUnits="userSpaceOnUse"><stop stopColor="#5360B8" stopOpacity="0"/><stop offset="1" stopColor="#223196" stopOpacity=".569"/></linearGradient><linearGradient id="k" x1="71.619" y1="172.338" x2="71.619" y2="250.159" gradientUnits="userSpaceOnUse"><stop stopColor="#EEE"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="l" x1="108.261" y1="159.958" x2="108.261" y2="252.574" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="m" x1="93.827" y1="152.262" x2="93.827" y2="169.843" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="n" x1="260.784" y1="136.279" x2="260.784" y2="197.859" gradientUnits="userSpaceOnUse"><stop stopColor="#EEE"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="o" x1="289.865" y1="126.483" x2="289.865" y2="199.771" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="p" x1="278.41" y1="120.393" x2="278.41" y2="134.305" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="q" x1="306.608" y1="156.824" x2="306.608" y2="195.59" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="r" x1="109.251" y1="88.101" x2="109.251" y2="126.868" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient></defs></svg>
+    /*@formatter:on*/
+  ),
+  404: (
+    /*@formatter:off*/
+    <svg viewBox="0 0 400 300" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".302" d="M124.645 102.87c19.586-33.838 44.775-29.344 60.392 15.667 15.617 45.01 52.771 62.396 90.399 31.714 14.027-13.618 35.238-14.088 44.079 21.393 2.103 11.917 3.029 18.858 2.777 20.821H34.701c0-11.435 4.968-23.114 14.905-35.035 22.97-24.944 55.453-20.722 75.039-54.56Z" fill="url(#a)"/><path opacity=".302" d="M189.371 202.561s-66.757 0-99.856-35.488C68.719 145.127 46.857 156.842 39 206.941c-.011.605 50.112.605 150.371 0v-4.38Z" fill="url(#b)"/><path d="M245.065 90.676h-71.406a4.01 4.01 0 0 0-4.01 4.01v109.192a4.01 4.01 0 0 0 4.01 4.01h71.406a4.01 4.01 0 0 0 4.01-4.01V94.686a4.01 4.01 0 0 0-4.01-4.01Z" fill="url(#c)"/><path d="M251.234 90.676h-71.406a4.01 4.01 0 0 0-4.01 4.01v109.192a4.01 4.01 0 0 0 4.01 4.01h71.406a4.01 4.01 0 0 0 4.01-4.01V94.686a4.01 4.01 0 0 0-4.01-4.01Z" fill="url(#d)"/><path d="M244.22 106.87h-57.377a1 1 0 0 0-1 1v2.856a1 1 0 0 0 1 1h57.377a1 1 0 0 0 1-1v-2.856a1 1 0 0 0-1-1ZM244.22 118.437h-57.377a1 1 0 0 0-1 1v2.856a1 1 0 0 0 1 1h57.377a1 1 0 0 0 1-1v-2.856a1 1 0 0 0-1-1ZM214.917 130.004h-28.074a1 1 0 0 0-1 1v2.856a1 1 0 0 0 1 1h28.074a1 1 0 0 0 1-1v-2.856a1 1 0 0 0-1-1Z" fill="#EBEBF2"/><path fillRule="evenodd" clipRule="evenodd" d="M256.73 202.64c2.094 1.502 3.558 2.253 4.39 2.253 1.248 0 1.922 1.295.762 1.995-1.161.699-4.878-.309-5.83-.309s-3.403.4-2.464-2.766c.626-2.111 1.201-3.009 1.725-2.695l1.417.445v1.077ZM239.322 202.64c-2.094 1.502-3.558 2.253-4.39 2.253-1.248 0-1.923 1.295-.762 1.995 1.161.699 4.878-.309 5.83-.309s3.403.4 2.464-2.766c-.626-2.111-1.201-3.009-1.725-2.695l-1.417.445v1.077Z" fill="#3E3E6E"/><path fillRule="evenodd" clipRule="evenodd" d="M256.786 165.405c1.22 8.869 1.577 17.923 1.07 27.161-.71 9.967.034 9.746-1.07 9.746-.417 0-2.114.224-2.489-.432-.895-1.571-2.34-14.741-1.783-17.389.055-.398-5.566-12.757-5.566-17.564.209-.938 3.488-1.445 9.838-1.522Z" fill="url(#e)"/><path fillRule="evenodd" clipRule="evenodd" d="M239.438 165.405c-1.22 8.869-1.576 17.923-1.07 27.161.71 9.967-.034 9.746 1.07 9.746.417 0 2.114.224 2.489-.432.895-1.571 2.341-14.741 1.784-17.389-.056-.398 5.565-12.757 5.565-17.564-.209-.938-3.488-1.445-9.838-1.522Z" fill="url(#f)"/><path fillRule="evenodd" clipRule="evenodd" d="M236.322 147.073c-2.059 4.61-3.316 7.523-3.77 8.737-.211.503-2.934 1.757-8.169 3.761-1.755.154-2.758.675-3.01 1.564-.143.571-.079 1.549.814 1.63.596.054 1.445-.395 2.547-1.346 5.848.21 9.326-.765 10.434-2.926 1.108-2.16 2.795-5.505 5.062-10.032l-3.637-1.776-.271.388Z" fill="url(#g)"/><path fillRule="evenodd" clipRule="evenodd" d="M255.534 140.219c0-.833 3.366-3.689 4.432-4.84.295-.049-5.363-1.05-9.219-3.385-2.571-1.556-2.77-2.066-.597-1.531 5.485 1.021 9.572 1.925 12.261 2.711 2.655 1.199-.052 5.12-2.69 9.879-2.639 4.759-4.187-2-4.187-2.834Z" fill="url(#h)"/><path fillRule="evenodd" clipRule="evenodd" d="M245.115 131.007c-.638 3.18-.338 5.05.898 5.609 1.619.674.476 2.065.149 2.236-.219.114-.165.501.16 1.159 1.023.541 1.776.756 2.256.646.481-.11 1.068-.651 1.76-1.623-1.289-.926-1.738-1.669-1.347-2.229.392-.56.987-1.143 1.786-1.751.775-.593.745-1.045-.09-1.354.202-.561.277-1.201.224-1.919l-2.717-.774-2.765-.603-.314.603Z" fill="url(#i)"/><path fillRule="evenodd" clipRule="evenodd" d="M246.402 138.592c-5.133.106-8.706 2.95-10.719 8.531.269.1 4.02 1.899 4.02 3.066 0 1.166-2.079 12.823-1.824 15.255.255 2.432 10.209 4.724 19.948 1.518.664-.638.039-14.731-1.672-18.467-.089-.156 4.194-4.077 3.894-5.489-.3-1.411-2.958-3.906-4.41-3.906s-4.972.227-5.793-.508c-.346-.311-.001 1.005-1.792 1.005-.717 0-1.268-.335-1.652-1.005Z" fill="#5B5BEA"/><path fillRule="evenodd" clipRule="evenodd" d="M246.932 131.729c2.648-.753 3.352.405 3.352.895 0 .326-.084.867-.251 1.624.326-.145.555-.255.688-.33a3.473 3.473 0 0 0 1.541-1.908c.358-1.185-.694-3.698-3.421-3.324-.95-.18-1.101-1.579-2.753-.718-1.652.861-2.209.199-2.209 1.081 0 .883.068 3.602 3.053 2.68Z" fill="#353564"/><path d="M119.525 207.117c7.666 0 13.881-6.215 13.881-13.88 0-7.666-6.215-13.881-13.881-13.881s-13.88 6.215-13.88 13.881c0 7.665 6.214 13.88 13.88 13.88Z" fill="url(#j)"/><path d="M120.296 185.525a.77.77 0 1 0-1.542 0v3.085a.77.77 0 1 0 1.542 0v-3.085Z" fill="#5B5BEA"/><path opacity=".9" d="M125.073 187.825a.772.772 0 0 0-1.182-.991l-1.982 2.363a.77.77 0 1 0 1.181.991l1.983-2.363Z" fill="#5B5BEA"/><path opacity=".7" d="M127.254 192.657a.771.771 0 0 0-.268-1.519l-3.038.536a.771.771 0 0 0 .268 1.519l3.038-.536Z" fill="#5B5BEA"/><path opacity=".6" d="M125.818 197.76a.77.77 0 1 0 .771-1.336l-2.671-1.542a.772.772 0 0 0-.771 1.336l2.671 1.542Z" fill="#5B5BEA"/><path opacity=".5" d="M121.438 200.747a.77.77 0 1 0 1.449-.528l-1.055-2.898a.77.77 0 1 0-1.449.527l1.055 2.899Z" fill="#5B5BEA"/><path opacity=".4" d="M116.163 200.219a.771.771 0 0 0 1.45.528l1.055-2.899a.771.771 0 0 0-1.45-.527l-1.055 2.898Z" fill="#5B5BEA"/><path opacity=".3" d="M112.462 196.424a.772.772 0 1 0 .771 1.336l2.671-1.542a.772.772 0 0 0-.771-1.336l-2.671 1.542Z" fill="#5B5BEA"/><path opacity=".2" d="M112.065 191.138a.77.77 0 0 0-.268 1.519l3.038.536a.77.77 0 0 0 .268-1.519l-3.038-.536Z" fill="#5B5BEA"/><path opacity=".1" d="M115.159 186.834a.77.77 0 1 0-1.181.991l1.983 2.363a.77.77 0 1 0 1.181-.991l-1.983-2.363Z" fill="#5B5BEA"/><path opacity=".398" d="M58.606 199.034c14.326 6.056 25.976 1.959 34.952-12.293 13.462-21.377 31.62-22.663 45.691-8.927 14.072 13.736 22.498 27.157 50.847 24.819 15.36-1.653 25.738-14.549 31.134-38.688" stroke="url(#k)" strokeWidth=".881" strokeLinecap="round" strokeDasharray="2.64 2.64"/><path fillRule="evenodd" clipRule="evenodd" d="M216.128 150.301c.248.318 4.804 6.277 13.666 17.876l-6.059.72c-5.319-12.715-7.855-18.914-7.607-18.596Z" fill="#FCC55E"/><path fillRule="evenodd" clipRule="evenodd" d="M216.128 150.301c.154.512.908 7.816 2.262 21.914l5.345-3.318c-5.225-12.909-7.76-19.108-7.607-18.596Z" fill="#DB9710"/><path fillRule="evenodd" clipRule="evenodd" d="m216.128 150.301-4.077 20.333 7.645-1.791-3.568-18.542Z" fill="#FCC55E"/><defs><linearGradient id="a" x1="178.517" y1="80.651" x2="178.517" y2="192.465" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="b" x1="114.185" y1="156.5" x2="114.185" y2="207.395" gradientUnits="userSpaceOnUse"><stop stopColor="#DCDCE4"/><stop offset="1" stopColor="#DEDEE6" stopOpacity="0"/></linearGradient><linearGradient id="c" x1="209.362" y1="90.676" x2="209.362" y2="207.888" gradientUnits="userSpaceOnUse"><stop stopColor="#ECECF0"/><stop offset="1" stopColor="#D8D8E4"/></linearGradient><linearGradient id="d" x1="215.531" y1="90.676" x2="215.531" y2="198.457" gradientUnits="userSpaceOnUse"><stop stopColor="#F8F8FB"/><stop offset="1" stopColor="#FAFAFE"/></linearGradient><linearGradient id="e" x1="252.786" y1="200.587" x2="249.807" y2="167.076" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="f" x1="243.438" y1="200.587" x2="246.417" y2="167.076" gradientUnits="userSpaceOnUse"><stop stopColor="#7878C3"/><stop offset="1" stopColor="#5C5CBB"/></linearGradient><linearGradient id="g" x1="223.714" y1="159.807" x2="236.303" y2="148.233" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="h" x1="256.079" y1="131.823" x2="258.907" y2="141.093" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="i" x1="246.119" y1="132.063" x2="251.203" y2="137.72" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD2C4"/><stop offset="1" stopColor="#FFB8A3"/></linearGradient><linearGradient id="j" x1="117.3" y1="181.72" x2="125.255" y2="205.315" gradientUnits="userSpaceOnUse"><stop stopColor="#fff"/><stop offset="1" stopColor="#E8E8EF"/></linearGradient><linearGradient id="k" x1="74.439" y1="184.426" x2="137.17" y2="166.175" gradientUnits="userSpaceOnUse"><stop stopColor="#FFD685" stopOpacity=".252"/><stop offset="1" stopColor="#FFB829"/></linearGradient></defs></svg>
+    /*@formatter:on*/
+  ),
+}