npm - universal-modal-monorepo - Versions diffs - 1.0.0 - Mend

universal-modal-monorepo 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/AUTHORS +5 -0
package/CHANGELOG.md +10 -0
package/LICENSE +21 -0
package/NOTICE +6 -0
package/README.md +239 -0
package/SECURITY.md +21 -0
package/docs/ACCESSIBILITY.md +43 -0
package/docs/API.md +56 -0
package/docs/THEMING.md +65 -0
package/examples/angular/app.component.html +137 -0
package/examples/angular/app.component.ts +53 -0
package/examples/angular/index.html +99 -0
package/examples/angular/main.js +121 -0
package/examples/angular/styles.css +25 -0
package/examples/index.html +53 -0
package/examples/react/App.tsx +242 -0
package/examples/react/index.html +26 -0
package/examples/react/main.js +144 -0
package/examples/react/styles.css +1 -0
package/examples/shared/gallery.css +177 -0
package/examples/vanilla/index.html +89 -0
package/examples/vanilla/main.js +174 -0
package/examples/vanilla/styles.css +1 -0
package/examples/vue/App.vue +190 -0
package/examples/vue/index.html +23 -0
package/examples/vue/main.js +174 -0
package/examples/vue/styles.css +1 -0
package/examples/web-component/index.html +190 -0
package/examples/web-component/main.js +58 -0
package/examples/web-component/styles.css +11 -0
package/package.json +36 -0
package/packages/universal-modal/AUTHORS +5 -0
package/packages/universal-modal/CHANGELOG.md +10 -0
package/packages/universal-modal/LICENSE +21 -0
package/packages/universal-modal/NOTICE +6 -0
package/packages/universal-modal/README.md +29 -0
package/packages/universal-modal/package.json +83 -0
package/packages/universal-modal/scripts/copy-styles.mjs +11 -0
package/packages/universal-modal/src/core/constants.ts +50 -0
package/packages/universal-modal/src/core/event-emitter.ts +46 -0
package/packages/universal-modal/src/core/focus-trap.ts +101 -0
package/packages/universal-modal/src/core/index.ts +39 -0
package/packages/universal-modal/src/core/modal-engine.ts +410 -0
package/packages/universal-modal/src/core/modal-stack.ts +68 -0
package/packages/universal-modal/src/core/scroll-lock.ts +78 -0
package/packages/universal-modal/src/core/theme.ts +50 -0
package/packages/universal-modal/src/core/types.ts +196 -0
package/packages/universal-modal/src/core/utils.ts +114 -0
package/packages/universal-modal/src/dom/index.ts +1 -0
package/packages/universal-modal/src/dom/modal-renderer.ts +191 -0
package/packages/universal-modal/src/index.ts +2 -0
package/packages/universal-modal/src/styles/modal.css +368 -0
package/packages/universal-modal/tsconfig.json +24 -0
package/packages/universal-modal/tsup.config.ts +12 -0
package/packages/universal-modal-angular/AUTHORS +5 -0
package/packages/universal-modal-angular/CHANGELOG.md +9 -0
package/packages/universal-modal-angular/LICENSE +21 -0
package/packages/universal-modal-angular/NOTICE +6 -0
package/packages/universal-modal-angular/README.md +12 -0
package/packages/universal-modal-angular/package.json +85 -0
package/packages/universal-modal-angular/src/index.ts +10 -0
package/packages/universal-modal-angular/src/universal-modal.component.ts +275 -0
package/packages/universal-modal-angular/tsconfig.json +20 -0
package/packages/universal-modal-angular/tsup.config.ts +10 -0
package/packages/universal-modal-react/AUTHORS +5 -0
package/packages/universal-modal-react/CHANGELOG.md +9 -0
package/packages/universal-modal-react/LICENSE +21 -0
package/packages/universal-modal-react/NOTICE +6 -0
package/packages/universal-modal-react/README.md +12 -0
package/packages/universal-modal-react/package.json +87 -0
package/packages/universal-modal-react/src/UniversalModal.tsx +340 -0
package/packages/universal-modal-react/src/index.ts +10 -0
package/packages/universal-modal-react/tsconfig.json +19 -0
package/packages/universal-modal-react/tsup.config.ts +13 -0
package/packages/universal-modal-vanilla/AUTHORS +5 -0
package/packages/universal-modal-vanilla/CHANGELOG.md +9 -0
package/packages/universal-modal-vanilla/LICENSE +21 -0
package/packages/universal-modal-vanilla/NOTICE +6 -0
package/packages/universal-modal-vanilla/README.md +12 -0
package/packages/universal-modal-vanilla/package.json +79 -0
package/packages/universal-modal-vanilla/src/create-modal.ts +125 -0
package/packages/universal-modal-vanilla/src/index.ts +14 -0
package/packages/universal-modal-vanilla/tsconfig.json +18 -0
package/packages/universal-modal-vanilla/tsup.config.ts +10 -0
package/packages/universal-modal-vue/AUTHORS +5 -0
package/packages/universal-modal-vue/CHANGELOG.md +9 -0
package/packages/universal-modal-vue/LICENSE +21 -0
package/packages/universal-modal-vue/NOTICE +6 -0
package/packages/universal-modal-vue/README.md +12 -0
package/packages/universal-modal-vue/package.json +83 -0
package/packages/universal-modal-vue/src/UniversalModal.ts +342 -0
package/packages/universal-modal-vue/src/index.ts +10 -0
package/packages/universal-modal-vue/tsconfig.json +18 -0
package/packages/universal-modal-vue/tsup.config.ts +10 -0
package/packages/universal-modal-web-component/AUTHORS +5 -0
package/packages/universal-modal-web-component/CHANGELOG.md +9 -0
package/packages/universal-modal-web-component/LICENSE +21 -0
package/packages/universal-modal-web-component/NOTICE +6 -0
package/packages/universal-modal-web-component/README.md +12 -0
package/packages/universal-modal-web-component/package.json +83 -0
package/packages/universal-modal-web-component/src/index.ts +11 -0
package/packages/universal-modal-web-component/src/universal-modal-element.ts +424 -0
package/packages/universal-modal-web-component/tsconfig.json +18 -0
package/packages/universal-modal-web-component/tsup.config.ts +10 -0
package/scripts/copy-styles.mjs +11 -0
package/scripts/serve-examples.mjs +48 -0

