@pezkuwi/ui-shared 3.16.7 → 3.16.8

package/build/package.json

@@ -1,336 +0,0 @@
-{
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "bugs": "https://github.com/pezkuwichain/ui/issues",
-  "description": "Shared logic that is usable accross all frameworks-specific areas",
-  "engines": {
-    "node": ">=18"
-  },
-  "homepage": "https://github.com/pezkuwichain/ui/tree/master/packages/ui-shared#readme",
-  "license": "Apache-2.0",
-  "name": "@pezkuwi/ui-shared",
-  "repository": {
-    "directory": "packages/ui-shared",
-    "type": "git",
-    "url": "https://github.com/pezkuwichain/ui.git"
-  },
-  "sideEffects": [
-    "./packageDetect.js",
-    "./cjs/packageDetect.js"
-  ],
-  "type": "module",
-  "version": "3.16.6",
-  "main": "./cjs/index.js",
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "exports": {
-    "./cjs/package.json": "./cjs/package.json",
-    "./cjs/*": "./cjs/*.js",
-    ".": {
-      "module": {
-        "types": "./index.d.ts",
-        "default": "./index.js"
-      },
-      "require": {
-        "types": "./cjs/index.d.ts",
-        "default": "./cjs/index.js"
-      },
-      "default": {
-        "types": "./index.d.ts",
-        "default": "./index.js"
-      }
-    },
-    "./bundle": {
-      "module": {
-        "types": "./bundle.d.ts",
-        "default": "./bundle.js"
-      },
-      "require": {
-        "types": "./cjs/bundle.d.ts",
-        "default": "./cjs/bundle.js"
-      },
-      "default": {
-        "types": "./bundle.d.ts",
-        "default": "./bundle.js"
-      }
-    },
-    "./icons": {
-      "module": {
-        "types": "./icons/index.d.ts",
-        "default": "./icons/index.js"
-      },
-      "require": {
-        "types": "./cjs/icons/index.d.ts",
-        "default": "./cjs/icons/index.js"
-      },
-      "default": {
-        "types": "./icons/index.d.ts",
-        "default": "./icons/index.js"
-      }
-    },
-    "./icons/beachball": {
-      "module": {
-        "types": "./icons/beachball/index.d.ts",
-        "default": "./icons/beachball/index.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/index.d.ts",
-        "default": "./cjs/icons/beachball/index.js"
-      },
-      "default": {
-        "types": "./icons/beachball/index.d.ts",
-        "default": "./icons/beachball/index.js"
-      }
-    },
-    "./icons/beachball/colors": {
-      "module": {
-        "types": "./icons/beachball/colors.d.ts",
-        "default": "./icons/beachball/colors.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/colors.d.ts",
-        "default": "./cjs/icons/beachball/colors.js"
-      },
-      "default": {
-        "types": "./icons/beachball/colors.d.ts",
-        "default": "./icons/beachball/colors.js"
-      }
-    },
-    "./icons/beachball/container": {
-      "module": {
-        "types": "./icons/beachball/container.d.ts",
-        "default": "./icons/beachball/container.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/container.d.ts",
-        "default": "./cjs/icons/beachball/container.js"
-      },
-      "default": {
-        "types": "./icons/beachball/container.d.ts",
-        "default": "./icons/beachball/container.js"
-      }
-    },
-    "./icons/beachball/defaults": {
-      "module": {
-        "types": "./icons/beachball/defaults.d.ts",
-        "default": "./icons/beachball/defaults.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/defaults.d.ts",
-        "default": "./cjs/icons/beachball/defaults.js"
-      },
-      "default": {
-        "types": "./icons/beachball/defaults.d.ts",
-        "default": "./icons/beachball/defaults.js"
-      }
-    },
-    "./icons/beachball/demo": {
-      "module": {
-        "types": "./icons/beachball/demo.d.ts",
-        "default": "./icons/beachball/demo.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/demo.d.ts",
-        "default": "./cjs/icons/beachball/demo.js"
-      },
-      "default": {
-        "types": "./icons/beachball/demo.d.ts",
-        "default": "./icons/beachball/demo.js"
-      }
-    },
-    "./icons/beachball/README.md": "./icons/beachball/README.md",
-    "./icons/beachball/seeder": {
-      "module": {
-        "types": "./icons/beachball/seeder.d.ts",
-        "default": "./icons/beachball/seeder.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/seeder.d.ts",
-        "default": "./cjs/icons/beachball/seeder.js"
-      },
-      "default": {
-        "types": "./icons/beachball/seeder.d.ts",
-        "default": "./icons/beachball/seeder.js"
-      }
-    },
-    "./icons/beachball/shape/circle": {
-      "module": {
-        "types": "./icons/beachball/shape/circle.d.ts",
-        "default": "./icons/beachball/shape/circle.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/shape/circle.d.ts",
-        "default": "./cjs/icons/beachball/shape/circle.js"
-      },
-      "default": {
-        "types": "./icons/beachball/shape/circle.d.ts",
-        "default": "./icons/beachball/shape/circle.js"
-      }
-    },
-    "./icons/beachball/shape/square": {
-      "module": {
-        "types": "./icons/beachball/shape/square.d.ts",
-        "default": "./icons/beachball/shape/square.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/shape/square.d.ts",
-        "default": "./cjs/icons/beachball/shape/square.js"
-      },
-      "default": {
-        "types": "./icons/beachball/shape/square.d.ts",
-        "default": "./icons/beachball/shape/square.js"
-      }
-    },
-    "./icons/beachball/svg/circle": {
-      "module": {
-        "types": "./icons/beachball/svg/circle.d.ts",
-        "default": "./icons/beachball/svg/circle.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/svg/circle.d.ts",
-        "default": "./cjs/icons/beachball/svg/circle.js"
-      },
-      "default": {
-        "types": "./icons/beachball/svg/circle.d.ts",
-        "default": "./icons/beachball/svg/circle.js"
-      }
-    },
-    "./icons/beachball/svg/element": {
-      "module": {
-        "types": "./icons/beachball/svg/element.d.ts",
-        "default": "./icons/beachball/svg/element.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/svg/element.d.ts",
-        "default": "./cjs/icons/beachball/svg/element.js"
-      },
-      "default": {
-        "types": "./icons/beachball/svg/element.d.ts",
-        "default": "./icons/beachball/svg/element.js"
-      }
-    },
-    "./icons/beachball/svg/rect": {
-      "module": {
-        "types": "./icons/beachball/svg/rect.d.ts",
-        "default": "./icons/beachball/svg/rect.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/svg/rect.d.ts",
-        "default": "./cjs/icons/beachball/svg/rect.js"
-      },
-      "default": {
-        "types": "./icons/beachball/svg/rect.d.ts",
-        "default": "./icons/beachball/svg/rect.js"
-      }
-    },
-    "./icons/beachball/svg/svg": {
-      "module": {
-        "types": "./icons/beachball/svg/svg.d.ts",
-        "default": "./icons/beachball/svg/svg.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/svg/svg.d.ts",
-        "default": "./cjs/icons/beachball/svg/svg.js"
-      },
-      "default": {
-        "types": "./icons/beachball/svg/svg.d.ts",
-        "default": "./icons/beachball/svg/svg.js"
-      }
-    },
-    "./icons/beachball/types": {
-      "module": {
-        "types": "./icons/beachball/types.d.ts",
-        "default": "./icons/beachball/types.js"
-      },
-      "require": {
-        "types": "./cjs/icons/beachball/types.d.ts",
-        "default": "./cjs/icons/beachball/types.js"
-      },
-      "default": {
-        "types": "./icons/beachball/types.d.ts",
-        "default": "./icons/beachball/types.js"
-      }
-    },
-    "./icons/polkadot": {
-      "module": {
-        "types": "./icons/polkadot.d.ts",
-        "default": "./icons/polkadot.js"
-      },
-      "require": {
-        "types": "./cjs/icons/polkadot.d.ts",
-        "default": "./cjs/icons/polkadot.js"
-      },
-      "default": {
-        "types": "./icons/polkadot.d.ts",
-        "default": "./icons/polkadot.js"
-      }
-    },
-    "./icons/types": {
-      "module": {
-        "types": "./icons/types.d.ts",
-        "default": "./icons/types.js"
-      },
-      "require": {
-        "types": "./cjs/icons/types.d.ts",
-        "default": "./cjs/icons/types.js"
-      },
-      "default": {
-        "types": "./icons/types.d.ts",
-        "default": "./icons/types.js"
-      }
-    },
-    "./package.json": {
-      "require": "./cjs/package.json",
-      "default": "./package.json"
-    },
-    "./packageDetect": {
-      "module": {
-        "types": "./packageDetect.d.ts",
-        "default": "./packageDetect.js"
-      },
-      "require": {
-        "types": "./cjs/packageDetect.d.ts",
-        "default": "./cjs/packageDetect.js"
-      },
-      "default": {
-        "types": "./packageDetect.d.ts",
-        "default": "./packageDetect.js"
-      }
-    },
-    "./packageInfo.js": {
-      "module": {
-        "types": "./packageInfo.d.ts",
-        "default": "./packageInfo.js"
-      },
-      "require": {
-        "types": "./cjs/packageInfo.d.ts",
-        "default": "./cjs/packageInfo.js"
-      },
-      "default": {
-        "types": "./packageInfo.d.ts",
-        "default": "./packageInfo.js"
-      }
-    },
-    "./packageInfo": {
-      "module": {
-        "types": "./packageInfo.d.ts",
-        "default": "./packageInfo.js"
-      },
-      "require": {
-        "types": "./cjs/packageInfo.d.ts",
-        "default": "./cjs/packageInfo.js"
-      },
-      "default": {
-        "types": "./packageInfo.d.ts",
-        "default": "./packageInfo.js"
-      }
-    }
-  },
-  "dependencies": {
-    "colord": "^2.9.3",
-    "tslib": "^2.8.1"
-  },
-  "peerDependencies": {
-    "@pezkuwi/util": "*",
-    "@pezkuwi/util-crypto": "*"
-  }
-}

