From c17cc1e5249b2e7e5446dfca4c6935a6be2dc486 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Mon, 15 Dec 2025 12:15:53 +0100
Subject: [PATCH 01/10] feat: add OclReset and improves form css

---
 src/components/svg/svg_editor.css.ts       | 30 ++++++++++++++
 src/components/svg/svg_editor.tsx          | 47 +++++++++++++---------
 src/styling/reset/ocl_reset.tsx            | 32 +++++++++++++++
 src/styling/reset/ocl_reset_context.tsx    |  3 ++
 src/styling/reset/ocl_reset_css.ts         | 10 +++++
 src/styling/use_css.ts                     | 33 +++++++++++++++
 stories/svg_editors/svg_editor.stories.tsx | 10 +++++
 7 files changed, 145 insertions(+), 20 deletions(-)
 create mode 100644 src/components/svg/svg_editor.css.ts
 create mode 100644 src/styling/reset/ocl_reset.tsx
 create mode 100644 src/styling/reset/ocl_reset_context.tsx
 create mode 100644 src/styling/reset/ocl_reset_css.ts
 create mode 100644 src/styling/use_css.ts

diff --git a/src/components/svg/svg_editor.css.ts b/src/components/svg/svg_editor.css.ts
new file mode 100644
index 0000000..293ecb2
--- /dev/null
+++ b/src/components/svg/svg_editor.css.ts
@@ -0,0 +1,30 @@
+export const atomLabelEditCss = `
+form.react-ocl-atom-label-edit {
+  position: absolute;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: repeat(4, 1.5em);
+  align-items: stretch;
+  gap: 0.25em;
+  border: 1px solid lightgray;
+  background-color: white;
+  padding: 0.25em;
+}
+
+form.react-ocl-atom-label-edit button.react-ocl {
+  padding: 0.25em;
+  background-color: #efefef;
+  border: none;
+  border-radius: 5px;
+}
+
+form.react-ocl-atom-label-edit input.react-ocl {
+  padding: 0.25em;
+  border: solid 1px lightgrey;
+  border-radius: 3px;
+}
+
+form.react-ocl-atom-label-edit input.react-ocl:focus {
+  outline: auto;
+}
+`;
diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index 8f7f017..685ec82 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -7,6 +7,7 @@ import type {
 import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 import { useRefUpToDate } from '../../hooks/use_ref_up_to_date.js';
+import { useCSS } from '../../styling/use_css.ts';
 import type { BaseEditorProps } from '../types.js';
 
 import {
@@ -22,6 +23,7 @@ import {
 import type { State } from './editor/reducer.js';
 import { stateReducer } from './editor/reducer.js';
 import { useHighlight } from './editor/use_highlight.js';
+import { atomLabelEditCss } from './svg_editor.css.ts';
 import type { SvgRendererProps } from './svg_renderer.js';
 import { SvgRenderer } from './svg_renderer.js';
 
@@ -275,30 +277,30 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
     input.focus();
   }
 
+  useCSS(atomLabelEditCss, 'react-ocl-atom-label-edit-stable');
+  useCSS(
+    `
+      form.react-ocl-atom-label-edit {
+        top: ${formCoords.y}px;
+        left: ${formCoords.x}px;
+        grid-template-areas: 
+          "input input input input submit cancel"
+          "${greeksFirstLine.join(' ')}"
+          "${greeksLastLine.join(' ')} . ${primeNames.join(' ')}";
+      }
+    `,
+    'react-ocl-atom-label-edit-dynamic',
+  );
+
   return (
     <form
       ref={formRef}
       onSubmit={onFormSubmit}
       onKeyDown={onKeyDown}
-      style={{
-        position: 'absolute',
-        top: formCoords.y,
-        left: formCoords.x,
-        display: 'grid',
-        gridTemplateAreas: `
-          "input input input input submit cancel"
-          "${greeksFirstLine.join(' ')}"
-          "${greeksLastLine.join(' ')} . ${primeNames.join(' ')}"
-        `,
-        gridTemplateColumns: 'repeat(4, 1.5em)',
-        alignItems: 'stretch',
-        gap: '0.25em',
-        border: '1px solid lightgray',
-        backgroundColor: 'white',
-        padding: '0.25em',
-      }}
+      className="react-ocl react-ocl-atom-label-edit"
     >
       <input
+        className="react-ocl"
         style={{ gridArea: 'input' }}
         type="text"
         name="label"
@@ -307,13 +309,16 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
         autoFocus
         ref={autoSelectText}
       />
-      <input
+      <button
+        className="react-ocl"
         style={{ gridArea: 'submit' }}
         type="submit"
-        value="✔️"
         aria-label="Submit"
-      />
+      >
+        ✔️
+      </button>
       <button
+        className="react-ocl"
         style={{ gridArea: 'cancel' }}
         type="button"
         aria-label="Cancel"
@@ -324,6 +329,7 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
 
       {Object.entries(greekLetters).map(([charName, greekChar]) => (
         <button
+          className="react-ocl"
           key={charName}
           type="submit"
           style={{ gridArea: charName }}
@@ -335,6 +341,7 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
 
       {Object.entries(primes).map(([primeName, primeChar]) => (
         <button
+          className="react-ocl"
           key={primeName}
           type="submit"
           style={{ gridArea: primeName }}
diff --git a/src/styling/reset/ocl_reset.tsx b/src/styling/reset/ocl_reset.tsx
new file mode 100644
index 0000000..83eaa4b
--- /dev/null
+++ b/src/styling/reset/ocl_reset.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { useLayoutEffect } from 'react';
+
+import { useCSS } from '../use_css.ts';
+
+import { OclResetContext } from './ocl_reset_context.tsx';
+import { oclResetCss } from './ocl_reset_css.ts';
+
+export interface OclResetProps {
+  children: ReactNode;
+}
+
+// eslint-disable-next-line jsdoc/require-returns
+/**
+ * Enable react-ocl-reset styles.
+ * @param props - The children to render
+ */
+export function OclReset(props: OclResetProps) {
+  useLayoutEffect(() => {
+    document.body.classList.add('react-ocl-reset');
+
+    return () => {
+      document.body.classList.remove('react-ocl-reset');
+    };
+  }, []);
+
+  useCSS(oclResetCss, 'react-ocl-reset');
+
+  return (
+    <OclResetContext.Provider value>{props.children}</OclResetContext.Provider>
+  );
+}
diff --git a/src/styling/reset/ocl_reset_context.tsx b/src/styling/reset/ocl_reset_context.tsx
new file mode 100644
index 0000000..ddfd610
--- /dev/null
+++ b/src/styling/reset/ocl_reset_context.tsx
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const OclResetContext = createContext(false);
diff --git a/src/styling/reset/ocl_reset_css.ts b/src/styling/reset/ocl_reset_css.ts
new file mode 100644
index 0000000..5e73288
--- /dev/null
+++ b/src/styling/reset/ocl_reset_css.ts
@@ -0,0 +1,10 @@
+export const oclResetCss = `
+.react-ocl-reset input.react-ocl, .react-ocl-reset button.react-ocl {
+  border: none;
+  outline: none;
+  background: none;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+`;
diff --git a/src/styling/use_css.ts b/src/styling/use_css.ts
new file mode 100644
index 0000000..688ee1e
--- /dev/null
+++ b/src/styling/use_css.ts
@@ -0,0 +1,33 @@
+import { useId, useInsertionEffect, useRef } from 'react';
+
+/**
+ * Little util to inject CSS into the head.
+ * @param css - The CSS to inject.
+ * @param prefixId - An optional prefix to add to the id of the style element.
+ */
+export function useCSS(css: string, prefixId?: string) {
+  // const $styleRef = useRef<HTMLStyleElement>(undefined);
+  // const id = useId();
+  // const finalId = prefixId ? `${prefixId}-${id}` : id;
+
+  useInsertionEffect(() => {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(css);
+
+    document.adoptedStyleSheets.push(sheet);
+    return () => {
+      const index = document.adoptedStyleSheets.indexOf(sheet);
+      if (index === -1) return;
+      document.adoptedStyleSheets.splice(index, 1);
+    };
+
+    // const $style = document.createElement('style');
+    // $style.innerHTML = css;
+    // $style.id = finalId;
+    //
+    // document.head.append($style);
+    // $styleRef.current = $style;
+    //
+    // return () => $style.remove();
+  }, [css]);
+}
diff --git a/stories/svg_editors/svg_editor.stories.tsx b/stories/svg_editors/svg_editor.stories.tsx
index 190ec03..7181edd 100644
--- a/stories/svg_editors/svg_editor.stories.tsx
+++ b/stories/svg_editors/svg_editor.stories.tsx
@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 import { SvgEditor } from '../../src/index.js';
+import { OclReset } from '../../src/styling/reset/ocl_reset.tsx';
 import { molecule as defaultBaseMolecule } from '../data.js';
 
 const defaultMolecule = defaultBaseMolecule.getCompactCopy();
@@ -21,3 +22,12 @@ export default {
 type Story = StoryObj<typeof SvgEditor>;
 
 export const Control: Story = {};
+export const WithCssReset: Story = {
+  decorators: (Story) => {
+    return (
+      <OclReset>
+        <Story />
+      </OclReset>
+    );
+  },
+};

From 2610a2bf8bf6fd021a42a8c4854fb4f13d06e860 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Mon, 15 Dec 2025 12:33:19 +0100
Subject: [PATCH 02/10] chore: simplify useCSS

---
 src/components/svg/svg_editor.css.ts | 25 ++++++++++++++++++
 src/components/svg/svg_editor.tsx    | 39 +++-------------------------
 src/styling/reset/ocl_reset.tsx      |  2 +-
 src/styling/use_css.ts               | 20 +++-----------
 4 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/src/components/svg/svg_editor.css.ts b/src/components/svg/svg_editor.css.ts
index 293ecb2..4f01522 100644
--- a/src/components/svg/svg_editor.css.ts
+++ b/src/components/svg/svg_editor.css.ts
@@ -1,9 +1,34 @@
+export const greekLetters = {
+  alpha: 'α',
+  beta: 'β',
+  gamma: 'γ',
+  delta: 'δ',
+  epsilon: 'ε',
+  zeta: 'ζ',
+  eta: 'η',
+  theta: 'θ',
+} as const;
+const greekLetterNames = Object.keys(greekLetters);
+const greeksFirstLine = greekLetterNames.slice(0, 6);
+const greeksLastLine = greekLetterNames.slice(6);
+
+export const primes = {
+  prime1: '′',
+  prime2: '″',
+  prime3: '‴',
+};
+const primeNames = Object.keys(primes);
+
 export const atomLabelEditCss = `
 form.react-ocl-atom-label-edit {
   position: absolute;
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(4, 1.5em);
+  grid-template-areas: 
+    "input input input input submit cancel"
+    "${greeksFirstLine.join(' ')}"
+    "${greeksLastLine.join(' ')} . ${primeNames.join(' ')}";
   align-items: stretch;
   gap: 0.25em;
   border: 1px solid lightgray;
diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index 685ec82..bbf96fc 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -23,7 +23,7 @@ import {
 import type { State } from './editor/reducer.js';
 import { stateReducer } from './editor/reducer.js';
 import { useHighlight } from './editor/use_highlight.js';
-import { atomLabelEditCss } from './svg_editor.css.ts';
+import { atomLabelEditCss, greekLetters, primes } from './svg_editor.css.ts';
 import type { SvgRendererProps } from './svg_renderer.js';
 import { SvgRenderer } from './svg_renderer.js';
 
@@ -183,26 +183,6 @@ interface AtomLabelEditFormProps {
   onCancel: () => void;
 }
 
-const greekLetters = {
-  alpha: 'α',
-  beta: 'β',
-  gamma: 'γ',
-  delta: 'δ',
-  epsilon: 'ε',
-  zeta: 'ζ',
-  eta: 'η',
-  theta: 'θ',
-} as const;
-const greekLetterNames = Object.keys(greekLetters);
-const greeksFirstLine = greekLetterNames.slice(0, 6);
-const greeksLastLine = greekLetterNames.slice(6);
-const primes = {
-  prime1: '′',
-  prime2: '″',
-  prime3: '‴',
-};
-const primeNames = Object.keys(primes);
-
 function AtomLabelEditForm(props: AtomLabelEditFormProps) {
   const { defaultValue, formCoords, onSubmit, onCancel } = props;
 
@@ -277,27 +257,14 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
     input.focus();
   }
 
-  useCSS(atomLabelEditCss, 'react-ocl-atom-label-edit-stable');
-  useCSS(
-    `
-      form.react-ocl-atom-label-edit {
-        top: ${formCoords.y}px;
-        left: ${formCoords.x}px;
-        grid-template-areas: 
-          "input input input input submit cancel"
-          "${greeksFirstLine.join(' ')}"
-          "${greeksLastLine.join(' ')} . ${primeNames.join(' ')}";
-      }
-    `,
-    'react-ocl-atom-label-edit-dynamic',
-  );
-
+  useCSS(atomLabelEditCss);
   return (
     <form
       ref={formRef}
       onSubmit={onFormSubmit}
       onKeyDown={onKeyDown}
       className="react-ocl react-ocl-atom-label-edit"
+      style={{ top: formCoords.y, left: formCoords.x }}
     >
       <input
         className="react-ocl"
diff --git a/src/styling/reset/ocl_reset.tsx b/src/styling/reset/ocl_reset.tsx
index 83eaa4b..b132c8d 100644
--- a/src/styling/reset/ocl_reset.tsx
+++ b/src/styling/reset/ocl_reset.tsx
@@ -24,7 +24,7 @@ export function OclReset(props: OclResetProps) {
     };
   }, []);
 
-  useCSS(oclResetCss, 'react-ocl-reset');
+  useCSS(oclResetCss);
 
   return (
     <OclResetContext.Provider value>{props.children}</OclResetContext.Provider>
diff --git a/src/styling/use_css.ts b/src/styling/use_css.ts
index 688ee1e..32962e4 100644
--- a/src/styling/use_css.ts
+++ b/src/styling/use_css.ts
@@ -1,33 +1,21 @@
-import { useId, useInsertionEffect, useRef } from 'react';
+import { useInsertionEffect } from 'react';
 
 /**
  * Little util to inject CSS into the head.
  * @param css - The CSS to inject.
- * @param prefixId - An optional prefix to add to the id of the style element.
  */
-export function useCSS(css: string, prefixId?: string) {
-  // const $styleRef = useRef<HTMLStyleElement>(undefined);
-  // const id = useId();
-  // const finalId = prefixId ? `${prefixId}-${id}` : id;
-
+export function useCSS(css: string) {
   useInsertionEffect(() => {
     const sheet = new CSSStyleSheet();
     sheet.replaceSync(css);
 
     document.adoptedStyleSheets.push(sheet);
+
     return () => {
       const index = document.adoptedStyleSheets.indexOf(sheet);
       if (index === -1) return;
+
       document.adoptedStyleSheets.splice(index, 1);
     };
-
-    // const $style = document.createElement('style');
-    // $style.innerHTML = css;
-    // $style.id = finalId;
-    //
-    // document.head.append($style);
-    // $styleRef.current = $style;
-    //
-    // return () => $style.remove();
   }, [css]);
 }

From c1e06c4f9721dbbc1a25f8ed5f5bc0d7272f2609 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Mon, 15 Dec 2025 15:09:31 +0100
Subject: [PATCH 03/10] chore: add OclReset export

---
 src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/index.ts b/src/index.ts
index e5d3ed6..97eebde 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,6 +6,7 @@ export * from './components/svg/molfile/molfile_svg_editor.js';
 export * from './components/svg/smiles_svg_renderer.js';
 export * from './components/canvas/canvas_editor.js';
 export * from './components/canvas/canvas_editor_hook.js';
+export { OclReset, type OclResetProps } from './styling/reset/ocl_reset.js';
 
 export type {
   BaseSvgRendererProps,

From 218066c94c8449af89a0ee6b3052f8ab69bb5d7d Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Mon, 15 Dec 2025 17:06:21 +0100
Subject: [PATCH 04/10] refactor: use `<style>` instead

---
 src/components/svg/svg_editor.tsx |  4 ++--
 src/styling/inline_stylesheet.tsx | 15 +++++++++++++++
 src/styling/reset/ocl_reset.tsx   |  9 +++++----
 src/styling/use_css.ts            | 21 ---------------------
 4 files changed, 22 insertions(+), 27 deletions(-)
 create mode 100644 src/styling/inline_stylesheet.tsx
 delete mode 100644 src/styling/use_css.ts

diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index bbf96fc..fa6b139 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -7,7 +7,7 @@ import type {
 import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 import { useRefUpToDate } from '../../hooks/use_ref_up_to_date.js';
-import { useCSS } from '../../styling/use_css.ts';
+import { InlineStylesheet } from '../../styling/inline_stylesheet.tsx';
 import type { BaseEditorProps } from '../types.js';
 
 import {
@@ -257,7 +257,6 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
     input.focus();
   }
 
-  useCSS(atomLabelEditCss);
   return (
     <form
       ref={formRef}
@@ -266,6 +265,7 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
       className="react-ocl react-ocl-atom-label-edit"
       style={{ top: formCoords.y, left: formCoords.x }}
     >
+      <InlineStylesheet>{atomLabelEditCss}</InlineStylesheet>
       <input
         className="react-ocl"
         style={{ gridArea: 'input' }}
diff --git a/src/styling/inline_stylesheet.tsx b/src/styling/inline_stylesheet.tsx
new file mode 100644
index 0000000..c4e0533
--- /dev/null
+++ b/src/styling/inline_stylesheet.tsx
@@ -0,0 +1,15 @@
+export interface InlineStylesheetProps {
+  children: string;
+}
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+export function InlineStylesheet(props: InlineStylesheetProps) {
+  const { children } = props;
+
+  return (
+    // https://react.dev/reference/react-dom/components/style#special-rendering-behavior
+    <style precedence="medium" href={children}>
+      {children}
+    </style>
+  );
+}
diff --git a/src/styling/reset/ocl_reset.tsx b/src/styling/reset/ocl_reset.tsx
index b132c8d..fd1c08d 100644
--- a/src/styling/reset/ocl_reset.tsx
+++ b/src/styling/reset/ocl_reset.tsx
@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { useLayoutEffect } from 'react';
 
-import { useCSS } from '../use_css.ts';
+import { InlineStylesheet } from '../inline_stylesheet.tsx';
 
 import { OclResetContext } from './ocl_reset_context.tsx';
 import { oclResetCss } from './ocl_reset_css.ts';
@@ -24,9 +24,10 @@ export function OclReset(props: OclResetProps) {
     };
   }, []);
 
-  useCSS(oclResetCss);
-
   return (
-    <OclResetContext.Provider value>{props.children}</OclResetContext.Provider>
+    <OclResetContext.Provider value>
+      <InlineStylesheet>{oclResetCss}</InlineStylesheet>
+      {props.children}
+    </OclResetContext.Provider>
   );
 }
diff --git a/src/styling/use_css.ts b/src/styling/use_css.ts
deleted file mode 100644
index 32962e4..0000000
--- a/src/styling/use_css.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useInsertionEffect } from 'react';
-
-/**
- * Little util to inject CSS into the head.
- * @param css - The CSS to inject.
- */
-export function useCSS(css: string) {
-  useInsertionEffect(() => {
-    const sheet = new CSSStyleSheet();
-    sheet.replaceSync(css);
-
-    document.adoptedStyleSheets.push(sheet);
-
-    return () => {
-      const index = document.adoptedStyleSheets.indexOf(sheet);
-      if (index === -1) return;
-
-      document.adoptedStyleSheets.splice(index, 1);
-    };
-  }, [css]);
-}

From 23e9e1db93fb26287c036034d26e3a4c61bec2b5 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Tue, 16 Dec 2025 10:35:17 +0100
Subject: [PATCH 05/10] feat: improve DX with `CSS_template_literal.xml`

---
 CSS_template_literal.xml             |  8 ++++
 src/components/svg/svg_editor.css.ts | 62 ++++++++++++++--------------
 src/styling/css.ts                   | 12 ++++++
 3 files changed, 52 insertions(+), 30 deletions(-)
 create mode 100644 CSS_template_literal.xml
 create mode 100644 src/styling/css.ts

diff --git a/CSS_template_literal.xml b/CSS_template_literal.xml
new file mode 100644
index 0000000..381f140
--- /dev/null
+++ b/CSS_template_literal.xml
@@ -0,0 +1,8 @@
+<LanguageInjectionConfiguration>
+  <injection language="CSS" injector-id="js">
+    <display-name>CSS template literal</display-name>
+    <single-file value="true" />
+    <place><![CDATA[taggedString("css")]]></place>
+    <templateTag>css</templateTag>
+  </injection>
+</LanguageInjectionConfiguration>
\ No newline at end of file
diff --git a/src/components/svg/svg_editor.css.ts b/src/components/svg/svg_editor.css.ts
index 4f01522..c2dd00d 100644
--- a/src/components/svg/svg_editor.css.ts
+++ b/src/components/svg/svg_editor.css.ts
@@ -1,3 +1,5 @@
+import { css } from '../../styling/css.ts';
+
 export const greekLetters = {
   alpha: 'α',
   beta: 'β',
@@ -19,37 +21,37 @@ export const primes = {
 };
 const primeNames = Object.keys(primes);
 
-export const atomLabelEditCss = `
-form.react-ocl-atom-label-edit {
-  position: absolute;
-  z-index: 1;
-  display: grid;
-  grid-template-columns: repeat(4, 1.5em);
-  grid-template-areas: 
-    "input input input input submit cancel"
-    "${greeksFirstLine.join(' ')}"
-    "${greeksLastLine.join(' ')} . ${primeNames.join(' ')}";
-  align-items: stretch;
-  gap: 0.25em;
-  border: 1px solid lightgray;
-  background-color: white;
-  padding: 0.25em;
-}
+export const atomLabelEditCss = css`
+  form.react-ocl-atom-label-edit {
+    position: absolute;
+    z-index: 1;
+    display: grid;
+    grid-template-columns: repeat(4, 1.5em);
+    grid-template-areas:
+      'input input input input submit cancel'
+      '${greeksFirstLine.join(' ')}'
+      '${greeksLastLine.join(' ')} . ${primeNames.join(' ')}';
+    align-items: stretch;
+    gap: 0.25em;
+    border: 1px solid lightgray;
+    background-color: white;
+    padding: 0.25em;
+  }
 
-form.react-ocl-atom-label-edit button.react-ocl {
-  padding: 0.25em;
-  background-color: #efefef;
-  border: none;
-  border-radius: 5px;
-}
+  form.react-ocl-atom-label-edit button.react-ocl {
+    padding: 0.25em;
+    background-color: #efefef;
+    border: none;
+    border-radius: 5px;
+  }
 
-form.react-ocl-atom-label-edit input.react-ocl {
-  padding: 0.25em;
-  border: solid 1px lightgrey;
-  border-radius: 3px;
-}
+  form.react-ocl-atom-label-edit input.react-ocl {
+    padding: 0.25em;
+    border: solid 1px lightgrey;
+    border-radius: 3px;
+  }
 
-form.react-ocl-atom-label-edit input.react-ocl:focus {
-  outline: auto;
-}
+  form.react-ocl-atom-label-edit input.react-ocl:focus {
+    outline: auto;
+  }
 `;
diff --git a/src/styling/css.ts b/src/styling/css.ts
new file mode 100644
index 0000000..724b720
--- /dev/null
+++ b/src/styling/css.ts
@@ -0,0 +1,12 @@
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw#building_an_identity_tag
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const css = (strings: TemplateStringsArray, ...values: any[]) =>
+  String.raw({ raw: strings }, ...values);
+
+/**
+ * To get CSS autocomplete in css tagged template literal:
+ *
+ * WebStorm:
+ * Settings | Editor | Language Injections
+ * Click on the little import button and select `CSS_template_literal.xml` file.
+ */

From 99fb2077c0180c84a2459adb4836d2547a8ec64e Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Tue, 16 Dec 2025 11:36:15 +0100
Subject: [PATCH 06/10] refactor: move reset in stories

* improve form css to looks nearly identical with and without reset
---
 src/components/svg/svg_editor.css.ts       |  15 +-
 src/index.ts                               |   1 -
 src/styling/reset/ocl_reset.tsx            |  33 --
 src/styling/reset/ocl_reset_context.tsx    |   3 -
 src/styling/reset/ocl_reset_css.ts         |  10 -
 stories/reset/ocl_reset.tsx                |   8 +
 stories/reset/ocl_reset_css.ts             | 417 +++++++++++++++++++++
 stories/svg_editors/svg_editor.stories.tsx |   7 +-
 8 files changed, 442 insertions(+), 52 deletions(-)
 delete mode 100644 src/styling/reset/ocl_reset.tsx
 delete mode 100644 src/styling/reset/ocl_reset_context.tsx
 delete mode 100644 src/styling/reset/ocl_reset_css.ts
 create mode 100644 stories/reset/ocl_reset.tsx
 create mode 100644 stories/reset/ocl_reset_css.ts

diff --git a/src/components/svg/svg_editor.css.ts b/src/components/svg/svg_editor.css.ts
index c2dd00d..fc38e5f 100644
--- a/src/components/svg/svg_editor.css.ts
+++ b/src/components/svg/svg_editor.css.ts
@@ -23,19 +23,25 @@ const primeNames = Object.keys(primes);
 
 export const atomLabelEditCss = css`
   form.react-ocl-atom-label-edit {
+    --box-size: 24px;
+
     position: absolute;
     z-index: 1;
+    line-height: 1;
+    font-size: 16px;
     display: grid;
-    grid-template-columns: repeat(4, 1.5em);
+    grid-template-columns: repeat(4, var(--box-size));
+    grid-template-rows: repeat(3, var(--box-size));
     grid-template-areas:
       'input input input input submit cancel'
       '${greeksFirstLine.join(' ')}'
       '${greeksLastLine.join(' ')} . ${primeNames.join(' ')}';
-    align-items: stretch;
+    place-items: stretch;
     gap: 0.25em;
     border: 1px solid lightgray;
     background-color: white;
     padding: 0.25em;
+    box-sizing: border-box;
   }
 
   form.react-ocl-atom-label-edit button.react-ocl {
@@ -43,12 +49,17 @@ export const atomLabelEditCss = css`
     background-color: #efefef;
     border: none;
     border-radius: 5px;
+    font-family: sans-serif;
+    width: var(--box-size);
+    font-size: 13.3333px;
   }
 
   form.react-ocl-atom-label-edit input.react-ocl {
     padding: 0.25em;
     border: solid 1px lightgrey;
     border-radius: 3px;
+    font-family: sans-serif;
+    font-size: 13.3333px;
   }
 
   form.react-ocl-atom-label-edit input.react-ocl:focus {
diff --git a/src/index.ts b/src/index.ts
index 97eebde..e5d3ed6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -6,7 +6,6 @@ export * from './components/svg/molfile/molfile_svg_editor.js';
 export * from './components/svg/smiles_svg_renderer.js';
 export * from './components/canvas/canvas_editor.js';
 export * from './components/canvas/canvas_editor_hook.js';
-export { OclReset, type OclResetProps } from './styling/reset/ocl_reset.js';
 
 export type {
   BaseSvgRendererProps,
diff --git a/src/styling/reset/ocl_reset.tsx b/src/styling/reset/ocl_reset.tsx
deleted file mode 100644
index fd1c08d..0000000
--- a/src/styling/reset/ocl_reset.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { ReactNode } from 'react';
-import { useLayoutEffect } from 'react';
-
-import { InlineStylesheet } from '../inline_stylesheet.tsx';
-
-import { OclResetContext } from './ocl_reset_context.tsx';
-import { oclResetCss } from './ocl_reset_css.ts';
-
-export interface OclResetProps {
-  children: ReactNode;
-}
-
-// eslint-disable-next-line jsdoc/require-returns
-/**
- * Enable react-ocl-reset styles.
- * @param props - The children to render
- */
-export function OclReset(props: OclResetProps) {
-  useLayoutEffect(() => {
-    document.body.classList.add('react-ocl-reset');
-
-    return () => {
-      document.body.classList.remove('react-ocl-reset');
-    };
-  }, []);
-
-  return (
-    <OclResetContext.Provider value>
-      <InlineStylesheet>{oclResetCss}</InlineStylesheet>
-      {props.children}
-    </OclResetContext.Provider>
-  );
-}
diff --git a/src/styling/reset/ocl_reset_context.tsx b/src/styling/reset/ocl_reset_context.tsx
deleted file mode 100644
index ddfd610..0000000
--- a/src/styling/reset/ocl_reset_context.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-
-export const OclResetContext = createContext(false);
diff --git a/src/styling/reset/ocl_reset_css.ts b/src/styling/reset/ocl_reset_css.ts
deleted file mode 100644
index 5e73288..0000000
--- a/src/styling/reset/ocl_reset_css.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export const oclResetCss = `
-.react-ocl-reset input.react-ocl, .react-ocl-reset button.react-ocl {
-  border: none;
-  outline: none;
-  background: none;
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-`;
diff --git a/stories/reset/ocl_reset.tsx b/stories/reset/ocl_reset.tsx
new file mode 100644
index 0000000..3cad8d2
--- /dev/null
+++ b/stories/reset/ocl_reset.tsx
@@ -0,0 +1,8 @@
+import { InlineStylesheet } from '../../src/styling/inline_stylesheet.tsx';
+
+import { resetCss } from './ocl_reset_css.ts';
+
+// eslint-disable-next-line jsdoc/require-jsdoc
+export function OclReset() {
+  return <InlineStylesheet>{resetCss}</InlineStylesheet>;
+}
diff --git a/stories/reset/ocl_reset_css.ts b/stories/reset/ocl_reset_css.ts
new file mode 100644
index 0000000..55da1a8
--- /dev/null
+++ b/stories/reset/ocl_reset_css.ts
@@ -0,0 +1,417 @@
+import { css } from '../../src/styling/css.ts';
+
+/**
+ * Took from https://github.com/zakodium-oss/react-science/blob/02df0e0b21142bcd99f4a664552e3e757fc35f8c/styles/preflight.css
+ * Only for test in storybook some component styling without and with css reset stylesheet.
+ */
+export const resetCss = css`
+  /*
+  Adapted from:
+  https://raw.githubusercontent.com/tailwindlabs/tailwindcss/96a83534b0402d4ca9748bc055ed88fcac19f4a4/src/css/preflight.css
+  
+  Changes:
+  - Replace calls to \`theme()\` with the default value.
+  - Escape backticks.
+  */
+
+  /*
+  MIT License
+  
+  Copyright (c) Tailwind Labs, Inc.
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all
+  copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+  SOFTWARE.
+  */
+
+  /*
+  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+  2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+  */
+
+  *,
+  ::before,
+  ::after {
+    box-sizing: border-box; /* 1 */
+    border-width: 0; /* 2 */
+    border-style: solid; /* 2 */
+    border-color: currentColor; /* 2 */
+  }
+
+  ::before,
+  ::after {
+    --tw-content: '';
+  }
+
+  /*
+  1. Use a consistent sensible line-height in all browsers.
+  2. Prevent adjustments of font size after orientation changes in iOS.
+  3. Use a more readable tab size.
+  4. Use the user's configured \`sans\` font-family by default.
+  */
+
+  html {
+    line-height: 1.5; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+    -moz-tab-size: 4; /* 3 */
+    tab-size: 4; /* 3 */
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      'Helvetica Neue',
+      Arial,
+      'Noto Sans',
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'; /* 4 */
+  }
+
+  /*
+  1. Remove the margin in all browsers.
+  2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
+  */
+
+  body {
+    margin: 0; /* 1 */
+    line-height: inherit; /* 2 */
+  }
+
+  /*
+  1. Add the correct height in Firefox.
+  2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+  3. Ensure horizontal rules are visible by default.
+  */
+
+  hr {
+    height: 0; /* 1 */
+    color: inherit; /* 2 */
+    border-top-width: 1px; /* 3 */
+  }
+
+  /*
+  Add the correct text decoration in Chrome, Edge, and Safari.
+  */
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  /*
+  Remove the default font size and weight for headings.
+  */
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+
+  /*
+  Reset links to optimize for opt-in styling instead of opt-out.
+  */
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  /*
+  Add the correct font weight in Edge and Safari.
+  */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /*
+  1. Use the user's configured \`mono\` font family by default.
+  2. Correct the odd \`em\` font sizing in all browsers.
+  */
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+      'Courier New', monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /*
+  Add the correct font size in all browsers.
+  */
+
+  small {
+    font-size: 80%;
+  }
+
+  /*
+  Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
+  */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /*
+  1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+  2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+  3. Remove gaps between table borders by default.
+  */
+
+  table {
+    text-indent: 0; /* 1 */
+    border-color: inherit; /* 2 */
+    border-collapse: collapse; /* 3 */
+  }
+
+  /*
+  1. Change the font styles in all browsers.
+  2. Remove the margin in Firefox and Safari.
+  3. Remove default padding in all browsers.
+  */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    font-weight: inherit; /* 1 */
+    line-height: inherit; /* 1 */
+    color: inherit; /* 1 */
+    margin: 0; /* 2 */
+    padding: 0; /* 3 */
+  }
+
+  /*
+  Remove the inheritance of text transform in Edge and Firefox.
+  */
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  /*
+  1. Correct the inability to style clickable types in iOS and Safari.
+  2. Remove default button styles.
+  */
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button; /* 1 */
+    background-color: transparent; /* 2 */
+    background-image: none; /* 2 */
+  }
+
+  /*
+  Use the modern Firefox focus style for all focusable elements.
+  */
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  /*
+  Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+  */
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  /*
+  Add the correct vertical alignment in Chrome and Firefox.
+  */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /*
+  Correct the cursor style of increment and decrement buttons in Safari.
+  */
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /*
+  1. Correct the odd appearance in Chrome and Safari.
+  2. Correct the outline style in Safari.
+  */
+
+  [type='search'] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /*
+  Remove the inner padding in Chrome and Safari on macOS.
+  */
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /*
+  1. Correct the inability to style clickable types in iOS and Safari.
+  2. Change font properties to \`inherit\` in Safari.
+  */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /*
+  Add the correct display in Chrome and Safari.
+  */
+
+  summary {
+    display: list-item;
+  }
+
+  /*
+  Removes the default spacing and border for appropriate elements.
+  */
+
+  blockquote,
+  dl,
+  dd,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  figure,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    padding: 0;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  /*
+  Prevent resizing textareas horizontally by default.
+  */
+
+  textarea {
+    resize: vertical;
+  }
+
+  /*
+  1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+  2. Set the default placeholder color to the user's configured gray 400 color.
+  */
+
+  input::placeholder,
+  textarea::placeholder {
+    opacity: 1; /* 1 */
+    color: #9ca3af; /* 2 */
+  }
+
+  /*
+  Set the default cursor for buttons.
+  */
+
+  button,
+  [role='button'] {
+    cursor: pointer;
+  }
+
+  /*
+  Make sure disabled buttons don't get the pointer cursor.
+  */
+  :disabled {
+    cursor: default;
+  }
+
+  /*
+  1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+  2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+  */
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block; /* 1 */
+    vertical-align: middle; /* 2 */
+  }
+
+  /*
+  Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+  */
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+`;
diff --git a/stories/svg_editors/svg_editor.stories.tsx b/stories/svg_editors/svg_editor.stories.tsx
index 7181edd..74f136f 100644
--- a/stories/svg_editors/svg_editor.stories.tsx
+++ b/stories/svg_editors/svg_editor.stories.tsx
@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
 
 import { SvgEditor } from '../../src/index.js';
-import { OclReset } from '../../src/styling/reset/ocl_reset.tsx';
 import { molecule as defaultBaseMolecule } from '../data.js';
+import { OclReset } from '../reset/ocl_reset.tsx';
 
 const defaultMolecule = defaultBaseMolecule.getCompactCopy();
 defaultMolecule.setAtomCustomLabel(0, "]5'");
@@ -25,9 +25,10 @@ export const Control: Story = {};
 export const WithCssReset: Story = {
   decorators: (Story) => {
     return (
-      <OclReset>
+      <>
+        <OclReset />
         <Story />
-      </OclReset>
+      </>
     );
   },
 };

From b154ad1ae1e1eca15cbdc5643293012cae32cbc3 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Wed, 17 Dec 2025 14:21:45 +0100
Subject: [PATCH 07/10] refactor: custom `InlineStylesheet` id

Refs: https://github.com/zakodium-oss/react-ocl/pull/75#discussion_r2626982973
---
 src/components/svg/svg_editor.tsx |  4 +++-
 src/styling/inline_stylesheet.tsx | 14 +++++++++++---
 stories/reset/ocl_reset.tsx       |  2 +-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index fa6b139..cace11b 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -265,7 +265,9 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
       className="react-ocl react-ocl-atom-label-edit"
       style={{ top: formCoords.y, left: formCoords.x }}
     >
-      <InlineStylesheet>{atomLabelEditCss}</InlineStylesheet>
+      <InlineStylesheet id="AtomLabelEditForm">
+        {atomLabelEditCss}
+      </InlineStylesheet>
       <input
         className="react-ocl"
         style={{ gridArea: 'input' }}
diff --git a/src/styling/inline_stylesheet.tsx b/src/styling/inline_stylesheet.tsx
index c4e0533..8c9a6b0 100644
--- a/src/styling/inline_stylesheet.tsx
+++ b/src/styling/inline_stylesheet.tsx
@@ -1,14 +1,22 @@
 export interface InlineStylesheetProps {
+  /**
+   * Bound to `href` props of the `<style>` element with 'react-ocl#' prefix.
+   * See: https://react.dev/reference/react-dom/components/style#special-rendering-behavior
+   */
+  id: string;
+  /** @default 'medium' */
+  precedence?: string;
   children: string;
 }
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export function InlineStylesheet(props: InlineStylesheetProps) {
-  const { children } = props;
+  const { id, precedence = 'medium', children } = props;
+
+  const href = `react-ocl#${id}`;
 
   return (
-    // https://react.dev/reference/react-dom/components/style#special-rendering-behavior
-    <style precedence="medium" href={children}>
+    <style precedence={precedence} href={href}>
       {children}
     </style>
   );
diff --git a/stories/reset/ocl_reset.tsx b/stories/reset/ocl_reset.tsx
index 3cad8d2..25f3e68 100644
--- a/stories/reset/ocl_reset.tsx
+++ b/stories/reset/ocl_reset.tsx
@@ -4,5 +4,5 @@ import { resetCss } from './ocl_reset_css.ts';
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export function OclReset() {
-  return <InlineStylesheet>{resetCss}</InlineStylesheet>;
+  return <InlineStylesheet id="Reset">{resetCss}</InlineStylesheet>;
 }

From 4326868ada2957a370e1d4cc85bbabfa66478e44 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Fri, 19 Dec 2025 12:25:11 +0100
Subject: [PATCH 08/10] feat: AtomLabelEditForm migrate to emotion

---
 package-lock.json                       | 326 +++++++++++++++++++++---
 package.json                            |   4 +
 src/components/svg/svg_editor.css.ts    |  68 -----
 src/components/svg/svg_editor.styled.ts |  73 ++++++
 src/components/svg/svg_editor.tsx       |  53 ++--
 5 files changed, 394 insertions(+), 130 deletions(-)
 delete mode 100644 src/components/svg/svg_editor.css.ts
 create mode 100644 src/components/svg/svg_editor.styled.ts

diff --git a/package-lock.json b/package-lock.json
index 5e885eb..a2de3e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,10 @@
       "name": "react-ocl",
       "version": "8.4.0",
       "license": "MIT",
+      "dependencies": {
+        "@emotion/is-prop-valid": "^1.4.0",
+        "@emotion/styled": "^11.14.1"
+      },
       "devDependencies": {
         "@storybook/addon-vitest": "^9.1.16",
         "@storybook/react-vite": "^9.1.16",
@@ -85,7 +89,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
       "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.27.1",
@@ -142,7 +145,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.5.tgz",
       "integrity": "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.5",
@@ -176,7 +178,6 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
       "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -186,7 +187,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
       "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.27.1",
@@ -228,7 +228,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -238,7 +237,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
       "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -272,7 +270,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
       "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.28.5"
@@ -320,7 +317,6 @@
       "version": "7.28.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
       "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -330,7 +326,6 @@
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
       "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
@@ -345,7 +340,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.5.tgz",
       "integrity": "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
@@ -364,7 +358,6 @@
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
       "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -501,6 +494,168 @@
         "node": ">=18"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.4.0.tgz",
+      "integrity": "sha512-QgD4fyscGcbbKwJmqNvUMSE02OsHUa+lAWKdEUIJKgqe5IwRSKd7+KhibEWdaKwgjLj0DRSHA9biAIqGBk05lw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@es-joy/jsdoccomment": {
       "version": "0.71.0",
       "resolved": "https://registry.npmjs.org/@es-joy/jsdoccomment/-/jsdoccomment-0.71.0.tgz",
@@ -1232,7 +1387,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1254,7 +1408,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1264,14 +1417,12 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.31",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
       "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
@@ -2021,6 +2172,12 @@
         "undici-types": "~7.16.0"
       }
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.2",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
@@ -2903,6 +3060,21 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -3069,7 +3241,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -3244,6 +3415,31 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -3284,7 +3480,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/data-urls": {
@@ -3359,7 +3554,6 @@
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
       "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3522,6 +3716,15 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/error-ex": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+      "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.24.0",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.24.0.tgz",
@@ -3776,7 +3979,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -4645,6 +4847,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-7.0.0.tgz",
@@ -4749,7 +4957,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -5058,7 +5265,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -5067,6 +5273,21 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
     "node_modules/html-encoding-sniffer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
@@ -5159,7 +5380,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -5228,6 +5448,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
@@ -5314,7 +5540,6 @@
       "version": "2.16.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
       "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -5770,7 +5995,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -5841,7 +6065,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -5857,6 +6080,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -5934,6 +6163,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
@@ -6152,7 +6387,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -6432,7 +6666,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -6451,6 +6684,24 @@
         "parse-statements": "1.0.11"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse-statements": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/parse-statements/-/parse-statements-1.0.11.tgz",
@@ -6495,7 +6746,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/path-scurry": {
@@ -6522,6 +6772,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/pathe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
@@ -6543,7 +6802,6 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -6764,7 +7022,6 @@
       "version": "19.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
       "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
-      "dev": true,
       "license": "MIT",
       "peer": true,
       "engines": {
@@ -6985,7 +7242,6 @@
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
       "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.16.1",
@@ -7006,7 +7262,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -7856,6 +8111,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -7873,7 +8134,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
diff --git a/package.json b/package.json
index 1e577be..b46fac2 100644
--- a/package.json
+++ b/package.json
@@ -72,5 +72,9 @@
   "homepage": "https://github.com/zakodium-oss/react-ocl#readme",
   "volta": {
     "node": "24.11.0"
+  },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.4.0",
+    "@emotion/styled": "^11.14.1"
   }
 }
diff --git a/src/components/svg/svg_editor.css.ts b/src/components/svg/svg_editor.css.ts
deleted file mode 100644
index fc38e5f..0000000
--- a/src/components/svg/svg_editor.css.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { css } from '../../styling/css.ts';
-
-export const greekLetters = {
-  alpha: 'α',
-  beta: 'β',
-  gamma: 'γ',
-  delta: 'δ',
-  epsilon: 'ε',
-  zeta: 'ζ',
-  eta: 'η',
-  theta: 'θ',
-} as const;
-const greekLetterNames = Object.keys(greekLetters);
-const greeksFirstLine = greekLetterNames.slice(0, 6);
-const greeksLastLine = greekLetterNames.slice(6);
-
-export const primes = {
-  prime1: '′',
-  prime2: '″',
-  prime3: '‴',
-};
-const primeNames = Object.keys(primes);
-
-export const atomLabelEditCss = css`
-  form.react-ocl-atom-label-edit {
-    --box-size: 24px;
-
-    position: absolute;
-    z-index: 1;
-    line-height: 1;
-    font-size: 16px;
-    display: grid;
-    grid-template-columns: repeat(4, var(--box-size));
-    grid-template-rows: repeat(3, var(--box-size));
-    grid-template-areas:
-      'input input input input submit cancel'
-      '${greeksFirstLine.join(' ')}'
-      '${greeksLastLine.join(' ')} . ${primeNames.join(' ')}';
-    place-items: stretch;
-    gap: 0.25em;
-    border: 1px solid lightgray;
-    background-color: white;
-    padding: 0.25em;
-    box-sizing: border-box;
-  }
-
-  form.react-ocl-atom-label-edit button.react-ocl {
-    padding: 0.25em;
-    background-color: #efefef;
-    border: none;
-    border-radius: 5px;
-    font-family: sans-serif;
-    width: var(--box-size);
-    font-size: 13.3333px;
-  }
-
-  form.react-ocl-atom-label-edit input.react-ocl {
-    padding: 0.25em;
-    border: solid 1px lightgrey;
-    border-radius: 3px;
-    font-family: sans-serif;
-    font-size: 13.3333px;
-  }
-
-  form.react-ocl-atom-label-edit input.react-ocl:focus {
-    outline: auto;
-  }
-`;
diff --git a/src/components/svg/svg_editor.styled.ts b/src/components/svg/svg_editor.styled.ts
new file mode 100644
index 0000000..f2b77c7
--- /dev/null
+++ b/src/components/svg/svg_editor.styled.ts
@@ -0,0 +1,73 @@
+import isPropValid from '@emotion/is-prop-valid';
+import styled from '@emotion/styled';
+
+export const greekLetters = {
+  alpha: 'α',
+  beta: 'β',
+  gamma: 'γ',
+  delta: 'δ',
+  epsilon: 'ε',
+  zeta: 'ζ',
+  eta: 'η',
+  theta: 'θ',
+} as const;
+const greekLetterNames = Object.keys(greekLetters);
+const greeksFirstLine = greekLetterNames.slice(0, 6);
+const greeksLastLine = greekLetterNames.slice(6);
+
+export const primes = {
+  prime1: '′',
+  prime2: '″',
+  prime3: '‴',
+};
+const primeNames = Object.keys(primes);
+
+export const AtomLabelEditFormStyled = styled.form`
+  --box-size: 24px;
+
+  position: absolute;
+  z-index: 1;
+  line-height: 1;
+  font-size: 16px;
+  display: grid;
+  grid-template-columns: repeat(4, var(--box-size));
+  grid-template-rows: repeat(3, var(--box-size));
+  grid-template-areas:
+    'input input input input submit cancel'
+    '${greeksFirstLine.join(' ')}'
+    '${greeksLastLine.join(' ')} . ${primeNames.join(' ')}';
+  place-items: stretch;
+  gap: 0.25em;
+  border: 1px solid lightgray;
+  background-color: white;
+  padding: 0.25em;
+  box-sizing: border-box;
+`;
+
+export const AtomLabelEditInputStyled = styled.input`
+  grid-area: input;
+
+  padding: 0.25em;
+  border: solid 1px lightgrey;
+  border-radius: 3px;
+  font-family: sans-serif;
+  font-size: 13.3333px;
+
+  &:focus {
+    outline: auto;
+  }
+`;
+
+export const AtomLabelEditButtonStyled = styled('button', {
+  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'area',
+})<{ area: string }>`
+  grid-area: ${(props) => props.area};
+
+  padding: 0.25em;
+  background-color: #efefef;
+  border: none;
+  border-radius: 5px;
+  font-family: sans-serif;
+  width: var(--box-size);
+  font-size: 13.3333px;
+`;
diff --git a/src/components/svg/svg_editor.tsx b/src/components/svg/svg_editor.tsx
index cace11b..04a878a 100644
--- a/src/components/svg/svg_editor.tsx
+++ b/src/components/svg/svg_editor.tsx
@@ -7,7 +7,6 @@ import type {
 import { useEffect, useMemo, useReducer, useRef, useState } from 'react';
 
 import { useRefUpToDate } from '../../hooks/use_ref_up_to_date.js';
-import { InlineStylesheet } from '../../styling/inline_stylesheet.tsx';
 import type { BaseEditorProps } from '../types.js';
 
 import {
@@ -23,7 +22,13 @@ import {
 import type { State } from './editor/reducer.js';
 import { stateReducer } from './editor/reducer.js';
 import { useHighlight } from './editor/use_highlight.js';
-import { atomLabelEditCss, greekLetters, primes } from './svg_editor.css.ts';
+import {
+  AtomLabelEditButtonStyled,
+  AtomLabelEditFormStyled,
+  AtomLabelEditInputStyled,
+  greekLetters,
+  primes,
+} from './svg_editor.styled.ts';
 import type { SvgRendererProps } from './svg_renderer.js';
 import { SvgRenderer } from './svg_renderer.js';
 
@@ -258,19 +263,13 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
   }
 
   return (
-    <form
+    <AtomLabelEditFormStyled
       ref={formRef}
       onSubmit={onFormSubmit}
       onKeyDown={onKeyDown}
-      className="react-ocl react-ocl-atom-label-edit"
       style={{ top: formCoords.y, left: formCoords.x }}
     >
-      <InlineStylesheet id="AtomLabelEditForm">
-        {atomLabelEditCss}
-      </InlineStylesheet>
-      <input
-        className="react-ocl"
-        style={{ gridArea: 'input' }}
+      <AtomLabelEditInputStyled
         type="text"
         name="label"
         defaultValue={defaultValue}
@@ -278,48 +277,44 @@ function AtomLabelEditForm(props: AtomLabelEditFormProps) {
         autoFocus
         ref={autoSelectText}
       />
-      <button
-        className="react-ocl"
-        style={{ gridArea: 'submit' }}
+      <AtomLabelEditButtonStyled
+        area="submit"
         type="submit"
         aria-label="Submit"
       >
         ✔️
-      </button>
-      <button
-        className="react-ocl"
-        style={{ gridArea: 'cancel' }}
+      </AtomLabelEditButtonStyled>
+      <AtomLabelEditButtonStyled
+        area="cancel"
         type="button"
         aria-label="Cancel"
         onClick={onCancelClick}
       >
         ❌
-      </button>
+      </AtomLabelEditButtonStyled>
 
       {Object.entries(greekLetters).map(([charName, greekChar]) => (
-        <button
-          className="react-ocl"
+        <AtomLabelEditButtonStyled
           key={charName}
-          type="submit"
-          style={{ gridArea: charName }}
+          area={charName}
+          type="button"
           onClick={onShortcut}
         >
           {greekChar}
-        </button>
+        </AtomLabelEditButtonStyled>
       ))}
 
       {Object.entries(primes).map(([primeName, primeChar]) => (
-        <button
-          className="react-ocl"
+        <AtomLabelEditButtonStyled
           key={primeName}
-          type="submit"
-          style={{ gridArea: primeName }}
+          area={primeName}
+          type="button"
           onClick={onShortcut}
         >
           {primeChar}
-        </button>
+        </AtomLabelEditButtonStyled>
       ))}
-    </form>
+    </AtomLabelEditFormStyled>
   );
 }
 

From 4dc18a29ae940b63b3d2568d51a253d32376289c Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Fri, 19 Dec 2025 12:31:35 +0100
Subject: [PATCH 09/10] refactor: remove styling helpers

---
 src/styling/css.ts                | 12 ------------
 src/styling/inline_stylesheet.tsx | 23 -----------------------
 stories/reset/ocl_reset.tsx       |  8 +++++---
 stories/reset/ocl_reset_css.ts    | 15 +++++++++++++--
 4 files changed, 18 insertions(+), 40 deletions(-)
 delete mode 100644 src/styling/css.ts
 delete mode 100644 src/styling/inline_stylesheet.tsx

diff --git a/src/styling/css.ts b/src/styling/css.ts
deleted file mode 100644
index 724b720..0000000
--- a/src/styling/css.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw#building_an_identity_tag
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const css = (strings: TemplateStringsArray, ...values: any[]) =>
-  String.raw({ raw: strings }, ...values);
-
-/**
- * To get CSS autocomplete in css tagged template literal:
- *
- * WebStorm:
- * Settings | Editor | Language Injections
- * Click on the little import button and select `CSS_template_literal.xml` file.
- */
diff --git a/src/styling/inline_stylesheet.tsx b/src/styling/inline_stylesheet.tsx
deleted file mode 100644
index 8c9a6b0..0000000
--- a/src/styling/inline_stylesheet.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-export interface InlineStylesheetProps {
-  /**
-   * Bound to `href` props of the `<style>` element with 'react-ocl#' prefix.
-   * See: https://react.dev/reference/react-dom/components/style#special-rendering-behavior
-   */
-  id: string;
-  /** @default 'medium' */
-  precedence?: string;
-  children: string;
-}
-
-// eslint-disable-next-line jsdoc/require-jsdoc
-export function InlineStylesheet(props: InlineStylesheetProps) {
-  const { id, precedence = 'medium', children } = props;
-
-  const href = `react-ocl#${id}`;
-
-  return (
-    <style precedence={precedence} href={href}>
-      {children}
-    </style>
-  );
-}
diff --git a/stories/reset/ocl_reset.tsx b/stories/reset/ocl_reset.tsx
index 25f3e68..467b4c8 100644
--- a/stories/reset/ocl_reset.tsx
+++ b/stories/reset/ocl_reset.tsx
@@ -1,8 +1,10 @@
-import { InlineStylesheet } from '../../src/styling/inline_stylesheet.tsx';
-
 import { resetCss } from './ocl_reset_css.ts';
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export function OclReset() {
-  return <InlineStylesheet id="Reset">{resetCss}</InlineStylesheet>;
+  return (
+    <style href="react-ocl#Reset" precedence="medium">
+      {resetCss}
+    </style>
+  );
 }
diff --git a/stories/reset/ocl_reset_css.ts b/stories/reset/ocl_reset_css.ts
index 55da1a8..fb1135c 100644
--- a/stories/reset/ocl_reset_css.ts
+++ b/stories/reset/ocl_reset_css.ts
@@ -1,8 +1,19 @@
-import { css } from '../../src/styling/css.ts';
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/raw#building_an_identity_tag
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const css = (strings: TemplateStringsArray, ...values: any[]) =>
+  String.raw({ raw: strings }, ...values);
+
+/**
+ * To get "CSS autocomplete" in CSS tagged template literal:
+ *
+ * WebStorm:
+ * Settings | Editor | Language Injections
+ * Click on the little import button and select `CSS_template_literal.xml` file.
+ */
 
 /**
  * Took from https://github.com/zakodium-oss/react-science/blob/02df0e0b21142bcd99f4a664552e3e757fc35f8c/styles/preflight.css
- * Only for test in storybook some component styling without and with css reset stylesheet.
+ * Only for test in storybook some component styling without and with CSS reset stylesheet.
  */
 export const resetCss = css`
   /*

From ab54cffd2c11de6bbf68adad7635a5a3bb92c3a4 Mon Sep 17 00:00:00 2001
From: tpoisseau <22891227+tpoisseau@users.noreply.github.com>
Date: Fri, 19 Dec 2025 13:40:10 +0100
Subject: [PATCH 10/10] chore: remove is-prop-valid because it's not needed

* move dependencies above devDependencies

Refs: https://github.com/zakodium-oss/react-ocl/pull/75#discussion_r2634857376
Refs: https://github.com/zakodium-oss/react-ocl/pull/75#discussion_r2634861827
---
 package-lock.json                       | 1 -
 package.json                            | 7 +++----
 src/components/svg/svg_editor.styled.ts | 5 +----
 3 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a2de3e8..ca4cefe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,6 @@
       "version": "8.4.0",
       "license": "MIT",
       "dependencies": {
-        "@emotion/is-prop-valid": "^1.4.0",
         "@emotion/styled": "^11.14.1"
       },
       "devDependencies": {
diff --git a/package.json b/package.json
index b46fac2..474ca9b 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,9 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
+  "dependencies": {
+    "@emotion/styled": "^11.14.1"
+  },
   "devDependencies": {
     "@storybook/addon-vitest": "^9.1.16",
     "@storybook/react-vite": "^9.1.16",
@@ -72,9 +75,5 @@
   "homepage": "https://github.com/zakodium-oss/react-ocl#readme",
   "volta": {
     "node": "24.11.0"
-  },
-  "dependencies": {
-    "@emotion/is-prop-valid": "^1.4.0",
-    "@emotion/styled": "^11.14.1"
   }
 }
diff --git a/src/components/svg/svg_editor.styled.ts b/src/components/svg/svg_editor.styled.ts
index f2b77c7..765d570 100644
--- a/src/components/svg/svg_editor.styled.ts
+++ b/src/components/svg/svg_editor.styled.ts
@@ -1,4 +1,3 @@
-import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 
 export const greekLetters = {
@@ -58,9 +57,7 @@ export const AtomLabelEditInputStyled = styled.input`
   }
 `;
 
-export const AtomLabelEditButtonStyled = styled('button', {
-  shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'area',
-})<{ area: string }>`
+export const AtomLabelEditButtonStyled = styled.button<{ area: string }>`
   grid-area: ${(props) => props.area};
 
   padding: 0.25em;