package/examples/angular/index.html ADDED Viewed

@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Universal Modal — Angular samples</title>
+    <link rel="stylesheet" href="../../packages/universal-modal/dist/styles.css" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body data-um-theme="light">
+    <main class="demo-page">
+      <header class="demo-header">
+        <p class="demo-kicker">Angular</p>
+        <h1>Modal samples</h1>
+        <p>
+          Interactive demos mirror the Angular standalone component in
+          <code>app.component.ts</code> / <code>app.component.html</code>. Copy those files
+          into an Angular 16+ app and import
+          <code>@poluru-labs/universal-modal-angular</code>.
+        </p>
+        <nav class="demo-nav" aria-label="Adapters">
+          <a href="../index.html">All</a>
+          <a href="../vanilla/index.html">Vanilla</a>
+          <a href="../web-component/index.html">Web Component</a>
+          <a href="../react/index.html">React</a>
+          <a href="../vue/index.html">Vue</a>
+          <a href="./index.html" aria-current="page">Angular</a>
+        </nav>
+      </header>
+      <section class="demo-grid">
+        <article class="demo-card">
+          <h2>1. Archive confirm</h2>
+          <p>Alertdialog with async confirm handler.</p>
+          <button type="button" class="demo-btn" id="open-archive">Archive workspace</button>
+        </article>
+        <article class="demo-card">
+          <h2>2. Danger delete</h2>
+          <p>Custom red confirm theme.</p>
+          <button type="button" class="demo-btn" id="open-danger">Delete webhook</button>
+        </article>
+        <article class="demo-card">
+          <h2>3. Right drawer</h2>
+          <p>Large form panel.</p>
+          <button type="button" class="demo-btn" id="open-drawer">Edit workspace</button>
+        </article>
+        <article class="demo-card">
+          <h2>4. Top notice</h2>
+          <p>No footer actions.</p>
+          <button type="button" class="demo-btn" id="open-top">Show notice</button>
+        </article>
+        <article class="demo-card">
+          <h2>5. Fullscreen</h2>
+          <p>Checklist / walkthrough layout.</p>
+          <button type="button" class="demo-btn" id="open-fullscreen">Open checklist</button>
+        </article>
+        <article class="demo-card">
+          <h2>6. Persistent</h2>
+          <p>Blocks ESC and backdrop.</p>
+          <button type="button" class="demo-btn" id="open-persistent">Accept DPA</button>
+        </article>
+        <article class="demo-card">
+          <h2>7. Brand theme</h2>
+          <p>Per-dialog brand override.</p>
+          <button type="button" class="demo-btn" id="open-brand">Open branded</button>
+        </article>
+      </section>
+      <section class="code-note">
+        <h2>Angular source in this folder</h2>
+        <p class="demo-muted">
+          Use <code>app.component.ts</code> + <code>app.component.html</code> inside a real
+          Angular application. The live buttons below are powered by the vanilla adapter so
+          the gallery stays runnable without the Angular CLI.
+        </p>
+        <pre>import { UniversalModalComponent } from '@poluru-labs/universal-modal-angular';
+import '@poluru-labs/universal-modal/styles.css';
+@Component({
+  standalone: true,
+  imports: [UniversalModalComponent],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  sample: string | null = null;
+}</pre>
+      </section>
+    </main>
+    <script type="importmap">
+      {
+        "imports": {
+          "@poluru-labs/universal-modal": "../../packages/universal-modal/dist/index.js"
+        }
+      }
+    </script>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>

package/examples/angular/main.js ADDED Viewed

@@ -0,0 +1,121 @@
+import { createModal } from '../../packages/universal-modal-vanilla/dist/index.js';
+function openSample(factory) {
+  const modal = factory();
+  modal.on('afterClose', () => modal.destroy());
+  void modal.open();
+}
+document.getElementById('open-archive')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Archive workspace?',
+      description: 'Members keep read-only access.',
+      role: 'alertdialog',
+      confirmText: 'Archive',
+      body: '<label class="demo-field">Workspace <input value="Poluru Labs" /></label>',
+      returnFocus: event.currentTarget,
+      onConfirm: async () => {
+        await new Promise((r) => setTimeout(r, 700));
+      },
+    }),
+  );
+});
+document.getElementById('open-danger')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Delete webhook?',
+      body: '<p>Deliveries will stop immediately.</p>',
+      role: 'alertdialog',
+      confirmText: 'Delete',
+      returnFocus: event.currentTarget,
+      theme: {
+        confirmBg: '#b91c1c',
+        confirmFg: '#ffffff',
+        confirmBorder: '#b91c1c',
+      },
+    }),
+  );
+});
+document.getElementById('open-drawer')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Workspace settings',
+      size: 'lg',
+      placement: 'right',
+      confirmText: 'Save',
+      returnFocus: event.currentTarget,
+      body: `
+        <div class="demo-stack">
+          <label class="demo-field">Name <input value="Poluru Labs" /></label>
+          <label class="demo-field">Slug <input value="poluru-labs" /></label>
+        </div>
+      `,
+    }),
+  );
+});
+document.getElementById('open-top')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Deploy in progress',
+      placement: 'top',
+      hideActions: true,
+      body: '<p>You can keep browsing while the pipeline finishes.</p>',
+      returnFocus: event.currentTarget,
+    }),
+  );
+});
+document.getElementById('open-fullscreen')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Launch checklist',
+      size: 'fullscreen',
+      confirmText: 'Mark complete',
+      returnFocus: event.currentTarget,
+      body: `
+        <div class="demo-stack">
+          <p>✓ Domain verified</p>
+          <p>✓ Billing method added</p>
+          <p>✓ First project created</p>
+        </div>
+      `,
+    }),
+  );
+});
+document.getElementById('open-persistent')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Data processing agreement',
+      role: 'alertdialog',
+      persistent: true,
+      showCloseIcon: false,
+      confirmText: 'Accept',
+      cancelText: 'Decline',
+      body: '<p>Outside dismiss is disabled until you choose an action.</p>',
+      returnFocus: event.currentTarget,
+    }),
+  );
+});
+document.getElementById('open-brand')?.addEventListener('click', (event) => {
+  openSample(() =>
+    createModal({
+      title: 'Branded dialog',
+      description: 'theme input maps to CSS variables.',
+      confirmText: 'Apply',
+      body: '<p>Use this for one-off brand treatments.</p>',
+      returnFocus: event.currentTarget,
+      theme: {
+        brand: '#0d47a1',
+        brandForeground: '#ffffff',
+        confirmBg: '#0d47a1',
+        confirmFg: '#ffffff',
+      },
+    }),
+  );
+});

