@codacy/ui-components 0.69.0 → 0.70.0

package/lib/Illustration/Illustration.js

@@ -0,0 +1,98 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useTheme } from '@emotion/react';
+import { parseToRgb } from 'polished';
+import { ArtworkHost, IllustrationWrapper } from './Illustration.styles';
+import { illustrationAssets } from './assets';
+export const illustrationSizes = {
+  sm: 120,
+  md: 180,
+  lg: 240
+};
+let instanceCount = 0;
+
+// Prefixes every SVG definition id (filters, gradients, clip paths) so several illustrations can share a page
+const scopeIds = (svg, prefix) => svg.replace(/(id="|url\(#|href="#)([^")]+)/g, (_, attribute, id) => `${attribute}${prefix}-${id}`);
+
+// Fills in the {{illustration-*}} colour placeholders from the theme tokens. Drop shadows use a colour
+// matrix ({{matrix:illustration-*}}), the form Figma exports them in. The value is parsed into numbers
+// (parseToRgb throws on anything that is not a colour), so only numbers are written into the markup.
+export const resolveColors = (svg, colors) => svg.replace(/\{\{(matrix:)?(illustration-[a-z0-9-]+)\}\}/g, (_, matrix, key) => {
+  if (!colors[key]) throw new Error(`Missing illustration colour token: ${key}`);
+  const rgb = parseToRgb(colors[key]);
+  const alpha = 'alpha' in rgb ? rgb.alpha : 1;
+  return matrix ? `0 0 0 0 ${rgb.red / 255} 0 0 0 0 ${rgb.green / 255} 0 0 0 0 ${rgb.blue / 255} 0 0 0 ${alpha} 0` : `rgba(${rgb.red}, ${rgb.green}, ${rgb.blue}, ${alpha})`;
+});
+
+// The artwork is static markup generated from Figma and shipped with the library, never user input.
+// It is parsed as SVG and mounted as nodes, so no HTML string is injected into the page.
+const mountSvg = (host, svg) => {
+  const parsed = new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement;
+  host.replaceChildren(document.importNode(parsed, true));
+};
+/**
+ * Frosted Glass illustrations for empty, result and status moments, in light and dark.
+ *
+ * Motion follows the design system rules: one cycle on first view that stops on its first frame
+ * (draw-in details stay drawn), a loop only while work is running, no motion with
+ * `prefers-reduced-motion`, and paused while off screen.
+ */
+export const Illustration = ({
+  name,
+  size = 'lg',
+  motion,
+  alt,
+  className,
+  ...props
+}) => {
+  const theme = useTheme();
+  const ref = useRef(null);
+  const idRef = useRef();
+  if (!idRef.current) idRef.current = `cui-ill-${++instanceCount}`;
+  const uid = idRef.current;
+  const mode = motion ?? (name === 'in-progress' ? 'loop' : 'once');
+  const [play, setPlay] = useState('idle');
+  const [visible, setVisible] = useState(true);
+  useEffect(() => {
+    setPlay('idle');
+    if (mode === 'none') return;
+    const element = ref.current;
+    if (!element || typeof IntersectionObserver === 'undefined') {
+      setPlay('playing');
+      return;
+    }
+    const observer = new IntersectionObserver(([entry]) => {
+      setVisible(entry.isIntersecting);
+      if (entry.isIntersecting) setPlay(current => current === 'idle' ? 'playing' : current);
+    }, {
+      threshold: 0.4
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [mode, name]);
+  const asset = illustrationAssets[name];
+  // Light and dark artwork differ in which tokens they use; the theme provides each token's value
+  const svg = useMemo(() => resolveColors(theme.colorScheme === 'dark' ? asset.dark : asset.light, theme.colors), [asset, theme.colorScheme, theme.colors]);
+  // Scope the generated motion rules to this instance
+  const motionCss = useMemo(() => asset.motion.replace(/__S__/g, `.${uid}`), [asset, uid]);
+  const artworkRef = useRef(null);
+  useLayoutEffect(() => {
+    if (artworkRef.current) mountSvg(artworkRef.current, scopeIds(svg, uid));
+  }, [svg, uid]);
+
+  // Waits on the first frame until it scrolls into view; a finished cycle holds its last frame,
+  // which matches the first one
+  const paused = mode !== 'none' && (play === 'idle' || mode === 'loop' && !visible);
+  return /*#__PURE__*/React.createElement(IllustrationWrapper, _extends({}, props, {
+    ref: ref,
+    className: className ? `${uid} ${className}` : uid,
+    dimension: illustrationSizes[size],
+    "data-play": mode !== 'none' ? mode : undefined,
+    "data-paused": paused ? true : undefined,
+    role: alt ? 'img' : undefined,
+    "aria-label": alt || undefined,
+    "aria-hidden": alt ? undefined : true
+  }), /*#__PURE__*/React.createElement("style", null, motionCss), /*#__PURE__*/React.createElement(ArtworkHost, {
+    ref: artworkRef
+  }));
+};

package/lib/Illustration/Illustration.styles.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export declare const IllustrationWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("..").ColorProps & Omit<import("..").LayoutProps, "size"> & import("..").SpaceProps & import("..").BorderProps & import("..").PositionProps & import("..").ShadowProps & import("..").TextAlignProps & Omit<import("..").TypographyProps, "fontWeight"> & import("../Flexbox").As & {
+    fontWeight?: import("styled-system").ResponsiveValue<number | import("..").FontWeights, import("..").CodacyTheme> | undefined;
+} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & import("..").FlexboxProps & import("..").GridboxProps & {
+    dimension: number;
+}, {}, {}>;
+export declare const ArtworkHost: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/Illustration/Illustration.styles.js

@@ -0,0 +1,26 @@
+import _styled from "@emotion/styled/base";
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+import { Box } from '../Flexbox';
+export const IllustrationWrapper = /*#__PURE__*/_styled(Box, process.env.NODE_ENV === "production" ? {
+  target: "e1hgx2aj1"
+} : {
+  target: "e1hgx2aj1",
+  label: "codacy"
+})("display:inline-block;position:relative;flex-shrink:0;line-height:0;width:", ({
+  dimension
+}) => dimension, "px;height:", ({
+  dimension
+}) => dimension, "px;&[data-paused] [data-part]{animation-play-state:paused;}@media (prefers-reduced-motion: reduce){& [data-part]{animation:none!important;}}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9JbGx1c3RyYXRpb24vSWxsdXN0cmF0aW9uLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFHcUUiLCJmaWxlIjoiLi4vLi4vc3JjL0lsbHVzdHJhdGlvbi9JbGx1c3RyYXRpb24uc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgeyBCb3ggfSBmcm9tICcuLi9GbGV4Ym94J1xuXG5leHBvcnQgY29uc3QgSWxsdXN0cmF0aW9uV3JhcHBlciA9IHN0eWxlZChCb3gpPHsgZGltZW5zaW9uOiBudW1iZXIgfT5gXG4gIGRpc3BsYXk6IGlubGluZS1ibG9jaztcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBmbGV4LXNocmluazogMDtcbiAgbGluZS1oZWlnaHQ6IDA7XG4gIHdpZHRoOiAkeyh7IGRpbWVuc2lvbiB9KSA9PiBkaW1lbnNpb259cHg7XG4gIGhlaWdodDogJHsoeyBkaW1lbnNpb24gfSkgPT4gZGltZW5zaW9ufXB4O1xuXG4gICZbZGF0YS1wYXVzZWRdIFtkYXRhLXBhcnRdIHtcbiAgICBhbmltYXRpb24tcGxheS1zdGF0ZTogcGF1c2VkO1xuICB9XG5cbiAgQG1lZGlhIChwcmVmZXJzLXJlZHVjZWQtbW90aW9uOiByZWR1Y2UpIHtcbiAgICAmIFtkYXRhLXBhcnRdIHtcbiAgICAgIGFuaW1hdGlvbjogbm9uZSAhaW1wb3J0YW50O1xuICAgIH1cbiAgfVxuYFxuXG5leHBvcnQgY29uc3QgQXJ0d29ya0hvc3QgPSBzdHlsZWQuc3BhbmBcbiAgZGlzcGxheTogYmxvY2s7XG4gIHdpZHRoOiAxMDAlO1xuICBoZWlnaHQ6IDEwMCU7XG5cbiAgJiA+IHN2ZyB7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgd2lkdGg6IDEwMCU7XG4gICAgaGVpZ2h0OiAxMDAlO1xuICAgIG92ZXJmbG93OiB2aXNpYmxlO1xuICB9XG5gXG4iXX0= */"));
+export const ArtworkHost = /*#__PURE__*/_styled("span", process.env.NODE_ENV === "production" ? {
+  target: "e1hgx2aj0"
+} : {
+  target: "e1hgx2aj0",
+  label: "codacy"
+})(process.env.NODE_ENV === "production" ? {
+  name: "vqzoxb",
+  styles: "display:block;width:100%;height:100%;&>svg{display:block;width:100%;height:100%;overflow:visible;}"
+} : {
+  name: "vqzoxb",
+  styles: "display:block;width:100%;height:100%;&>svg{display:block;width:100%;height:100%;overflow:visible;}/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9JbGx1c3RyYXRpb24vSWxsdXN0cmF0aW9uLnN0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFzQnNDIiwiZmlsZSI6Ii4uLy4uL3NyYy9JbGx1c3RyYXRpb24vSWxsdXN0cmF0aW9uLnN0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJ1xuaW1wb3J0IHsgQm94IH0gZnJvbSAnLi4vRmxleGJveCdcblxuZXhwb3J0IGNvbnN0IElsbHVzdHJhdGlvbldyYXBwZXIgPSBzdHlsZWQoQm94KTx7IGRpbWVuc2lvbjogbnVtYmVyIH0+YFxuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgZmxleC1zaHJpbms6IDA7XG4gIGxpbmUtaGVpZ2h0OiAwO1xuICB3aWR0aDogJHsoeyBkaW1lbnNpb24gfSkgPT4gZGltZW5zaW9ufXB4O1xuICBoZWlnaHQ6ICR7KHsgZGltZW5zaW9uIH0pID0+IGRpbWVuc2lvbn1weDtcblxuICAmW2RhdGEtcGF1c2VkXSBbZGF0YS1wYXJ0XSB7XG4gICAgYW5pbWF0aW9uLXBsYXktc3RhdGU6IHBhdXNlZDtcbiAgfVxuXG4gIEBtZWRpYSAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbjogcmVkdWNlKSB7XG4gICAgJiBbZGF0YS1wYXJ0XSB7XG4gICAgICBhbmltYXRpb246IG5vbmUgIWltcG9ydGFudDtcbiAgICB9XG4gIH1cbmBcblxuZXhwb3J0IGNvbnN0IEFydHdvcmtIb3N0ID0gc3R5bGVkLnNwYW5gXG4gIGRpc3BsYXk6IGJsb2NrO1xuICB3aWR0aDogMTAwJTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gICYgPiBzdmcge1xuICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgIHdpZHRoOiAxMDAlO1xuICAgIGhlaWdodDogMTAwJTtcbiAgICBvdmVyZmxvdzogdmlzaWJsZTtcbiAgfVxuYFxuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});

package/lib/Illustration/Illustration.types.d.ts

@@ -0,0 +1,40 @@
+import { ComponentProps } from '../types';
+import { SpaceProps } from '../system-props/types';
+/**
+ * The seven illustration concepts. Each one names a meaning, not a picture:
+ * - `empty`: nothing here yet. If there is a button next to it, the button carries the action.
+ * - `no-results`: we looked and found nothing (search, filters).
+ * - `error`: something failed, or the link is broken.
+ * - `success`: all clear, nothing to fix.
+ * - `in-progress`: working on it (analysis, loading).
+ * - `attention`: something the user can fix.
+ * - `upgrade`: the feature needs a higher plan.
+ */
+export type IllustrationName = 'empty' | 'no-results' | 'error' | 'success' | 'in-progress' | 'attention' | 'upgrade';
+/** `sm` 120px (modals, small spaces), `md` 180px (cards, panels), `lg` 240px (full pages) */
+export type IllustrationSize = 'sm' | 'md' | 'lg';
+/**
+ * - `once`: plays one 3s cycle when it first scrolls into view and stops on the same frame it started
+ *   from, so there is no jump. Draw-in details (check, crack, ticks, badges) stay drawn.
+ * - `loop`: loops while visible. Only for work that is really running (`in-progress`).
+ * - `none`: static design, no motion. Use it for dashboard cards and when several illustrations share a view.
+ */
+export type IllustrationMotion = 'once' | 'loop' | 'none';
+export interface IllustrationAsset {
+    /** SVG markup for light surfaces, generated from Figma */
+    light: string;
+    /** SVG markup for dark surfaces, generated from Figma */
+    dark: string;
+    /** Scoped CSS keyframes generated from the Figma motion, `__S__` is replaced by the instance selector */
+    motion: string;
+}
+export interface IllustrationProps extends ComponentProps, SpaceProps {
+    /** What the illustration means */
+    name: IllustrationName;
+    /** Rendered size, defaults to `lg` */
+    size?: IllustrationSize;
+    /** Motion behaviour, defaults to `loop` for `in-progress` and `once` for the rest */
+    motion?: IllustrationMotion;
+    /** Text alternative. Leave it empty when the heading next to the illustration already says it */
+    alt?: string;
+}

package/lib/Illustration/Illustration.types.js

@@ -0,0 +1 @@
+export {};

package/lib/Illustration/assets/attention.d.ts

@@ -0,0 +1,2 @@
+import { IllustrationAsset } from '../Illustration.types';
+export declare const attention: IllustrationAsset;

package/lib/Illustration/assets/attention.js

@@ -0,0 +1,7 @@
+// Generated from the Figma One Design System (page ↳ Illustrations). Do not edit by hand.
+
+export const attention = {
+  light: '<svg viewBox="7.2 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><ellipse cx="128" cy="118.6" rx="61.6" ry="57.2" fill="{{illustration-attention-a40}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><ellipse cx="98" cy="142.6" rx="44" ry="39.6" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="167" cy="91.5992" rx="30.8" ry="26.4" fill="{{illustration-accent-purple-a20}}"/></g><foreignObject x="0.984375" y="41" width="173.58" height="191.381"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6.5px);clip-path:url(#bgblur_0_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g data-part="card-back" filter="url(#filter3_d_2267_13637)"><rect x="37.2002" y="56" width="116" height="136" rx="18" transform="rotate(6 37.2002 56)" fill="{{illustration-surface-a30}}"/><rect x="37.6452" y="56.5495" width="115" height="135" rx="17.5" transform="rotate(6 37.6452 56.5495)" stroke="{{illustration-surface-a80}}"/><rect opacity="0.7" x="50.8125" y="79.5527" width="60" height="6" rx="3" transform="rotate(6 50.8125 79.5527)" fill="{{illustration-brand-soft}}"/><rect opacity="0.7" x="49.3496" y="93.4746" width="40" height="6" rx="3" transform="rotate(6 49.3496 93.4746)" fill="{{illustration-line}}"/><rect opacity="0.7" x="47.8857" y="107.398" width="72" height="6" rx="3" transform="rotate(6 47.8857 107.398)" fill="{{illustration-line}}"/><rect opacity="0.7" x="46.4229" y="121.322" width="48" height="6" rx="3" transform="rotate(6 46.4229 121.322)" fill="{{illustration-accent-purple-soft}}"/></g><g data-part="sign"><g filter="url(#filter4_di_2267_13637)"><path d="M138.646 99.1245C147.292 85.5521 167.108 85.5521 175.755 99.1246L191.079 123.179C200.41 137.825 189.89 157 172.525 157H141.875C124.51 157 113.991 137.825 123.321 123.179L138.646 99.1245Z" fill="url(#paint0_linear_2267_13637)"/><path d="M139.151 99.4473C147.562 86.245 166.838 86.245 175.249 99.4473L190.573 123.502C199.649 137.748 189.416 156.4 172.525 156.4H141.875C124.984 156.4 114.751 137.748 123.827 123.502L139.151 99.4473Z" stroke="url(#paint1_linear_2267_13637)" stroke-width="1.2"/></g><rect data-part="bang" x="152.2" y="110" width="10" height="24" rx="5" fill="{{illustration-surface}}"/><circle data-part="bang-dot" cx="157.2" cy="143.5" r="4.5" fill="{{illustration-surface}}"/></g><g data-part="sparkle" filter="url(#filter5_d_2267_13637)"><circle cx="215.7" cy="72.5" r="2.5" fill="{{illustration-surface-a90}}"/></g><g data-part="sparkle-2" filter="url(#filter6_d_2267_13637)"><circle cx="61.2002" cy="42" r="2" fill="{{illustration-surface-a90}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="7.40039" y="2.40039" width="241.2" height="232.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="29.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="0" y="49" width="196" height="187.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="98.2002" y="27.1992" width="137.6" height="128.801" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="19" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="0.984375" y="41" width="173.58" height="191.381" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-deep-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><clipPath id="bgblur_0_2267_13637_clip_path" transform="translate(-0.984375 -41)"><rect x="37.2002" y="56" width="116" height="136" rx="18" transform="rotate(6 37.2002 56)"/></clipPath><filter id="filter4_di_2267_13637" x="97.8398" y="76.9453" width="118.721" height="112.055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="10"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-attention-deep-a30}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a60}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><filter id="filter5_d_2267_13637" x="207.2" y="64" width="17" height="17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-attention-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="53.2002" y="34" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="157.2" y1="70" x2="157.2" y2="186" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-attention-soft}}"/><stop offset="1" stop-color="{{illustration-attention-deep}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="157.2" y1="70" x2="157.2" y2="186" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a90}}"/><stop offset="1" stop-color="{{illustration-surface-a30}}"/></linearGradient></defs></svg>',
+  dark: '<svg viewBox="7.2 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><ellipse cx="128" cy="118.6" rx="61.6" ry="57.2" fill="{{illustration-attention-a50}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><ellipse cx="98" cy="142.6" rx="44" ry="39.6" fill="{{illustration-brand-strong-a40}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="167" cy="91.5992" rx="30.8" ry="26.4" fill="{{illustration-accent-purple-a30}}"/></g><foreignObject x="0.984375" y="41" width="173.58" height="191.381"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6.5px);clip-path:url(#bgblur_0_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g data-part="card-back" filter="url(#filter3_d_2267_13637)"><rect x="37.2002" y="56" width="116" height="136" rx="18" transform="rotate(6 37.2002 56)" fill="{{illustration-surface-a10}}"/><rect x="37.6452" y="56.5495" width="115" height="135" rx="17.5" transform="rotate(6 37.6452 56.5495)" stroke="{{illustration-surface-a30}}"/><rect opacity="0.7" x="50.8125" y="79.5527" width="60" height="6" rx="3" transform="rotate(6 50.8125 79.5527)" fill="{{illustration-brand-soft}}"/><rect opacity="0.7" x="49.3496" y="93.4746" width="40" height="6" rx="3" transform="rotate(6 49.3496 93.4746)" fill="{{illustration-line}}"/><rect opacity="0.7" x="47.8857" y="107.398" width="72" height="6" rx="3" transform="rotate(6 47.8857 107.398)" fill="{{illustration-line}}"/><rect opacity="0.7" x="46.4229" y="121.322" width="48" height="6" rx="3" transform="rotate(6 46.4229 121.322)" fill="{{illustration-accent-purple-soft}}"/></g><g data-part="sign"><g filter="url(#filter4_di_2267_13637)"><path d="M138.646 99.1245C147.292 85.5521 167.108 85.5521 175.755 99.1246L191.079 123.179C200.41 137.825 189.89 157 172.525 157H141.875C124.51 157 113.991 137.825 123.321 123.179L138.646 99.1245Z" fill="url(#paint0_linear_2267_13637)"/><path d="M139.151 99.4473C147.562 86.245 166.838 86.245 175.249 99.4473L190.573 123.502C199.649 137.748 189.416 156.4 172.525 156.4H141.875C124.984 156.4 114.751 137.748 123.827 123.502L139.151 99.4473Z" stroke="url(#paint1_linear_2267_13637)" stroke-width="1.2"/></g><rect data-part="bang" x="152.2" y="110" width="10" height="24" rx="5" fill="{{illustration-surface}}"/><circle data-part="bang-dot" cx="157.2" cy="143.5" r="4.5" fill="{{illustration-surface}}"/></g><g data-part="sparkle" filter="url(#filter5_d_2267_13637)"><circle cx="215.7" cy="72.5" r="2.5" fill="{{illustration-surface-a20}}"/></g><g data-part="sparkle-2" filter="url(#filter6_d_2267_13637)"><circle cx="61.2002" cy="42" r="2" fill="{{illustration-surface-a20}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="7.40039" y="2.40039" width="241.2" height="232.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="29.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="0" y="49" width="196" height="187.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="98.2002" y="27.1992" width="137.6" height="128.801" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="19" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="0.984375" y="41" width="173.58" height="191.381" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><clipPath id="bgblur_0_2267_13637_clip_path" transform="translate(-0.984375 -41)"><rect x="37.2002" y="56" width="116" height="136" rx="18" transform="rotate(6 37.2002 56)"/></clipPath><filter id="filter4_di_2267_13637" x="97.8398" y="76.9453" width="118.721" height="112.055" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="10"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-attention-deep-a60}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="2"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a20}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><filter id="filter5_d_2267_13637" x="208.2" y="65" width="15" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-attention-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="54.2002" y="35" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="157.2" y1="70" x2="157.2" y2="186" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-attention-soft}}"/><stop offset="1" stop-color="{{illustration-attention-deep}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="157.2" y1="70" x2="157.2" y2="186" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a30}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient></defs></svg>',
+  motion: '__S__ [data-part="glow-main"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-main"] { animation: cui-ill-attention-glow-main-t-loop 3s linear infinite both, cui-ill-attention-glow-main-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-main"] { animation: cui-ill-attention-glow-main-t-once 3s linear 1 both, cui-ill-attention-glow-main-s-once 3s linear 1 both; } __S__ [data-part="glow-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-2"] { animation: cui-ill-attention-glow-2-t-loop 3s linear infinite both, cui-ill-attention-glow-2-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-2"] { animation: cui-ill-attention-glow-2-t-once 3s linear 1 both, cui-ill-attention-glow-2-s-once 3s linear 1 both; } __S__ [data-part="glow-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-3"] { animation: cui-ill-attention-glow-3-t-loop 3s linear infinite both, cui-ill-attention-glow-3-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-3"] { animation: cui-ill-attention-glow-3-t-once 3s linear 1 both, cui-ill-attention-glow-3-s-once 3s linear 1 both; } __S__ [data-part="card-back"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="card-back"] { animation: cui-ill-attention-card-back-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="card-back"] { animation: cui-ill-attention-card-back-t-once 3s linear 1 both; } __S__ [data-part="sign"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sign"] { animation: cui-ill-attention-sign-t-loop 3s linear infinite both, cui-ill-attention-sign-r-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sign"] { animation: cui-ill-attention-sign-t-once 3s linear 1 both, cui-ill-attention-sign-r-once 3s linear 1 both; } __S__ [data-part="bang"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="bang"] { animation: cui-ill-attention-bang-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="bang"] { animation: cui-ill-attention-bang-o-once 3s linear 1 both; } __S__ [data-part="bang-dot"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="bang-dot"] { animation: cui-ill-attention-bang-dot-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="bang-dot"] { animation: cui-ill-attention-bang-dot-o-once 3s linear 1 both; } __S__ [data-part="sparkle"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle"] { animation: cui-ill-attention-sparkle-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle"] { animation: cui-ill-attention-sparkle-o-once 3s linear 1 both; } __S__ [data-part="sparkle-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle-2"] { animation: cui-ill-attention-sparkle-2-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle-2"] { animation: cui-ill-attention-sparkle-2-o-once 3s linear 1 both; } @keyframes cui-ill-attention-glow-main-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-glow-main-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-glow-main-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   100% { scale: 1 1; } } @keyframes cui-ill-attention-glow-main-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   100% { scale: 1 1; } } @keyframes cui-ill-attention-glow-2-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   100% { translate: -6px 3px; } } @keyframes cui-ill-attention-glow-2-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   100% { translate: -6px 3px; } } @keyframes cui-ill-attention-glow-2-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   100% { scale: 1.06 1.06; } } @keyframes cui-ill-attention-glow-2-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   100% { scale: 1.06 1.06; } } @keyframes cui-ill-attention-glow-3-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-glow-3-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-glow-3-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   100% { scale: 1 1; } } @keyframes cui-ill-attention-glow-3-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   100% { scale: 1 1; } } @keyframes cui-ill-attention-card-back-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-card-back-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-sign-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px -5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-sign-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px -5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-attention-sign-r-loop {   0% { animation-timing-function: steps(1, end); rotate: 0deg; }   40% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); rotate: 0deg; }   45% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); rotate: -7deg; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); rotate: 6deg; }   55% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); rotate: -4deg; }   60% { animation-timing-function: steps(1, end); rotate: 0deg; }   100% { rotate: 0deg; } } @keyframes cui-ill-attention-sign-r-once {   0% { animation-timing-function: steps(1, end); rotate: 0deg; }   40% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); rotate: 0deg; }   45% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); rotate: -7deg; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); rotate: 6deg; }   55% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); rotate: -4deg; }   60% { animation-timing-function: steps(1, end); rotate: 0deg; }   100% { rotate: 0deg; } } @keyframes cui-ill-attention-bang-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   13.333% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.55; }   26.667% { animation-timing-function: steps(1, end); opacity: 1; }   100% { opacity: 1; } } @keyframes cui-ill-attention-bang-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   13.333% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.55; }   26.667% { animation-timing-function: steps(1, end); opacity: 1; }   100% { opacity: 1; } } @keyframes cui-ill-attention-bang-dot-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   13.333% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.55; }   26.667% { animation-timing-function: steps(1, end); opacity: 1; }   100% { opacity: 1; } } @keyframes cui-ill-attention-bang-dot-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   13.333% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.55; }   26.667% { animation-timing-function: steps(1, end); opacity: 1; }   100% { opacity: 1; } } @keyframes cui-ill-attention-sparkle-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   100% { opacity: 0.2; } } @keyframes cui-ill-attention-sparkle-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   100% { opacity: 0.2; } } @keyframes cui-ill-attention-sparkle-2-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   100% { opacity: 1; } } @keyframes cui-ill-attention-sparkle-2-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   100% { opacity: 1; } }'
+};

package/lib/Illustration/assets/empty.d.ts

@@ -0,0 +1,2 @@
+import { IllustrationAsset } from '../Illustration.types';
+export declare const empty: IllustrationAsset;

package/lib/Illustration/assets/empty.js

@@ -0,0 +1,7 @@
+// Generated from the Figma One Design System (page ↳ Illustrations). Do not edit by hand.
+
+export const empty = {
+  light: '<svg viewBox="12.6 6.6 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="118.6" cy="118.6" r="61.6" fill="{{illustration-brand-strong-a40}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="163" cy="137.801" r="42.24" fill="{{illustration-accent-purple-a30}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="109.599" cy="161.8" rx="30.8" ry="24.64" fill="{{illustration-accent-teal-a30}}"/></g><foreignObject x="8.75586" y="49.5996" width="171.01" height="186.68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6.5px);clip-path:url(#bgblur_0_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g data-part="card-back" filter="url(#filter3_d_2267_13637)"><rect x="46.5996" y="64.5996" width="112" height="130" rx="16" transform="rotate(7 46.5996 64.5996)" fill="{{illustration-surface-a30}}"/><rect x="47.0349" y="65.1568" width="111" height="129" rx="15.5" transform="rotate(7 47.0349 65.1568)" stroke="{{illustration-surface-a80}}"/><rect opacity="0.7" x="57.8145" y="88.1426" width="56" height="6" rx="3" transform="rotate(7 57.8145 88.1426)" fill="{{illustration-brand-soft}}"/><rect opacity="0.7" x="56.1074" y="102.037" width="38" height="6" rx="3" transform="rotate(7 56.1074 102.037)" fill="{{illustration-accent-purple-soft}}"/><rect opacity="0.7" x="54.4023" y="115.934" width="64" height="6" rx="3" transform="rotate(7 54.4023 115.934)" fill="{{illustration-line}}"/></g><foreignObject x="53.5996" y="34.5996" width="186" height="208"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(9px);clip-path:url(#bgblur_1_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_di_2267_13637)"><rect x="82.5996" y="52.5996" width="128" height="148" rx="18" fill="url(#paint0_linear_2267_13637)"/><rect x="83.0996" y="53.0996" width="127" height="147" rx="17.5" stroke="url(#paint1_linear_2267_13637)"/><circle opacity="0.7" cx="97.5996" cy="67.5996" r="3" fill="{{illustration-error}}"/><circle opacity="0.7" cx="106.6" cy="67.5996" r="3" fill="{{illustration-attention}}"/><circle opacity="0.7" cx="115.6" cy="67.5996" r="3" fill="{{illustration-success}}"/><g data-part="placeholder"><rect x="94.5996" y="84.5996" width="104" height="26" rx="8" fill="{{illustration-brand-a10}}"/><rect x="95.2996" y="85.2996" width="102.6" height="24.6" rx="7.3" stroke="{{illustration-brand-a60}}" stroke-width="1.4" stroke-dasharray="6 4"/></g><g data-part="placeholder-2"><rect x="94.5996" y="120.6" width="104" height="26" rx="8" fill="{{illustration-brand-a10}}"/><rect x="95.2996" y="121.3" width="102.6" height="24.6" rx="7.3" stroke="{{illustration-brand-a60}}" stroke-width="1.4" stroke-dasharray="6 4"/></g><g data-part="placeholder-3"><rect x="94.5996" y="156.6" width="104" height="26" rx="8" fill="{{illustration-brand-a10}}"/><rect x="95.2996" y="157.3" width="102.6" height="24.6" rx="7.3" stroke="{{illustration-brand-a60}}" stroke-width="1.4" stroke-dasharray="6 4"/></g></g><g data-part="sparkle" filter="url(#filter5_d_2267_13637)"><circle cx="67.0996" cy="49.0996" r="2.5" fill="{{illustration-surface-a90}}"/></g><g data-part="sparkle-2" filter="url(#filter6_d_2267_13637)"><circle cx="220.6" cy="84.5996" r="2" fill="{{illustration-surface-a90}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="237.199" height="237.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="28.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="66.7598" y="41.5605" width="192.48" height="192.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="40.7988" y="99.1602" width="137.6" height="125.279" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="19" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="8.75586" y="49.5996" width="171.01" height="186.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-deep-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><clipPath id="bgblur_0_2267_13637_clip_path" transform="translate(-8.75586 -49.5996)"><rect x="46.5996" y="64.5996" width="112" height="130" rx="16" transform="rotate(7 46.5996 64.5996)"/></clipPath><filter id="filter4_di_2267_13637" x="53.5996" y="34.5996" width="186" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a90}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><clipPath id="bgblur_1_2267_13637_clip_path" transform="translate(-53.5996 -34.5996)"><rect x="82.5996" y="52.5996" width="128" height="148" rx="18"/></clipPath><filter id="filter5_d_2267_13637" x="58.5996" y="40.5996" width="17" height="17" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="212.6" y="76.5996" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-accent-purple-mid-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="146.6" y1="52.5996" x2="146.6" y2="200.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a90}}"/><stop offset="1" stop-color="{{illustration-surface-a50}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="146.6" y1="52.5996" x2="146.6" y2="200.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface}}"/><stop offset="1" stop-color="{{illustration-surface-a30}}"/></linearGradient></defs></svg>',
+  dark: '<svg viewBox="12.6 6.6 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="118.6" cy="118.6" r="61.6" fill="{{illustration-brand-strong-a50}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="163" cy="137.801" r="42.24" fill="{{illustration-accent-purple-a40}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="109.599" cy="161.8" rx="30.8" ry="24.64" fill="{{illustration-accent-teal-a30}}"/></g><foreignObject x="8.75586" y="49.5996" width="171.01" height="186.68"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6.5px);clip-path:url(#bgblur_0_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g data-part="card-back" filter="url(#filter3_d_2267_13637)"><rect x="46.5996" y="64.5996" width="112" height="130" rx="16" transform="rotate(7 46.5996 64.5996)" fill="{{illustration-surface-a10}}"/><rect x="47.0349" y="65.1568" width="111" height="129" rx="15.5" transform="rotate(7 47.0349 65.1568)" stroke="{{illustration-surface-a30}}"/><rect opacity="0.7" x="57.8145" y="88.1426" width="56" height="6" rx="3" transform="rotate(7 57.8145 88.1426)" fill="{{illustration-brand-soft}}"/><rect opacity="0.7" x="56.1074" y="102.037" width="38" height="6" rx="3" transform="rotate(7 56.1074 102.037)" fill="{{illustration-accent-purple-soft}}"/><rect opacity="0.7" x="54.4023" y="115.934" width="64" height="6" rx="3" transform="rotate(7 54.4023 115.934)" fill="{{illustration-line}}"/></g><foreignObject x="53.5996" y="34.5996" width="186" height="208"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(9px);clip-path:url(#bgblur_1_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter4_di_2267_13637)"><rect x="82.5996" y="52.5996" width="128" height="148" rx="18" fill="url(#paint0_linear_2267_13637)"/><rect x="83.0996" y="53.0996" width="127" height="147" rx="17.5" stroke="url(#paint1_linear_2267_13637)"/><circle opacity="0.7" cx="97.5996" cy="67.5996" r="3" fill="{{illustration-error}}"/><circle opacity="0.7" cx="106.6" cy="67.5996" r="3" fill="{{illustration-attention}}"/><circle opacity="0.7" cx="115.6" cy="67.5996" r="3" fill="{{illustration-success}}"/><g data-part="placeholder"><rect x="94.5996" y="84.5996" width="104" height="26" rx="8" fill="{{illustration-brand-a10}}"/><rect x="95.2996" y="85.2996" width="102.6" height="24.6" rx="7.3" stroke="{{illustration-brand-a60}}" stroke-width="1.4" stroke-dasharray="6 4"/></g><g data-part="placeholder-2"><rect x="94.5996" y="120.6" width="104" height="26" rx="8" fill="{{illustration-brand-a10}}"/><rect x="95.2996" y="121.3" width="102.6" height="24.6" rx="7.3" stroke="{{illustration-brand-a60}}" stroke-width="1.4" stroke-dasharray="6 4"/></g><g data-part="placeholder-3"><rect x="94.5996" y="156.6" width="104" height="26" rx="8" fill="{{illustration-brand-a10}}"/><rect x="95.2996" y="157.3" width="102.6" height="24.6" rx="7.3" stroke="{{illustration-brand-a60}}" stroke-width="1.4" stroke-dasharray="6 4"/></g></g><g data-part="sparkle" filter="url(#filter5_d_2267_13637)"><circle cx="67.0996" cy="49.0996" r="2.5" fill="{{illustration-surface-a20}}"/></g><g data-part="sparkle-2" filter="url(#filter6_d_2267_13637)"><circle cx="220.6" cy="84.5996" r="2" fill="{{illustration-surface-a20}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="237.199" height="237.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="28.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="66.7598" y="41.5605" width="192.48" height="192.48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="40.7988" y="99.1602" width="137.6" height="125.279" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="19" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="8.75586" y="49.5996" width="171.01" height="186.68" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><clipPath id="bgblur_0_2267_13637_clip_path" transform="translate(-8.75586 -49.5996)"><rect x="46.5996" y="64.5996" width="112" height="130" rx="16" transform="rotate(7 46.5996 64.5996)"/></clipPath><filter id="filter4_di_2267_13637" x="53.5996" y="34.5996" width="186" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a20}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><clipPath id="bgblur_1_2267_13637_clip_path" transform="translate(-53.5996 -34.5996)"><rect x="82.5996" y="52.5996" width="128" height="148" rx="18"/></clipPath><filter id="filter5_d_2267_13637" x="59.5996" y="41.5996" width="15" height="15" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="213.6" y="77.5996" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-accent-purple-mid-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="146.6" y1="52.5996" x2="146.6" y2="200.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a20}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="146.6" y1="52.5996" x2="146.6" y2="200.6" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a30}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient></defs></svg>',
+  motion: '__S__ [data-part="glow-main"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-main"] { animation: cui-ill-empty-glow-main-t-loop 3s linear infinite both, cui-ill-empty-glow-main-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-main"] { animation: cui-ill-empty-glow-main-t-once 3s linear 1 both, cui-ill-empty-glow-main-s-once 3s linear 1 both; } __S__ [data-part="glow-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-2"] { animation: cui-ill-empty-glow-2-t-loop 3s linear infinite both, cui-ill-empty-glow-2-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-2"] { animation: cui-ill-empty-glow-2-t-once 3s linear 1 both, cui-ill-empty-glow-2-s-once 3s linear 1 both; } __S__ [data-part="glow-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-3"] { animation: cui-ill-empty-glow-3-t-loop 3s linear infinite both, cui-ill-empty-glow-3-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-3"] { animation: cui-ill-empty-glow-3-t-once 3s linear 1 both, cui-ill-empty-glow-3-s-once 3s linear 1 both; } __S__ [data-part="card-back"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="card-back"] { animation: cui-ill-empty-card-back-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="card-back"] { animation: cui-ill-empty-card-back-t-once 3s linear 1 both; } __S__ [data-part="placeholder"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="placeholder"] { animation: cui-ill-empty-placeholder-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="placeholder"] { animation: cui-ill-empty-placeholder-o-once 3s linear 1 both; } __S__ [data-part="placeholder-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="placeholder-2"] { animation: cui-ill-empty-placeholder-2-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="placeholder-2"] { animation: cui-ill-empty-placeholder-2-o-once 3s linear 1 both; } __S__ [data-part="placeholder-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="placeholder-3"] { animation: cui-ill-empty-placeholder-3-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="placeholder-3"] { animation: cui-ill-empty-placeholder-3-o-once 3s linear 1 both; } __S__ [data-part="sparkle"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle"] { animation: cui-ill-empty-sparkle-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle"] { animation: cui-ill-empty-sparkle-o-once 3s linear 1 both; } __S__ [data-part="sparkle-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle-2"] { animation: cui-ill-empty-sparkle-2-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle-2"] { animation: cui-ill-empty-sparkle-2-o-once 3s linear 1 both; } @keyframes cui-ill-empty-glow-main-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-empty-glow-main-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-empty-glow-main-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   100% { scale: 1 1; } } @keyframes cui-ill-empty-glow-main-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   100% { scale: 1 1; } } @keyframes cui-ill-empty-glow-2-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   100% { translate: -6px 3px; } } @keyframes cui-ill-empty-glow-2-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   100% { translate: -6px 3px; } } @keyframes cui-ill-empty-glow-2-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   100% { scale: 1.06 1.06; } } @keyframes cui-ill-empty-glow-2-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   100% { scale: 1.06 1.06; } } @keyframes cui-ill-empty-glow-3-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-empty-glow-3-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-empty-glow-3-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   100% { scale: 1 1; } } @keyframes cui-ill-empty-glow-3-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   100% { scale: 1 1; } } @keyframes cui-ill-empty-card-back-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-empty-card-back-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-empty-placeholder-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.6; }   13.333% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   40% { animation-timing-function: steps(1, end); opacity: 0.6; }   100% { opacity: 0.6; } } @keyframes cui-ill-empty-placeholder-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.6; }   13.333% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   40% { animation-timing-function: steps(1, end); opacity: 0.6; }   100% { opacity: 0.6; } } @keyframes cui-ill-empty-placeholder-2-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.6; }   26.667% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   53.333% { animation-timing-function: steps(1, end); opacity: 0.6; }   100% { opacity: 0.6; } } @keyframes cui-ill-empty-placeholder-2-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.6; }   26.667% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   53.333% { animation-timing-function: steps(1, end); opacity: 0.6; }   100% { opacity: 0.6; } } @keyframes cui-ill-empty-placeholder-3-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.6; }   40% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   66.667% { animation-timing-function: steps(1, end); opacity: 0.6; }   100% { opacity: 0.6; } } @keyframes cui-ill-empty-placeholder-3-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.6; }   40% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   66.667% { animation-timing-function: steps(1, end); opacity: 0.6; }   100% { opacity: 0.6; } } @keyframes cui-ill-empty-sparkle-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   100% { opacity: 0.2; } } @keyframes cui-ill-empty-sparkle-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   100% { opacity: 0.2; } } @keyframes cui-ill-empty-sparkle-2-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   100% { opacity: 1; } } @keyframes cui-ill-empty-sparkle-2-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   100% { opacity: 1; } }'
+};

package/lib/Illustration/assets/error.d.ts

@@ -0,0 +1,2 @@
+import { IllustrationAsset } from '../Illustration.types';
+export declare const error: IllustrationAsset;

package/lib/Illustration/assets/error.js

@@ -0,0 +1,7 @@
+// Generated from the Figma One Design System (page ↳ Illustrations). Do not edit by hand.
+
+export const error = {
+  light: '<svg viewBox="14 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="114.2" cy="114.2" r="57.2" fill="{{illustration-brand-strong-a30}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="162.2" cy="96.1996" r="39.6" fill="{{illustration-error-a30}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="126.2" cy="153.201" rx="39.6" ry="26.4" fill="{{illustration-accent-purple-a20}}"/></g><foreignObject x="6.64453" y="47" width="166.551" height="182.223"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6.5px);clip-path:url(#bgblur_0_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter3_d_2267_13637)"><rect x="44" y="62" width="108" height="126" rx="16" transform="rotate(7 44 62)" fill="{{illustration-surface-a30}}"/><rect x="44.4353" y="62.5572" width="107" height="125" rx="15.5" transform="rotate(7 44.4353 62.5572)" stroke="{{illustration-surface-a80}}"/><rect opacity="0.7" x="55.2148" y="85.543" width="56" height="6" rx="3" transform="rotate(7 55.2148 85.543)" fill="{{illustration-brand-soft}}"/><rect opacity="0.7" x="53.5078" y="99.4375" width="38" height="6" rx="3" transform="rotate(7 53.5078 99.4375)" fill="{{illustration-line}}"/><rect opacity="0.7" x="51.8027" y="113.334" width="64" height="6" rx="3" transform="rotate(7 51.8027 113.334)" fill="{{illustration-line}}"/></g><foreignObject x="55" y="30" width="186" height="208"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(9px);clip-path:url(#bgblur_2_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g data-part="card-front" filter="url(#filter4_di_2267_13637)"><g clip-path="url(#clip1_2267_13637)"><rect x="84" y="48" width="128" height="148" rx="18" fill="url(#paint0_linear_2267_13637)"/><circle opacity="0.7" cx="99" cy="63" r="3" fill="{{illustration-error}}"/><circle opacity="0.7" cx="108" cy="63" r="3" fill="{{illustration-attention}}"/><circle opacity="0.7" cx="117" cy="63" r="3" fill="{{illustration-success}}"/><rect opacity="0.85" x="96" y="80" width="48" height="6" rx="3" fill="{{illustration-brand}}"/><rect opacity="0.6" x="96" y="94" width="80" height="6" rx="3" fill="{{illustration-line}}"/><rect opacity="0.85" x="106" y="108" width="56" height="6" rx="3" fill="{{illustration-error}}"/><rect opacity="0.6" x="106" y="122" width="70" height="6" rx="3" fill="{{illustration-line}}"/><rect opacity="0.85" x="96" y="136" width="40" height="6" rx="3" fill="{{illustration-brand}}"/><rect opacity="0.6" x="106" y="150" width="60" height="6" rx="3" fill="{{illustration-line}}"/><rect opacity="0.6" x="96" y="164" width="36" height="6" rx="3" fill="{{illustration-line}}"/><path data-part="crack" d="M152 68L142 98L160 116L146 148L164 172L154 196" pathLength="1" stroke="{{illustration-surface}}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><path data-part="crack-shadow" opacity="0.7" d="M153 69L143 99L161 117L147 149L165 173L155 197" pathLength="1" stroke="{{illustration-error}}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/></g><rect x="84.5" y="48.5" width="127" height="147" rx="17.5" stroke="url(#paint1_linear_2267_13637)"/></g><g data-part="error-badge" filter="url(#filter5_d_2267_13637)"><rect x="186" y="30" width="44" height="44" rx="22" fill="url(#paint2_linear_2267_13637)"/><rect x="186.5" y="30.5" width="43" height="43" rx="21.5" stroke="{{illustration-surface-a80}}"/><path d="M200 44L216 60M216 44L200 60" stroke="{{illustration-surface}}" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></g><g data-part="sparkle" filter="url(#filter6_d_2267_13637)"><circle cx="64" cy="42" r="2" fill="{{illustration-surface-a90}}"/></g><g data-part="sparkle-2" filter="url(#filter7_d_2267_13637)"><circle cx="222" cy="172" r="2" fill="{{illustration-surface-a90}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="228.4" height="228.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="28.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="68.5996" y="2.59961" width="187.199" height="187.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="45.5996" y="85.8008" width="161.199" height="134.801" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="20.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="6.64453" y="47" width="166.551" height="182.223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-deep-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><clipPath id="bgblur_0_2267_13637_clip_path" transform="translate(-6.64453 -47)"><rect x="44" y="62" width="108" height="126" rx="16" transform="rotate(7 44 62)"/></clipPath><filter id="filter4_di_2267_13637" x="55" y="30" width="186" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a10}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a90}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><clipPath id="bgblur_2_2267_13637_clip_path" transform="translate(-55 -30)"><rect x="84" y="48" width="128" height="148" rx="18"/></clipPath><filter id="filter5_d_2267_13637" x="172" y="22" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="6"/><feGaussianBlur stdDeviation="7"/><feColorMatrix type="matrix" values="{{matrix:illustration-error-a30}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="56" y="34" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-error-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter7_d_2267_13637" x="214" y="164" width="16" height="16" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="3"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a80}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="148" y1="48" x2="148" y2="196" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a90}}"/><stop offset="1" stop-color="{{illustration-surface-a50}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="148" y1="48" x2="148" y2="196" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface}}"/><stop offset="1" stop-color="{{illustration-surface-a30}}"/></linearGradient><linearGradient id="paint2_linear_2267_13637" x1="186" y1="52" x2="230" y2="52" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-error-soft}}"/><stop offset="1" stop-color="{{illustration-error}}"/></linearGradient><clipPath id="clip1_2267_13637"><rect x="84" y="48" width="128" height="148" rx="18" fill="{{illustration-surface}}"/></clipPath></defs></svg>',
+  dark: '<svg viewBox="14 0 240 240" fill="none" xmlns="http://www.w3.org/2000/svg"><g><g data-part="glow-main" filter="url(#filter0_f_2267_13637)"><circle cx="114.2" cy="114.2" r="57.2" fill="{{illustration-brand-strong-a50}}"/></g><g data-part="glow-2" filter="url(#filter1_f_2267_13637)"><circle cx="162.2" cy="96.1996" r="39.6" fill="{{illustration-error-a50}}"/></g><g data-part="glow-3" filter="url(#filter2_f_2267_13637)"><ellipse cx="126.2" cy="153.201" rx="39.6" ry="26.4" fill="{{illustration-accent-purple-a30}}"/></g><foreignObject x="6.64453" y="47" width="166.551" height="182.223"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(6.5px);clip-path:url(#bgblur_0_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g filter="url(#filter3_d_2267_13637)"><rect x="44" y="62" width="108" height="126" rx="16" transform="rotate(7 44 62)" fill="{{illustration-surface-a10}}"/><rect x="44.4353" y="62.5572" width="107" height="125" rx="15.5" transform="rotate(7 44.4353 62.5572)" stroke="{{illustration-surface-a30}}"/><rect opacity="0.7" x="55.2148" y="85.543" width="56" height="6" rx="3" transform="rotate(7 55.2148 85.543)" fill="{{illustration-brand-soft}}"/><rect opacity="0.7" x="53.5078" y="99.4375" width="38" height="6" rx="3" transform="rotate(7 53.5078 99.4375)" fill="{{illustration-line}}"/><rect opacity="0.7" x="51.8027" y="113.334" width="64" height="6" rx="3" transform="rotate(7 51.8027 113.334)" fill="{{illustration-line}}"/></g><foreignObject x="55" y="30" width="186" height="208"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(9px);clip-path:url(#bgblur_2_2267_13637_clip_path);height:100%;width:100%"></div></foreignObject><g data-part="card-front" filter="url(#filter4_di_2267_13637)"><g clip-path="url(#clip1_2267_13637)"><rect x="84" y="48" width="128" height="148" rx="18" fill="url(#paint0_linear_2267_13637)"/><circle opacity="0.7" cx="99" cy="63" r="3" fill="{{illustration-error}}"/><circle opacity="0.7" cx="108" cy="63" r="3" fill="{{illustration-attention}}"/><circle opacity="0.7" cx="117" cy="63" r="3" fill="{{illustration-success}}"/><rect opacity="0.85" x="96" y="80" width="48" height="6" rx="3" fill="{{illustration-brand}}"/><rect opacity="0.6" x="96" y="94" width="80" height="6" rx="3" fill="{{illustration-line}}"/><rect opacity="0.85" x="106" y="108" width="56" height="6" rx="3" fill="{{illustration-error}}"/><rect opacity="0.6" x="106" y="122" width="70" height="6" rx="3" fill="{{illustration-line}}"/><rect opacity="0.85" x="96" y="136" width="40" height="6" rx="3" fill="{{illustration-brand}}"/><rect opacity="0.6" x="106" y="150" width="60" height="6" rx="3" fill="{{illustration-line}}"/><rect opacity="0.6" x="96" y="164" width="36" height="6" rx="3" fill="{{illustration-line}}"/><path data-part="crack" d="M152 68L142 98L160 116L146 148L164 172L154 196" pathLength="1" stroke="{{illustration-surface}}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/><path data-part="crack-shadow" opacity="0.7" d="M153 69L143 99L161 117L147 149L165 173L155 197" pathLength="1" stroke="{{illustration-error}}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1 1"/></g><rect x="84.5" y="48.5" width="127" height="147" rx="17.5" stroke="url(#paint1_linear_2267_13637)"/></g><g data-part="error-badge" filter="url(#filter5_d_2267_13637)"><rect x="186" y="30" width="44" height="44" rx="22" fill="url(#paint2_linear_2267_13637)"/><rect x="186.5" y="30.5" width="43" height="43" rx="21.5" stroke="{{illustration-surface-a30}}"/><path d="M200 44L216 60M216 44L200 60" stroke="{{illustration-surface}}" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"/></g><g data-part="sparkle" filter="url(#filter6_d_2267_13637)"><circle cx="64" cy="42" r="2" fill="{{illustration-surface-a20}}"/></g><g data-part="sparkle-2" filter="url(#filter7_d_2267_13637)"><circle cx="222" cy="172" r="2" fill="{{illustration-surface-a20}}"/></g></g><defs><filter id="filter0_f_2267_13637" x="0" y="0" width="228.4" height="228.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="28.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter1_f_2267_13637" x="68.5996" y="2.59961" width="187.199" height="187.199" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="27" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter2_f_2267_13637" x="45.5996" y="85.8008" width="161.199" height="134.801" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur stdDeviation="20.5" result="effect1_foregroundBlur_2267_13637"/></filter><filter id="filter3_d_2267_13637" x="6.64453" y="47" width="166.551" height="182.223" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="7"/><feGaussianBlur stdDeviation="11"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><clipPath id="bgblur_0_2267_13637_clip_path" transform="translate(-6.64453 -47)"><rect x="44" y="62" width="108" height="126" rx="16" transform="rotate(7 44 62)"/></clipPath><filter id="filter4_di_2267_13637" x="55" y="30" width="186" height="208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="13"/><feGaussianBlur stdDeviation="14.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-shadow-a20}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix type="matrix" values="{{matrix:illustration-surface-a20}}"/><feBlend mode="normal" in2="shape" result="effect2_innerShadow_2267_13637"/></filter><clipPath id="bgblur_2_2267_13637_clip_path" transform="translate(-55 -30)"><rect x="84" y="48" width="128" height="148" rx="18"/></clipPath><filter id="filter5_d_2267_13637" x="172" y="22" width="72" height="72" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="6"/><feGaussianBlur stdDeviation="7"/><feColorMatrix type="matrix" values="{{matrix:illustration-error-a60}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter6_d_2267_13637" x="57" y="35" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-error-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><filter id="filter7_d_2267_13637" x="215" y="165" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset/><feGaussianBlur stdDeviation="2.5"/><feColorMatrix type="matrix" values="{{matrix:illustration-brand-a50}}"/><feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_2267_13637"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_2267_13637" result="shape"/></filter><linearGradient id="paint0_linear_2267_13637" x1="148" y1="48" x2="148" y2="196" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a20}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint1_linear_2267_13637" x1="148" y1="48" x2="148" y2="196" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-surface-a30}}"/><stop offset="1" stop-color="{{illustration-surface-a10}}"/></linearGradient><linearGradient id="paint2_linear_2267_13637" x1="186" y1="52" x2="230" y2="52" gradientUnits="userSpaceOnUse"><stop stop-color="{{illustration-error-soft}}"/><stop offset="1" stop-color="{{illustration-error}}"/></linearGradient><clipPath id="clip1_2267_13637"><rect x="84" y="48" width="128" height="148" rx="18" fill="{{illustration-surface}}"/></clipPath></defs></svg>',
+  motion: '__S__ [data-part="glow-main"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-main"] { animation: cui-ill-error-glow-main-t-loop 3s linear infinite both, cui-ill-error-glow-main-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-main"] { animation: cui-ill-error-glow-main-t-once 3s linear 1 both, cui-ill-error-glow-main-s-once 3s linear 1 both; } __S__ [data-part="glow-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-2"] { animation: cui-ill-error-glow-2-t-loop 3s linear infinite both, cui-ill-error-glow-2-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-2"] { animation: cui-ill-error-glow-2-t-once 3s linear 1 both, cui-ill-error-glow-2-s-once 3s linear 1 both; } __S__ [data-part="glow-3"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="glow-3"] { animation: cui-ill-error-glow-3-t-loop 3s linear infinite both, cui-ill-error-glow-3-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="glow-3"] { animation: cui-ill-error-glow-3-t-once 3s linear 1 both, cui-ill-error-glow-3-s-once 3s linear 1 both; } __S__ [data-part="card-front"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="card-front"] { animation: cui-ill-error-card-front-t-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="card-front"] { animation: cui-ill-error-card-front-t-once 3s linear 1 both; } __S__ [data-part="crack"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="crack"] { animation: cui-ill-error-crack-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="crack"] { animation: cui-ill-error-crack-d-once 3s linear 1 both; } __S__ [data-part="crack-shadow"] { transform-box: fill-box; transform-origin: center; stroke-dasharray: 1 1; } __S__[data-play="loop"] [data-part="crack-shadow"] { animation: cui-ill-error-crack-shadow-d-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="crack-shadow"] { animation: cui-ill-error-crack-shadow-d-once 3s linear 1 both; } __S__ [data-part="error-badge"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="error-badge"] { animation: cui-ill-error-error-badge-o-loop 3s linear infinite both, cui-ill-error-error-badge-s-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="error-badge"] { animation: cui-ill-error-error-badge-o-once 3s linear 1 both, cui-ill-error-error-badge-s-once 3s linear 1 both; } __S__ [data-part="sparkle"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle"] { animation: cui-ill-error-sparkle-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle"] { animation: cui-ill-error-sparkle-o-once 3s linear 1 both; } __S__ [data-part="sparkle-2"] { transform-box: fill-box; transform-origin: center; } __S__[data-play="loop"] [data-part="sparkle-2"] { animation: cui-ill-error-sparkle-2-o-loop 3s linear infinite both; } __S__[data-play="once"] [data-part="sparkle-2"] { animation: cui-ill-error-sparkle-2-o-once 3s linear 1 both; } @keyframes cui-ill-error-glow-main-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-error-glow-main-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 5px -4px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -5px 4px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-error-glow-main-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   100% { scale: 1 1; } } @keyframes cui-ill-error-glow-main-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   100% { scale: 1 1; } } @keyframes cui-ill-error-glow-2-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   100% { translate: -6px 3px; } } @keyframes cui-ill-error-glow-2-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -6px 3px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 6px -3px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   100% { translate: -6px 3px; } } @keyframes cui-ill-error-glow-2-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   100% { scale: 1.06 1.06; } } @keyframes cui-ill-error-glow-2-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   100% { scale: 1.06 1.06; } } @keyframes cui-ill-error-glow-3-t-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-error-glow-3-t-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: -4px -5px; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 0px 0px; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); translate: 4px 5px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-error-glow-3-s-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   100% { scale: 1 1; } } @keyframes cui-ill-error-glow-3-s-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   25% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 0.96 0.96; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1 1; }   75% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); scale: 1.06 1.06; }   100% { scale: 1 1; } } @keyframes cui-ill-error-card-front-t-loop {   0% { animation-timing-function: steps(1, end); translate: 0px 0px; }   36.667% { animation-timing-function: steps(1, end); translate: 0px 0px; }   39.333% { animation-timing-function: steps(1, end); translate: -5px 0px; }   42% { animation-timing-function: steps(1, end); translate: 5px 0px; }   44.667% { animation-timing-function: steps(1, end); translate: -3px 0px; }   47.333% { animation-timing-function: steps(1, end); translate: 0px 0px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-error-card-front-t-once {   0% { animation-timing-function: steps(1, end); translate: 0px 0px; }   36.667% { animation-timing-function: steps(1, end); translate: 0px 0px; }   39.333% { animation-timing-function: steps(1, end); translate: -5px 0px; }   42% { animation-timing-function: steps(1, end); translate: 5px 0px; }   44.667% { animation-timing-function: steps(1, end); translate: -3px 0px; }   47.333% { animation-timing-function: steps(1, end); translate: 0px 0px; }   100% { translate: 0px 0px; } } @keyframes cui-ill-error-crack-d-loop {   0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; }   36.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; }   46.667% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; }   90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; }   100% { stroke-dashoffset: 1; } } @keyframes cui-ill-error-crack-d-once {   0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; }   36.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; }   46.667% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; }   90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; }   100% { stroke-dashoffset: 0; } } @keyframes cui-ill-error-crack-shadow-d-loop {   0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; }   36.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; }   46.667% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; }   90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); stroke-dashoffset: 0; }   100% { stroke-dashoffset: 1; } } @keyframes cui-ill-error-crack-shadow-d-once {   0% { animation-timing-function: steps(1, end); stroke-dashoffset: 1; }   36.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); stroke-dashoffset: 1; }   46.667% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; }   90% { animation-timing-function: steps(1, end); stroke-dashoffset: 0; }   100% { stroke-dashoffset: 0; } } @keyframes cui-ill-error-error-badge-o-loop {   0% { animation-timing-function: steps(1, end); opacity: 0; }   46.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); opacity: 0; }   51.667% { animation-timing-function: steps(1, end); opacity: 1; }   90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); opacity: 1; }   100% { opacity: 0; } } @keyframes cui-ill-error-error-badge-o-once {   0% { animation-timing-function: steps(1, end); opacity: 0; }   46.667% { animation-timing-function: cubic-bezier(0, 0, 0.58, 1); opacity: 0; }   51.667% { animation-timing-function: steps(1, end); opacity: 1; }   90% { animation-timing-function: steps(1, end); opacity: 1; }   100% { opacity: 1; } } @keyframes cui-ill-error-error-badge-s-loop {   0% { animation-timing-function: steps(1, end); scale: 0.6 0.6; }   46.667% { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); scale: 0.6 0.6; }   60% { animation-timing-function: steps(1, end); scale: 1 1; }   90% { animation-timing-function: cubic-bezier(0.42, 0, 1, 1); scale: 1 1; }   100% { scale: 0.6 0.6; } } @keyframes cui-ill-error-error-badge-s-once {   0% { animation-timing-function: steps(1, end); scale: 0.6 0.6; }   46.667% { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); scale: 0.6 0.6; }   60% { animation-timing-function: steps(1, end); scale: 1 1; }   90% { animation-timing-function: steps(1, end); scale: 1 1; }   100% { scale: 1 1; } } @keyframes cui-ill-error-sparkle-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   100% { opacity: 0.2; } } @keyframes cui-ill-error-sparkle-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   100% { opacity: 0.2; } } @keyframes cui-ill-error-sparkle-2-o-loop {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   100% { opacity: 1; } } @keyframes cui-ill-error-sparkle-2-o-once {   0% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 1; }   50% { animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); opacity: 0.2; }   100% { opacity: 1; } }'
+};

package/lib/Illustration/assets/in-progress.d.ts

@@ -0,0 +1,2 @@
+import { IllustrationAsset } from '../Illustration.types';
+export declare const inProgress: IllustrationAsset;