From 02233cb3139be9a3084cee595d7aa67678e907f1 Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Mon, 12 Feb 2024 12:18:38 +0700
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20theming?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dropzone.tsx               |   9 +-
 .../src/components/file-tree/file-icon.tsx    |  11 +-
 .../src/components/file-tree/index.tsx        |  14 +-
 .../src/components/file-tree/title.tsx        |   2 +-
 .../src/components/playground.tsx             |  12 +-
 .../src/hooks/use-dotlottie.tsx               |   2 +-
 apps/dotlottie-playground/src/store/types.ts  |   2 +-
 packages/common/package.json                  |   4 +-
 packages/common/src/dotlottie-loader.ts       |   8 +-
 packages/common/src/dotlottie-player.ts       |  13 +-
 packages/common/src/dotlottie-styler.ts       |  24 ---
 packages/react-player/README.md               |   2 +-
 pnpm-lock.yaml                                | 148 ++++--------------
 13 files changed, 64 insertions(+), 187 deletions(-)
 delete mode 100644 packages/common/src/dotlottie-styler.ts

diff --git a/apps/dotlottie-playground/src/components/dropzone.tsx b/apps/dotlottie-playground/src/components/dropzone.tsx
index 3f858a21..1905b1a3 100644
--- a/apps/dotlottie-playground/src/components/dropzone.tsx
+++ b/apps/dotlottie-playground/src/components/dropzone.tsx
@@ -7,7 +7,7 @@ import ReactDropzone, { type DropzoneState, type FileError, type FileRejection,
 import { toast } from 'react-toastify';
 
 interface DropzoneProps {
-  accept: 'lottie' | 'json' | 'lss';
+  accept: 'lottie' | 'json';
   children: (state: DropzoneState) => JSX.Element;
   multiple?: boolean;
   noClick?: boolean;
@@ -40,13 +40,6 @@ export const Dropzone: React.FC<DropzoneProps> = ({ accept, children, multiple,
       };
     }
 
-    if (accept === 'lss' && !fileName.endsWith('.lss')) {
-      return {
-        message: 'Invalid .lss',
-        code: ErrorCode.FileInvalidType,
-      };
-    }
-
     return null;
   }, []);
 
diff --git a/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx b/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx
index b40484f8..60ad53fe 100644
--- a/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx
+++ b/apps/dotlottie-playground/src/components/file-tree/file-icon.tsx
@@ -3,14 +3,15 @@
  */
 
 import React from 'react';
-import { BsFiletypeJson, BsFiletypeCss } from 'react-icons/bs';
+import { BsFiletypeJson } from 'react-icons/bs';
 
 import type { SupportedFileTypes } from '.';
 
 export const FileIcon = ({ type }: { type: SupportedFileTypes }): JSX.Element => {
-  if (type === 'lss') {
-    return <BsFiletypeCss />;
-  } else {
-    return <BsFiletypeJson />;
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  if (type !== 'json') {
+    return <></>;
   }
+
+  return <BsFiletypeJson />;
 };
diff --git a/apps/dotlottie-playground/src/components/file-tree/index.tsx b/apps/dotlottie-playground/src/components/file-tree/index.tsx
index f778b92e..fbaf6419 100644
--- a/apps/dotlottie-playground/src/components/file-tree/index.tsx
+++ b/apps/dotlottie-playground/src/components/file-tree/index.tsx
@@ -2,7 +2,7 @@
  * Copyright 2023 Design Barn Inc.
  */
 
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useKey } from 'react-use';
 
 import { useDotLottie } from '../../hooks/use-dotlottie';
@@ -14,7 +14,7 @@ import { AddNew } from './add-new';
 import { EditableItem } from './editable-item';
 import { Title } from './title';
 
-const FILE_TYPES = ['json', 'lss'] as const;
+const FILE_TYPES = ['json'] as const;
 
 export type SupportedFileTypes = typeof FILE_TYPES[number];
 