package/examples/angular/styles.css ADDED Viewed

@@ -0,0 +1,25 @@
+@import url('../shared/gallery.css');
+.code-note {
+  margin-top: 2rem;
+  padding: 1.2rem 1.3rem;
+  border-radius: 16px;
+  border: 1px solid var(--demo-border);
+  background: var(--demo-card);
+}
+.code-note h2 {
+  margin: 0 0 0.5rem;
+  font-size: 1.1rem;
+}
+.code-note pre {
+  margin: 0.75rem 0 0;
+  overflow: auto;
+  padding: 0.9rem 1rem;
+  border-radius: 12px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 0.82rem;
+  line-height: 1.45;
+}

package/examples/index.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Universal Modal — Examples</title>
+    <link rel="stylesheet" href="./shared/gallery.css" />
+  </head>
+  <body>
+    <main class="demo-page">
+      <header class="demo-header">
+        <p class="demo-kicker">@poluru-labs/universal-modal</p>
+        <h1>Example gallery</h1>
+        <p>
+          Browse runnable samples for each adapter. Each page includes multiple modal
+          variants — confirm, form, drawer, fullscreen, persistent, themed, and nested.
+        </p>
+      </header>
+      <section class="demo-grid">
+        <article class="demo-card">
+          <h2>Vanilla JS</h2>
+          <p>Imperative <code>createModal</code> / <code>confirmModal</code> samples.</p>
+          <a class="demo-btn" href="./vanilla/index.html">Open vanilla demos</a>
+        </article>
+        <article class="demo-card">
+          <h2>Web Components</h2>
+          <p>Declarative <code>&lt;universal-modal&gt;</code> with slots and nesting.</p>
+          <a class="demo-btn" href="./web-component/index.html">Open WC demos</a>
+        </article>
+        <article class="demo-card">
+          <h2>React</h2>
+          <p>Controlled modals with async confirm, drawers, and custom themes.</p>
+          <a class="demo-btn" href="./react/index.html">Open React demos</a>
+        </article>
+        <article class="demo-card">
+          <h2>Vue 3</h2>
+          <p><code>v-model:open</code> samples including alertdialog and placement.</p>
+          <a class="demo-btn" href="./vue/index.html">Open Vue demos</a>
+        </article>
+        <article class="demo-card">
+          <h2>Angular</h2>
+          <p>Standalone component patterns (source gallery + usage notes).</p>
+          <a class="demo-btn" href="./angular/index.html">Open Angular demos</a>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>

