@veevarts/design-system 0.0.2 → 0.1.1

package/README.md

@@ -2,276 +2,70 @@
 
 This repository contains our **Design System**: a shared library of reusable UI components, design tokens, and utilities built with **React**, **TypeScript**, **Vite**, and **Storybook**.
 
-The goal of this project is to provide:
+## Goals
 
 - A **single source of truth** for UI across products.
 - **Reusable, well-typed, accessible components**.
 - **Discoverable documentation** via Storybook.
 
----
-
 ## Tech Stack
 
-- **React + TypeScript** – Component library implementation.
-- **Vite** – Fast dev server and build tooling.
-- **Storybook** – Component explorer and documentation.
-- **ESLint + TypeScript ESLint** – Linting and type-aware rules.
-- (Optional) **React Compiler** – Can be enabled if needed (see note below).
-
----
+- React + TypeScript
+- Vite
+- Storybook
+- ESLint + TypeScript ESLint
 
 ## Getting Started
 
 ### Prerequisites
 
 - Node.js (LTS, e.g. 18+ recommended)
-- pnpm / npm / yarn (examples below use `npm`)
+- npm / pnpm / yarn
 
-### Install dependencies
+### Install
 
 ```bash
 npm install
 ```
 
-### Run Storybook (recommended entrypoint)
+### Run Storybook
+
 ```bash
 npm run storybook
 ```
 
-This starts Storybook at http://localhost:6006 (or the configured port), where you can browse and interact with all components.
+### Run Dev Server
 
-### Run the Vite dev server (if applicable)
-
-If this repo also includes a small playground app:
 ```bash
 npm run dev
 ```
 