package/build/packageDetect.d.ts

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

package/build/packageDetect.js

@@ -1,3 +0,0 @@
-import { detectPackage } from '@pezkuwi/util';
-import { packageInfo } from './packageInfo.js';
-detectPackage(packageInfo, null, []);

package/build/packageInfo.d.ts

@@ -1,6 +0,0 @@
-export declare const packageInfo: {
-    name: string;
-    path: string;
-    type: string;
-    version: string;
-};

package/build/packageInfo.js

@@ -1 +0,0 @@
-export const packageInfo = { name: '@pezkuwi/ui-shared', path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto', type: 'esm', version: '3.16.6' };

package/src/bundle.ts

@@ -1,5 +0,0 @@
-// Copyright 2018-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-export * from './icons/index.js';
-export { packageInfo } from './packageInfo.js';

package/src/icons/beachball/LICENSE

@@ -1,16 +0,0 @@
-Apache-2.0 License (Apache-2.0)
-
-Copyright 2016 Dan Finlay
-Copyright 2017-2025 @polkadot/ui-shared authors & contributors
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DApache-2.0LAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
-FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.

package/src/icons/beachball/README.md

@@ -1,19 +0,0 @@
-# @pezkuwi/ui-shared/beachball
-
-Adapted from [Jazzicon](https://github.com/danfinlay/jazzicon) by Dan Finlay with the following changes -
-
-- Random values now is read from the Uint8Array supplied (as opposed to having the seed as a number). This allows us to give an publicKey/address as an input and use those values in the pattern generation.
-- Upgrade to the underlying [color](https://github.com/Qix-/color) library
-- Generate circles as shapes (instead of rectangles)
-- Interface updated to take in optional className & style
-- Update everywhere to use ES6
-- Split source into self-contained functions (TODO: future testing)
-- Everything has been updated to use flow
-- Test the library functions
-- Copyright headers added (original also under Apache-2.0)
-
-## Usage
-
-Also see [src/demo.js](src/demo.js) for a randomly generated example.
-
-![demo](https://raw.githubusercontent.com/pezkuwichain/ui/master/packages/ui-shared/demo.png)

package/src/icons/beachball/colors.spec.ts

@@ -1,67 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
-
-import type { ColorGen } from './types.js';
-
-import { colors as newColors } from './colors.js';
-import { seeder as newSeeder } from './seeder.js';
-
-describe('colors', (): void => {
-  let colors: ColorGen;
-
-  beforeEach((): void => {
-    colors = newColors(newSeeder());
-  });
-
-  it('generates using default alpha', (): void => {
-    expect(
-      colors()
-    ).toEqual(
-      // with original color ...
-      // 'hsl(37.19999999999999, 100%, 54.9%)'
-      'hsl(37, 100%, 55%)'
-    );
-  });
-
-  it('applies specified alpha', (): void => {
-    expect(
-      colors(0.5)
-    ).toEqual(
-      // with original color ...
-      // 'hsla(37.19999999999999, 100%, 54.9%, 0.5)'
-      'hsla(37, 100%, 55%, 0.5)'
-    );
-  });
-
-  it('rolates colors', (): void => {
-    const orig = colors();
-
-    expect(
-      orig
-    ).toEqual('hsl(37, 100%, 55%)');
-
-    expect(
-      colors()
-    ).not.toEqual(orig);
-  });
-
-  it('works in edge conditions (0xff)', (): void => {
-    const u8a = new Uint8Array(32);
-
-    u8a.fill(255);
-
-    expect(
-      colors = newColors(newSeeder(u8a))
-    ).not.toThrow();
-
-    expect(
-      colors()
-    ).toEqual(
-      // with original color ...
-      // 'hsl(15, 0%, 100%)'
-      'hsl(0, 0%, 100%)'
-    );
-  });
-});

package/src/icons/beachball/colors.ts

@@ -1,28 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Copyright 2016 Dan Finlay
-
-import type { Colord } from 'colord';
-import type { ColorGen, Seeder } from './types.js';
-
-import { colord } from 'colord';
-
-import { COLORS } from './defaults.js';
-
-const WOBBLE = 30;
-
-export function colors (seeder: Seeder): ColorGen {
-  const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
-  const all = COLORS.map((hex): Colord =>
-    colord(hex).rotate(amount)
-  );
-
-  return (alpha = 1): string => {
-    const index = Math.floor(all.length * seeder());
-
-    return all.splice(index, 1)[0]
-      .alpha(alpha)
-      .toHslString();
-  };
-}

package/src/icons/beachball/container.spec.ts

@@ -1,46 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
-
-import { container } from './container.js';
-
-describe('container', (): void => {
-  it('applies default styles', (): void => {
-    expect(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-      (container(100).style as any)._values
-    ).toMatchObject({
-      background: 'white',
-      'border-radius': '50px',
-      display: 'inline-block',
-      height: '100px',
-      margin: '0px',
-      overflow: 'hidden',
-      padding: '0px',
-      width: '100px'
-    });
-  });
-
-  it('overrides with supplied styles', (): void => {
-    expect(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
-      (container(50, 'black', '', { display: 'block' }).style as any)._values
-    ).toMatchObject({
-      background: 'black',
-      'border-radius': '25px',
-      display: 'block',
-      height: '50px',
-      margin: '0px',
-      overflow: 'hidden',
-      padding: '0px',
-      width: '50px'
-    });
-  });
-
-  it('applies the specified className', (): void => {
-    expect(
-      container(100, 'blue', 'testClass').className
-    ).toEqual('testClass');
-  });
-});

package/src/icons/beachball/container.ts

@@ -1,27 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Copyright 2016 Dan Finlay
-
-export function container (diameter: number, background = 'white', className = '', _style: Record<string, string> = {}): HTMLElement {
-  const element = document.createElement('div');
-  const style = Object.assign({
-    background,
-    borderRadius: `${diameter / 2}px`,
-    display: 'inline-block',
-    height: `${diameter}px`,
-    margin: '0px',
-    overflow: 'hidden',
-    padding: '0px',
-    width: `${diameter}px`
-  }, _style);
-
-  element.className = className;
-  element.style.background = background;
-
-  Object.keys(style).forEach((key: unknown): void => {
-    element.style[key as number] = style[key as number];
-  });
-
-  return element;
-}

package/src/icons/beachball/defaults.ts

@@ -1,11 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Copyright 2016 Dan Finlay
-
-export const COLORS: readonly string[] = [
-  // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
-  '#ffe119', '#4363d8', '#f58231', '#fabebe', '#e6beff', '#800000', '#000075', '#a9a9a9', '#ffffff', '#000000'
-] as const;
-
-export const SHAPE_COUNT = 5 as const;

package/src/icons/beachball/demo.ts

@@ -1,35 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Copyright 2016 Dan Finlay
-
-import { isNull } from '@pezkuwi/util';
-import { encodeAddress, randomAsU8a } from '@pezkuwi/util-crypto';
-
-import { beachballIcon } from './index.js';
-
-const element = document.getElementById('demo');
-
-function generateIcon (seed: string = encodeAddress(randomAsU8a(32))): void {
-  const start = Date.now();
-
-  if (isNull(element)) {
-    throw new Error('Unable to find #demo element');
-  }
-
-  element.appendChild(
-    beachballIcon(seed, { isAlternative: false, size: 100 }, 'padded')
-  );
-
-  console.log(`Icon generated in ${(Date.now() - start)}ms`);
-}
-
-function generateIcons (count = 512): void {
-  generateIcon(encodeAddress(new Uint8Array(32)));
-
-  for (let index = 1; index < count; index++) {
-    generateIcon();
-  }
-}
-
-generateIcons();

package/src/icons/beachball/index.spec.ts

@@ -1,36 +0,0 @@
-// Copyright 2017-2025 @pezkuwi/ui-shared authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-/// <reference types="@pezkuwi/dev-test/globals.d.ts" />
-
-import xmlserializer from 'xmlserializer';
-
-import { beachballIcon } from './index.js';
-
-describe('identicon', (): void => {
-  it('generates a basic [0,..,0] identicon', (): void => {
-    expect(
-      xmlserializer.serializeToString(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
-        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 256 }) as any
-      )
-    ).toEqual(
-      // with original color ...
-      // '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
-      '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(255, 167, 26); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212, 66%, 55%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(10, 91%, 58%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 86%, 86%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(262, 100%, 87%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
-    );
-  });
-
-  it('allows overrides', (): void => {
-    expect(
-      xmlserializer.serializeToString(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
-        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 100 }, 'testClass', { display: 'block' }) as any
-      )
-    ).toEqual(
-      // with original color ...
-      // '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="50" cy="60" r="40" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="50" cy="70" r="20" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
-      '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(255, 167, 26); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212, 66%, 55%)"/><circle cx="50" cy="60" r="40" fill="hsl(10, 91%, 58%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 86%, 86%)"/><circle cx="50" cy="70" r="20" fill="hsl(262, 100%, 87%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
-    );
-  });
-});