package/examples/react/App.tsx ADDED Viewed

@@ -0,0 +1,242 @@
+import { useState } from 'react';
+import { UniversalModal, type ModalTheme } from '@poluru-labs/universal-modal-react';
+import '@poluru-labs/universal-modal/styles.css';
+import './styles.css';
+type Sample =
+  | 'invite'
+  | 'danger'
+  | 'drawer'
+  | 'top'
+  | 'fullscreen'
+  | 'persistent'
+  | 'brand'
+  | null;
+const brandTheme: ModalTheme = {
+  brand: '#0d47a1',
+  brandForeground: '#ffffff',
+};
+const dangerTheme: ModalTheme = {
+  confirmBg: '#b91c1c',
+  confirmFg: '#ffffff',
+  confirmBorder: '#b91c1c',
+};
+const mintTheme: ModalTheme = {
+  brand: '#0f766e',
+  brandForeground: '#ecfdf5',
+  confirmBg: '#0f766e',
+  confirmFg: '#ecfdf5',
+  confirmBorder: '#0f766e',
+  cancelBg: '#f0fdfa',
+  cancelFg: '#115e59',
+  cancelBorder: '#99f6e4',
+};
+export function App() {
+  const [sample, setSample] = useState<Sample>(null);
+  const [email, setEmail] = useState('');
+  const close = () => setSample(null);
+  return (
+    <main className="demo-page">
+      <header className="demo-header">
+        <p className="demo-kicker">React</p>
+        <h1>Modal samples</h1>
+        <p>
+          Controlled <code>UniversalModal</code> demos with different sizes, placements,
+          and themes.
+        </p>
+        <nav className="demo-nav" aria-label="Adapters">
+          <a href="../index.html">All</a>
+          <a href="../vanilla/index.html">Vanilla</a>
+          <a href="../web-component/index.html">Web Component</a>
+          <a href="./index.html" aria-current="page">
+            React
+          </a>
+          <a href="../vue/index.html">Vue</a>
+          <a href="../angular/index.html">Angular</a>
+        </nav>
+      </header>
+      <section className="demo-grid">
+        <article className="demo-card">
+          <h2>1. Invite form</h2>
+          <p>Centered dialog with async confirm.</p>
+          <button type="button" onClick={() => setSample('invite')}>
+            Invite teammate
+          </button>
+        </article>
+        <article className="demo-card">
+          <h2>2. Danger confirm</h2>
+          <p>Alertdialog with red confirm styling.</p>
+          <button type="button" onClick={() => setSample('danger')}>
+            Revoke token
+          </button>
+        </article>
+        <article className="demo-card">
+          <h2>3. Right drawer</h2>
+          <p>Large panel for multi-field editing.</p>
+          <button type="button" onClick={() => setSample('drawer')}>
+            Edit billing
+          </button>
+        </article>
+        <article className="demo-card">
+          <h2>4. Top notice</h2>
+          <p>Top placement, close icon only.</p>
+          <button type="button" onClick={() => setSample('top')}>
+            Show notice
+          </button>
+        </article>
+        <article className="demo-card">
+          <h2>5. Fullscreen</h2>
+          <p>Onboarding-style fullscreen modal.</p>
+          <button type="button" onClick={() => setSample('fullscreen')}>
+            Start tour
+          </button>
+        </article>
+        <article className="demo-card">
+          <h2>6. Persistent</h2>
+          <p>Blocks outside dismiss until confirmed.</p>
+          <button type="button" onClick={() => setSample('persistent')}>
+            Review policy
+          </button>
+        </article>
+        <article className="demo-card">
+          <h2>7. Custom brand</h2>
+          <p>Per-modal mint theme tokens.</p>
+          <button type="button" onClick={() => setSample('brand')}>
+            Open branded modal
+          </button>
+        </article>
+      </section>
+      <UniversalModal
+        open={sample === 'invite'}
+        onOpenChange={(open) => !open && close()}
+        title="Invite teammate"
+        description="They will receive an email with access instructions."
+        confirmText="Send invite"
+        theme={brandTheme}
+        onConfirm={async () => {
+          await new Promise((r) => setTimeout(r, 700));
+          console.log('invited', email);
+        }}
+      >
+        <label className="demo-field">
+          Email
+          <input
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            placeholder="name@company.com"
+          />
+        </label>
+      </UniversalModal>
+      <UniversalModal
+        open={sample === 'danger'}
+        onOpenChange={(open) => !open && close()}
+        title="Revoke API token?"
+        description="Integrations using this token will stop working."
+        role="alertdialog"
+        confirmText="Revoke"
+        theme={dangerTheme}
+        onConfirm={async () => {
+          await new Promise((r) => setTimeout(r, 600));
+        }}
+      >
+        <p className="demo-muted">
+          Token prefix: <code>pl_live_••••9f2a</code>
+        </p>
+      </UniversalModal>
+      <UniversalModal
+        open={sample === 'drawer'}
+        onOpenChange={(open) => !open && close()}
+        title="Billing details"
+        size="lg"
+        placement="right"
+        confirmText="Save"
+        onConfirm={async () => {
+          await new Promise((r) => setTimeout(r, 500));
+        }}
+      >
+        <div className="demo-stack">
+          <label className="demo-field">
+            Company
+            <input defaultValue="Poluru Labs" />
+          </label>
+          <label className="demo-field">
+            Tax ID
+            <input placeholder="Optional" />
+          </label>
+          <label className="demo-field">
+            Billing email
+            <input type="email" defaultValue="billing@polurus.com" />
+          </label>
+        </div>
+      </UniversalModal>
+      <UniversalModal
+        open={sample === 'top'}
+        onOpenChange={(open) => !open && close()}
+        title="Scheduled maintenance"
+        placement="top"
+        hideActions
+        showCloseIcon
+      >
+        <p>Read-only mode from 01:00–01:30 UTC this Sunday.</p>
+      </UniversalModal>
+      <UniversalModal
+        open={sample === 'fullscreen'}
+        onOpenChange={(open) => !open && close()}
+        title="Product tour"
+        description="Fullscreen sample for walkthroughs."
+        size="fullscreen"
+        confirmText="Finish"
+        cancelText="Skip"
+      >
+        <div className="demo-stack">
+          <p>1. Open a modal from any framework adapter.</p>
+          <p>2. Customize brand colors with CSS variables or the theme prop.</p>
+          <p>3. Stack nested dialogs when you need confirmation.</p>
+        </div>
+      </UniversalModal>
+      <UniversalModal
+        open={sample === 'persistent'}
+        onOpenChange={(open) => !open && close()}
+        title="Security policy update"
+        role="alertdialog"
+        persistent
+        showCloseIcon={false}
+        confirmText="Acknowledge"
+        cancelText="Later"
+      >
+        <p>Escape and backdrop click are disabled until you choose an action.</p>
+      </UniversalModal>
+      <UniversalModal
+        open={sample === 'brand'}
+        onOpenChange={(open) => !open && close()}
+        title="Mint brand theme"
+        description="Per-instance theme override."
+        theme={mintTheme}
+        confirmText="Apply"
+      >
+        <p>Useful when one dialog needs a different brand treatment.</p>
+      </UniversalModal>
+    </main>
+  );
+}

package/examples/react/index.html ADDED Viewed

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Universal Modal — React samples</title>
+    <link rel="stylesheet" href="../../packages/universal-modal/dist/styles.css" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body data-um-theme="light">
+    <div id="root"></div>
+    <script type="importmap">
+      {
+        "imports": {
+          "react": "https://esm.sh/react@19.0.0",
+          "react/jsx-runtime": "https://esm.sh/react@19.0.0/jsx-runtime",
+          "react-dom": "https://esm.sh/react-dom@19.0.0",
+          "react-dom/client": "https://esm.sh/react-dom@19.0.0/client",
+          "@poluru-labs/universal-modal": "../../packages/universal-modal/dist/index.js",
+          "@poluru-labs/universal-modal-react": "../../packages/universal-modal-react/dist/index.js"
+        }
+      }
+    </script>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>