plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Radio from "../Radio";
+
+export const FormRadio = createFormEditor(Radio);
+
+export default FormRadio;

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

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import RadioGroup from "../RadioGroup";
+
+export const FormRadioGroup = createFormEditor(RadioGroup);
+
+export default FormRadioGroup;

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

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Rate from "../Rate";
+
+export const FormRate = createFormEditor(Rate);
+
+export default FormRate;

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

@@ -0,0 +1,6 @@
+import {Select} from "../Select";
+import {createFormEditor} from "../FormItem/createFormEditor";
+
+export const FormSelect = createFormEditor(Select);
+
+export default FormSelect;

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

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Slider from "../Slider";
+
+export const FormSlider = createFormEditor(Slider);
+
+export default FormSlider;

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

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import TimePicker from "../TimePicker";
+
+export const FormTimePicker = createFormEditor(TimePicker);
+
+export default FormTimePicker;

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

@@ -0,0 +1,6 @@
+import {createFormEditor} from "../FormItem/createFormEditor";
+import Toggle from "../Toggle";
+
+export const FormToggle = createFormEditor(Toggle);
+
+export default FormToggle;

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

@@ -0,0 +1,64 @@
+import i18n from "../i18n";
+
+export const Formatter: Record<string, undefined | ((...args: any[]) => string | number | null | undefined)> = {
+  /**
+   * 格式化电话号码
+   * @author  韦胜健
+   * @date    2022.12.3 10:18
+   */
+  tel: (value: string | number | null | undefined) => {
+    if (value == null) {return value;}
+    value = String(value).trim();
+    if (value.length >= 11) {
+      const charList = value.split('');
+      const part1 = charList.splice(0, 3);
+      const part2 = charList.splice(0, 4);
+      const part3 = charList.splice(0, 4);
+      return [part1.join(''), part2.join(''), part3.join('')].join(' ');
+    } else {
+      return value;
+    }
+  },
+  /**
+   * 格式化为整数
+   * @author  韦胜健
+   * @date    2022.12.3 11:04
+   */
+  int: (value: string | number | null | undefined) => {
+    if (value == null) {return value;}
+    return parseInt(String(value));
+  },
+  /**
+   * 金额格式化
+   * @author  韦胜健
+   * @date    2022.12.3 20:01
+   */
+  money: (value: string | number | null | undefined) => {
+    if (!value) {return 0;}
+    value = Number(value);
+    if (isNaN(value)) {value = 0;}
+    value = parseFloat(String(value)).toFixed(2);
+    return String(value).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
+  },
+  /**
+   * 人民币格式化
+   * @author  韦胜健
+   * @date    2022.12.3 19:59
+   */
+  cny: (value: string | number | null | undefined) => {
+    if (value == null || value === 0) {return `¥0`;}
+    value = Number(value);
+    if (isNaN(value)) {return i18n('base.invalidAmount').d('无效金额');}
+    return `¥ ${Formatter.money!(value)}`;
+  },
+  /**
+   * 百分比数值显示
+   * @author  韦胜健
+   * @date    2022.12.3 20:05
+   */
+  percent: (value: string | number | null | undefined) => {
+    if (value == null) {return null;}
+    if (isNaN(Number(value))) {return null;}
+    return (parseFloat(String(value)) * 100).toFixed(2) + '%';
+  },
+};

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