-This will start the Vite dev server (usually at http://localhost:5173).
-
 ### Build
 
-Build the component library / app:
 ```bash
 npm run build
 ```
-Build the Storybook static site (for deployment):
-```bash
-npm run build-storybook
-```
-npm run build-storybook
-```bash
-npm run build-storybook
-```
+
 ### Lint
+
 ```bash
 npm run lint
 ```
 
-## Project Structure (suggested)
+## Project Structure
 
-Your structure may vary slightly, but the Design System generally follows:
 ```
 src/
   components/
-    Button/
-      Button.tsx
-      Button.types.ts
-      Button.stories.tsx
-      Button.test.tsx     # if using tests
-      index.ts
-    Input/
-      ...
   styles/
-    tokens.css            # or tokens.ts, etc.
   utils/
-    ...
 .storybook/
-  main.ts
-  preview.tsx
 ```
 
-## Creating a New Reusable Component
-
-When adding a new component to the Design System, follow these steps:
-1.	Create a folder under src/components
-
-Example: src/components/Button.
-	
-2.	Create the component file
--	Use TypeScript and function components.
-- Export a named component and a typed props interface.
-
-  ```tsx
-  // src/components/Button/Button.tsx
-  import type { ButtonHTMLAttributes, ReactNode } from 'react';
-
-  export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'ghost';
-    size?: 'sm' | 'md' | 'lg';
-    isLoading?: boolean;
-    children: ReactNode;
-  }
-
-  export function Button({
-    variant = 'primary',
-    size = 'md',
-    isLoading = false,
-    children,
-    ...rest
-  }: ButtonProps) {
-    return (
-      <button
-        data-variant={variant}
-        data-size={size}
-        aria-busy={isLoading || undefined}
-        {...rest}
-      >
-        {isLoading ? 'Loading…' : children}
-      </button>
-    );
-  }
-  ```
-3. Create an index.ts barrel file
-
-    ```tsx
-    // src/components/Button/index.ts
-    export * from './Button';
-    ```
-4.	Create the Storybook stories
-  - Stories should live next to the component: Button.stories.tsx.
-  - Use Storybook CSF (default export + named stories).
-  - Document variants, states, and usage guidelines via args and docs.
-
-    ```tsx
-    // src/components/Button/Button.stories.tsx
-    import type { Meta, StoryObj } from '@storybook/react';
-    import { Button } from './Button';
-
-    const meta: Meta<typeof Button> = {
-      title: 'Components/Button',
-      component: Button,
-      args: {
-        children: 'Click me',
-        variant: 'primary',
-        size: 'md',
-      },
-    };
-
-    export default meta;
-    type Story = StoryObj<typeof Button>;
-
-    export const Primary: Story = {};
-    export const Secondary: Story = {
-      args: { variant: 'secondary' },
-    };
-    export const Loading: Story = {
-      args: { isLoading: true },
-    };
-    ```
-
-5.	Add tests
-- If the project uses a test runner (e.g. Vitest / Jest), add Button.test.tsx with basic behavior and accessibility tests.
-
-## Guidelines & Best Practices for Reusable Components
-
-1. Design System Principles
-- Generic, not app-specific
-Components must not depend on product-specific business logic. Keep them generic and configurable via props.
-- Composition over configuration
-Prefer small building blocks that can be composed, instead of monolithic components with many boolean flags.
-- Single responsibility
-Each component should do one thing well (e.g. Button, Input, Modal, Tooltip).
-- Stable API
-Avoid frequent breaking changes to props. If a change is necessary, deprecate carefully and communicate it.
-
-2. TypeScript & Props
-- Always export a typed props interface (ButtonProps, ModalProps, etc.).
-- Follow these patterns:
-- Use union types for variants ('primary' | 'secondary').
-- Prefer explicit props over any and broad object types.
-- Extend native HTML attributes when appropriate (e.g. ButtonHTMLAttributes<HTMLButtonElement>).
-- Provide sensible defaults for optional props.
-
-3. Styling & Theming
-- Use design tokens (colors, spacing, typography) instead of hard-coded values.
-- Keep component styling encapsulated and consistent:
-- Prefer using a shared tokens/styles system.
-- Avoid importing product-specific styles into the Design System.
-- Support variants and sizes through props, not through ad-hoc CSS classes.
-
-4. Accessibility (a11y)
-
-Every component should be built with accessibility in mind:
-- Ensure correct semantic elements (<button>, <label>, <input> etc.).
-- Use ARIA attributes only when necessary and correctly (avoid misusing them).
-- Keyboard support:
-- Focus states must be visible.
-- Interactive elements must be reachable and operable via keyboard.
-- Test with screen reader basics when possible (labels, roles, and announcements).
-
-5. Storybook Best Practices
-
-Stories are documentation, not just demos:
-- Provide a “Default” story that shows the most common usage.
-- Include stories for:
-- Different variants and sizes.
-- Loading / disabled / error states.
-- Edge cases that are relevant for consumers.
-- Use args so consumers can experiment via Storybook controls.
-- Use Storybook Docs to write short guidelines:
-- When to use the component.
-- Do’s & Don’ts.
-- Example integration snippets.
-
-6. Dependencies & Side Effects
-- Keep dependencies minimal and generic.
-- Avoid:
-- Direct calls to APIs.
-- Global singletons (e.g. accessing window without guards, global stores).
-- Side effects in component bodies (data fetching, logging, etc.).
-- If integration with external libraries is needed, wrap them in thin, replaceable adapters.
-
-## Linting & Type-Aware Rules
-
-For production-grade usage, we recommend enabling type-aware ESLint rules. A sample configuration using eslint.config.js might look like this:
+## Usage Example
 
 ```js
-// eslint.config.js
-import tseslint from 'typescript-eslint';
-import reactX from 'eslint-plugin-react-x';
-import reactDom from 'eslint-plugin-react-dom';
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Type-aware TypeScript rules
-      tseslint.configs.recommendedTypeChecked,
-      // Alternatively, stricter rules:
-      // tseslint.configs.strictTypeChecked,
-      // Optional stylistic rules:
-      // tseslint.configs.stylisticTypeChecked,
-
-      // React-specific rules
-      reactX.configs['recommended-typescript'],
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-    },
-  },
-]);
+import { Button } from '@veevarts/design-system';
 ```
-Run npm run lint regularly, and ensure no new warnings or errors are introduced in pull requests.
 
-## Contributing
-- Before coding: Check if a similar component already exists or if an existing one can be extended.
-- Follow the guidelines above (types, a11y, tokens, stories).
-- Add or update stories so that your changes are visible in Storybook.
-- Run npm run lint and npm run test (if available) before opening a PR.
-- Keep PRs small and focused (one component or one concern per PR where possible).
+For contributing guidelines, see [CONTRIBUTING.md](./CONTRIBUTING.md).

package/dist/index-0jFDyJJP.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DdbhVAzW.cjs"),O=require("react");function vt(t){return t==="x"||t==="y"?e.isDragging[t]?null:(e.isDragging[t]=!0,()=>{e.isDragging[t]=!1}):e.isDragging.x||e.isDragging.y?null:(e.isDragging.x=e.isDragging.y=!0,()=>{e.isDragging.x=e.isDragging.y=!1})}function F(t){return e.isObject(t)&&"ownerSVGElement"in t}function xt(t){return F(t)&&t.tagName==="svg"}function A(t,i,n,o){return e.addDomEvent(t,i,e.addPointerInfo(n),o)}const Pt=1e-4,It=1-Pt,Ot=1+Pt,Tt=.01,Ut=0-Tt,Nt=0+Tt;function T(t){return t.max-t.min}function Ft(t,i,n){return Math.abs(t-i)<=n}function G(t,i,n,o=.5){t.origin=o,t.originPoint=e.mixNumber(i.min,i.max,t.origin),t.scale=T(n)/T(i),t.translate=e.mixNumber(n.min,n.max,t.origin)-t.originPoint,(t.scale>=It&&t.scale<=Ot||isNaN(t.scale))&&(t.scale=1),(t.translate>=Ut&&t.translate<=Nt||isNaN(t.translate))&&(t.translate=0)}function C(t,i,n,o){G(t.x,i.x,n.x,o?o.originX:void 0),G(t.y,i.y,n.y,o?o.originY:void 0)}function W(t,i,n){t.min=n.min+i.min,t.max=t.min+T(i)}function Gt(t,i,n){W(t.x,i.x,n.x),W(t.y,i.y,n.y)}function z(t,i,n){t.min=i.min-n.min,t.max=t.min+T(i)}function w(t,i,n){z(t.x,i.x,n.x),z(t.y,i.y,n.y)}function D(t){return[t("x"),t("y")]}const Dt=({current:t})=>t?t.ownerDocument.defaultView:null,U=(t,i)=>Math.abs(t-i);function St(t,i){const n=U(t.x,i.x),o=U(t.y,i.y);return Math.sqrt(n**2+o**2)}const $=new Set(["auto","scroll"]);class Et{constructor(i,n,{transformPagePoint:o,contextWindow:l=window,dragSnapToOrigin:h=!1,distanceThreshold:s=3,element:a}={}){if(this.startEvent=null,this.lastMoveEvent=null,this.lastMoveEventInfo=null,this.handlers={},this.contextWindow=window,this.scrollPositions=new Map,this.removeScrollListeners=null,this.onElementScroll=d=>{this.handleScroll(d.target)},this.onWindowScroll=()=>{this.handleScroll(window)},this.updatePoint=()=>{if(!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const d=B(this.lastMoveEventInfo,this.history),p=this.startEvent!==null,P=St(d.offset,{x:0,y:0})>=this.distanceThreshold;if(!p&&!P)return;const{point:g}=d,{timestamp:y}=e.frameData;this.history.push({...g,timestamp:y});const{onStart:v,onMove:x}=this.handlers;p||(v&&v(this.lastMoveEvent,d),this.startEvent=this.lastMoveEvent),x&&x(this.lastMoveEvent,d)},this.handlePointerMove=(d,p)=>{this.lastMoveEvent=d,this.lastMoveEventInfo=b(p,this.transformPagePoint),e.frame.update(this.updatePoint,!0)},this.handlePointerUp=(d,p)=>{this.end();const{onEnd:P,onSessionEnd:g,resumeAnimation:y}=this.handlers;if((this.dragSnapToOrigin||!this.startEvent)&&y&&y(),!(this.lastMoveEvent&&this.lastMoveEventInfo))return;const v=B(d.type==="pointercancel"?this.lastMoveEventInfo:b(p,this.transformPagePoint),this.history);this.startEvent&&P&&P(d,v),g&&g(d,v)},!e.isPrimaryPointer(i))return;this.dragSnapToOrigin=h,this.handlers=n,this.transformPagePoint=o,this.distanceThreshold=s,this.contextWindow=l||window;const r=e.extractEventInfo(i),c=b(r,this.transformPagePoint),{point:u}=c,{timestamp:m}=e.frameData;this.history=[{...u,timestamp:m}];const{onSessionStart:f}=n;f&&f(i,B(c,this.history)),this.removeListeners=e.pipe(A(this.contextWindow,"pointermove",this.handlePointerMove),A(this.contextWindow,"pointerup",this.handlePointerUp),A(this.contextWindow,"pointercancel",this.handlePointerUp)),a&&this.startScrollTracking(a)}startScrollTracking(i){let n=i.parentElement;for(;n;){const o=getComputedStyle(n);($.has(o.overflowX)||$.has(o.overflowY))&&this.scrollPositions.set(n,{x:n.scrollLeft,y:n.scrollTop}),n=n.parentElement}this.scrollPositions.set(window,{x:window.scrollX,y:window.scrollY}),window.addEventListener("scroll",this.onElementScroll,{capture:!0,passive:!0}),window.addEventListener("scroll",this.onWindowScroll,{passive:!0}),this.removeScrollListeners=()=>{window.removeEventListener("scroll",this.onElementScroll,{capture:!0}),window.removeEventListener("scroll",this.onWindowScroll)}}handleScroll(i){const n=this.scrollPositions.get(i);if(!n)return;const o=i===window,l=o?{x:window.scrollX,y:window.scrollY}:{x:i.scrollLeft,y:i.scrollTop},h={x:l.x-n.x,y:l.y-n.y};h.x===0&&h.y===0||(o?this.lastMoveEventInfo&&(this.lastMoveEventInfo.point.x+=h.x,this.lastMoveEventInfo.point.y+=h.y):this.history.length>0&&(this.history[0].x-=h.x,this.history[0].y-=h.y),this.scrollPositions.set(i,l),e.frame.update(this.updatePoint,!0))}updateHandlers(i){this.handlers=i}end(){this.removeListeners&&this.removeListeners(),this.removeScrollListeners&&this.removeScrollListeners(),this.scrollPositions.clear(),e.cancelFrame(this.updatePoint)}}function b(t,i){return i?{point:i(t.point)}:t}function H(t,i){return{x:t.x-i.x,y:t.y-i.y}}function B({point:t},i){return{point:t,delta:H(t,Vt(i)),offset:H(t,Wt(i)),velocity:zt(i,.1)}}function Wt(t){return t[0]}function Vt(t){return t[t.length-1]}function zt(t,i){if(t.length<2)return{x:0,y:0};let n=t.length-1,o=null;const l=Vt(t);for(;n>=0&&(o=t[n],!(l.timestamp-o.timestamp>e.secondsToMilliseconds(i)));)n--;if(!o)return{x:0,y:0};const h=e.millisecondsToSeconds(l.timestamp-o.timestamp);if(h===0)return{x:0,y:0};const s={x:(l.x-o.x)/h,y:(l.y-o.y)/h};return s.x===1/0&&(s.x=0),s.y===1/0&&(s.y=0),s}function $t(t,{min:i,max:n},o){return i!==void 0&&t<i?t=o?e.mixNumber(i,t,o.min):Math.max(t,i):n!==void 0&&t>n&&(t=o?e.mixNumber(n,t,o.max):Math.min(t,n)),t}function X(t,i,n){return{min:i!==void 0?t.min+i:void 0,max:n!==void 0?t.max+n-(t.max-t.min):void 0}}function Ht(t,{top:i,left:n,bottom:o,right:l}){return{x:X(t.x,n,l),y:X(t.y,i,o)}}function Y(t,i){let n=i.min-t.min,o=i.max-t.max;return i.max-i.min<t.max-t.min&&([n,o]=[o,n]),{min:n,max:o}}function Xt(t,i){return{x:Y(t.x,i.x),y:Y(t.y,i.y)}}function Yt(t,i){let n=.5;const o=T(t),l=T(i);return l>o?n=e.progress(i.min,i.max-o,t.min):o>l&&(n=e.progress(t.min,t.max-l,i.min)),e.clamp(0,1,n)}function Kt(t,i){const n={};return i.min!==void 0&&(n.min=i.min-t.min),i.max!==void 0&&(n.max=i.max-t.min),n}const N=.35;function qt(t=N){return t===!1?t=0:t===!0&&(t=N),{x:K(t,"left","right"),y:K(t,"top","bottom")}}function K(t,i,n){return{min:q(t,i),max:q(t,n)}}function q(t,i){return typeof t=="number"?t:t[i]||0}const _t=new WeakMap;class Zt{constructor(i){this.openDragLock=null,this.isDragging=!1,this.currentDirection=null,this.originPoint={x:0,y:0},this.constraints=!1,this.hasMutatedConstraints=!1,this.elastic=e.createBox(),this.latestPointerEvent=null,this.latestPanInfo=null,this.visualElement=i}start(i,{snapToCursor:n=!1,distanceThreshold:o}={}){const{presenceContext:l}=this.visualElement;if(l&&l.isPresent===!1)return;const h=m=>{n?(this.stopAnimation(),this.snapToCursor(e.extractEventInfo(m).point)):this.pauseAnimation()},s=(m,f)=>{this.stopAnimation();const{drag:d,dragPropagation:p,onDragStart:P}=this.getProps();if(d&&!p&&(this.openDragLock&&this.openDragLock(),this.openDragLock=vt(d),!this.openDragLock))return;this.latestPointerEvent=m,this.latestPanInfo=f,this.isDragging=!0,this.currentDirection=null,this.resolveConstraints(),this.visualElement.projection&&(this.visualElement.projection.isAnimationBlocked=!0,this.visualElement.projection.target=void 0),D(y=>{let v=this.getAxisMotionValue(y).get()||0;if(e.percent.test(v)){const{projection:x}=this.visualElement;if(x&&x.layout){const E=x.layout.layoutBox[y];E&&(v=T(E)*(parseFloat(v)/100))}}this.originPoint[y]=v}),P&&e.frame.postRender(()=>P(m,f)),e.addValueToWillChange(this.visualElement,"transform");const{animationState:g}=this.visualElement;g&&g.setActive("whileDrag",!0)},a=(m,f)=>{this.latestPointerEvent=m,this.latestPanInfo=f;const{dragPropagation:d,dragDirectionLock:p,onDirectionLock:P,onDrag:g}=this.getProps();if(!d&&!this.openDragLock)return;const{offset:y}=f;if(p&&this.currentDirection===null){this.currentDirection=Jt(y),this.currentDirection!==null&&P&&P(this.currentDirection);return}this.updateAxis("x",f.point,y),this.updateAxis("y",f.point,y),this.visualElement.render(),g&&g(m,f)},r=(m,f)=>{this.latestPointerEvent=m,this.latestPanInfo=f,this.stop(m,f),this.latestPointerEvent=null,this.latestPanInfo=null},c=()=>D(m=>this.getAnimationState(m)==="paused"&&this.getAxisMotionValue(m).animation?.play()),{dragSnapToOrigin:u}=this.getProps();this.panSession=new Et(i,{onSessionStart:h,onStart:s,onMove:a,onSessionEnd:r,resumeAnimation:c},{transformPagePoint:this.visualElement.getTransformPagePoint(),dragSnapToOrigin:u,distanceThreshold:o,contextWindow:Dt(this.visualElement),element:this.visualElement.current})}stop(i,n){const o=i||this.latestPointerEvent,l=n||this.latestPanInfo,h=this.isDragging;if(this.cancel(),!h||!l||!o)return;const{velocity:s}=l;this.startAnimation(s);const{onDragEnd:a}=this.getProps();a&&e.frame.postRender(()=>a(o,l))}cancel(){this.isDragging=!1;const{projection:i,animationState:n}=this.visualElement;i&&(i.isAnimationBlocked=!1),this.panSession&&this.panSession.end(),this.panSession=void 0;const{dragPropagation:o}=this.getProps();!o&&this.openDragLock&&(this.openDragLock(),this.openDragLock=null),n&&n.setActive("whileDrag",!1)}updateAxis(i,n,o){const{drag:l}=this.getProps();if(!o||!L(i,l,this.currentDirection))return;const h=this.getAxisMotionValue(i);let s=this.originPoint[i]+o[i];this.constraints&&this.constraints[i]&&(s=$t(s,this.constraints[i],this.elastic[i])),h.set(s)}resolveConstraints(){const{dragConstraints:i,dragElastic:n}=this.getProps(),o=this.visualElement.projection&&!this.visualElement.projection.layout?this.visualElement.projection.measure(!1):this.visualElement.projection?.layout,l=this.constraints;i&&e.isRefObject(i)?this.constraints||(this.constraints=this.resolveRefConstraints()):i&&o?this.constraints=Ht(o.layoutBox,i):this.constraints=!1,this.elastic=qt(n),l!==this.constraints&&o&&this.constraints&&!this.hasMutatedConstraints&&D(h=>{this.constraints!==!1&&this.getAxisMotionValue(h)&&(this.constraints[h]=Kt(o.layoutBox[h],this.constraints[h]))})}resolveRefConstraints(){const{dragConstraints:i,onMeasureDragConstraints:n}=this.getProps();if(!i||!e.isRefObject(i))return!1;const o=i.current;e.invariant(o!==null,"If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop.","drag-constraints-ref");const{projection:l}=this.visualElement;if(!l||!l.layout)return!1;const h=e.measurePageBox(o,l.root,this.visualElement.getTransformPagePoint());let s=Xt(l.layout.layoutBox,h);if(n){const a=n(e.convertBoxToBoundingBox(s));this.hasMutatedConstraints=!!a,a&&(s=e.convertBoundingBoxToBox(a))}return s}startAnimation(i){const{drag:n,dragMomentum:o,dragElastic:l,dragTransition:h,dragSnapToOrigin:s,onDragTransitionEnd:a}=this.getProps(),r=this.constraints||{},c=D(u=>{if(!L(u,n,this.currentDirection))return;let m=r&&r[u]||{};s&&(m={min:0,max:0});const f=l?200:1e6,d=l?40:1e7,p={type:"inertia",velocity:o?i[u]:0,bounceStiffness:f,bounceDamping:d,timeConstant:750,restDelta:1,restSpeed:10,...h,...m};return this.startAxisValueAnimation(u,p)});return Promise.all(c).then(a)}startAxisValueAnimation(i,n){const o=this.getAxisMotionValue(i);return e.addValueToWillChange(this.visualElement,i),o.start(e.animateMotionValue(i,o,0,n,this.visualElement,!1))}stopAnimation(){D(i=>this.getAxisMotionValue(i).stop())}pauseAnimation(){D(i=>this.getAxisMotionValue(i).animation?.pause())}getAnimationState(i){return this.getAxisMotionValue(i).animation?.state}getAxisMotionValue(i){const n=`_drag${i.toUpperCase()}`,o=this.visualElement.getProps(),l=o[n];return l||this.visualElement.getValue(i,(o.initial?o.initial[i]:void 0)||0)}snapToCursor(i){D(n=>{const{drag:o}=this.getProps();if(!L(n,o,this.currentDirection))return;const{projection:l}=this.visualElement,h=this.getAxisMotionValue(n);if(l&&l.layout){const{min:s,max:a}=l.layout.layoutBox[n],r=h.get()||0;h.set(i[n]-e.mixNumber(s,a,.5)+r)}})}scalePositionWithinConstraints(){if(!this.visualElement.current)return;const{drag:i,dragConstraints:n}=this.getProps(),{projection:o}=this.visualElement;if(!e.isRefObject(n)||!o||!this.constraints)return;this.stopAnimation();const l={x:0,y:0};D(s=>{const a=this.getAxisMotionValue(s);if(a&&this.constraints!==!1){const r=a.get();l[s]=Yt({min:r,max:r},this.constraints[s])}});const{transformTemplate:h}=this.visualElement.getProps();this.visualElement.current.style.transform=h?h({},""):"none",o.root&&o.root.updateScroll(),o.updateLayout(),this.resolveConstraints(),D(s=>{if(!L(s,i,null))return;const a=this.getAxisMotionValue(s),{min:r,max:c}=this.constraints[s];a.set(e.mixNumber(r,c,l[s]))})}addListeners(){if(!this.visualElement.current)return;_t.set(this.visualElement,this);const i=this.visualElement.current,n=A(i,"pointerdown",r=>{const{drag:c,dragListener:u=!0}=this.getProps();c&&u&&!e.isElementKeyboardAccessible(r.target)&&this.start(r)}),o=()=>{const{dragConstraints:r}=this.getProps();e.isRefObject(r)&&r.current&&(this.constraints=this.resolveRefConstraints())},{projection:l}=this.visualElement,h=l.addEventListener("measure",o);l&&!l.layout&&(l.root&&l.root.updateScroll(),l.updateLayout()),e.frame.read(o);const s=e.addDomEvent(window,"resize",()=>this.scalePositionWithinConstraints()),a=l.addEventListener("didUpdate",(({delta:r,hasLayoutChanged:c})=>{this.isDragging&&c&&(D(u=>{const m=this.getAxisMotionValue(u);m&&(this.originPoint[u]+=r[u].translate,m.set(m.get()+r[u].translate))}),this.visualElement.render())}));return()=>{s(),n(),h(),a&&a()}}getProps(){const i=this.visualElement.getProps(),{drag:n=!1,dragDirectionLock:o=!1,dragPropagation:l=!1,dragConstraints:h=!1,dragElastic:s=N,dragMomentum:a=!0}=i;return{...i,drag:n,dragDirectionLock:o,dragPropagation:l,dragConstraints:h,dragElastic:s,dragMomentum:a}}}function L(t,i,n){return(i===!0||i===t)&&(n===null||n===t)}function Jt(t,i=10){let n=null;return Math.abs(t.y)>i?n="y":Math.abs(t.x)>i&&(n="x"),n}class Qt extends e.Feature{constructor(i){super(i),this.removeGroupControls=e.noop,this.removeListeners=e.noop,this.controls=new Zt(i)}mount(){const{dragControls:i}=this.node.getProps();i&&(this.removeGroupControls=i.subscribe(this.controls)),this.removeListeners=this.controls.addListeners()||e.noop}update(){const{dragControls:i}=this.node.getProps(),{dragControls:n}=this.node.prevProps||{};i!==n&&(this.removeGroupControls(),i&&(this.removeGroupControls=i.subscribe(this.controls)))}unmount(){this.removeGroupControls(),this.removeListeners()}}const _=t=>(i,n)=>{t&&e.frame.postRender(()=>t(i,n))};class te extends e.Feature{constructor(){super(...arguments),this.removePointerDownListener=e.noop}onPointerDown(i){this.session=new Et(i,this.createPanHandlers(),{transformPagePoint:this.node.getTransformPagePoint(),contextWindow:Dt(this.node)})}createPanHandlers(){const{onPanSessionStart:i,onPanStart:n,onPan:o,onPanEnd:l}=this.node.getProps();return{onSessionStart:_(i),onStart:_(n),onMove:o,onEnd:(h,s)=>{delete this.session,l&&e.frame.postRender(()=>l(h,s))}}}mount(){this.removePointerDownListener=A(this.node.current,"pointerdown",i=>this.onPointerDown(i))}update(){this.session&&this.session.updateHandlers(this.createPanHandlers())}unmount(){this.removePointerDownListener(),this.session&&this.session.end()}}const R={hasAnimatedSinceResize:!0,hasEverUpdated:!1};let M=!1;class ee extends O.Component{componentDidMount(){const{visualElement:i,layoutGroup:n,switchLayoutGroup:o,layoutId:l}=this.props,{projection:h}=i;h&&(n.group&&n.group.add(h),o&&o.register&&l&&o.register(h),M&&h.root.didUpdate(),h.addEventListener("animationComplete",()=>{this.safeToRemove()}),h.setOptions({...h.options,onExitComplete:()=>this.safeToRemove()})),R.hasEverUpdated=!0}getSnapshotBeforeUpdate(i){const{layoutDependency:n,visualElement:o,drag:l,isPresent:h}=this.props,{projection:s}=o;return s&&(s.isPresent=h,M=!0,l||i.layoutDependency!==n||n===void 0||i.isPresent!==h?s.willUpdate():this.safeToRemove(),i.isPresent!==h&&(h?s.promote():s.relegate()||e.frame.postRender(()=>{const a=s.getStack();(!a||!a.members.length)&&this.safeToRemove()}))),null}componentDidUpdate(){const{projection:i}=this.props.visualElement;i&&(i.root.didUpdate(),e.microtask.postRender(()=>{!i.currentAnimation&&i.isLead()&&this.safeToRemove()}))}componentWillUnmount(){const{visualElement:i,layoutGroup:n,switchLayoutGroup:o}=this.props,{projection:l}=i;M=!0,l&&(l.scheduleCheckAfterUnmount(),n&&n.group&&n.group.remove(l),o&&o.deregister&&o.deregister(l))}safeToRemove(){const{safeToRemove:i}=this.props;i&&i()}render(){return null}}function At(t){const[i,n]=e.usePresence(),o=O.useContext(e.LayoutGroupContext);return e.jsxRuntimeExports.jsx(ee,{...t,layoutGroup:o,switchLayoutGroup:O.useContext(e.SwitchLayoutGroupContext),isPresent:i,safeToRemove:n})}function ie(t,i,n){const o=e.isMotionValue(t)?t:e.motionValue(t);return o.start(e.animateMotionValue("",o,i,n)),o.animation}const se=(t,i)=>t.depth-i.depth;class ne{constructor(){this.children=[],this.isDirty=!1}add(i){e.addUniqueItem(this.children,i),this.isDirty=!0}remove(i){e.removeItem(this.children,i),this.isDirty=!0}forEach(i){this.isDirty&&this.children.sort(se),this.isDirty=!1,this.children.forEach(i)}}function Ct(t,i){const n=e.time.now(),o=({timestamp:l})=>{const h=l-n;h>=i&&(e.cancelFrame(o),t(h-i))};return e.frame.setup(o,!0),()=>e.cancelFrame(o)}const Lt=["TopLeft","TopRight","BottomLeft","BottomRight"],oe=Lt.length,Z=t=>typeof t=="string"?parseFloat(t):t,J=t=>typeof t=="number"||e.px.test(t);function ae(t,i,n,o,l,h){l?(t.opacity=e.mixNumber(0,n.opacity??1,re(o)),t.opacityExit=e.mixNumber(i.opacity??1,0,le(o))):h&&(t.opacity=e.mixNumber(i.opacity??1,n.opacity??1,o));for(let s=0;s<oe;s++){const a=`border${Lt[s]}Radius`;let r=Q(i,a),c=Q(n,a);if(r===void 0&&c===void 0)continue;r||(r=0),c||(c=0),r===0||c===0||J(r)===J(c)?(t[a]=Math.max(e.mixNumber(Z(r),Z(c),o),0),(e.percent.test(c)||e.percent.test(r))&&(t[a]+="%")):t[a]=c}(i.rotate||n.rotate)&&(t.rotate=e.mixNumber(i.rotate||0,n.rotate||0,o))}function Q(t,i){return t[i]!==void 0?t[i]:t.borderRadius}const re=Rt(0,.5,e.circOut),le=Rt(.5,.95,e.noop);function Rt(t,i,n){return o=>o<t?0:o>i?1:n(e.progress(t,i,o))}function tt(t,i){t.min=i.min,t.max=i.max}function S(t,i){tt(t.x,i.x),tt(t.y,i.y)}function et(t,i){t.translate=i.translate,t.scale=i.scale,t.originPoint=i.originPoint,t.origin=i.origin}function it(t,i,n,o,l){return t-=i,t=e.scalePoint(t,1/n,o),l!==void 0&&(t=e.scalePoint(t,1/l,o)),t}function ce(t,i=0,n=1,o=.5,l,h=t,s=t){if(e.percent.test(i)&&(i=parseFloat(i),i=e.mixNumber(s.min,s.max,i/100)-s.min),typeof i!="number")return;let a=e.mixNumber(h.min,h.max,o);t===h&&(a-=i),t.min=it(t.min,i,n,a,l),t.max=it(t.max,i,n,a,l)}function st(t,i,[n,o,l],h,s){ce(t,i[n],i[o],i[l],i.scale,h,s)}const ue=["x","scaleX","originX"],he=["y","scaleY","originY"];function nt(t,i,n,o){st(t.x,i,ue,n?n.x:void 0,o?o.x:void 0),st(t.y,i,he,n?n.y:void 0,o?o.y:void 0)}function ot(t){return t.translate===0&&t.scale===1}function wt(t){return ot(t.x)&&ot(t.y)}function at(t,i){return t.min===i.min&&t.max===i.max}function me(t,i){return at(t.x,i.x)&&at(t.y,i.y)}function rt(t,i){return Math.round(t.min)===Math.round(i.min)&&Math.round(t.max)===Math.round(i.max)}function bt(t,i){return rt(t.x,i.x)&&rt(t.y,i.y)}function lt(t){return T(t.x)/T(t.y)}function ct(t,i){return t.translate===i.translate&&t.scale===i.scale&&t.originPoint===i.originPoint}class fe{constructor(){this.members=[]}add(i){e.addUniqueItem(this.members,i),i.scheduleRender()}remove(i){if(e.removeItem(this.members,i),i===this.prevLead&&(this.prevLead=void 0),i===this.lead){const n=this.members[this.members.length-1];n&&this.promote(n)}}relegate(i){const n=this.members.findIndex(l=>i===l);if(n===0)return!1;let o;for(let l=n;l>=0;l--){const h=this.members[l];if(h.isPresent!==!1){o=h;break}}return o?(this.promote(o),!0):!1}promote(i,n){const o=this.lead;if(i!==o&&(this.prevLead=o,this.lead=i,i.show(),o)){o.instance&&o.scheduleRender(),i.scheduleRender(),i.resumeFrom=o,n&&(i.resumeFrom.preserveOpacity=!0),o.snapshot&&(i.snapshot=o.snapshot,i.snapshot.latestValues=o.animationValues||o.latestValues),i.root&&i.root.isUpdating&&(i.isLayoutDirty=!0);const{crossfade:l}=i.options;l===!1&&o.hide()}}exitAnimationComplete(){this.members.forEach(i=>{const{options:n,resumingFrom:o}=i;n.onExitComplete&&n.onExitComplete(),o&&o.options.onExitComplete&&o.options.onExitComplete()})}scheduleRender(){this.members.forEach(i=>{i.instance&&i.scheduleRender(!1)})}removeLeadSnapshot(){this.lead&&this.lead.snapshot&&(this.lead.snapshot=void 0)}}function de(t,i,n){let o="";const l=t.x.translate/i.x,h=t.y.translate/i.y,s=n?.z||0;if((l||h||s)&&(o=`translate3d(${l}px, ${h}px, ${s}px) `),(i.x!==1||i.y!==1)&&(o+=`scale(${1/i.x}, ${1/i.y}) `),n){const{transformPerspective:c,rotate:u,rotateX:m,rotateY:f,skewX:d,skewY:p}=n;c&&(o=`perspective(${c}px) ${o}`),u&&(o+=`rotate(${u}deg) `),m&&(o+=`rotateX(${m}deg) `),f&&(o+=`rotateY(${f}deg) `),d&&(o+=`skewX(${d}deg) `),p&&(o+=`skewY(${p}deg) `)}const a=t.x.scale*i.x,r=t.y.scale*i.y;return(a!==1||r!==1)&&(o+=`scale(${a}, ${r})`),o||"none"}const j=["","X","Y","Z"],pe=1e3;let ge=0;function k(t,i,n,o){const{latestValues:l}=i;l[t]&&(n[t]=l[t],i.setStaticValue(t,0),o&&(o[t]=0))}function Bt(t){if(t.hasCheckedOptimisedAppear=!0,t.root===t)return;const{visualElement:i}=t.options;if(!i)return;const n=e.getOptimisedAppearId(i);if(window.MotionHasOptimisedAnimation(n,"transform")){const{layout:l,layoutId:h}=t.options;window.MotionCancelOptimisedAnimation(n,"transform",e.frame,!(l||h))}const{parent:o}=t;o&&!o.hasCheckedOptimisedAppear&&Bt(o)}function Mt({attachResizeListener:t,defaultParent:i,measureScroll:n,checkIsScrollRoot:o,resetTransform:l}){return class{constructor(s={},a=i?.()){this.id=ge++,this.animationId=0,this.animationCommitId=0,this.children=new Set,this.options={},this.isTreeAnimating=!1,this.isAnimationBlocked=!1,this.isLayoutDirty=!1,this.isProjectionDirty=!1,this.isSharedProjectionDirty=!1,this.isTransformDirty=!1,this.updateManuallyBlocked=!1,this.updateBlockedByResize=!1,this.isUpdating=!1,this.isSVG=!1,this.needsReset=!1,this.shouldResetTransform=!1,this.hasCheckedOptimisedAppear=!1,this.treeScale={x:1,y:1},this.eventHandlers=new Map,this.hasTreeAnimated=!1,this.layoutVersion=0,this.updateScheduled=!1,this.scheduleUpdate=()=>this.update(),this.projectionUpdateScheduled=!1,this.checkUpdateFailed=()=>{this.isUpdating&&(this.isUpdating=!1,this.clearAllSnapshots())},this.updateProjection=()=>{this.projectionUpdateScheduled=!1,this.nodes.forEach(xe),this.nodes.forEach(Se),this.nodes.forEach(Ee),this.nodes.forEach(Pe)},this.resolvedRelativeTargetAt=0,this.linkedParentVersion=0,this.hasProjected=!1,this.isVisible=!0,this.animationProgress=0,this.sharedNodes=new Map,this.latestValues=s,this.root=a?a.root||a:this,this.path=a?[...a.path,a]:[],this.parent=a,this.depth=a?a.depth+1:0;for(let r=0;r<this.path.length;r++)this.path[r].shouldResetTransform=!0;this.root===this&&(this.nodes=new ne)}addEventListener(s,a){return this.eventHandlers.has(s)||this.eventHandlers.set(s,new e.SubscriptionManager),this.eventHandlers.get(s).add(a)}notifyListeners(s,...a){const r=this.eventHandlers.get(s);r&&r.notify(...a)}hasListeners(s){return this.eventHandlers.has(s)}mount(s){if(this.instance)return;this.isSVG=F(s)&&!xt(s),this.instance=s;const{layoutId:a,layout:r,visualElement:c}=this.options;if(c&&!c.current&&c.mount(s),this.root.nodes.add(this),this.parent&&this.parent.children.add(this),this.root.hasTreeAnimated&&(r||a)&&(this.isLayoutDirty=!0),t){let u,m=0;const f=()=>this.root.updateBlockedByResize=!1;e.frame.read(()=>{m=window.innerWidth}),t(s,()=>{const d=window.innerWidth;d!==m&&(m=d,this.root.updateBlockedByResize=!0,u&&u(),u=Ct(f,250),R.hasAnimatedSinceResize&&(R.hasAnimatedSinceResize=!1,this.nodes.forEach(mt)))})}a&&this.root.registerSharedNode(a,this),this.options.animate!==!1&&c&&(a||r)&&this.addEventListener("didUpdate",({delta:u,hasLayoutChanged:m,hasRelativeLayoutChanged:f,layout:d})=>{if(this.isTreeAnimationBlocked()){this.target=void 0,this.relativeTarget=void 0;return}const p=this.options.transition||c.getDefaultTransition()||Re,{onLayoutAnimationStart:P,onLayoutAnimationComplete:g}=c.getProps(),y=!this.targetLayout||!bt(this.targetLayout,d),v=!m&&f;if(this.options.layoutRoot||this.resumeFrom||v||m&&(y||!this.currentAnimation)){this.resumeFrom&&(this.resumingFrom=this.resumeFrom,this.resumingFrom.resumingFrom=void 0);const x={...e.getValueTransition(p,"layout"),onPlay:P,onComplete:g};(c.shouldReduceMotion||this.options.layoutRoot)&&(x.delay=0,x.type=!1),this.startAnimation(x),this.setAnimationOrigin(u,v)}else m||mt(this),this.isLead()&&this.options.onExitComplete&&this.options.onExitComplete();this.targetLayout=d})}unmount(){this.options.layoutId&&this.willUpdate(),this.root.nodes.remove(this);const s=this.getStack();s&&s.remove(this),this.parent&&this.parent.children.delete(this),this.instance=void 0,this.eventHandlers.clear(),e.cancelFrame(this.updateProjection)}blockUpdate(){this.updateManuallyBlocked=!0}unblockUpdate(){this.updateManuallyBlocked=!1}isUpdateBlocked(){return this.updateManuallyBlocked||this.updateBlockedByResize}isTreeAnimationBlocked(){return this.isAnimationBlocked||this.parent&&this.parent.isTreeAnimationBlocked()||!1}startUpdate(){this.isUpdateBlocked()||(this.isUpdating=!0,this.nodes&&this.nodes.forEach(Ve),this.animationId++)}getTransformTemplate(){const{visualElement:s}=this.options;return s&&s.getProps().transformTemplate}willUpdate(s=!0){if(this.root.hasTreeAnimated=!0,this.root.isUpdateBlocked()){this.options.onExitComplete&&this.options.onExitComplete();return}if(window.MotionCancelOptimisedAnimation&&!this.hasCheckedOptimisedAppear&&Bt(this),!this.root.isUpdating&&this.root.startUpdate(),this.isLayoutDirty)return;this.isLayoutDirty=!0;for(let u=0;u<this.path.length;u++){const m=this.path[u];m.shouldResetTransform=!0,m.updateScroll("snapshot"),m.options.layoutRoot&&m.willUpdate(!1)}const{layoutId:a,layout:r}=this.options;if(a===void 0&&!r)return;const c=this.getTransformTemplate();this.prevTransformTemplateValue=c?c(this.latestValues,""):void 0,this.updateSnapshot(),s&&this.notifyListeners("willUpdate")}update(){if(this.updateScheduled=!1,this.isUpdateBlocked()){this.unblockUpdate(),this.clearAllSnapshots(),this.nodes.forEach(ut);return}if(this.animationId<=this.animationCommitId){this.nodes.forEach(ht);return}this.animationCommitId=this.animationId,this.isUpdating?(this.isUpdating=!1,this.nodes.forEach(De),this.nodes.forEach(ye),this.nodes.forEach(ve)):this.nodes.forEach(ht),this.clearAllSnapshots();const a=e.time.now();e.frameData.delta=e.clamp(0,1e3/60,a-e.frameData.timestamp),e.frameData.timestamp=a,e.frameData.isProcessing=!0,e.frameSteps.update.process(e.frameData),e.frameSteps.preRender.process(e.frameData),e.frameSteps.render.process(e.frameData),e.frameData.isProcessing=!1}didUpdate(){this.updateScheduled||(this.updateScheduled=!0,e.microtask.read(this.scheduleUpdate))}clearAllSnapshots(){this.nodes.forEach(Te),this.sharedNodes.forEach(Ae)}scheduleUpdateProjection(){this.projectionUpdateScheduled||(this.projectionUpdateScheduled=!0,e.frame.preRender(this.updateProjection,!1,!0))}scheduleCheckAfterUnmount(){e.frame.postRender(()=>{this.isLayoutDirty?this.root.didUpdate():this.root.checkUpdateFailed()})}updateSnapshot(){this.snapshot||!this.instance||(this.snapshot=this.measure(),this.snapshot&&!T(this.snapshot.measuredBox.x)&&!T(this.snapshot.measuredBox.y)&&(this.snapshot=void 0))}updateLayout(){if(!this.instance||(this.updateScroll(),!(this.options.alwaysMeasureLayout&&this.isLead())&&!this.isLayoutDirty))return;if(this.resumeFrom&&!this.resumeFrom.instance)for(let r=0;r<this.path.length;r++)this.path[r].updateScroll();const s=this.layout;this.layout=this.measure(!1),this.layoutVersion++,this.layoutCorrected=e.createBox(),this.isLayoutDirty=!1,this.projectionDelta=void 0,this.notifyListeners("measure",this.layout.layoutBox);const{visualElement:a}=this.options;a&&a.notify("LayoutMeasure",this.layout.layoutBox,s?s.layoutBox:void 0)}updateScroll(s="measure"){let a=!!(this.options.layoutScroll&&this.instance);if(this.scroll&&this.scroll.animationId===this.root.animationId&&this.scroll.phase===s&&(a=!1),a&&this.instance){const r=o(this.instance);this.scroll={animationId:this.root.animationId,phase:s,isRoot:r,offset:n(this.instance),wasRoot:this.scroll?this.scroll.isRoot:r}}}resetTransform(){if(!l)return;const s=this.isLayoutDirty||this.shouldResetTransform||this.options.alwaysMeasureLayout,a=this.projectionDelta&&!wt(this.projectionDelta),r=this.getTransformTemplate(),c=r?r(this.latestValues,""):void 0,u=c!==this.prevTransformTemplateValue;s&&this.instance&&(a||e.hasTransform(this.latestValues)||u)&&(l(this.instance,c),this.shouldResetTransform=!1,this.scheduleRender())}measure(s=!0){const a=this.measurePageBox();let r=this.removeElementScroll(a);return s&&(r=this.removeTransform(r)),we(r),{animationId:this.root.animationId,measuredBox:a,layoutBox:r,latestValues:{},source:this.id}}measurePageBox(){const{visualElement:s}=this.options;if(!s)return e.createBox();const a=s.measureViewportBox();if(!(this.scroll?.wasRoot||this.path.some(be))){const{scroll:c}=this.root;c&&(e.translateAxis(a.x,c.offset.x),e.translateAxis(a.y,c.offset.y))}return a}removeElementScroll(s){const a=e.createBox();if(S(a,s),this.scroll?.wasRoot)return a;for(let r=0;r<this.path.length;r++){const c=this.path[r],{scroll:u,options:m}=c;c!==this.root&&u&&m.layoutScroll&&(u.wasRoot&&S(a,s),e.translateAxis(a.x,u.offset.x),e.translateAxis(a.y,u.offset.y))}return a}applyTransform(s,a=!1){const r=e.createBox();S(r,s);for(let c=0;c<this.path.length;c++){const u=this.path[c];!a&&u.options.layoutScroll&&u.scroll&&u!==u.root&&e.transformBox(r,{x:-u.scroll.offset.x,y:-u.scroll.offset.y}),e.hasTransform(u.latestValues)&&e.transformBox(r,u.latestValues)}return e.hasTransform(this.latestValues)&&e.transformBox(r,this.latestValues),r}removeTransform(s){const a=e.createBox();S(a,s);for(let r=0;r<this.path.length;r++){const c=this.path[r];if(!c.instance||!e.hasTransform(c.latestValues))continue;e.hasScale(c.latestValues)&&c.updateSnapshot();const u=e.createBox(),m=c.measurePageBox();S(u,m),nt(a,c.latestValues,c.snapshot?c.snapshot.layoutBox:void 0,u)}return e.hasTransform(this.latestValues)&&nt(a,this.latestValues),a}setTargetDelta(s){this.targetDelta=s,this.root.scheduleUpdateProjection(),this.isProjectionDirty=!0}setOptions(s){this.options={...this.options,...s,crossfade:s.crossfade!==void 0?s.crossfade:!0}}clearMeasurements(){this.scroll=void 0,this.layout=void 0,this.snapshot=void 0,this.prevTransformTemplateValue=void 0,this.targetDelta=void 0,this.target=void 0,this.isLayoutDirty=!1}forceRelativeParentToResolveTarget(){this.relativeParent&&this.relativeParent.resolvedRelativeTargetAt!==e.frameData.timestamp&&this.relativeParent.resolveTargetDelta(!0)}resolveTargetDelta(s=!1){const a=this.getLead();this.isProjectionDirty||(this.isProjectionDirty=a.isProjectionDirty),this.isTransformDirty||(this.isTransformDirty=a.isTransformDirty),this.isSharedProjectionDirty||(this.isSharedProjectionDirty=a.isSharedProjectionDirty);const r=!!this.resumingFrom||this!==a;if(!(s||r&&this.isSharedProjectionDirty||this.isProjectionDirty||this.parent?.isProjectionDirty||this.attemptToResolveRelativeTarget||this.root.updateBlockedByResize))return;const{layout:u,layoutId:m}=this.options;if(!this.layout||!(u||m))return;this.resolvedRelativeTargetAt=e.frameData.timestamp;const f=this.getClosestProjectingParent();f&&this.linkedParentVersion!==f.layoutVersion&&!f.options.layoutRoot&&this.removeRelativeTarget(),!this.targetDelta&&!this.relativeTarget&&(f&&f.layout?this.createRelativeTarget(f,this.layout.layoutBox,f.layout.layoutBox):this.removeRelativeTarget()),!(!this.relativeTarget&&!this.targetDelta)&&(this.target||(this.target=e.createBox(),this.targetWithTransforms=e.createBox()),this.relativeTarget&&this.relativeTargetOrigin&&this.relativeParent&&this.relativeParent.target?(this.forceRelativeParentToResolveTarget(),Gt(this.target,this.relativeTarget,this.relativeParent.target)):this.targetDelta?(this.resumingFrom?this.target=this.applyTransform(this.layout.layoutBox):S(this.target,this.layout.layoutBox),e.applyBoxDelta(this.target,this.targetDelta)):S(this.target,this.layout.layoutBox),this.attemptToResolveRelativeTarget&&(this.attemptToResolveRelativeTarget=!1,f&&!!f.resumingFrom==!!this.resumingFrom&&!f.options.layoutScroll&&f.target&&this.animationProgress!==1?this.createRelativeTarget(f,this.target,f.target):this.relativeParent=this.relativeTarget=void 0))}getClosestProjectingParent(){if(!(!this.parent||e.hasScale(this.parent.latestValues)||e.has2DTranslate(this.parent.latestValues)))return this.parent.isProjecting()?this.parent:this.parent.getClosestProjectingParent()}isProjecting(){return!!((this.relativeTarget||this.targetDelta||this.options.layoutRoot)&&this.layout)}createRelativeTarget(s,a,r){this.relativeParent=s,this.linkedParentVersion=s.layoutVersion,this.forceRelativeParentToResolveTarget(),this.relativeTarget=e.createBox(),this.relativeTargetOrigin=e.createBox(),w(this.relativeTargetOrigin,a,r),S(this.relativeTarget,this.relativeTargetOrigin)}removeRelativeTarget(){this.relativeParent=this.relativeTarget=void 0}calcProjection(){const s=this.getLead(),a=!!this.resumingFrom||this!==s;let r=!0;if((this.isProjectionDirty||this.parent?.isProjectionDirty)&&(r=!1),a&&(this.isSharedProjectionDirty||this.isTransformDirty)&&(r=!1),this.resolvedRelativeTargetAt===e.frameData.timestamp&&(r=!1),r)return;const{layout:c,layoutId:u}=this.options;if(this.isTreeAnimating=!!(this.parent&&this.parent.isTreeAnimating||this.currentAnimation||this.pendingAnimation),this.isTreeAnimating||(this.targetDelta=this.relativeTarget=void 0),!this.layout||!(c||u))return;S(this.layoutCorrected,this.layout.layoutBox);const m=this.treeScale.x,f=this.treeScale.y;e.applyTreeDeltas(this.layoutCorrected,this.treeScale,this.path,a),s.layout&&!s.target&&(this.treeScale.x!==1||this.treeScale.y!==1)&&(s.target=s.layout.layoutBox,s.targetWithTransforms=e.createBox());const{target:d}=s;if(!d){this.prevProjectionDelta&&(this.createProjectionDeltas(),this.scheduleRender());return}!this.projectionDelta||!this.prevProjectionDelta?this.createProjectionDeltas():(et(this.prevProjectionDelta.x,this.projectionDelta.x),et(this.prevProjectionDelta.y,this.projectionDelta.y)),C(this.projectionDelta,this.layoutCorrected,d,this.latestValues),(this.treeScale.x!==m||this.treeScale.y!==f||!ct(this.projectionDelta.x,this.prevProjectionDelta.x)||!ct(this.projectionDelta.y,this.prevProjectionDelta.y))&&(this.hasProjected=!0,this.scheduleRender(),this.notifyListeners("projectionUpdate",d))}hide(){this.isVisible=!1}show(){this.isVisible=!0}scheduleRender(s=!0){if(this.options.visualElement?.scheduleRender(),s){const a=this.getStack();a&&a.scheduleRender()}this.resumingFrom&&!this.resumingFrom.instance&&(this.resumingFrom=void 0)}createProjectionDeltas(){this.prevProjectionDelta=e.createDelta(),this.projectionDelta=e.createDelta(),this.projectionDeltaWithTransform=e.createDelta()}setAnimationOrigin(s,a=!1){const r=this.snapshot,c=r?r.latestValues:{},u={...this.latestValues},m=e.createDelta();(!this.relativeParent||!this.relativeParent.options.layoutRoot)&&(this.relativeTarget=this.relativeTargetOrigin=void 0),this.attemptToResolveRelativeTarget=!a;const f=e.createBox(),d=r?r.source:void 0,p=this.layout?this.layout.source:void 0,P=d!==p,g=this.getStack(),y=!g||g.members.length<=1,v=!!(P&&!y&&this.options.crossfade===!0&&!this.path.some(Le));this.animationProgress=0;let x;this.mixTargetDelta=E=>{const V=E/1e3;ft(m.x,s.x,V),ft(m.y,s.y,V),this.setTargetDelta(m),this.relativeTarget&&this.relativeTargetOrigin&&this.layout&&this.relativeParent&&this.relativeParent.layout&&(w(f,this.layout.layoutBox,this.relativeParent.layout.layoutBox),Ce(this.relativeTarget,this.relativeTargetOrigin,f,V),x&&me(this.relativeTarget,x)&&(this.isProjectionDirty=!1),x||(x=e.createBox()),S(x,this.relativeTarget)),P&&(this.animationValues=u,ae(u,c,this.latestValues,V,v,y)),this.root.scheduleUpdateProjection(),this.scheduleRender(),this.animationProgress=V},this.mixTargetDelta(this.options.layoutRoot?1e3:0)}startAnimation(s){this.notifyListeners("animationStart"),this.currentAnimation?.stop(),this.resumingFrom?.currentAnimation?.stop(),this.pendingAnimation&&(e.cancelFrame(this.pendingAnimation),this.pendingAnimation=void 0),this.pendingAnimation=e.frame.update(()=>{R.hasAnimatedSinceResize=!0,this.motionValue||(this.motionValue=e.motionValue(0)),this.currentAnimation=ie(this.motionValue,[0,1e3],{...s,velocity:0,isSync:!0,onUpdate:a=>{this.mixTargetDelta(a),s.onUpdate&&s.onUpdate(a)},onStop:()=>{},onComplete:()=>{s.onComplete&&s.onComplete(),this.completeAnimation()}}),this.resumingFrom&&(this.resumingFrom.currentAnimation=this.currentAnimation),this.pendingAnimation=void 0})}completeAnimation(){this.resumingFrom&&(this.resumingFrom.currentAnimation=void 0,this.resumingFrom.preserveOpacity=void 0);const s=this.getStack();s&&s.exitAnimationComplete(),this.resumingFrom=this.currentAnimation=this.animationValues=void 0,this.notifyListeners("animationComplete")}finishAnimation(){this.currentAnimation&&(this.mixTargetDelta&&this.mixTargetDelta(pe),this.currentAnimation.stop()),this.completeAnimation()}applyTransformsToTarget(){const s=this.getLead();let{targetWithTransforms:a,target:r,layout:c,latestValues:u}=s;if(!(!a||!r||!c)){if(this!==s&&this.layout&&c&&jt(this.options.animationType,this.layout.layoutBox,c.layoutBox)){r=this.target||e.createBox();const m=T(this.layout.layoutBox.x);r.x.min=s.target.x.min,r.x.max=r.x.min+m;const f=T(this.layout.layoutBox.y);r.y.min=s.target.y.min,r.y.max=r.y.min+f}S(a,r),e.transformBox(a,u),C(this.projectionDeltaWithTransform,this.layoutCorrected,a,u)}}registerSharedNode(s,a){this.sharedNodes.has(s)||this.sharedNodes.set(s,new fe),this.sharedNodes.get(s).add(a);const c=a.options.initialPromotionConfig;a.promote({transition:c?c.transition:void 0,preserveFollowOpacity:c&&c.shouldPreserveFollowOpacity?c.shouldPreserveFollowOpacity(a):void 0})}isLead(){const s=this.getStack();return s?s.lead===this:!0}getLead(){const{layoutId:s}=this.options;return s?this.getStack()?.lead||this:this}getPrevLead(){const{layoutId:s}=this.options;return s?this.getStack()?.prevLead:void 0}getStack(){const{layoutId:s}=this.options;if(s)return this.root.sharedNodes.get(s)}promote({needsReset:s,transition:a,preserveFollowOpacity:r}={}){const c=this.getStack();c&&c.promote(this,r),s&&(this.projectionDelta=void 0,this.needsReset=!0),a&&this.setOptions({transition:a})}relegate(){const s=this.getStack();return s?s.relegate(this):!1}resetSkewAndRotation(){const{visualElement:s}=this.options;if(!s)return;let a=!1;const{latestValues:r}=s;if((r.z||r.rotate||r.rotateX||r.rotateY||r.rotateZ||r.skewX||r.skewY)&&(a=!0),!a)return;const c={};r.z&&k("z",s,c,this.animationValues);for(let u=0;u<j.length;u++)k(`rotate${j[u]}`,s,c,this.animationValues),k(`skew${j[u]}`,s,c,this.animationValues);s.render();for(const u in c)s.setStaticValue(u,c[u]),this.animationValues&&(this.animationValues[u]=c[u]);s.scheduleRender()}applyProjectionStyles(s,a){if(!this.instance||this.isSVG)return;if(!this.isVisible){s.visibility="hidden";return}const r=this.getTransformTemplate();if(this.needsReset){this.needsReset=!1,s.visibility="",s.opacity="",s.pointerEvents=e.resolveMotionValue(a?.pointerEvents)||"",s.transform=r?r(this.latestValues,""):"none";return}const c=this.getLead();if(!this.projectionDelta||!this.layout||!c.target){this.options.layoutId&&(s.opacity=this.latestValues.opacity!==void 0?this.latestValues.opacity:1,s.pointerEvents=e.resolveMotionValue(a?.pointerEvents)||""),this.hasProjected&&!e.hasTransform(this.latestValues)&&(s.transform=r?r({},""):"none",this.hasProjected=!1);return}s.visibility="";const u=c.animationValues||c.latestValues;this.applyTransformsToTarget();let m=de(this.projectionDeltaWithTransform,this.treeScale,u);r&&(m=r(u,m)),s.transform=m;const{x:f,y:d}=this.projectionDelta;s.transformOrigin=`${f.origin*100}% ${d.origin*100}% 0`,c.animationValues?s.opacity=c===this?u.opacity??this.latestValues.opacity??1:this.preserveOpacity?this.latestValues.opacity:u.opacityExit:s.opacity=c===this?u.opacity!==void 0?u.opacity:"":u.opacityExit!==void 0?u.opacityExit:0;for(const p in e.scaleCorrectors){if(u[p]===void 0)continue;const{correct:P,applyTo:g,isCSSVariable:y}=e.scaleCorrectors[p],v=m==="none"?u[p]:P(u[p],c);if(g){const x=g.length;for(let E=0;E<x;E++)s[g[E]]=v}else y?this.options.visualElement.renderState.vars[p]=v:s[p]=v}this.options.layoutId&&(s.pointerEvents=c===this?e.resolveMotionValue(a?.pointerEvents)||"":"none")}clearSnapshot(){this.resumeFrom=this.snapshot=void 0}resetTree(){this.root.nodes.forEach(s=>s.currentAnimation?.stop()),this.root.nodes.forEach(ut),this.root.sharedNodes.clear()}}}function ye(t){t.updateLayout()}function ve(t){const i=t.resumeFrom?.snapshot||t.snapshot;if(t.isLead()&&t.layout&&i&&t.hasListeners("didUpdate")){const{layoutBox:n,measuredBox:o}=t.layout,{animationType:l}=t.options,h=i.source!==t.layout.source;l==="size"?D(u=>{const m=h?i.measuredBox[u]:i.layoutBox[u],f=T(m);m.min=n[u].min,m.max=m.min+f}):jt(l,i.layoutBox,n)&&D(u=>{const m=h?i.measuredBox[u]:i.layoutBox[u],f=T(n[u]);m.max=m.min+f,t.relativeTarget&&!t.currentAnimation&&(t.isProjectionDirty=!0,t.relativeTarget[u].max=t.relativeTarget[u].min+f)});const s=e.createDelta();C(s,n,i.layoutBox);const a=e.createDelta();h?C(a,t.applyTransform(o,!0),i.measuredBox):C(a,n,i.layoutBox);const r=!wt(s);let c=!1;if(!t.resumeFrom){const u=t.getClosestProjectingParent();if(u&&!u.resumeFrom){const{snapshot:m,layout:f}=u;if(m&&f){const d=e.createBox();w(d,i.layoutBox,m.layoutBox);const p=e.createBox();w(p,n,f.layoutBox),bt(d,p)||(c=!0),u.options.layoutRoot&&(t.relativeTarget=p,t.relativeTargetOrigin=d,t.relativeParent=u)}}}t.notifyListeners("didUpdate",{layout:n,snapshot:i,delta:a,layoutDelta:s,hasLayoutChanged:r,hasRelativeLayoutChanged:c})}else if(t.isLead()){const{onExitComplete:n}=t.options;n&&n()}t.options.transition=void 0}function xe(t){t.parent&&(t.isProjecting()||(t.isProjectionDirty=t.parent.isProjectionDirty),t.isSharedProjectionDirty||(t.isSharedProjectionDirty=!!(t.isProjectionDirty||t.parent.isProjectionDirty||t.parent.isSharedProjectionDirty)),t.isTransformDirty||(t.isTransformDirty=t.parent.isTransformDirty))}function Pe(t){t.isProjectionDirty=t.isSharedProjectionDirty=t.isTransformDirty=!1}function Te(t){t.clearSnapshot()}function ut(t){t.clearMeasurements()}function ht(t){t.isLayoutDirty=!1}function De(t){const{visualElement:i}=t.options;i&&i.getProps().onBeforeLayoutMeasure&&i.notify("BeforeLayoutMeasure"),t.resetTransform()}function mt(t){t.finishAnimation(),t.targetDelta=t.relativeTarget=t.target=void 0,t.isProjectionDirty=!0}function Se(t){t.resolveTargetDelta()}function Ee(t){t.calcProjection()}function Ve(t){t.resetSkewAndRotation()}function Ae(t){t.removeLeadSnapshot()}function ft(t,i,n){t.translate=e.mixNumber(i.translate,0,n),t.scale=e.mixNumber(i.scale,1,n),t.origin=i.origin,t.originPoint=i.originPoint}function dt(t,i,n,o){t.min=e.mixNumber(i.min,n.min,o),t.max=e.mixNumber(i.max,n.max,o)}function Ce(t,i,n,o){dt(t.x,i.x,n.x,o),dt(t.y,i.y,n.y,o)}function Le(t){return t.animationValues&&t.animationValues.opacityExit!==void 0}const Re={duration:.45,ease:[.4,0,.1,1]},pt=t=>typeof navigator<"u"&&navigator.userAgent&&navigator.userAgent.toLowerCase().includes(t),gt=pt("applewebkit/")&&!pt("chrome/")?Math.round:e.noop;function yt(t){t.min=gt(t.min),t.max=gt(t.max)}function we(t){yt(t.x),yt(t.y)}function jt(t,i,n){return t==="position"||t==="preserve-aspect"&&!Ft(lt(i),lt(n),.2)}function be(t){return t!==t.root&&t.scroll?.wasRoot}const Be=Mt({attachResizeListener:(t,i)=>e.addDomEvent(t,"resize",i),measureScroll:()=>({x:document.documentElement.scrollLeft||document.body.scrollLeft,y:document.documentElement.scrollTop||document.body.scrollTop}),checkIsScrollRoot:()=>!0}),I={current:void 0},kt=Mt({measureScroll:t=>({x:t.scrollLeft,y:t.scrollTop}),defaultParent:()=>{if(!I.current){const t=new Be({});t.mount(window),t.setOptions({layoutScroll:!0}),I.current=t}return I.current},resetTransform:(t,i)=>{t.style.transform=i!==void 0?i:"none"},checkIsScrollRoot:t=>window.getComputedStyle(t).position==="fixed"}),Me={pan:{Feature:te},drag:{Feature:Qt,ProjectionNode:kt,MeasureLayout:At}},je={layout:{ProjectionNode:kt,MeasureLayout:At}},ke={...e.domAnimation,...Me,...je};exports.AnimatePresence=e.AnimatePresence;exports.AsyncMotionValueAnimation=e.AsyncMotionValueAnimation;exports.DOMKeyframesResolver=e.DOMKeyframesResolver;exports.DeprecatedLayoutGroupContext=e.DeprecatedLayoutGroupContext;exports.JSAnimation=e.JSAnimation;exports.KeyframeResolver=e.KeyframeResolver;exports.LayoutGroup=e.LayoutGroup;exports.LayoutGroupContext=e.LayoutGroupContext;exports.LazyMotion=e.LazyMotion;exports.MotionConfig=e.MotionConfig;exports.MotionConfigContext=e.MotionConfigContext;exports.MotionContext=e.MotionContext;exports.MotionGlobalConfig=e.MotionGlobalConfig;exports.MotionValue=e.MotionValue;exports.NativeAnimation=e.NativeAnimation;exports.NativeAnimationExtended=e.NativeAnimationExtended;exports.PopChild=e.PopChild;exports.PresenceChild=e.PresenceChild;exports.PresenceContext=e.PresenceContext;exports.SubscriptionManager=e.SubscriptionManager;exports.SwitchLayoutGroupContext=e.SwitchLayoutGroupContext;exports.VisualElement=e.VisualElement;exports.WillChangeMotionValue=e.WillChangeMotionValue;exports.acceleratedValues=e.acceleratedValues;exports.addPointerInfo=e.addPointerInfo;exports.addUniqueItem=e.addUniqueItem;exports.alpha=e.alpha;exports.analyseComplexValue=e.analyseComplexValue;exports.animateVisualElement=e.animateVisualElement;exports.animations=e.animations;exports.anticipate=e.anticipate;exports.applyGeneratorOptions=e.applyGeneratorOptions;exports.backIn=e.backIn;exports.backInOut=e.backInOut;exports.backOut=e.backOut;exports.buildTransform=e.buildTransform;exports.calcGeneratorDuration=e.calcGeneratorDuration;exports.cancelFrame=e.cancelFrame;exports.circIn=e.circIn;exports.circInOut=e.circInOut;exports.circOut=e.circOut;exports.clamp=e.clamp;exports.color=e.color;exports.complex=e.complex;exports.containsCSSVariable=e.containsCSSVariable;exports.convertOffsetToTimes=e.convertOffsetToTimes;exports.createBox=e.createBox;exports.createGeneratorEasing=e.createGeneratorEasing;exports.createRenderBatcher=e.createRenderBatcher;exports.cubicBezier=e.cubicBezier;exports.cubicBezierAsString=e.cubicBezierAsString;exports.defaultEasing=e.defaultEasing;exports.defaultOffset=e.defaultOffset;exports.defaultTransformValue=e.defaultTransformValue;exports.defaultValueTypes=e.defaultValueTypes;exports.degrees=e.degrees;exports.dimensionValueTypes=e.dimensionValueTypes;exports.domAnimation=e.domAnimation;exports.easeIn=e.easeIn;exports.easeInOut=e.easeInOut;exports.easeOut=e.easeOut;exports.easingDefinitionToFunction=e.easingDefinitionToFunction;exports.fillOffset=e.fillOffset;exports.fillWildcards=e.fillWildcards;exports.filterProps=e.filterProps;exports.findDimensionValueType=e.findDimensionValueType;exports.findValueType=e.findValueType;exports.flushKeyframeResolvers=e.flushKeyframeResolvers;exports.frame=e.frame;exports.frameData=e.frameData;exports.frameSteps=e.frameSteps;exports.generateLinearEasing=e.generateLinearEasing;exports.getAnimatableNone=e.getAnimatableNone;exports.getDefaultValueType=e.getDefaultValueType;exports.getMixer=e.getMixer;exports.getValueAsType=e.getValueAsType;exports.getValueTransition=e.getValueTransition;exports.getVariableValue=e.getVariableValue;exports.hex=e.hex;exports.hover=e.hover;exports.hsla=e.hsla;exports.hslaToRgba=e.hslaToRgba;exports.inertia=e.inertia;exports.interpolate=e.interpolate;Object.defineProperty(exports,"invariant",{enumerable:!0,get:()=>e.invariant});exports.invisibleValues=e.invisibleValues;exports.isBezierDefinition=e.isBezierDefinition;exports.isBrowser=e.isBrowser;exports.isCSSVariableName=e.isCSSVariableName;exports.isCSSVariableToken=e.isCSSVariableToken;exports.isDragActive=e.isDragActive;exports.isDragging=e.isDragging;exports.isEasingArray=e.isEasingArray;exports.isElementKeyboardAccessible=e.isElementKeyboardAccessible;exports.isGenerator=e.isGenerator;exports.isHTMLElement=e.isHTMLElement;exports.isMotionValue=e.isMotionValue;exports.isNodeOrChild=e.isNodeOrChild;exports.isNumericalString=e.isNumericalString;exports.isObject=e.isObject;exports.isPrimaryPointer=e.isPrimaryPointer;exports.isValidMotionProp=e.isValidMotionProp;exports.isZeroValueString=e.isZeroValueString;exports.keyframes=e.keyframes;exports.m=e.m;exports.makeAnimationInstant=e.makeAnimationInstant;exports.makeUseVisualState=e.makeUseVisualState;exports.mapEasingToNativeEasing=e.mapEasingToNativeEasing;exports.maxGeneratorDuration=e.maxGeneratorDuration;exports.memo=e.memo;exports.microtask=e.microtask;exports.millisecondsToSeconds=e.millisecondsToSeconds;exports.mirrorEasing=e.mirrorEasing;exports.mix=e.mix;exports.mixArray=e.mixArray;exports.mixColor=e.mixColor;exports.mixComplex=e.mixComplex;exports.mixImmediate=e.mixImmediate;exports.mixLinearColor=e.mixLinearColor;exports.mixNumber=e.mixNumber;exports.mixObject=e.mixObject;exports.mixVisibility=e.mixVisibility;exports.motionValue=e.motionValue;exports.noop=e.noop;exports.number=e.number;exports.numberValueTypes=e.numberValueTypes;exports.optimizedAppearDataAttribute=e.optimizedAppearDataAttribute;exports.parseCSSVariable=e.parseCSSVariable;exports.parseValueFromTransform=e.parseValueFromTransform;exports.percent=e.percent;exports.pipe=e.pipe;exports.positionalKeys=e.positionalKeys;exports.press=e.press;exports.progress=e.progress;exports.progressPercentage=e.progressPercentage;exports.px=e.px;exports.readTransformValue=e.readTransformValue;exports.removeItem=e.removeItem;exports.resolveElements=e.resolveElements;exports.resolveMotionValue=e.resolveMotionValue;exports.reverseEasing=e.reverseEasing;exports.rgbUnit=e.rgbUnit;exports.rgba=e.rgba;exports.scale=e.scale;exports.secondsToMilliseconds=e.secondsToMilliseconds;exports.setStyle=e.setStyle;exports.spring=e.spring;exports.startWaapiAnimation=e.startWaapiAnimation;exports.supportedWaapiEasing=e.supportedWaapiEasing;exports.supportsBrowserAnimation=e.supportsBrowserAnimation;exports.supportsFlags=e.supportsFlags;exports.supportsLinearEasing=e.supportsLinearEasing;exports.supportsScrollTimeline=e.supportsScrollTimeline;exports.testValueType=e.testValueType;exports.time=e.time;exports.transformPropOrder=e.transformPropOrder;exports.transformProps=e.transformProps;exports.transformValueTypes=e.transformValueTypes;exports.useComposedRefs=e.useComposedRefs;exports.useForceUpdate=e.useForceUpdate;exports.useIsomorphicLayoutEffect=e.useIsomorphicLayoutEffect;exports.usePresence=e.usePresence;exports.useWillChange=e.useWillChange;exports.velocityPerSecond=e.velocityPerSecond;exports.vh=e.vh;exports.visualElementStore=e.visualElementStore;exports.vw=e.vw;exports.warnOnce=e.warnOnce;Object.defineProperty(exports,"warning",{enumerable:!0,get:()=>e.warning});exports.addPointerEvent=A;exports.calcLength=T;exports.delay=Ct;exports.distance=U;exports.distance2D=St;exports.domMax=ke;exports.isSVGElement=F;exports.isSVGSVGElement=xt;exports.setDragLock=vt;