@@ -54,8 +54,6 @@ export const FileTree: React.FC<FileTreeProps> = ({
     [onClick, title],
   );
 
-  const fileExtention = useMemo(() => (title.toLowerCase() === 'themes' ? 'lss' : 'json'), [title]);
-
   const handleRemove = useCallback(
     (fileName: string) => {
       onRemove?.(title, fileName);
@@ -79,10 +77,10 @@ export const FileTree: React.FC<FileTreeProps> = ({
 
   const handleAddNew = useCallback(
     (value: string) => {
-      onAddNew?.(title, `${value}.${fileExtention}`);
+      onAddNew?.(title, `${value}.json`);
       setDisplayAdd(false);
     },
-    [onAddNew, title, fileExtention],
+    [onAddNew, title],
   );
 
   const handleRename = useCallback(
@@ -121,7 +119,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
         buttons={title === 'Animations' ? ['upload'] : ['upload', 'add']}
       />
       <div className="relative h-full overflow-y-auto custom-scrollbar">
-        <Dropzone onDrop={onDrop} accept={title === 'Themes' ? 'lss' : 'json'} noClick>
+        <Dropzone onDrop={onDrop} accept={'json'} noClick>
           {(state): JSX.Element => {
             return (
               <div {...state.getRootProps()}>
@@ -157,7 +155,7 @@ export const FileTree: React.FC<FileTreeProps> = ({
 
                   {displayAdd && (
                     <li>
-                      <AddNew onAdd={handleAddNew} extension={title === 'Themes' ? 'lss' : 'json'} />
+                      <AddNew onAdd={handleAddNew} extension={'json'} />
                     </li>
                   )}
                 </ul>
diff --git a/apps/dotlottie-playground/src/components/file-tree/title.tsx b/apps/dotlottie-playground/src/components/file-tree/title.tsx
index cdaed463..50126a34 100644
--- a/apps/dotlottie-playground/src/components/file-tree/title.tsx
+++ b/apps/dotlottie-playground/src/components/file-tree/title.tsx
@@ -57,7 +57,7 @@ export const Title: React.FC<TitleProps> = ({ buttons, onClickAdd, onUpload, tit
 
             case 'upload':
               buttonsToDisplay.push(
-                <Dropzone key={item} onDrop={onDrop} accept={title === 'Themes' ? 'lss' : 'json'}>
+                <Dropzone key={item} onDrop={onDrop} accept={'json'}>
                   {({ getInputProps, getRootProps }): JSX.Element => (
                     <button {...getRootProps()} className="hover:text-white" title="Upload">
                       <input {...getInputProps()} />
diff --git a/apps/dotlottie-playground/src/components/playground.tsx b/apps/dotlottie-playground/src/components/playground.tsx
index e6cc8900..61530ad3 100644
--- a/apps/dotlottie-playground/src/components/playground.tsx
+++ b/apps/dotlottie-playground/src/components/playground.tsx
@@ -171,7 +171,6 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
     async (folder: string, fileName: string) => {
       dispatch(clearEditorState());
       let fileContent: string | undefined;
-      let isTheme = false;
 
       switch (folder) {
         case 'States':
@@ -180,7 +179,6 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
 
         case 'Themes':
           fileContent = await dotLottie.getTheme(fileName)?.toString();
-          isTheme = true;
           break;
 
         default:
@@ -191,9 +189,9 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
         dispatch(
           setEditorFile({
             name: fileName,
-            type: isTheme ? 'css' : 'json',
+            type: 'json',
             path: folder,
-            content: isTheme ? fileContent : formatJSON(fileContent),
+            content: formatJSON(fileContent),
           }),
         );
       }
@@ -243,7 +241,7 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
 
   const handleUpload = useCallback(
     async (title: string, file: File) => {
-      const fileName = processFilename(file.name).replace(/(.json|.lss)/gu, '');
+      const fileName = processFilename(file.name).replace(/(.json)/gu, '');
       let parsedContent: unknown;
 
       switch (title) {
@@ -276,7 +274,7 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
 
   const handleAddNew = useCallback(
     async (title: string, fileName: string) => {
-      const updatedFileName = processFilename(fileName).replace(/(.json|.lss)/gu, '');
+      const updatedFileName = processFilename(fileName).replace(/(.json)/gu, '');
       let mockState: DotLottieStateMachine;
 
       switch (title) {
@@ -287,7 +285,7 @@ export const Playground: React.FC<PlaygroundProps> = ({ file: dotLottieFile, fil
           break;
 
         case 'Themes':
-          addDotLottieTheme('/* Make your animations colorful */', updatedFileName);
+          addDotLottieTheme('{}', updatedFileName);
           break;
 
         default:
diff --git a/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx b/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx
index edab1c42..4095b928 100644
--- a/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx
+++ b/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx
@@ -88,7 +88,7 @@ export const DotLottieProvider: React.FC<{ children: ReactNode }> = ({ children
       .map((item) => {
         return {
           name: `${item.id}`,
-          type: 'lss',
+          type: 'json',
         };
       })
       .sort((item1, item2) => (item1.name > item2.name ? 1 : -1));
diff --git a/apps/dotlottie-playground/src/store/types.ts b/apps/dotlottie-playground/src/store/types.ts
index f49ea6c8..bf5bca78 100644
--- a/apps/dotlottie-playground/src/store/types.ts
+++ b/apps/dotlottie-playground/src/store/types.ts
@@ -2,7 +2,7 @@
  * Copyright 2023 Design Barn Inc.
  */
 
-export const SUPPORTED_FILE_TYPES = ['json', 'lss'] as const;
+export const SUPPORTED_FILE_TYPES = ['json'] as const;
 export const EDITOR_ACTIONS = [
   'themes_add',
   'themes_remove',
diff --git a/packages/common/package.json b/packages/common/package.json
index df3abd42..08abcaa5 100644
--- a/packages/common/package.json
+++ b/packages/common/package.json
@@ -22,9 +22,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@dotlottie/dotlottie-js": "^0.6.2",
-    "@lottiefiles/relottie": "1.0.0",
-    "@lottiefiles/relottie-style": "0.4.3",
+    "@dotlottie/dotlottie-js": "^0.7.0",
     "@preact/signals-core": "^1.2.3",
     "howler": "^2.2.3",
     "lottie-web": "^5.12.2",
diff --git a/packages/common/src/dotlottie-loader.ts b/packages/common/src/dotlottie-loader.ts
index 6e3ece07..609ef70d 100644
--- a/packages/common/src/dotlottie-loader.ts
+++ b/packages/common/src/dotlottie-loader.ts
@@ -20,7 +20,7 @@ export class DotLottieLoader {
 
   private readonly _animationsMap: Map<string, AnimationData> = new Map();
 
-  private readonly _themeMap: Map<string, string> = new Map();
+  private readonly _themeMap: Map<string, Record<string, unknown>> = new Map();
 
   private readonly _stateMachinesMap: Map<string, LottieStateMachine> = new Map();
 
@@ -34,7 +34,7 @@ export class DotLottieLoader {
     return this._animationsMap;
   }
 
-  public get themeMap(): Map<string, string> {
+  public get themeMap(): Map<string, Record<string, unknown>> {
     return this._themeMap;
   }
 
@@ -143,9 +143,9 @@ export class DotLottieLoader {
     return animation;
   }
 
-  public async getTheme(themeId: string): Promise<string | undefined> {
+  public async getTheme(themeId: string): Promise<Record<string, unknown> | undefined> {
     if (this._themeMap.get(themeId)) {
-      return this._themeMap.get(themeId) as string;
+      return this._themeMap.get(themeId);
     }
 
     if (!this._dotLottie) {
diff --git a/packages/common/src/dotlottie-player.ts b/packages/common/src/dotlottie-player.ts
index f6ce31b4..baf788dc 100644
--- a/packages/common/src/dotlottie-player.ts
+++ b/packages/common/src/dotlottie-player.ts
@@ -27,7 +27,6 @@ import pkg from '../package.json';
 import type { DotLottieAudio } from './dotlottie-audio';
 import { DotLottieLoader } from './dotlottie-loader';
 import { loadStateMachines } from './dotlottie-state-machine-loader';
-import { applyLottieStyleSheet } from './dotlottie-styler';
 import type { DotLottieStateMachineManager } from './state/dotlottie-state-machine-manager';
 import { Store } from './store';
 import {
@@ -528,7 +527,7 @@ export class DotLottieCommonPlayer {
     return this._dotLottieLoader.animationsMap;
   }
 
-  public get themes(): Map<string, string> {
+  public get themes(): Map<string, Record<string, unknown>> {
     return this._dotLottieLoader.themeMap;
   }
 
@@ -1774,14 +1773,18 @@ export class DotLottieCommonPlayer {
     };
 
     // load the dependencies in parallel
-    const [lottieStyleSheet, lottiePlayer, audioFactory] = await Promise.all([
+    const [theme, lottiePlayer, audioFactory] = await Promise.all([
       this._dotLottieLoader.getTheme(defaultTheme),
       this._getLottiePlayerInstance(),
       this._getAudioFactory(),
     ]);
 
-    if (lottieStyleSheet && this._animation) {
-      this._animation = await applyLottieStyleSheet(this._animation, lottieStyleSheet);
+    if (theme && this._animation) {
+      this._animation = {
+        ...this._animation,
+        // @ts-ignore
+        slots: theme,
+      };
     } else {
       this._animation = await this._dotLottieLoader.getAnimation(this._currentAnimationId ?? '');
     }
diff --git a/packages/common/src/dotlottie-styler.ts b/packages/common/src/dotlottie-styler.ts
deleted file mode 100644
index 12cd85a5..00000000
--- a/packages/common/src/dotlottie-styler.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright 2023 Design Barn Inc.
- */
-
-import type { Animation } from '@lottiefiles/lottie-types';
-
-/**
- * Apply a Lottie stylesheet to a given animation.
- *
- * @param animation - The original Lottie animation.
- * @param lottieStyleSheet - The stylesheet to apply to the animation.
- * @returns A promise that resolves with the styled animation.
- */
-export async function applyLottieStyleSheet(animation: Animation, lottieStyleSheet: string): Promise<Animation> {
-  // Dynamically load theming related dependencies
-  const [{ relottie }, { default: style }] = await Promise.all([
-    import('@lottiefiles/relottie/index'),
-    import('@lottiefiles/relottie-style'),
-  ]);
-
-  const vFile = await relottie().use(style, { lss: lottieStyleSheet }).process(JSON.stringify(animation));
-
-  return JSON.parse(vFile.value) as Animation;
-}
diff --git a/packages/react-player/README.md b/packages/react-player/README.md
index 365f931f..53590ce1 100644
--- a/packages/react-player/README.md
+++ b/packages/react-player/README.md
@@ -75,7 +75,7 @@ The `DotLottiePlayer` component accepts the following props:
 | `renderer`         | How to render                             | `'svg' \| 'html' \| 'canvas'`   | `svg`       |
 | `speed`            | Play speed                                | `number`                        | `1`         |
 | `onEvent`          | Listen to player events                   | `function`                      | `undefined` |
-| `defaultTheme`     | Default lss theme to use                  | `string`                        | `undefined` |
+| `defaultTheme`     | Default .lottie theme to use                  | `string`                        | `undefined` |
 
 ## Events
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f9fc054..12ccf880 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -363,14 +363,8 @@ importers:
   packages/common:
     dependencies:
       '@dotlottie/dotlottie-js':
-        specifier: ^0.6.2
-        version: 0.6.2
-      '@lottiefiles/relottie':
-        specifier: 1.0.0
-        version: 1.0.0
-      '@lottiefiles/relottie-style':
-        specifier: 0.4.3
-        version: 0.4.3
+        specifier: ^0.7.0
+        version: 0.7.0
       '@preact/signals-core':
         specifier: ^1.2.3
         version: 1.4.0
@@ -2424,6 +2418,17 @@ packages:
       valibot: 0.13.1
     dev: false
 
+  /@dotlottie/dotlottie-js@0.7.0:
+    resolution: {integrity: sha512-K1v7x4Gch2JWriUlsYW3dmFbCi1/EQC3gSl/xuu1KD+qxwBnXWPaVXkx5tWsP5ZmfYuJq4YtPIySp6qeKeEd2A==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      browser-image-hash: 0.0.5
+      fflate: 0.8.1
+      sharp: 0.33.2
+      sharp-phash: 2.1.0(sharp@0.33.2)
+      valibot: 0.13.1
+    dev: false
+
   /@emnapi/runtime@0.45.0:
     resolution: {integrity: sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==}
     requiresBuild: true
@@ -3330,11 +3335,6 @@ packages:
     engines: {node: '>=12.22'}
     dev: true
 
-  /@humanwhocodes/momoa@2.0.3:
-    resolution: {integrity: sha512-SytjS6gJk+LXSWFuEm0V9ASdgxlX/BDq6A+6gfh7TaHM90xppBydjcM3SFaziZP4ikKmhUOhPkDi2KktzElnQQ==}
-    engines: {node: '>=10.10.0'}
-    dev: false
-
   /@humanwhocodes/object-schema@1.2.1:
     resolution: {integrity: sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==}
     dev: true
@@ -3683,28 +3683,6 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@lottiefiles/last-builder@1.0.0:
-    resolution: {integrity: sha512-j0kg/eBTfgkUR9BoOY+fcXpIAYpWynYblmR9K+s+S7b7teWAdZa8gyiTFpxmLBc5JA5SBHyQyolKVytMGc+LBw==}
-    engines: {node: '>=18'}
-    dependencies:
-      '@lottiefiles/last': 1.0.0
-      unist-builder: 3.0.0
-    dev: false
-
-  /@lottiefiles/last@1.0.0:
-    resolution: {integrity: sha512-kYN6WNglPtVDnupTiYiQCmExJS5PO4MFMeT495fd2RXcbXcWuIz2nVrzuJtwDXhSvsqydIxeTnEkrs6WchV2dg==}
-    engines: {node: '>=18'}
-    dev: false
-
-  /@lottiefiles/lottie-style-sheets@0.0.2:
-    resolution: {integrity: sha512-1ojHB9of9oq7CNljqUZwXBdV9SkrjIbOojezMA/2W+rsZG1h+KbnAvYjYfR2GLIQAT0BwVAwvk6dR71e9irozg==}
-    engines: {node: '>=18'}
-    dependencies:
-      postcss: 8.4.33
-      unist-builder: 3.0.1
-      unist-util-visit: 4.1.2
-    dev: false
-
   /@lottiefiles/lottie-types@1.2.1:
     resolution: {integrity: sha512-HOC5DTOKazRvr9UMQib5l+ZHebbBtoVbwtnoB9da6Ydm7SI+nuiG0xl587BRHBnDwRkGY12l3RhgT6T3qozqRA==}
     dependencies:
@@ -3722,50 +3700,6 @@ packages:
       prettier-plugin-sh: 0.8.1(prettier@2.7.1)
     dev: true
 
-  /@lottiefiles/relottie-parse@1.0.0:
-    resolution: {integrity: sha512-V1Ykdx82wqsO5dcuNJtofOe/BaObLHpBj2h0iWY2MkaePvgL98OR+sfSbi7oHtsfOOc1OefSrdfK1wwJJtvbpA==}
-    engines: {node: '>=18'}
-    dependencies:
-      '@humanwhocodes/momoa': 2.0.3
-      '@lottiefiles/last': 1.0.0
-      '@lottiefiles/last-builder': 1.0.0
-      lodash.merge: 4.6.2
-      unist-util-is: 5.1.1
-      vfile: 5.3.7
-    dev: false
-
-  /@lottiefiles/relottie-stringify@1.0.0:
-    resolution: {integrity: sha512-A97WD9bzF9HuonmdDnf2mvVbTWd9feqOCWXq8bKHoICoJ999j5IQXplMtxO9cShJmAFjii/SdV31n5THcwjcyw==}
-    engines: {node: '>=18'}
-    dependencies:
-      '@lottiefiles/last': 1.0.0
-    dev: false
-
-  /@lottiefiles/relottie-style@0.4.3:
-    resolution: {integrity: sha512-hH1SwA6bHJtwCTCxM5RMg3R7UWvk8/fNFFjtmqHxXkcGRQm0/4aeV2TRlxgf+kBqaqmkpxUQrwORf4tnDLBvYQ==}
-    engines: {node: '>=18'}
-    dependencies:
-      '@lottiefiles/lottie-style-sheets': 0.0.2
-      colord: 2.9.3
-      gradient-parser: 1.0.2
-      parsel-js: 1.1.1
-      postcss: 8.4.33
-      postcss-values-parser: 6.0.2(postcss@8.4.33)
-      unist-util-is: 5.2.1
-      unist-util-visit: 4.1.2
-      vfile: 5.3.7
-    dev: false
-
-  /@lottiefiles/relottie@1.0.0:
-    resolution: {integrity: sha512-UXE1XaiQBvdrEihjIUIE71cCmvVUH1uwrs5am/ERIlatqfZ2IhMS3Z1zarg9wdQ1f+YRDigqLVI2sKiGm8oqXg==}
-    engines: {node: '>=18'}
-    dependencies:
-      '@lottiefiles/last': 1.0.0
-      '@lottiefiles/relottie-parse': 1.0.0
-      '@lottiefiles/relottie-stringify': 1.0.0
-      unified: 10.1.2
-    dev: false
-
   /@lottiefiles/remark-preset@1.0.0(puppeteer@21.7.0)(remark@15.0.1):
     resolution: {integrity: sha512-uvBQtJOZzWlWf5A45OA+PE3/yFaoZzxHWTIjG5p508qqHxsrLibDNp9JtQh5W0zBhfSX+ErcqZHWnP/tbRYf1Q==}
     engines: {node: '>= 14'}
@@ -5505,6 +5439,7 @@ packages:
 
   /@types/unist@2.0.7:
     resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==}
+    dev: true
 
   /@types/unist@3.0.2:
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
@@ -6874,6 +6809,7 @@ packages:
 
   /bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
+    dev: true
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -7470,6 +7406,7 @@ packages:
 
   /colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
+    dev: true
 
   /colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
@@ -10013,6 +9950,7 @@ packages:
 
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
+    dev: true
 
   /extendable-error@0.1.7:
     resolution: {integrity: sha512-UOiS2in6/Q0FK0R0q6UY9vYpQ21mr/Qn1KOnte7vsACuNJf514WvCCUHSRCPcgjPT2bAhNIJdlE6bVap1GKmeg==}
@@ -10710,11 +10648,6 @@ packages:
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
-  /gradient-parser@1.0.2:
-    resolution: {integrity: sha512-gR6nY33xC9yJoH4wGLQtZQMXDi6RI3H37ERu7kQCVUzlXjNedpZM7xcA489Opwbq0BSGohtWGsWsntupmxelMg==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
   /grapheme-splitter@1.0.4:
     resolution: {integrity: sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==}
 
@@ -11299,6 +11232,7 @@ packages:
   /is-buffer@2.0.5:
     resolution: {integrity: sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==}
     engines: {node: '>=4'}
+    dev: true
 
   /is-builtin-module@3.2.1:
     resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==}
@@ -11440,6 +11374,7 @@ packages:
   /is-plain-obj@4.1.0:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
+    dev: true
 
   /is-primitive@3.0.1:
     resolution: {integrity: sha512-GljRxhWvlCNRfZyORiH77FwdFwGcMO620o37EOYC0ORWdq+WYNVqW0w2Juzew4M+L81l6/QS3t5gkkihyRqv9w==}
@@ -11528,11 +11463,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /is-url-superb@4.0.0:
-    resolution: {integrity: sha512-GI+WjezhPPcbM+tqE9LnmsY5qqjwHzTvjJ36wxYX5ujNXefSUJ/T17r5bqDV8yLhcgB59KTPNOc9O9cmHTPWsA==}
-    engines: {node: '>=10'}
-    dev: false
-
   /is-url@1.2.4:
     resolution: {integrity: sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==}
     dev: true
@@ -12145,6 +12075,7 @@ packages:
 
   /lodash.merge@4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
+    dev: true
 
   /lodash.mergewith@4.6.2:
     resolution: {integrity: sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==}
@@ -14753,10 +14684,6 @@ packages:
     resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
     dev: true
 
-  /parsel-js@1.1.1:
-    resolution: {integrity: sha512-OYBQnHBNEPLjpxogjr+1lwL6J7cc1zlBeAsfVQSFBVQchKWl3IRZivczr4EpCozXCnXVLUkB+qY79WRReGPu0Q==}
-    dev: false
-
   /parseurl@1.3.3:
     resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==}
     engines: {node: '>= 0.8'}
@@ -15225,18 +15152,6 @@ packages:
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
-  /postcss-values-parser@6.0.2(postcss@8.4.33):
-    resolution: {integrity: sha512-YLJpK0N1brcNJrs9WatuJFtHaV9q5aAOj+S4DI5S7jgHlRfm0PIbDCAFRYMQD5SHq7Fy6xsDhyutgS0QOAs0qw==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      postcss: '>=8.4.31'
-    dependencies:
-      color-name: 1.1.4
-      is-url-superb: 4.0.0
-      postcss: 8.4.33
-      quote-unquote: 1.0.0
-    dev: false
-
   /postcss@8.4.31:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
@@ -15582,10 +15497,6 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
-  /quote-unquote@1.0.0:
-    resolution: {integrity: sha512-twwRO/ilhlG/FIgYeKGFqyHhoEhqgnKVkcmqMKi2r524gz3ZbDTcyFt38E9xjJI2vT+KbRNHVbnJ/e0I25Azwg==}
-    dev: false
-
   /radix3@1.1.0:
     resolution: {integrity: sha512-pNsHDxbGORSvuSScqNJ+3Km6QAVqk8CfsCBIEoDgpqLrkD2f3QM4I7d1ozJJ172OmIcoUcerZaNWqtLkRXTV3A==}
     dev: true
@@ -17961,6 +17872,7 @@ packages:
 
   /trough@2.1.0:
     resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
+    dev: true
 
   /ts-dedent@2.2.0:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
@@ -18580,6 +18492,7 @@ packages:
       is-plain-obj: 4.1.0
       trough: 2.1.0
       vfile: 5.3.7
+    dev: true
 
   /unified@11.0.4:
     resolution: {integrity: sha512-apMPnyLjAX+ty4OrNap7yumyVAMlKx5IWU2wlzzUdYJO9A8f1p9m/gywF/GM2ZDFcjQPrx59Mc90KwmxsoklxQ==}
@@ -18698,12 +18611,7 @@ packages:
     resolution: {integrity: sha512-GFxmfEAa0vi9i5sd0R2kcrI9ks0r82NasRq5QHh2ysGngrc6GiqD5CDf1FjPenY4vApmFASBIIlk/jj5J5YbmQ==}
     dependencies:
       '@types/unist': 2.0.7
-
-  /unist-builder@3.0.1:
-    resolution: {integrity: sha512-gnpOw7DIpCA0vpr6NqdPvTWnlPTApCTRzr+38E6hCWx3rz/cjo83SsKIlS1Z+L5ttScQ2AwutNnb8+tAvpb6qQ==}
-    dependencies:
-      '@types/unist': 2.0.7
-    dev: false
+    dev: true
 
   /unist-util-generated@2.0.1:
     resolution: {integrity: sha512-qF72kLmPxAw0oN2fwpWIqbXAVyEqUzDHMsbtPvOudIlUzXYFIeQIuxXQCRCFh22B7cixvU0MG7m3MW8FTq/S+A==}
@@ -18719,14 +18627,11 @@ packages:
     resolution: {integrity: sha512-ZOQSsnce92GrxSqlnEEseX0gi7GH9zTJZ0p9dtu87WRb/37mMPO2Ilx1s/t9vBHrFhbgweUwb+t7cIn5dxPhZg==}
     dev: true
 
-  /unist-util-is@5.1.1:
-    resolution: {integrity: sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ==}
-    dev: false
-
   /unist-util-is@5.2.1:
     resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==}
     dependencies:
       '@types/unist': 2.0.7
+    dev: true
 
   /unist-util-is@6.0.0:
     resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==}
@@ -18763,6 +18668,7 @@ packages:
     resolution: {integrity: sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==}
     dependencies:
       '@types/unist': 2.0.7
+    dev: true
 
   /unist-util-stringify-position@4.0.0:
     resolution: {integrity: sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==}
@@ -18789,6 +18695,7 @@ packages:
     dependencies:
       '@types/unist': 2.0.7
       unist-util-is: 5.2.1
+    dev: true
 
   /unist-util-visit-parents@6.0.1:
     resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==}
@@ -18819,6 +18726,7 @@ packages:
       '@types/unist': 2.0.7
       unist-util-is: 5.2.1
       unist-util-visit-parents: 5.1.3
+    dev: true
 
   /unist-util-visit@5.0.0:
     resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==}
@@ -19162,6 +19070,7 @@ packages:
     dependencies:
       '@types/unist': 2.0.7
       unist-util-stringify-position: 3.0.3
+    dev: true
 
   /vfile-message@4.0.2:
     resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
@@ -19222,6 +19131,7 @@ packages:
       is-buffer: 2.0.5
       unist-util-stringify-position: 3.0.3
       vfile-message: 3.1.4
+    dev: true
 
   /vfile@6.0.1:
     resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==}

From 9b83119d7bc02288ccbce0d2eb6fe00bf7b2cb9e Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Mon, 12 Feb 2024 12:24:16 +0700
Subject: [PATCH 2/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20changelog?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/wise-lions-argue.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/wise-lions-argue.md

diff --git a/.changeset/wise-lions-argue.md b/.changeset/wise-lions-argue.md
new file mode 100644
index 00000000..4d37a5fb
--- /dev/null
+++ b/.changeset/wise-lions-argue.md
@@ -0,0 +1,5 @@
+---
+'@dotlottie/common': patch
+---
+
+refactor: 💡 theming from lss to lottie slots

From 275eaf1b5a32a9627a1082695818d7faadae9a18 Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Mon, 12 Feb 2024 14:48:36 +0700
Subject: [PATCH 3/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20dotlottie-?=
 =?UTF-8?q?js?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/dotlottie-playground/package.json            |  2 +-
 .../src/hooks/use-dotlottie.tsx                   |  2 +-
 pnpm-lock.yaml                                    | 15 ++-------------
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/apps/dotlottie-playground/package.json b/apps/dotlottie-playground/package.json
index 380efe1c..10d5ed82 100644
--- a/apps/dotlottie-playground/package.json
+++ b/apps/dotlottie-playground/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@dotlottie/dotlottie-js": "^0.6.2",
+    "@dotlottie/dotlottie-js": "^0.7.0",
     "@dotlottie/react-player": "workspace:^",
     "@lottiefiles/lottie-types": "^1.2.0",
     "@monaco-editor/react": "^4.5.1",
diff --git a/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx b/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx
index 4095b928..616fa302 100644
--- a/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx
+++ b/apps/dotlottie-playground/src/hooks/use-dotlottie.tsx
@@ -148,7 +148,7 @@ export const DotLottieProvider: React.FC<{ children: ReactNode }> = ({ children
       dotLottie.removeTheme(themeId);
       dotLottie.addTheme({
         id: themeId,
-        data: theme,
+        data: JSON.parse(theme),
       });
       fetchAndUpdateDotLottie();
       buildAndUpdateUrl();
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 12ccf880..4af01eac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -90,8 +90,8 @@ importers:
   apps/dotlottie-playground:
     dependencies:
       '@dotlottie/dotlottie-js':
-        specifier: ^0.6.2
-        version: 0.6.2
+        specifier: ^0.7.0
+        version: 0.7.0
       '@dotlottie/react-player':
         specifier: workspace:^
         version: link:../../packages/react-player
@@ -2407,17 +2407,6 @@ packages:
       - supports-color
     dev: true
 
-  /@dotlottie/dotlottie-js@0.6.2:
-    resolution: {integrity: sha512-3UGG60r7Dz868KvPYIBhuO6HPX2M5CpcXulXilLbQZ91eWKkF+amoJSdkSfdLtWjjcwu/jSgeErAercxC2StBw==}
-    engines: {node: '>=18.0.0'}
-    dependencies:
-      browser-image-hash: 0.0.5
-      fflate: 0.8.1
-      sharp: 0.33.2
-      sharp-phash: 2.1.0(sharp@0.33.2)
-      valibot: 0.13.1
-    dev: false
-
   /@dotlottie/dotlottie-js@0.7.0:
     resolution: {integrity: sha512-K1v7x4Gch2JWriUlsYW3dmFbCi1/EQC3gSl/xuu1KD+qxwBnXWPaVXkx5tWsP5ZmfYuJq4YtPIySp6qeKeEd2A==}
     engines: {node: '>=18.0.0'}

From 049c939bf372324ecf808e75e25071d7e7bc1350 Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Mon, 12 Feb 2024 16:40:30 +0700
Subject: [PATCH 4/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20update=20theming=20?=
 =?UTF-8?q?example?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/react-player-test/src/pages/Home.tsx | 4 ++--
 packages/common/src/dotlottie-player.ts   | 8 +++-----
 packages/react-player/src/controls.tsx    | 2 +-
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/apps/react-player-test/src/pages/Home.tsx b/apps/react-player-test/src/pages/Home.tsx
index d08bd92d..e306af00 100644
--- a/apps/react-player-test/src/pages/Home.tsx
+++ b/apps/react-player-test/src/pages/Home.tsx
@@ -10,7 +10,7 @@ import { ThemeContext } from '../App';
 const lotties = [
   {
     from: 'Multiple themes (.lottie)',
-    src: 'https://lottie.host/c7029f2f-d015-4d88-93f6-7693bf88692b/d7j8UjWsGt.lottie',
+    src: 'https://lottie.host/7ebddb46-c455-4191-ab23-b351ad9f4208/oX63nkjFYw.lottie',
   },
   {
     from: '.lottie',
@@ -133,7 +133,7 @@ const Item: React.FC<ItemProps> = (props: ItemProps) => {
               <option value="">Please select a theme</option>
               {activeAnimationId
                 ? themes
-                  .filter((theme) => theme.animations.includes(activeAnimationId))
+                  .filter((theme) => theme.animations.includes(activeAnimationId) || theme.animations.length === 0)
                   .map((theme) => {
                     return (
                       <option key={theme.id} value={theme.id}>
diff --git a/packages/common/src/dotlottie-player.ts b/packages/common/src/dotlottie-player.ts
index baf788dc..e832d9f9 100644
--- a/packages/common/src/dotlottie-player.ts
+++ b/packages/common/src/dotlottie-player.ts
@@ -1780,11 +1780,9 @@ export class DotLottieCommonPlayer {
     ]);
 
     if (theme && this._animation) {
-      this._animation = {
-        ...this._animation,
-        // @ts-ignore
-        slots: theme,
-      };
+      this._animation = deepCloneLottieJson(this._animation);
+      // @ts-ignore
+      this._animation['slots'] = theme;
     } else {
       this._animation = await this._dotLottieLoader.getAnimation(this._currentAnimationId ?? '');
     }
diff --git a/packages/react-player/src/controls.tsx b/packages/react-player/src/controls.tsx
index 1939af94..df25f577 100644
--- a/packages/react-player/src/controls.tsx
+++ b/packages/react-player/src/controls.tsx
@@ -52,7 +52,7 @@ export const Controls: React.FC<ControlsProps> = ({ buttons = AVAILABLE_BUTTONS,
       selected: currentAnimationId === anim.id,
     }));
     const _themes = themes
-      .filter((theme) => theme.animations.includes(currentAnimationId || ''))
+      .filter((theme) => theme.animations.length === 0 || theme.animations.includes(currentAnimationId || ''))
       .map((theme) => ({ value: theme.id, selected: defaultTheme === theme.id }));
 
     const _states = states.map((state) => ({ value: state, selected: activeStateId === state }));

From 2714254602fce4bae02d7de12f3eee89ff0d7c0c Mon Sep 17 00:00:00 2001
From: Abdelrahman Ashraf <a.theashraf@gmail.com>
Date: Mon, 12 Feb 2024 20:18:07 +0700
Subject: [PATCH 5/5] =?UTF-8?q?chore:=20=F0=9F=A4=96=20add=20a=20default?=
 =?UTF-8?q?=20theming=20example=20to=20playground?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../public/theming_example.lottie                | Bin 0 -> 1469 bytes
 apps/dotlottie-playground/src/app.tsx            |   4 ++++
 2 files changed, 4 insertions(+)
 create mode 100644 apps/dotlottie-playground/public/theming_example.lottie

diff --git a/apps/dotlottie-playground/public/theming_example.lottie b/apps/dotlottie-playground/public/theming_example.lottie
new file mode 100644
index 0000000000000000000000000000000000000000..44792e5a90e59055cdb8c7906850666163a75c1e
GIT binary patch
literal 1469
zcmWIWW@Zs#0D<EReIi_ze@TsIWMBYcUZ7ZRVqRuiYH^8PR&jn_wNhDXQE_H|o|2W4
zp`L+~j#5!-StdllP)8{{wX!_FD5V%Eo04DRlV4JjnF>^sSXz>iUj!6{h`43uq!t5(
z(^K<OixNw~G7doXIbikraF%XXv3_2DN~(i_o~fQ8$eg^)+{6-~?LZ5ntCccSfJVZ_
zfbuDsMXAXkc_k~LV~Pt>Q-Lagtb&}xN?)KsK;?P)MY)MNK(#sf`2|W=B}JvFVE5&N
z)WG-|`9NPPS*0cB6a!^5^GZ^Sax;q|zBH(f1!@4=QkLonbB-svLrOAIbAeujI}*%C
z_W+X9V{2n;1E8_M0gi>bJr`%rU}9h><Yr)y1jYi~o5lKYCOAg6hWX~-HsJZI-FmJ`
z(Y0*Ok8QlK^{m(K7CrbNH81N(Cv)`g7d?Nz+j<55nP^e?Ol+-c>!KCzpC*<at=rh~
z^WGWZp3T0ClEp%ESZ_X$d2O=OfAf+()!#qz?Y@yT<67CTMD@K(D$m~xKB%N>;a#qC
zXiD-duXA;qJ-Q@W&gX5s``}3RrtoQ<dXZmtJkaTmpVV|s)O))@@8n;tu653PkFW}?
zUl_V^4jV(0?SqL<42<7;d#0>W75Z~9sKR(@0k@9awE%OqH|yrK9gmGl4wt^&;_)Ee
zb$|0rQH}a{oTia)3YYn4^4))|^E>Q`)wRrhOA`+K>?$e!X#B9mlR4*sa74^C?rn{3
zKV#QyRnDDZ#Gu4ro9-UBS&=zAMXxzdx%q$qv)kg2))@-3%--sKyI|~M%l0*};LpWM
z=l&?ZtPh8i`yVE4`YQ8Y=(PDGN$qLVE_t{gKcFHa<8OUE^_RKjvz@F>3NcELzBozz
z+N5+fGc3>GanYhF;(bO>J_Si<rL{RsTBLb{-Q~H!t>rumU8iTTo|?Vbl0)C*af(#Y
zO}-CC=RY+m)daoJ-C85AAABdNxvygOX?p{$vwq52D?@rdUx`<H`|s0*>+#2yU0^+K
zHgThk0$>00gBAvTEPOtbnI@S0%rADkyDnHgqfz4o!%p?DjZ<Yf`u^X3y+ghALG0n&
z5ATl@W|-XBKI7Gtp!f-=tiuET=iXAib>#Wf+}&^Xv*sP|6nn>J_{#d_fv3wdmp+`6
zk(~AU^wuz?rTj5pBOcrRbtuq%^slNrK-tbw&uIR<=nnf2qT93@3|hIb-_LyJ+|#z}
z<vO-~m$S~Zsi`Ymy7KtI6N|;O=2-Q=Fsb^x(fa*CO9|C5*{z#uFJJt=zRfx9=gRqh
z6Y?J=<?hcD|6PxooHyh?+?NDQ#z%ly5QrfeL?29nlkw^>FRwEvJN?g{KdB$IX;qjO
zgJ7pu7@L*XO|P(vY*lSmZB}em%dFZqZry4naP%i@=gFC>Q)is&<$aLV^~qbv+vxLW
z15w2*BI#jElQv$yaK(YWL-E_v$3dx?2@9ByID~Fx2=HcP5@Eny&H-J81W-yngjVdC
s6QQpSSZKoYCwf*zHwHaW5XOYEU<slCZ&o&t5@sMg2&A6@6)`XX0K?5h{Qv*}

literal 0
HcmV?d00001

diff --git a/apps/dotlottie-playground/src/app.tsx b/apps/dotlottie-playground/src/app.tsx
index d2ca3b2a..ecb551aa 100644
--- a/apps/dotlottie-playground/src/app.tsx
+++ b/apps/dotlottie-playground/src/app.tsx
@@ -15,6 +15,10 @@ const SAMPLE_FILES = [
   { name: 'toggle.lottie', path: `${import.meta.env.BASE_URL}toggle.lottie` },
   { name: 'interactivity_example.lottie', path: `${import.meta.env.BASE_URL}interactivity_example.lottie` },
   { name: 'aniki_hamster.lottie', path: `${import.meta.env.BASE_URL}aniki_hamster.lottie` },
+  {
+    name: 'theming_example.lottie',
+    path: `${import.meta.env.BASE_URL}theming_example.lottie`,
+  },
 ];
 
 interface HomeScreenProps {