@@ -0,0 +1,72 @@
+import {designComponent, getComponentCls, PropType, SingleClass, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {GridColSize} from "./grid.utils";
+import GridRow from "./GridRow";
+
+export const GridCol = designComponent({
+  name: 'grid-col',
+  props: {
+    span: { type: [Number, String] as PropType<string | number> },
+    order: { type: [Number, String] as PropType<string | number> },
+    offset: { type: [Number, String] as PropType<string | number> },
+    push: { type: [Number, String] as PropType<string | number> },
+    pull: { type: [Number, String] as PropType<string | number> },
+    className: String,
+    xs: { type: [Number, Object] as PropType<GridColSize> },
+    sm: { type: [Number, Object] as PropType<GridColSize> },
+    md: { type: [Number, Object] as PropType<GridColSize> },
+    lg: { type: [Number, Object] as PropType<GridColSize> },
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const row = GridRow.use.inject();
+    const classes = useClasses(() => {
+      let classList = [
+        getComponentCls('grid-col'),
+        {
+          [`grid-col-span-${props.span}`]: props.span,
+          [`grid-col-order-${props.order}`]: props.order,
+          [`grid-col-offset-${props.offset}`]: props.offset,
+          [`grid-col-push-${props.push}`]: props.push,
+          [`grid-col-pull-${props.pull}`]: props.pull,
+          [`${props.className}`]: !!props.className
+        }
+      ] as SingleClass[];
+
+      const sizeProps = props;
+      (['xs', 'sm', 'md', 'lg'] as ['xs', 'sm', 'md', 'lg']).forEach(size => {
+        if (typeof sizeProps[size] === 'number') {
+          classList.push(`grid-col-${size}-${sizeProps[size]}`);
+        } else if (typeof sizeProps[size] === 'object') {
+          let obj = sizeProps[size];
+          !!obj && Object.entries(obj).forEach(([key, val]) => classList.push(key !== 'span' ? `grid-col-${size}-${key}-${val}` : `grid-col-span-${size}-${val}`));
+        }
+      });
+      return classList;
+    });
+    const styles = useStyles(style => {
+      if ((Number(row.props.gutter)) !== 0) {
+        style = {
+          paddingLeft: (Number(row.props.gutter)) / 2 + 'px',
+          paddingRight: (Number(row.props.gutter)) / 2 + 'px'
+        };
+      }
+      return style;
+    });
+
+    return {
+      refer: {
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default GridCol;

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

@@ -0,0 +1,55 @@
+import {designComponent, getComponentCls, PropType, useClasses, useRefs, useStyles} from "plain-design-composition";
+import {eGridAlign, eGridJustify} from "./grid.utils";
+import {unit} from 'plain-utils/string/unit';
+import {removeUnit} from 'plain-utils/string/removeUnit';
+import './grid.scss';
+
+export const GridRow = designComponent({
+  name: 'grid-row',
+  props: {
+    type: { type: String as PropType<undefined | null | string> },        //类型,type
+    align: { type: String as PropType<keyof typeof eGridAlign> },         //对其方式,left|center|right
+    justify: { type: String as PropType<keyof typeof eGridJustify> },     //内容弹性布局方式,start,end,center,space-around,space-between
+    gutter: { type: [Number, String], default: 0 },                       //间隔
+  },
+  inheritPropsType: HTMLDivElement,
+  slots: ['default'],
+  provideRefer: true,
+  setup({ props, slots }) {
+
+    const { refs, onRef } = useRefs({ el: HTMLDivElement });
+    const classes = useClasses(() => [
+      getComponentCls('grid-row'),
+      {
+        [`grid-row-${props.type}`]: !!props.type,
+        [`grid-row-${props.type}-${props.align}`]: !!props.align,
+        [`grid-row-${props.type}-${props.justify}`]: !!props.justify,
+      }
+    ]);
+    const styles = useStyles(style => {
+      const gutter = Number(props.gutter);
+      if (gutter !== 0) {
+        style = {
+          width: `calc(100% + ${unit(props.gutter)})`,
+          marginLeft: `-${unit(Number(removeUnit(props.gutter)) / 2)}`
+        };
+      }
+      return style;
+    });
+    // console.log(styles.value)
+
+    return {
+      refer: {
+        props,
+        refs,
+      },
+      render: () => (
+        <div className={classes.value} style={styles.value} ref={onRef.el}>
+          {slots.default()}
+        </div>
+      )
+    };
+  },
+});
+
+export default GridRow;

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

@@ -0,0 +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;
+
+  &:not(:last-child) {
+    margin-bottom: 16px;
+  }
+
+  &, & * {
+    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

@@ -0,0 +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,
+}

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

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

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

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

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

@@ -0,0 +1,21 @@
+import {RenderNode} from "plain-design-composition";
+import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/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

@@ -0,0 +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;
+  }
+}

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

@@ -0,0 +1,54 @@
+import {PlainIcon} from 'plain-icons/src/packages/component/icon/react';
+import {designComponent, getComponentCls, iHTMLElement, mergeAttrs, PropType, reactive, RenderNode, useClasses, watch} from "plain-design-composition";
+import {tStrokeLinecap, tStrokeLinejoin} from "plain-icons/src/packages/component/icon/useIcon";
+import './icon.scss';
+import {IconRegistration} from "./icon.registry";
+import {renderNothing} from "../../utils/renderNothing";
+import {ThemeStatus} from "../../uses/useStyle";
+
+IconRegistration.registry('pi-', ({ props }) => (<PlainIcon {...mergeAttrs({ style: { verticalAlign: 'baseline' } }, props)}/>));
+
+export const Icon = designComponent({
+  name: 'icon',
+  expose: { IconRegistration, PlainIcon, },
+  inheritPropsType: iHTMLElement,
+  props: {
+    icon: { type: String },
+    strokeWidth: { type: Number, default: 4 },
+    strokeLinecap: { type: String as PropType<tStrokeLinecap>, default: "butt", },
+    strokeLinejoin: { type: String as PropType<tStrokeLinejoin>, default: "miter", },
+
+    status: { type: String as PropType<typeof ThemeStatus.TYPE> },                    //  'secondary', 'primary', 'success', 'warn', 'error'
+  },
+  setup({ props, attrs }) {
+
+    const state = reactive({
+      renderer: () => null as null | RenderNode,
+    });
+
+    watch(() => props.icon, async icon => {
+      if (!icon) {state.renderer = renderNothing;}
+      const content = await IconRegistration.getIconRenderer({ props, attrs });
+      if (!content) {
+        state.renderer = renderNothing;
+      } else {
+        state.renderer = () => content;
+      }
+    }, { immediate: true });
+
+    const classes = useClasses(() => [
+      getComponentCls('icon'),
+      {
+        [`icon-status-${props.status}`]: !!props.status,
+      }
+    ]);
+
+    return () => (
+      <span className={classes.value}>
+        {state.renderer()}
+      </span>
+    );
+  },
+});
+
+export default Icon;

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

@@ -0,0 +1,28 @@
+import {designComponent, RenderNode} from 'plain-design-composition';
+
+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*/
+  ),
+}