npm - @ahrowe/ui - Versions diffs - 0.11.0 → 0.12.0 - Mend

@ahrowe/ui 0.11.0 → 0.12.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 (64) hide show

package/dist/esm/common/accordion/accordion.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":["\n.accordion {\n transition: margin 0.2s;\n margin: -1px;\n color: var(--text-color);\n\n &-title {\n width: 100%;\n }\n\n &-active {\n margin: 10px 0;\n }\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n cursor: pointer;\n background: var(--background);\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n font-size: 16px;\n font-weight: 400;\n transition: all 0.2s;\n\n &-active {\n border: 1px solid var(--primary-color);\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;\n }\n }\n\n &-body {\n overflow: hidden;\n transition: all 0.2s ease;\n position: relative;\n border-radius: 0px 0px var(--default-border-radius) var(--default-border-radius);\n border: 1px solid var(--border-color);\n border-top: none;\n border-bottom: none;\n\n &-inner {\n padding: 16px;\n }\n\n &-active {\n border: 1px solid var(--primary-color);\n border-top: none;\n }\n }\n\n &-icon {\n transition: transform 0.2s;\n transform: rotate(0deg);\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--border-color);\n &-active {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"accordion.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.module.pcss"],"sourcesContent":["\n.accordion {\n transition: margin 0.2s;\n margin: -1px;\n color: var(--text-color);\n\n &-title {\n width: 100%;\n }\n\n &-active {\n margin: 10px 0;\n }\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background: var(--background);\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n font-size: 16px;\n font-weight: 400;\n transition: all 0.2s;\n\n &-active {\n border: 1px solid var(--primary-color);\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;\n }\n }\n\n &-body {\n overflow: hidden;\n transition: all 0.2s ease;\n position: relative;\n border-radius: 0px 0px var(--default-border-radius) var(--default-border-radius);\n border: 1px solid var(--border-color);\n border-top: none;\n border-bottom: none;\n\n &-inner {\n padding: 16px;\n }\n\n &-active {\n border: 1px solid var(--primary-color);\n border-top: none;\n }\n }\n\n &-icon {\n transition: transform 0.2s;\n transform: rotate(0deg);\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--border-color);\n &-active {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/accordion/accordion.plain.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion.plain.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.plain.module.pcss"],"sourcesContent":["\n.accordion {\n transition: margin 0.2s;\n margin: -1px;\n\n &-title {\n width: 100%;\n }\n\n &-active {\n margin: 10px 0;\n }\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n border-radius: var(--default-border-radius);\n font-size: 16px;\n font-weight: 400;\n transition: all 0.2s;\n\n &-active {\n border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;\n }\n }\n\n &-body {\n overflow: hidden;\n transition: all 0.2s ease;\n position: relative;\n border-radius: 0px 0px var(--default-border-radius) var(--default-border-radius);\n\n &-inner {\n padding: 0px;\n }\n }\n\n &-icon {\n transition: transform 0.2s;\n transform: rotate(0deg);\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--primary-color);\n &-active {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"accordion.plain.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.plain.module.pcss"],"sourcesContent":["\n.accordion {\n transition: margin 0.2s;\n margin: -1px;\n\n &-title {\n width: 100%;\n }\n\n &-active {\n margin: 10px 0;\n }\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n border-radius: var(--default-border-radius);\n font-size: 16px;\n font-weight: 400;\n transition: all 0.2s;\n\n &-active {\n border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;\n }\n }\n\n &-body {\n overflow: hidden;\n transition: all 0.2s ease;\n position: relative;\n border-radius: 0px 0px var(--default-border-radius) var(--default-border-radius);\n\n &-inner {\n padding: 0px;\n }\n }\n\n &-icon {\n transition: transform 0.2s;\n transform: rotate(0deg);\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--primary-color);\n &-active {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/accordion/accordion.primary.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"accordion.primary.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.primary.module.pcss"],"sourcesContent":["\n.accordion {\n transition: margin 0.2s;\n margin: -1px;\n\n &-title {\n width: 100%;\n }\n\n &-active {\n margin: 10px 0;\n border: 2px solid var(--primary-color);\n border-radius: var(--default-border-radius);\n }\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n cursor: pointer;\n background: var(--background);\n border-radius: var(--default-border-radius);\n font-size: 16px;\n font-weight: 400;\n transition: all 0.2s;\n\n &-active {\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;\n }\n }\n\n &-body {\n overflow: hidden;\n transition: all 0.2s ease;\n position: relative;\n border-radius: 0px 0px var(--default-border-radius) var(--default-border-radius);\n border-top: none;\n border-bottom: none;\n\n &-inner {\n padding: 16px;\n }\n\n &-active {\n border-top: none;\n }\n }\n\n &-icon {\n transition: transform 0.2s;\n transform: rotate(0deg);\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--primary-color);\n &-active {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"accordion.primary.module.mjs","names":[],"sources":["../../../../package/common/accordion/accordion.primary.module.pcss"],"sourcesContent":["\n.accordion {\n transition: margin 0.2s;\n margin: -1px;\n\n &-title {\n width: 100%;\n }\n\n &-active {\n margin: 10px 0;\n border: 2px solid var(--primary-color);\n border-radius: var(--default-border-radius);\n }\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 16px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background: var(--background);\n border-radius: var(--default-border-radius);\n font-size: 16px;\n font-weight: 400;\n transition: all 0.2s;\n\n &-active {\n background: var(--background-accent);\n border-radius: var(--default-border-radius) var(--default-border-radius) 0px 0px;\n }\n }\n\n &-body {\n overflow: hidden;\n transition: all 0.2s ease;\n position: relative;\n border-radius: 0px 0px var(--default-border-radius) var(--default-border-radius);\n border-top: none;\n border-bottom: none;\n\n &-inner {\n padding: 16px;\n }\n\n &-active {\n border-top: none;\n }\n }\n\n &-icon {\n transition: transform 0.2s;\n transform: rotate(0deg);\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n color: var(--primary-color);\n &-active {\n transform: rotate(180deg);\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/actionIcon/actionIcon.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"actionIcon.module.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.module.pcss"],"sourcesContent":[".actionIcon {\n cursor: pointer;\n padding: 4px;\n &:hover {\n filter: brightness(0.8);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"actionIcon.module.mjs","names":[],"sources":["../../../../package/common/actionIcon/actionIcon.module.pcss"],"sourcesContent":[".actionIcon {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: 4px;\n &:hover {\n filter: brightness(0.8);\n }\n}\n"],"mappings":""}

package/dist/esm/common/animatedText/animatedText.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import{AnimatedTextUnit as e,AnimatedTextVariant as t}from"./animatedText.types.mjs";import n from"./animatedText.module.mjs";import{Fragment as r,useEffect as i,useMemo as a,useState as o}from"react";import s from"classnames";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";function d(){return typeof window<`u`&&typeof window.matchMedia==`function`?window.matchMedia(`(prefers-reduced-motion: reduce)`).matches:!1}var f={[t.RiseUp]:n.animatedTextVariantRiseUp,[t.BlurIn]:n.animatedTextVariantBlurIn,[t.Bounce]:n.animatedTextVariantBounce,[t.Glitch]:n.animatedTextVariantGlitch};function p(t,n){return n===e.Word?t.split(` `).filter(Boolean):Array.from(t)}function m({units:t,unit:a,staggerDelay:f,classNames:p,slotStyles:m}){let[h,g]=o(()=>t.length===0?0:d()?t.length:1);i(()=>{if(t.length<=1||d())return;let e=1,n=setInterval(()=>{e+=1,g(e),e>=t.length&&clearInterval(n)},f);return()=>clearInterval(n)},[t,f]);let _=h>=t.length;return u(c,{children:[t.slice(0,h).map((t,i)=>u(r,{children:[l(`span`,{className:s(n.animatedTextTypewriterLetter,p?.letter),style:m?.letter,children:t}),a===e.Word&&i<h-1?` `:null]},i)),l(`span`,{className:s(n.animatedTextCursor,_&&n.animatedTextCursorBlinking,p?.cursor),style:m?.cursor})]})}var h=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*`,g=35;function _(e){return Array.from({length:e},()=>h[Math.floor(Math.random()*69)]).join(``)}function v({units:t,unit:a,staggerDelay:f,classNames:p,slotStyles:m}){let[h]=o(d),[v,y]=o(0);i(()=>{if(t.length===0||h)return;let e=0,n=Math.ceil(t.length*f/g)+1,r=setInterval(()=>{e+=1,y(e),e>=n&&clearInterval(r)},g);return()=>clearInterval(r)},[t,f,h]);let b=Math.min(t.length,Math.floor(v*g/f));return l(c,{children:t.map((i,o)=>{let c=h||o<b;return u(r,{children:[l(`span`,{className:s(n.animatedTextScrambleLetter,p?.letter),style:m?.letter,children:i===` `?` `:c?i:_(i.length)}),a===e.Word&&o<t.length-1?` `:null]},o)})})}function y({text:i,variant:o=t.RiseUp,unit:c=e.Letter,staggerDelay:d=40,duration:h,className:g,style:_,classNames:y,styles:b,...x}){let S=a(()=>p(i,c),[i,c]),C=`${o} ${i} ${c} ${d} ${h??``}`;if(o===t.Shine)return u(`span`,{...x,className:s(n.animatedText,g),style:_,children:[l(`span`,{className:n.animatedTextVisuallyHidden,children:i}),l(`span`,{"aria-hidden":`true`,className:s(n.animatedTextShine,y?.letter),style:{animationDuration:`${h??2e3}ms`,...b?.letter},children:i},C)]});if(o===t.Highlight)return u(`span`,{...x,className:s(n.animatedText,g),style:_,children:[l(`span`,{className:n.animatedTextVisuallyHidden,children:i}),l(`span`,{"aria-hidden":`true`,className:s(n.animatedTextHighlight,y?.letter),style:{animationDuration:`${h??600}ms`,...b?.letter},children:i},C)]});if(o===t.Typewriter)return u(`span`,{...x,className:s(n.animatedText,g),style:_,children:[l(`span`,{className:n.animatedTextVisuallyHidden,children:i}),l(`span`,{"aria-hidden":`true`,children:l(m,{units:S,unit:c,staggerDelay:d,classNames:y,slotStyles:b})},C)]});if(o===t.Scramble)return u(`span`,{...x,className:s(n.animatedText,g),style:_,children:[l(`span`,{className:n.animatedTextVisuallyHidden,children:i}),l(`span`,{"aria-hidden":`true`,children:l(v,{units:S,unit:c,staggerDelay:d,classNames:y,slotStyles:b})},C)]});if(o===t.Wave)return u(`span`,{...x,className:s(n.animatedText,g),style:_,children:[l(`span`,{className:n.animatedTextVisuallyHidden,children:i}),l(`span`,{"aria-hidden":`true`,children:S.map((t,i)=>u(r,{children:[l(`span`,{className:s(n.animatedTextLetter,n.animatedTextVariantWave,y?.letter),style:{animationDelay:`-${i*d}ms`,animationDuration:`${h??1200}ms`,...b?.letter},children:t===` `?` `:t}),c===e.Word&&i<S.length-1?` `:null]},i))},C)]});let w=f[o]??n.animatedTextVariantRiseUp;return u(`span`,{...x,className:s(n.animatedText,g),style:_,children:[l(`span`,{className:n.animatedTextVisuallyHidden,children:i}),l(`span`,{"aria-hidden":`true`,children:S.map((t,i)=>u(r,{children:[l(`span`,{className:s(n.animatedTextLetter,w,y?.letter),style:{animationDelay:`${i*d}ms`,animationDuration:`${h??500}ms`,...b?.letter},children:t===` `?` `:t}),c===e.Word&&i<S.length-1?` `:null]},i))},C)]})}export{y as default};
+import{AnimatedTextUnit as e,AnimatedTextVariant as t}from"./animatedText.types.mjs";import n from"./animatedText.module.mjs";import{Fragment as r,useEffect as i,useMemo as a,useRef as o,useState as s}from"react";import c from"classnames";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";function f(){return typeof window<`u`&&typeof window.matchMedia==`function`?window.matchMedia(`(prefers-reduced-motion: reduce)`).matches:!1}var p={[t.RiseUp]:n.animatedTextVariantRiseUp,[t.BlurIn]:n.animatedTextVariantBlurIn,[t.Bounce]:n.animatedTextVariantBounce,[t.Glitch]:n.animatedTextVariantGlitch};function m(t,n){return n===e.Word?t.split(` `).filter(Boolean):Array.from(t)}function h({units:t,unit:a,staggerDelay:o,classNames:p,slotStyles:m}){let[h,g]=s(()=>t.length===0?0:f()?t.length:1);i(()=>{if(t.length<=1||f())return;let e=1,n=setInterval(()=>{e+=1,g(e),e>=t.length&&clearInterval(n)},o);return()=>clearInterval(n)},[t,o]);let _=h>=t.length;return d(l,{children:[t.slice(0,h).map((t,i)=>d(r,{children:[u(`span`,{className:c(n.animatedTextTypewriterLetter,p?.letter),style:m?.letter,children:t}),a===e.Word&&i<h-1?` `:null]},i)),u(`span`,{className:c(n.animatedTextCursor,_&&n.animatedTextCursorBlinking,p?.cursor),style:m?.cursor})]})}var g=`ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&*`,_=35;function v(e){return Array.from({length:e},()=>g[Math.floor(Math.random()*69)]).join(``)}function y({units:t,unit:a,staggerDelay:o,classNames:p,slotStyles:m}){let[h]=s(f),[g,y]=s(0);i(()=>{if(t.length===0||h)return;let e=0,n=Math.ceil(t.length*o/_)+1,r=setInterval(()=>{e+=1,y(e),e>=n&&clearInterval(r)},_);return()=>clearInterval(r)},[t,o,h]);let b=Math.min(t.length,Math.floor(g*_/o));return u(l,{children:t.map((i,o)=>{let s=h||o<b;return d(r,{children:[u(`span`,{className:c(n.animatedTextScrambleLetter,p?.letter),style:m?.letter,children:i===` `?` `:s?i:v(i.length)}),a===e.Word&&o<t.length-1?` `:null]},o)})})}function b({text:l,variant:f=t.RiseUp,unit:g=e.Letter,staggerDelay:_=40,duration:v,triggerOnView:b=!0,className:x,style:S,classNames:C,styles:w,...T}){let E=a(()=>m(l,g),[l,g]),D=o(null),[O,k]=s(()=>!b||typeof IntersectionObserver>`u`);i(()=>{if(O)return;let e=D.current;if(!e)return;let t=new IntersectionObserver(([e])=>{e?.isIntersecting&&(k(!0),t.disconnect())});return t.observe(e),()=>t.disconnect()},[O]);let A=`${f} ${l} ${g} ${_} ${v??``}`,j;if(!O)j=u(`span`,{"aria-hidden":`true`,style:{opacity:0},children:l});else if(f===t.Shine)j=u(`span`,{"aria-hidden":`true`,className:c(n.animatedTextShine,C?.letter),style:{animationDuration:`${v??2e3}ms`,...w?.letter},children:l},A);else if(f===t.Highlight)j=u(`span`,{"aria-hidden":`true`,className:c(n.animatedTextHighlight,C?.letter),style:{animationDuration:`${v??600}ms`,...w?.letter},children:l},A);else if(f===t.Typewriter)j=u(`span`,{"aria-hidden":`true`,children:u(h,{units:E,unit:g,staggerDelay:_,classNames:C,slotStyles:w})},A);else if(f===t.Scramble)j=u(`span`,{"aria-hidden":`true`,children:u(y,{units:E,unit:g,staggerDelay:_,classNames:C,slotStyles:w})},A);else if(f===t.Wave)j=u(`span`,{"aria-hidden":`true`,children:E.map((t,i)=>d(r,{children:[u(`span`,{className:c(n.animatedTextLetter,n.animatedTextVariantWave,C?.letter),style:{animationDelay:`-${i*_}ms`,animationDuration:`${v??1200}ms`,...w?.letter},children:t===` `?` `:t}),g===e.Word&&i<E.length-1?` `:null]},i))},A);else{let t=p[f]??n.animatedTextVariantRiseUp;j=u(`span`,{"aria-hidden":`true`,children:E.map((i,a)=>d(r,{children:[u(`span`,{className:c(n.animatedTextLetter,t,C?.letter),style:{animationDelay:`${a*_}ms`,animationDuration:`${v??500}ms`,...w?.letter},children:i===` `?` `:i}),g===e.Word&&a<E.length-1?` `:null]},a))},A)}return d(`span`,{...T,ref:D,className:c(n.animatedText,x),style:S,children:[u(`span`,{className:n.animatedTextVisuallyHidden,children:l}),j]})}export{b as default};
 //# sourceMappingURL=animatedText.mjs.map

package/dist/esm/common/animatedText/animatedText.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animatedText.mjs","names":[],"sources":["../../../../package/common/animatedText/animatedText.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { AnimatedTextVariant, AnimatedTextUnit } from './animatedText.types';\nimport type { AnimatedTextProps } from './animatedText.types';\nimport styles from './animatedText.module.pcss';\n\nfunction prefersReducedMotion(): boolean {\n return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)').matches\n : false;\n}\n\n// CSS-driven one-shot entrance variants: identical rendering, only the keyframe (via this class)\n// differs. RiseUp/BlurIn/Bounce/Glitch all animate opacity 0 -> 1 with `animation-fill-mode:\n// forwards`, staggered per unit via `animation-delay`.\nconst ENTRANCE_VARIANT_CLASS: Partial<Record<AnimatedTextVariant, string>> = {\n [AnimatedTextVariant.RiseUp]: styles.animatedTextVariantRiseUp,\n [AnimatedTextVariant.BlurIn]: styles.animatedTextVariantBlurIn,\n [AnimatedTextVariant.Bounce]: styles.animatedTextVariantBounce,\n [AnimatedTextVariant.Glitch]: styles.animatedTextVariantGlitch,\n};\n\nfunction splitUnits(text: string, unit: AnimatedTextUnit): string[] {\n return unit === AnimatedTextUnit.Word ? text.split(' ').filter(Boolean) : Array.from(text);\n}\n\ninterface TypewriterProps {\n units: string[];\n unit: AnimatedTextUnit;\n staggerDelay: number;\n classNames: AnimatedTextProps['classNames'];\n slotStyles: AnimatedTextProps['styles'];\n}\n\n// Split out so its wrapper (keyed by `replayKey`, see below) can be remounted on prop change to\n// reset this component's reveal state, the idiomatic React way to reset state on prop change.\n// It also keeps the reveal-count updates that happen over time (inside the interval callback) as\n// the only setState calls, none of them synchronous-in-effect.\nfunction Typewriter({ units, unit, staggerDelay, classNames, slotStyles }: TypewriterProps) {\n const [revealCount, setRevealCount] = useState(() => {\n if (units.length === 0) return 0;\n return prefersReducedMotion() ? units.length : 1;\n });\n\n useEffect(() => {\n if (units.length <= 1 \|\| prefersReducedMotion()) return;\n let revealed = 1;\n const id = setInterval(() => {\n revealed += 1;\n setRevealCount(revealed);\n if (revealed >= units.length) clearInterval(id);\n }, staggerDelay);\n return () => clearInterval(id);\n }, [units, staggerDelay]);\n\n const isDone = revealCount >= units.length;\n\n return (\n <>\n {units.slice(0, revealCount).map((unitText, index) => (\n <Fragment key={index}>\n <span className={cx(styles.animatedTextTypewriterLetter, classNames?.letter)} style={slotStyles?.letter}>\n {unitText}\n </span>\n {unit === AnimatedTextUnit.Word && index < revealCount - 1 ? ' ' : null}\n </Fragment>\n ))}\n <span\n className={cx(styles.animatedTextCursor, isDone && styles.animatedTextCursorBlinking, classNames?.cursor)}\n style={slotStyles?.cursor}\n />\n </>\n );\n}\n\nconst SCRAMBLE_CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&';\nconst SCRAMBLE_TICK_MS = 35;\n\nfunction randomScrambleText(length: number): string {\n return Array.from({ length }, () => SCRAMBLE_CHARSET[Math.floor(Math.random() SCRAMBLE_CHARSET.length)]).join('');\n}\n\ninterface ScrambleProps {\n units: string[];\n unit: AnimatedTextUnit;\n staggerDelay: number;\n classNames: AnimatedTextProps['classNames'];\n slotStyles: AnimatedTextProps['styles'];\n}\n\n// Same keyed-remount-on-prop-change approach as Typewriter. Every unit starts scrambled and\n// \"locks in\" left to right; the scramble refresh (SCRAMBLE_TICK_MS) is a separate, faster cadence\n// than the per-unit settle pacing (staggerDelay) so still-scrambling units keep visibly flickering.\nfunction Scramble({ units, unit, staggerDelay, classNames, slotStyles }: ScrambleProps) {\n const [reduceMotion] = useState(prefersReducedMotion);\n const [tick, setTick] = useState(0);\n\n useEffect(() => {\n if (units.length === 0 \|\| reduceMotion) return;\n let t = 0;\n const totalTicks = Math.ceil((units.length * staggerDelay) / SCRAMBLE_TICK_MS) + 1;\n const id = setInterval(() => {\n t += 1;\n setTick(t);\n if (t >= totalTicks) clearInterval(id);\n }, SCRAMBLE_TICK_MS);\n return () => clearInterval(id);\n }, [units, staggerDelay, reduceMotion]);\n\n const settledCount = Math.min(units.length, Math.floor((tick * SCRAMBLE_TICK_MS) / staggerDelay));\n\n return (\n <>\n {units.map((unitText, index) => {\n const isSettled = reduceMotion \|\| index < settledCount;\n return (\n <Fragment key={index}>\n <span className={cx(styles.animatedTextScrambleLetter, classNames?.letter)} style={slotStyles?.letter}>\n {unitText === ' ' ? ' ' : isSettled ? unitText : randomScrambleText(unitText.length)}\n </span>\n {unit === AnimatedTextUnit.Word && index < units.length - 1 ? ' ' : null}\n </Fragment>\n );\n })}\n </>\n );\n}\n\nfunction AnimatedText({\n text,\n variant = AnimatedTextVariant.RiseUp,\n unit = AnimatedTextUnit.Letter,\n staggerDelay = 40,\n duration,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: AnimatedTextProps): ReactElement {\n const units = useMemo(() => splitUnits(text, unit), [text, unit]);\n\n // Forces the animated subtree (not the whole component) to remount whenever anything that\n // affects the animation changes, most commonly `text`. Without this, CSS entrance variants\n // rely on `animation-fill-mode: forwards`, which just holds the prior end state instead of\n // replaying when the letters underneath it change; keying on these values makes every variant\n // (CSS-driven and JS-driven alike) replay consistently, matching what a component named\n // AnimatedText should do when the text it's animating actually changes.\n const replayKey = `${variant} ${text} ${unit} ${staggerDelay} ${duration ?? ''}`;\n\n if (variant === AnimatedTextVariant.Shine) {\n return (\n <span {...rest} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n <span\n key={replayKey}\n aria-hidden=\"true\"\n className={cx(styles.animatedTextShine, classNames?.letter)}\n style={{ animationDuration: `${duration ?? 2000}ms`, ...slotStyles?.letter }}\n >\n {text}\n </span>\n </span>\n );\n }\n\n if (variant === AnimatedTextVariant.Highlight) {\n return (\n <span {...rest} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n <span\n key={replayKey}\n aria-hidden=\"true\"\n className={cx(styles.animatedTextHighlight, classNames?.letter)}\n style={{ animationDuration: `${duration ?? 600}ms`, ...slotStyles?.letter }}\n >\n {text}\n </span>\n </span>\n );\n }\n\n if (variant === AnimatedTextVariant.Typewriter) {\n return (\n <span {...rest} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n <span key={replayKey} aria-hidden=\"true\">\n <Typewriter\n units={units}\n unit={unit}\n staggerDelay={staggerDelay}\n classNames={classNames}\n slotStyles={slotStyles}\n />\n </span>\n </span>\n );\n }\n\n if (variant === AnimatedTextVariant.Scramble) {\n return (\n <span {...rest} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n <span key={replayKey} aria-hidden=\"true\">\n <Scramble units={units} unit={unit} staggerDelay={staggerDelay} classNames={classNames} slotStyles={slotStyles} />\n </span>\n </span>\n );\n }\n\n if (variant === AnimatedTextVariant.Wave) {\n return (\n <span {...rest} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n <span key={replayKey} aria-hidden=\"true\">\n {units.map((unitText, index) => (\n <Fragment key={index}>\n <span\n className={cx(styles.animatedTextLetter, styles.animatedTextVariantWave, classNames?.letter)}\n style={{\n // Negative delay starts the loop already mid-cycle, phase-shifted per unit.\n // That's what makes it read as a travelling wave from the very first frame,\n // instead of every unit bobbing in lockstep or staggering in once and then syncing.\n animationDelay: `-${index * staggerDelay}ms`,\n animationDuration: `${duration ?? 1200}ms`,\n ...slotStyles?.letter,\n }}\n >\n {unitText === ' ' ? ' ' : unitText}\n </span>\n {unit === AnimatedTextUnit.Word && index < units.length - 1 ? ' ' : null}\n </Fragment>\n ))}\n </span>\n </span>\n );\n }\n\n const entranceClass = ENTRANCE_VARIANT_CLASS[variant] ?? styles.animatedTextVariantRiseUp;\n\n return (\n <span {...rest} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n <span key={replayKey} aria-hidden=\"true\">\n {units.map((unitText, index) => (\n <Fragment key={index}>\n <span\n className={cx(styles.animatedTextLetter, entranceClass, classNames?.letter)}\n style={{\n animationDelay: `${index * staggerDelay}ms`,\n animationDuration: `${duration ?? 500}ms`,\n ...slotStyles?.letter,\n }}\n >\n {unitText === ' ' ? ' ' : unitText}\n </span>\n {unit === AnimatedTextUnit.Word && index < units.length - 1 ? ' ' : null}\n </Fragment>\n ))}\n </span>\n </span>\n );\n}\n\nexport default AnimatedText;\n"],"mappings":"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"}
1	+ {"version":3,"file":"animatedText.mjs","names":[],"sources":["../../../../package/common/animatedText/animatedText.tsx"],"sourcesContent":["import { Fragment, useEffect, useMemo, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport { AnimatedTextVariant, AnimatedTextUnit } from './animatedText.types';\nimport type { AnimatedTextProps } from './animatedText.types';\nimport styles from './animatedText.module.pcss';\n\nfunction prefersReducedMotion(): boolean {\n return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n ? window.matchMedia('(prefers-reduced-motion: reduce)').matches\n : false;\n}\n\n// CSS-driven one-shot entrance variants: identical rendering, only the keyframe (via this class)\n// differs. RiseUp/BlurIn/Bounce/Glitch all animate opacity 0 -> 1 with `animation-fill-mode:\n// forwards`, staggered per unit via `animation-delay`.\nconst ENTRANCE_VARIANT_CLASS: Partial<Record<AnimatedTextVariant, string>> = {\n [AnimatedTextVariant.RiseUp]: styles.animatedTextVariantRiseUp,\n [AnimatedTextVariant.BlurIn]: styles.animatedTextVariantBlurIn,\n [AnimatedTextVariant.Bounce]: styles.animatedTextVariantBounce,\n [AnimatedTextVariant.Glitch]: styles.animatedTextVariantGlitch,\n};\n\nfunction splitUnits(text: string, unit: AnimatedTextUnit): string[] {\n return unit === AnimatedTextUnit.Word ? text.split(' ').filter(Boolean) : Array.from(text);\n}\n\ninterface TypewriterProps {\n units: string[];\n unit: AnimatedTextUnit;\n staggerDelay: number;\n classNames: AnimatedTextProps['classNames'];\n slotStyles: AnimatedTextProps['styles'];\n}\n\n// Split out so its wrapper (keyed by `replayKey`, see below) can be remounted on prop change to\n// reset this component's reveal state, the idiomatic React way to reset state on prop change.\n// It also keeps the reveal-count updates that happen over time (inside the interval callback) as\n// the only setState calls, none of them synchronous-in-effect.\nfunction Typewriter({ units, unit, staggerDelay, classNames, slotStyles }: TypewriterProps) {\n const [revealCount, setRevealCount] = useState(() => {\n if (units.length === 0) return 0;\n return prefersReducedMotion() ? units.length : 1;\n });\n\n useEffect(() => {\n if (units.length <= 1 \|\| prefersReducedMotion()) return;\n let revealed = 1;\n const id = setInterval(() => {\n revealed += 1;\n setRevealCount(revealed);\n if (revealed >= units.length) clearInterval(id);\n }, staggerDelay);\n return () => clearInterval(id);\n }, [units, staggerDelay]);\n\n const isDone = revealCount >= units.length;\n\n return (\n <>\n {units.slice(0, revealCount).map((unitText, index) => (\n <Fragment key={index}>\n <span className={cx(styles.animatedTextTypewriterLetter, classNames?.letter)} style={slotStyles?.letter}>\n {unitText}\n </span>\n {unit === AnimatedTextUnit.Word && index < revealCount - 1 ? ' ' : null}\n </Fragment>\n ))}\n <span\n className={cx(styles.animatedTextCursor, isDone && styles.animatedTextCursorBlinking, classNames?.cursor)}\n style={slotStyles?.cursor}\n />\n </>\n );\n}\n\nconst SCRAMBLE_CHARSET = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%&';\nconst SCRAMBLE_TICK_MS = 35;\n\nfunction randomScrambleText(length: number): string {\n return Array.from({ length }, () => SCRAMBLE_CHARSET[Math.floor(Math.random() SCRAMBLE_CHARSET.length)]).join('');\n}\n\ninterface ScrambleProps {\n units: string[];\n unit: AnimatedTextUnit;\n staggerDelay: number;\n classNames: AnimatedTextProps['classNames'];\n slotStyles: AnimatedTextProps['styles'];\n}\n\n// Same keyed-remount-on-prop-change approach as Typewriter. Every unit starts scrambled and\n// \"locks in\" left to right; the scramble refresh (SCRAMBLE_TICK_MS) is a separate, faster cadence\n// than the per-unit settle pacing (staggerDelay) so still-scrambling units keep visibly flickering.\nfunction Scramble({ units, unit, staggerDelay, classNames, slotStyles }: ScrambleProps) {\n const [reduceMotion] = useState(prefersReducedMotion);\n const [tick, setTick] = useState(0);\n\n useEffect(() => {\n if (units.length === 0 \|\| reduceMotion) return;\n let t = 0;\n const totalTicks = Math.ceil((units.length * staggerDelay) / SCRAMBLE_TICK_MS) + 1;\n const id = setInterval(() => {\n t += 1;\n setTick(t);\n if (t >= totalTicks) clearInterval(id);\n }, SCRAMBLE_TICK_MS);\n return () => clearInterval(id);\n }, [units, staggerDelay, reduceMotion]);\n\n const settledCount = Math.min(units.length, Math.floor((tick * SCRAMBLE_TICK_MS) / staggerDelay));\n\n return (\n <>\n {units.map((unitText, index) => {\n const isSettled = reduceMotion \|\| index < settledCount;\n return (\n <Fragment key={index}>\n <span className={cx(styles.animatedTextScrambleLetter, classNames?.letter)} style={slotStyles?.letter}>\n {unitText === ' ' ? ' ' : isSettled ? unitText : randomScrambleText(unitText.length)}\n </span>\n {unit === AnimatedTextUnit.Word && index < units.length - 1 ? ' ' : null}\n </Fragment>\n );\n })}\n </>\n );\n}\n\nfunction AnimatedText({\n text,\n variant = AnimatedTextVariant.RiseUp,\n unit = AnimatedTextUnit.Letter,\n staggerDelay = 40,\n duration,\n triggerOnView = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: AnimatedTextProps): ReactElement {\n const units = useMemo(() => splitUnits(text, unit), [text, unit]);\n const rootRef = useRef<HTMLSpanElement>(null);\n\n // When `triggerOnView` is on, the animated subtree stays unmounted (see `isVisible` below)\n // until the root first scrolls into the viewport, so the entrance/loop only plays once someone\n // can actually see it instead of burning its one-shot animation off-screen on mount. Falls back\n // to immediately visible when IntersectionObserver isn't available (SSR, old browsers, jsdom).\n const [isVisible, setIsVisible] = useState(() => !triggerOnView \|\| typeof IntersectionObserver === 'undefined');\n\n useEffect(() => {\n if (isVisible) return;\n const node = rootRef.current;\n if (!node) return;\n const observer = new IntersectionObserver(([entry]) => {\n if (entry?.isIntersecting) {\n setIsVisible(true);\n observer.disconnect();\n }\n });\n observer.observe(node);\n return () => observer.disconnect();\n }, [isVisible]);\n\n // Forces the animated subtree (not the whole component) to remount whenever anything that\n // affects the animation changes, most commonly `text`. Without this, CSS entrance variants\n // rely on `animation-fill-mode: forwards`, which just holds the prior end state instead of\n // replaying when the letters underneath it change; keying on these values makes every variant\n // (CSS-driven and JS-driven alike) replay consistently, matching what a component named\n // AnimatedText should do when the text it's animating actually changes.\n const replayKey = `${variant} ${text} ${unit} ${staggerDelay} ${duration ?? ''}`;\n\n let content: ReactElement;\n\n if (!isVisible) {\n // Reserves the same layout space as the real content without playing anything yet.\n content = (\n <span aria-hidden=\"true\" style={{ opacity: 0 }}>\n {text}\n </span>\n );\n } else if (variant === AnimatedTextVariant.Shine) {\n content = (\n <span\n key={replayKey}\n aria-hidden=\"true\"\n className={cx(styles.animatedTextShine, classNames?.letter)}\n style={{ animationDuration: `${duration ?? 2000}ms`, ...slotStyles?.letter }}\n >\n {text}\n </span>\n );\n } else if (variant === AnimatedTextVariant.Highlight) {\n content = (\n <span\n key={replayKey}\n aria-hidden=\"true\"\n className={cx(styles.animatedTextHighlight, classNames?.letter)}\n style={{ animationDuration: `${duration ?? 600}ms`, ...slotStyles?.letter }}\n >\n {text}\n </span>\n );\n } else if (variant === AnimatedTextVariant.Typewriter) {\n content = (\n <span key={replayKey} aria-hidden=\"true\">\n <Typewriter units={units} unit={unit} staggerDelay={staggerDelay} classNames={classNames} slotStyles={slotStyles} />\n </span>\n );\n } else if (variant === AnimatedTextVariant.Scramble) {\n content = (\n <span key={replayKey} aria-hidden=\"true\">\n <Scramble units={units} unit={unit} staggerDelay={staggerDelay} classNames={classNames} slotStyles={slotStyles} />\n </span>\n );\n } else if (variant === AnimatedTextVariant.Wave) {\n content = (\n <span key={replayKey} aria-hidden=\"true\">\n {units.map((unitText, index) => (\n <Fragment key={index}>\n <span\n className={cx(styles.animatedTextLetter, styles.animatedTextVariantWave, classNames?.letter)}\n style={{\n // Negative delay starts the loop already mid-cycle, phase-shifted per unit.\n // That's what makes it read as a travelling wave from the very first frame,\n // instead of every unit bobbing in lockstep or staggering in once and then syncing.\n animationDelay: `-${index * staggerDelay}ms`,\n animationDuration: `${duration ?? 1200}ms`,\n ...slotStyles?.letter,\n }}\n >\n {unitText === ' ' ? ' ' : unitText}\n </span>\n {unit === AnimatedTextUnit.Word && index < units.length - 1 ? ' ' : null}\n </Fragment>\n ))}\n </span>\n );\n } else {\n const entranceClass = ENTRANCE_VARIANT_CLASS[variant] ?? styles.animatedTextVariantRiseUp;\n content = (\n <span key={replayKey} aria-hidden=\"true\">\n {units.map((unitText, index) => (\n <Fragment key={index}>\n <span\n className={cx(styles.animatedTextLetter, entranceClass, classNames?.letter)}\n style={{\n animationDelay: `${index * staggerDelay}ms`,\n animationDuration: `${duration ?? 500}ms`,\n ...slotStyles?.letter,\n }}\n >\n {unitText === ' ' ? ' ' : unitText}\n </span>\n {unit === AnimatedTextUnit.Word && index < units.length - 1 ? ' ' : null}\n </Fragment>\n ))}\n </span>\n );\n }\n\n return (\n <span {...rest} ref={rootRef} className={cx(styles.animatedText, className)} style={style}>\n <span className={styles.animatedTextVisuallyHidden}>{text}</span>\n {content}\n </span>\n );\n}\n\nexport default AnimatedText;\n"],"mappings":"+SAOA,SAAS,GAAgC,CACvC,OAAO,OAAO,OAAW,KAAe,OAAO,OAAO,YAAe,WACjE,OAAO,WAAW,kCAAkC,EAAE,QACtD,EACN,CAKA,IAAM,EAAuE,EAC1E,EAAoB,QAAS,EAAO,2BACpC,EAAoB,QAAS,EAAO,2BACpC,EAAoB,QAAS,EAAO,2BACpC,EAAoB,QAAS,EAAO,yBACvC,EAEA,SAAS,EAAW,EAAc,EAAkC,CAClE,OAAO,IAAS,EAAiB,KAAO,EAAK,MAAM,GAAG,EAAE,OAAO,OAAO,EAAI,MAAM,KAAK,CAAI,CAC3F,CAcA,SAAS,EAAW,CAAE,QAAO,OAAM,eAAc,aAAY,cAA+B,CAC1F,GAAM,CAAC,EAAa,GAAkB,MAChC,EAAM,SAAW,EAAU,EACxB,EAAqB,EAAI,EAAM,OAAS,CAChD,EAED,MAAgB,CACd,GAAI,EAAM,QAAU,GAAK,EAAqB,EAAG,OACjD,IAAI,EAAW,EACT,EAAK,gBAAkB,CAC3B,GAAY,EACZ,EAAe,CAAQ,EACnB,GAAY,EAAM,QAAQ,cAAc,CAAE,CAChD,EAAG,CAAY,EACf,UAAa,cAAc,CAAE,CAC/B,EAAG,CAAC,EAAO,CAAY,CAAC,EAExB,IAAM,EAAS,GAAe,EAAM,OAEpC,OACE,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,MAAM,EAAG,CAAW,EAAE,KAAK,EAAU,IAC1C,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,6BAA8B,GAAY,MAAM,EAAG,MAAO,GAAY,gBAC9F,CACG,CAAA,EACL,IAAS,EAAiB,MAAQ,EAAQ,EAAc,EAAI,IAAM,IAC3D,CAAA,EALK,CAKL,CACX,EACD,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,mBAAoB,GAAU,EAAO,2BAA4B,GAAY,MAAM,EACxG,MAAO,GAAY,MACpB,CAAA,CACD,CAAA,CAAA,CAEN,CAEA,IAAM,EAAmB,wEACnB,EAAmB,GAEzB,SAAS,EAAmB,EAAwB,CAClD,OAAO,MAAM,KAAK,CAAE,QAAO,MAAS,EAAiB,KAAK,MAAM,KAAK,OAAO,EAAI,EAAuB,EAAE,EAAE,KAAK,EAAE,CACpH,CAaA,SAAS,EAAS,CAAE,QAAO,OAAM,eAAc,aAAY,cAA6B,CACtF,GAAM,CAAC,GAAgB,EAAS,CAAoB,EAC9C,CAAC,EAAM,GAAW,EAAS,CAAC,EAElC,MAAgB,CACd,GAAI,EAAM,SAAW,GAAK,EAAc,OACxC,IAAI,EAAI,EACF,EAAa,KAAK,KAAM,EAAM,OAAS,EAAgB,CAAgB,EAAI,EAC3E,EAAK,gBAAkB,CAC3B,GAAK,EACL,EAAQ,CAAC,EACL,GAAK,GAAY,cAAc,CAAE,CACvC,EAAG,CAAgB,EACnB,UAAa,cAAc,CAAE,CAC/B,EAAG,CAAC,EAAO,EAAc,CAAY,CAAC,EAEtC,IAAM,EAAe,KAAK,IAAI,EAAM,OAAQ,KAAK,MAAO,EAAO,EAAoB,CAAY,CAAC,EAEhG,OACE,EAAA,EAAA,CAAA,SACG,EAAM,KAAK,EAAU,IAAU,CAC9B,IAAM,EAAY,GAAgB,EAAQ,EAC1C,OACE,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,OAAD,CAAM,UAAW,EAAG,EAAO,2BAA4B,GAAY,MAAM,EAAG,MAAO,GAAY,gBAC5F,IAAa,IAAM,IAAM,EAAY,EAAW,EAAmB,EAAS,MAAM,CAC/E,CAAA,EACL,IAAS,EAAiB,MAAQ,EAAQ,EAAM,OAAS,EAAI,IAAM,IAC5D,CAAA,EALK,CAKL,CAEd,CAAC,CACD,CAAA,CAEN,CAEA,SAAS,EAAa,CACpB,OACA,UAAU,EAAoB,OAC9B,OAAO,EAAiB,OACxB,eAAe,GACf,WACA,gBAAgB,GAChB,YACA,QACA,aACA,OAAQ,EACR,GAAG,GAC+B,CAClC,IAAM,EAAQ,MAAc,EAAW,EAAM,CAAI,EAAG,CAAC,EAAM,CAAI,CAAC,EAC1D,EAAU,EAAwB,IAAI,EAMtC,CAAC,EAAW,GAAgB,MAAe,CAAC,GAAiB,OAAO,qBAAyB,GAAW,EAE9G,MAAgB,CACd,GAAI,EAAW,OACf,IAAM,EAAO,EAAQ,QACrB,GAAI,CAAC,EAAM,OACX,IAAM,EAAW,IAAI,sBAAsB,CAAC,KAAW,CACjD,GAAO,iBACT,EAAa,EAAI,EACjB,EAAS,WAAW,EAExB,CAAC,EAED,OADA,EAAS,QAAQ,CAAI,MACR,EAAS,WAAW,CACnC,EAAG,CAAC,CAAS,CAAC,EAQd,IAAM,EAAY,GAAG,EAAQ,GAAG,EAAK,GAAG,EAAK,GAAG,EAAa,GAAG,GAAY,KAExE,EAEJ,GAAI,CAAC,EAEH,EACE,EAAC,OAAD,CAAM,cAAY,OAAO,MAAO,CAAE,QAAS,CAAE,WAC1C,CACG,CAAA,OAEH,GAAI,IAAY,EAAoB,MACzC,EACE,EAAC,OAAD,CAEE,cAAY,OACZ,UAAW,EAAG,EAAO,kBAAmB,GAAY,MAAM,EAC1D,MAAO,CAAE,kBAAmB,GAAG,GAAY,IAAK,IAAK,GAAG,GAAY,MAAO,WAE1E,CACG,EANC,CAMD,OAEH,GAAI,IAAY,EAAoB,UACzC,EACE,EAAC,OAAD,CAEE,cAAY,OACZ,UAAW,EAAG,EAAO,sBAAuB,GAAY,MAAM,EAC9D,MAAO,CAAE,kBAAmB,GAAG,GAAY,IAAI,IAAK,GAAG,GAAY,MAAO,WAEzE,CACG,EANC,CAMD,OAEH,GAAI,IAAY,EAAoB,WACzC,EACE,EAAC,OAAD,CAAsB,cAAY,gBAChC,EAAC,EAAD,CAAmB,QAAa,OAAoB,eAA0B,aAAwB,YAAa,CAAA,CAC/G,EAFK,CAEL,OAEH,GAAI,IAAY,EAAoB,SACzC,EACE,EAAC,OAAD,CAAsB,cAAY,gBAChC,EAAC,EAAD,CAAiB,QAAa,OAAoB,eAA0B,aAAwB,YAAa,CAAA,CAC7G,EAFK,CAEL,OAEH,GAAI,IAAY,EAAoB,KACzC,EACE,EAAC,OAAD,CAAsB,cAAY,gBAC/B,EAAM,KAAK,EAAU,IACpB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,mBAAoB,EAAO,wBAAyB,GAAY,MAAM,EAC3F,MAAO,CAIL,eAAgB,IAAI,EAAQ,EAAa,IACzC,kBAAmB,GAAG,GAAY,KAAK,IACvC,GAAG,GAAY,MACjB,WAEC,IAAa,IAAM,IAAM,CACtB,CAAA,EACL,IAAS,EAAiB,MAAQ,EAAQ,EAAM,OAAS,EAAI,IAAM,IAC5D,CAAA,EAfK,CAeL,CACX,CACG,EAnBK,CAmBL,MAEH,CACL,IAAM,EAAgB,EAAuB,IAAY,EAAO,0BAChE,EACE,EAAC,OAAD,CAAsB,cAAY,gBAC/B,EAAM,KAAK,EAAU,IACpB,EAAC,EAAD,CAAA,SAAA,CACE,EAAC,OAAD,CACE,UAAW,EAAG,EAAO,mBAAoB,EAAe,GAAY,MAAM,EAC1E,MAAO,CACL,eAAgB,GAAG,EAAQ,EAAa,IACxC,kBAAmB,GAAG,GAAY,IAAI,IACtC,GAAG,GAAY,MACjB,WAEC,IAAa,IAAM,IAAM,CACtB,CAAA,EACL,IAAS,EAAiB,MAAQ,EAAQ,EAAM,OAAS,EAAI,IAAM,IAC5D,CAAA,EAZK,CAYL,CACX,CACG,EAhBK,CAgBL,CAEV,CAEA,OACE,EAAC,OAAD,CAAM,GAAI,EAAM,IAAK,EAAS,UAAW,EAAG,EAAO,aAAc,CAAS,EAAU,iBAApF,CACE,EAAC,OAAD,CAAM,UAAW,EAAO,oCAA6B,CAAW,CAAA,EAC/D,CACG,GAEV"}

package/dist/esm/common/animatedText/animatedText.types.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"animatedText.types.mjs","names":[],"sources":["../../../../package/common/animatedText/animatedText.types.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Which animation plays across the text. /\nexport enum AnimatedTextVariant {\n /* Each unit rises up from below its baseline, staggered left to right. /\n RiseUp = 'rise-up',\n /* Each unit fades in from a blur, staggered left to right. /\n BlurIn = 'blur-in',\n /* Each unit drops in from above with a spring overshoot, staggered left to right. /\n Bounce = 'bounce',\n /* Each unit pops in in order, like it's being typed, with a blinking cursor at the end. /\n Typewriter = 'typewriter',\n /* Each unit resolves from random characters to its real value, staggered left to right. /\n Scramble = 'scramble',\n /* Each unit briefly RGB-splits and jitters before settling, staggered left to right. /\n Glitch = 'glitch',\n /* Every unit continuously bobs up and down in a travelling wave, on a loop. /\n Wave = 'wave',\n /* A highlight sweeps across the text, left to right, on a loop. /\n Shine = 'shine',\n /* A marker-style highlight block wipes in behind the whole string, once, left to right. /\n Highlight = 'highlight',\n}\n\n/\n What gets staggered and animated as one entrance unit. Applies to every variant except\n * `Shine` and `Highlight`, which always animate the whole string as a single run.\n /\nexport enum AnimatedTextUnit {\n /* Every letter animates on its own. /\n Letter = 'letter',\n /* Every word animates as a whole block. /\n Word = 'word',\n}\n\nexport type AnimatedTextSlots = 'letter' \| 'cursor';\n\nexport interface AnimatedTextProps extends HtmlProps {\n /* The text to animate. Split and animated one unit at a time for every variant but `Shine`/`Highlight`. /\n text: string;\n /* Which animation plays (default `RiseUp`). /\n variant?: AnimatedTextVariant;\n /* Whether entrance/loop variants stagger by letter or by word (default `Letter`). Ignored by `Shine`/`Highlight`. /\n unit?: AnimatedTextUnit;\n /\n Delay in ms between each unit's animation start. Applies to every variant except `Shine`\n * and `Highlight`, which animate as a single run (default `40`).\n /\n staggerDelay?: number;\n /\n Duration in ms of one animation cycle: a single unit's entrance for `RiseUp`/`BlurIn`/\n * `Bounce`/`Glitch` (default `500`), one bob cycle for `Wave` (default `1200`), one sweep of\n * the highlight for `Shine` (default `2000`), or the one-shot wipe-in for `Highlight` (default\n * `600`). Ignored by `Typewriter` and `Scramble`, since each unit resolves instantly; use\n * `staggerDelay` to control their pacing.\n */\n duration?: number;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<AnimatedTextSlots>;\n styles?: SlotStyles<AnimatedTextSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,UAEA,EAAA,OAAA,UAEA,EAAA,OAAA,SAEA,EAAA,WAAA,aAEA,EAAA,SAAA,WAEA,EAAA,OAAA,SAEA,EAAA,KAAA,OAEA,EAAA,MAAA,QAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"animatedText.types.mjs","names":[],"sources":["../../../../package/common/animatedText/animatedText.types.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Which animation plays across the text. /\nexport enum AnimatedTextVariant {\n /* Each unit rises up from below its baseline, staggered left to right. /\n RiseUp = 'rise-up',\n /* Each unit fades in from a blur, staggered left to right. /\n BlurIn = 'blur-in',\n /* Each unit drops in from above with a spring overshoot, staggered left to right. /\n Bounce = 'bounce',\n /* Each unit pops in in order, like it's being typed, with a blinking cursor at the end. /\n Typewriter = 'typewriter',\n /* Each unit resolves from random characters to its real value, staggered left to right. /\n Scramble = 'scramble',\n /* Each unit briefly RGB-splits and jitters before settling, staggered left to right. /\n Glitch = 'glitch',\n /* Every unit continuously bobs up and down in a travelling wave, on a loop. /\n Wave = 'wave',\n /* A highlight sweeps across the text, left to right, on a loop. /\n Shine = 'shine',\n /* A marker-style highlight block wipes in behind the whole string, once, left to right. /\n Highlight = 'highlight',\n}\n\n/\n What gets staggered and animated as one entrance unit. Applies to every variant except\n * `Shine` and `Highlight`, which always animate the whole string as a single run.\n /\nexport enum AnimatedTextUnit {\n /* Every letter animates on its own. /\n Letter = 'letter',\n /* Every word animates as a whole block. /\n Word = 'word',\n}\n\nexport type AnimatedTextSlots = 'letter' \| 'cursor';\n\nexport interface AnimatedTextProps extends HtmlProps {\n /* The text to animate. Split and animated one unit at a time for every variant but `Shine`/`Highlight`. /\n text: string;\n /* Which animation plays (default `RiseUp`). /\n variant?: AnimatedTextVariant;\n /* Whether entrance/loop variants stagger by letter or by word (default `Letter`). Ignored by `Shine`/`Highlight`. /\n unit?: AnimatedTextUnit;\n /\n Delay in ms between each unit's animation start. Applies to every variant except `Shine`\n * and `Highlight`, which animate as a single run (default `40`).\n /\n staggerDelay?: number;\n /\n Duration in ms of one animation cycle: a single unit's entrance for `RiseUp`/`BlurIn`/\n * `Bounce`/`Glitch` (default `500`), one bob cycle for `Wave` (default `1200`), one sweep of\n * the highlight for `Shine` (default `2000`), or the one-shot wipe-in for `Highlight` (default\n * `600`). Ignored by `Typewriter` and `Scramble`, since each unit resolves instantly; use\n * `staggerDelay` to control their pacing.\n /\n duration?: number;\n /\n When `true` (default), the animation doesn't start until the component first scrolls into\n * the viewport. Set to `false` to play immediately on mount, e.g. for text already in view\n * above the fold.\n */\n triggerOnView?: boolean;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<AnimatedTextSlots>;\n styles?: SlotStyles<AnimatedTextSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,UAEA,EAAA,OAAA,UAEA,EAAA,OAAA,SAEA,EAAA,WAAA,aAEA,EAAA,SAAA,WAEA,EAAA,OAAA,SAEA,EAAA,KAAA,OAEA,EAAA,MAAA,QAEA,EAAA,UAAA,aACF,EAAA,CAAA,CAAA,EAMY,EAAL,SAAA,EAAA,OAEL,GAAA,OAAA,SAEA,EAAA,KAAA,QACF,EAAA,CAAA,CAAA"}

package/dist/esm/common/button/button.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n font-size: 16px;\n background: transparent;\n color: var(--text-color);\n border: 1px solid transparent;\n padding: 0;\n font-family: var(--default-font);\n border-radius: var(--default-border-radius);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n\n &-notAllowed {\n cursor: not-allowed;\n filter: opacity(0.8);\n }\n\n &-loading-icon {\n width: 100% !important;\n height: 100% !important;\n }\n\n &-content {\n position: relative;\n white-space: break-spaces;\n\n div {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n }\n\n &-loading {\n visibility: hidden;\n\n &-container {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n &-withIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-s);\n }\n\n &-style {\n &-default {\n background: var(--button-default-background, transparent);\n color: var(--button-default-color, var(--text-color));\n border: var(--button-default-border, 1px solid transparent);\n }\n\n &-primary {\n background: var(--primary-color);\n color: var(--text-color);\n color: var(--text-on-primary);\n\n .button-loading-icon {\n stroke: var(--text-on-primary);\n }\n }\n\n &-delete {\n background: var(--error-color);\n color: var(--text-on-delete);\n\n .button-loading-icon {\n stroke: var(--text-on-delete);\n }\n }\n }\n\n &-background {\n display: block;\n padding: 8px 12px;\n }\n\n &-size {\n &-default {\n font-size: 16px;\n }\n\n &-small {\n /* Small button is same as default for now /\n font-size: 12px;\n\n &-background {\n display: block;\n padding: 0px;\n }\n }\n\n &-medium {\n / Medium button is same as default for now /\n font-size: 16px;\n }\n\n &-large {\n / Large button is same as default for now */\n font-size: 20px;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"button.module.mjs","names":[],"sources":["../../../../package/common/button/button.module.pcss"],"sourcesContent":[".button {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n font-size: 16px;\n background: transparent;\n color: var(--text-color);\n border: 1px solid transparent;\n padding: 0;\n font-family: var(--default-font);\n border-radius: var(--default-border-radius);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n overflow: hidden;\n\n &-notAllowed {\n cursor: not-allowed;\n filter: opacity(0.8);\n }\n\n &-loading-icon {\n width: 100% !important;\n height: 100% !important;\n }\n\n &-content {\n position: relative;\n white-space: break-spaces;\n\n div {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n }\n\n &-loading {\n visibility: hidden;\n\n &-container {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n }\n\n &-withIcon {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-s);\n }\n\n &-style {\n &-default {\n background: var(--button-default-background, transparent);\n color: var(--button-default-color, var(--text-color));\n border: var(--button-default-border, 1px solid transparent);\n }\n\n &-primary {\n background: var(--primary-color);\n color: var(--text-color);\n color: var(--text-on-primary);\n\n .button-loading-icon {\n stroke: var(--text-on-primary);\n }\n }\n\n &-delete {\n background: var(--error-color);\n color: var(--text-on-delete);\n\n .button-loading-icon {\n stroke: var(--text-on-delete);\n }\n }\n }\n\n &-background {\n display: block;\n padding: 8px 12px;\n }\n\n &-size {\n &-default {\n font-size: 16px;\n }\n\n &-small {\n /* Small button is same as default for now /\n font-size: 12px;\n\n &-background {\n display: block;\n padding: 0px;\n }\n }\n\n &-medium {\n / Medium button is same as default for now /\n font-size: 16px;\n }\n\n &-large {\n / Large button is same as default for now */\n font-size: 20px;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/card/card.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n border: 1px solid transparent;\n box-sizing: border-box;\n\n &-clip {\n overflow: hidden;\n }\n\n &-padding {\n padding: 16px;\n }\n\n &-gaps {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-s);\n }\n\n &-style {\n &-elevated {\n background: var(--background-card-elevated, var(--background-accent-light));\n box-shadow: var(--card-shadow);\n }\n\n &-outlined {\n background: var(--background-card-outlined, transparent);\n border-color: var(--border-color);\n }\n\n &-filled {\n background: var(--background-card-filled, var(--background-accent));\n }\n }\n\n &-interactable {\n cursor: pointer;\n }\n\n &-hover {\n transition:\n transform 0.15s ease,\n box-shadow 0.15s ease,\n filter 0.3s ease;\n\n &:hover {\n transform: translateY(-2px);\n background: var(--background-accent);\n }\n }\n}\n\n.cardHeader {\n display: flex;\n gap: 16px;\n align-items: center;\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 40px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n gap: var(--spacing-s);\n flex-wrap: wrap;\n flex-shrink: 1;\n align-items: center;\n justify-content: flex-end;\n }\n\n &-titles {\n display: flex;\n flex-flow: column;\n flex: 1;\n gap: 4px;\n overflow: hidden;\n\n &-main {\n font-size: 18px;\n font-weight: 600;\n min-width: 3ch;\n flex-shrink: 100000;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-m);\n justify-content: space-between;\n }\n }\n\n &-sub {\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n.cardMedia {\n width: calc(100% + 32px);\n margin: 0 -16px 0 -16px;\n}\n\n.cardActions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"card.module.mjs","names":[],"sources":["../../../../package/common/card/card.module.pcss"],"sourcesContent":[".card {\n border-radius: var(--default-border-radius);\n color: var(--text-color);\n border: 1px solid transparent;\n box-sizing: border-box;\n\n &-clip {\n overflow: hidden;\n }\n\n &-padding {\n padding: 16px;\n }\n\n &-gaps {\n display: flex;\n flex-direction: column;\n gap: var(--spacing-s);\n }\n\n &-style {\n &-elevated {\n background: var(--background-card-elevated, var(--background-accent-light));\n box-shadow: var(--card-shadow);\n }\n\n &-outlined {\n background: var(--background-card-outlined, transparent);\n border-color: var(--border-color);\n }\n\n &-filled {\n background: var(--background-card-filled, var(--background-accent));\n }\n }\n\n &-interactable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-hover {\n transition:\n transform 0.15s ease,\n box-shadow 0.15s ease,\n filter 0.3s ease;\n\n &:hover {\n transform: translateY(-2px);\n background: var(--background-accent);\n }\n }\n}\n\n.cardHeader {\n display: flex;\n gap: 16px;\n align-items: center;\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 40px;\n height: 40px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 40px;\n overflow: hidden;\n background-size: cover;\n background-position: center;\n flex-shrink: 0;\n }\n\n &-actions {\n display: flex;\n gap: var(--spacing-s);\n flex-wrap: wrap;\n flex-shrink: 1;\n align-items: center;\n justify-content: flex-end;\n }\n\n &-titles {\n display: flex;\n flex-flow: column;\n flex: 1;\n gap: 4px;\n overflow: hidden;\n\n &-main {\n font-size: 18px;\n font-weight: 600;\n min-width: 3ch;\n flex-shrink: 100000;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &-container {\n display: flex;\n align-items: center;\n gap: var(--spacing-m);\n justify-content: space-between;\n }\n }\n\n &-sub {\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n }\n}\n\n.cardMedia {\n width: calc(100% + 32px);\n margin: 0 -16px 0 -16px;\n}\n\n.cardActions {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n"],"mappings":""}

package/dist/esm/common/checkbox/checkbox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":["\n.checkbox {\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: 10px;\n margin: -1px;\n border: 1px solid transparent;\n width: fit-content;\n\n &-icon {\n color: #a3a9b9;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background-color: var(--light-background-color);\n width: fit-content;\n height: fit-content;\n /* width: 16px;\n height: 16px; */\n }\n\n &-loading {\n background: transparent;\n\n &-spinner {\n width: 100%;\n height: 100%;\n }\n }\n\n &-pointer {\n cursor: pointer;\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--primary-color);\n border-radius: 6px;\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-checkmark {\n border: 1.8px solid var(--text-color);\n border-radius: var(--default-border-radius);\n position: relative;\n\n svg {\n stroke: var(--text-on-primary);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n transition:\n transform 0.1s,\n stroke-dashoffset 0.4s;\n transition-delay: 0s, 0.2s;\n background: var(--primary-color);\n transform: scale(0);\n box-sizing: content-box;\n padding: 2px;\n border-radius: var(--default-border-radius);\n }\n\n &-checked {\n svg {\n stroke-dashoffset: 0;\n transform: scale(1) translate(-3px, -3px);\n }\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"checkbox.module.mjs","names":[],"sources":["../../../../package/common/checkbox/checkbox.module.pcss"],"sourcesContent":["\n.checkbox {\n user-select: none;\n display: flex;\n align-items: center;\n column-gap: 10px;\n margin: -1px;\n border: 1px solid transparent;\n width: fit-content;\n\n &-icon {\n color: #a3a9b9;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 6px;\n background-color: var(--light-background-color);\n width: fit-content;\n height: fit-content;\n /* width: 16px;\n height: 16px; */\n }\n\n &-loading {\n background: transparent;\n\n &-spinner {\n width: 100%;\n height: 100%;\n }\n }\n\n &-pointer {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &:focus-visible {\n outline: none;\n border: 1px solid var(--primary-color);\n border-radius: 6px;\n }\n\n &-disabled {\n filter: brightness(0.8);\n cursor: not-allowed;\n }\n\n &-checkmark {\n border: 1.8px solid var(--text-color);\n border-radius: var(--default-border-radius);\n position: relative;\n\n svg {\n stroke: var(--text-on-primary);\n stroke-dasharray: 5;\n stroke-dashoffset: 5;\n transition:\n transform 0.1s,\n stroke-dashoffset 0.4s;\n transition-delay: 0s, 0.2s;\n background: var(--primary-color);\n transform: scale(0);\n box-sizing: content-box;\n padding: 2px;\n border-radius: var(--default-border-radius);\n }\n\n &-checked {\n svg {\n stroke-dashoffset: 0;\n transform: scale(1) translate(-3px, -3px);\n }\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/chip/chip.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n background: rgba(0, 0, 0, 0.08);\n border-radius: 99999px;\n width: fit-content;\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n\n &-clickable {\n cursor: pointer;\n }\n\n &-style {\n &-default {\n background: rgba(0, 0, 0, 0.08);\n color: var(--text-color);\n }\n\n &-primary {\n background: var(--primary-color);\n color: var(--text-on-primary);\n }\n\n &-info {\n background: var(--info-lighter);\n color: var(--info-color);\n }\n\n &-warn {\n background: var(--warn-lighter);\n color: var(--warn-color);\n }\n\n &-error {\n background: var(--error-lighter);\n color: var(--error-color);\n }\n }\n\n &-inner {\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 4px 8px;\n\n & > * {\n white-space: nowrap;\n }\n }\n\n &-text {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n height: 18px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 18px;\n overflow: hidden;\n background-size: cover;\n }\n\n &-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n\n &-inline {\n flex-wrap: nowrap;\n overflow: auto;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"chip.module.mjs","names":[],"sources":["../../../../package/common/chip/chip.module.pcss"],"sourcesContent":[".chip {\n background: rgba(0, 0, 0, 0.08);\n border-radius: 99999px;\n width: fit-content;\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-style {\n &-default {\n background: rgba(0, 0, 0, 0.08);\n color: var(--text-color);\n }\n\n &-primary {\n background: var(--primary-color);\n color: var(--text-on-primary);\n }\n\n &-info {\n background: var(--info-lighter);\n color: var(--info-color);\n }\n\n &-warn {\n background: var(--warn-lighter);\n color: var(--warn-color);\n }\n\n &-error {\n background: var(--error-lighter);\n color: var(--error-color);\n }\n }\n\n &-inner {\n display: flex;\n gap: 8px;\n align-items: center;\n padding: 4px 8px;\n\n & > * {\n white-space: nowrap;\n }\n }\n\n &-text {\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n &-thumbnail {\n display: flex;\n justify-content: center;\n align-items: center;\n width: 18px;\n height: 18px;\n background: rgba(0, 0, 0, 0.08);\n border-radius: 18px;\n overflow: hidden;\n background-size: cover;\n }\n\n &-container {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n\n &-inline {\n flex-wrap: nowrap;\n overflow: auto;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/colorPicker/colorPicker.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-import e from"../interactableDiv/index.mjs";import{Align as t}from"../floatingMenu/floatingMenu.types.mjs";import n from"../floatingMenu/floatingMenu.mjs";import r from"../input/input.mjs";import i from"./colorPicker.module.mjs";import{useEffect as a,useRef as o,useState as s}from"react";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function f(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:Math.round(parseInt(e.slice(7,9),16)/255*100)}:{hex6:e.slice(0,7),alpha:100}}function p(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function m(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function h(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:Math.round(a/i*100),c=Math.round(i*100);return{h:o,s,v:c}}function g(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function _({hex:e,onChange:t,useInputComponent:n=!1}){let[o,c]=s(e);a(()=>{c(e)},[e]);function u(e){c(e);let n=e.startsWith(`#`)?e:`#${e}`;d(n)&&t(n)}function f(){d(o.startsWith(`#`)?o:`#${o}`)||c(e)}return n?l(r,{value:o,onChange:e=>u(e),onBlur:f}):l(`input`,{type:`text`,value:o,onChange:e=>u(e.target.value),onBlur:f,className:i.hexInput,spellCheck:!1})}function v({hue:e,sat:t,val:n,alpha:r,onHueChange:a,onSVChange:s,onAlphaChange:c,showInput:d=!0,showAlpha:m=!1}){let v=o(null);function y(e){let t=v.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function b(e){let{s:t,v:n}=y(e.nativeEvent);s(t,n);let r=e=>{let{s:t,v:n}=y(e);s(t,n)},i=()=>{window.removeEventListener(`mousemove`,r),window.removeEventListener(`mouseup`,i)};window.addEventListener(`mousemove`,r),window.addEventListener(`mouseup`,i)}function x(e){let{hex6:t,alpha:n}=f(e),{h:r,s:i,v:o}=h(t);a(r),s(i,o),m&&c(n)}let S=g(e,t,n),C=m?p(S,r,!0):S;return u(`div`,{className:i.panel,children:[u(`div`,{ref:v,className:i.gradientArea,style:{"--hue":e},onMouseDown:b,children:[l(`div`,{className:i.gradientOverlay}),l(`div`,{className:i.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),l(`input`,{type:`range`,min:0,max:359,value:e,onChange:e=>a(Number(e.target.value)),className:i.hueSlider}),m&&l(`input`,{type:`range`,min:0,max:100,value:r,onChange:e=>c(Number(e.target.value)),className:i.alphaSlider,style:{"--alpha-color":S}}),d&&l(_,{hex:C,onChange:x})]})}var y=`#3b82f6`;function b({className:r,value:a=y,onChange:b,showInput:x=!1,showAlpha:S=!1,inline:C=!1,...w}){let[T,E]=s(!1),{hex6:D,alpha:O}=f(d(a)?a:y),k=h(D),[A,j]=s({h:k.h,s:k.s,v:k.v,a:O}),M=o(A),[N,P]=s(a);if(a!==N){P(a);let{hex6:e,alpha:t}=f(d(a)?a:y);if(e!==g(A.h,A.s,A.v)||t!==A.a){let n=h(e);j({h:n.h,s:n.s,v:n.v,a:t})}}let{h:F,s:I,v:L,a:R}=A;function z(e,t,n,r){b?.(p(g(e,t,n),r,S))}function B(e){M.current.h=e,j(t=>({...t,h:e})),z(e,M.current.s,M.current.v,M.current.a)}function V(e,t){M.current.s=e,M.current.v=t,j(n=>({...n,s:e,v:t})),z(M.current.h,e,t,M.current.a)}function H(e){M.current.a=e,j(t=>({...t,a:e})),z(M.current.h,M.current.s,M.current.v,e)}let U=g(F,I,L),W=S?m(U,R):U,G=p(U,R,S),K={hue:F,sat:I,val:L,alpha:R,onHueChange:B,onSVChange:V,onAlphaChange:H,showAlpha:S};return C?l(`div`,{...w,className:c(i.colorPicker,r),children:l(v,{...K,showInput:x})}):u(`div`,{...w,className:c(i.colorPicker,r),children:[l(n,{isOpen:T,onOpenChange:E,dontCloseOnChildClick:!0,align:t.Left,content:l(v,{...K}),children:u(e,{className:i.swatch,children:[l(`div`,{className:i.swatchFill,style:{background:W}}),l(`span`,{className:i.swatchHex,children:G})]})}),x&&l(_,{hex:G,onChange:e=>b?.(e),useInputComponent:!0})]})}export{b as default};
+import e from"../interactableDiv/index.mjs";import{Align as t}from"../floatingMenu/floatingMenu.types.mjs";import n from"../floatingMenu/floatingMenu.mjs";import r from"../input/input.mjs";import i from"./colorPicker.module.mjs";import{useRef as a,useState as o}from"react";import s from"classnames";import{FontAwesomeIcon as c}from"@fortawesome/react-fontawesome";import{faEyeDropper as l}from"@fortawesome/free-solid-svg-icons";import{jsx as u,jsxs as d}from"react/jsx-runtime";var f=typeof window<`u`&&`EyeDropper`in window;async function p(){let e=window.EyeDropper;if(!e)return null;try{return(await new e().open()).sRGBHex}catch{return null}}function m(e){return/^#[0-9a-fA-F]{6}$/.test(e)||/^#[0-9a-fA-F]{8}$/.test(e)}function h(e){return/^#[0-9a-fA-F]{8}$/.test(e)?{hex6:e.slice(0,7),alpha:Math.round(parseInt(e.slice(7,9),16)/255*100)}:{hex6:e.slice(0,7),alpha:100}}function g(e,t,n){return!n||t>=100?e:`${e}${Math.round(t/100*255).toString(16).padStart(2,`0`)}`}function _(e,t){return`rgba(${parseInt(e.slice(1,3),16)}, ${parseInt(e.slice(3,5),16)}, ${parseInt(e.slice(5,7),16)}, ${t/100})`}function v(e){let t=parseInt(e.slice(1,3),16)/255,n=parseInt(e.slice(3,5),16)/255,r=parseInt(e.slice(5,7),16)/255,i=Math.max(t,n,r),a=i-Math.min(t,n,r),o=0;a!==0&&(o=i===t?(n-r)/a%6:i===n?(r-t)/a+2:(t-n)/a+4,o=Math.round(o*60),o<0&&(o+=360));let s=i===0?0:Math.round(a/i*100),c=Math.round(i*100);return{h:o,s,v:c}}function y(e,t,n){let r=t/100,i=n/100,a=i*r,o=a*(1-Math.abs(e/60%2-1)),s=i-a,c=0,l=0,u=0;e<60?(c=a,l=o,u=0):e<120?(c=o,l=a,u=0):e<180?(c=0,l=a,u=o):e<240?(c=0,l=o,u=a):e<300?(c=o,l=0,u=a):(c=a,l=0,u=o);let d=e=>Math.round((e+s)*255).toString(16).padStart(2,`0`);return`#${d(c)}${d(l)}${d(u)}`}function b({hex:e,onChange:t,useInputComponent:n=!1}){let[a,s]=o(e),[c,l]=o(e);e!==c&&(l(e),s(e));function d(e){s(e);let n=e.startsWith(`#`)?e:`#${e}`;m(n)&&t(n)}function f(){m(a.startsWith(`#`)?a:`#${a}`)||s(e)}return n?u(r,{value:a,onChange:e=>d(e),onBlur:f}):u(`input`,{type:`text`,value:a,onChange:e=>d(e.target.value),onBlur:f,className:i.hexInput,spellCheck:!1})}function x({hue:e,sat:t,val:n,alpha:r,onHueChange:o,onSVChange:s,onAlphaChange:m,showInput:_=!0,showAlpha:x=!1}){let S=a(null);function C(e){let t=S.current.getBoundingClientRect(),n=Math.max(0,Math.min(1,(e.clientX-t.left)/t.width)),r=Math.max(0,Math.min(1,(e.clientY-t.top)/t.height));return{s:n*100,v:(1-r)*100}}function w(e){e.currentTarget.setPointerCapture(e.pointerId);let{s:t,v:n}=C(e);s(t,n);let r=e=>{let{s:t,v:n}=C(e);s(t,n)},i=()=>{window.removeEventListener(`pointermove`,r),window.removeEventListener(`pointerup`,i)};window.addEventListener(`pointermove`,r),window.addEventListener(`pointerup`,i)}function T(e){let{hex6:t,alpha:n}=h(e),{h:r,s:i,v:a}=v(t);o(r),s(i,a),x&&m(n)}let E=y(e,t,n),D=x?g(E,r,!0):E;return d(`div`,{className:i.panel,children:[d(`div`,{ref:S,className:i.gradientArea,style:{"--hue":e},onPointerDown:w,children:[u(`div`,{className:i.gradientOverlay}),u(`div`,{className:i.cursor,style:{left:`${t}%`,top:`${100-n}%`}})]}),u(`input`,{type:`range`,min:0,max:359,value:e,onChange:e=>o(Number(e.target.value)),className:i.hueSlider}),x&&u(`input`,{type:`range`,min:0,max:100,value:r,onChange:e=>m(Number(e.target.value)),className:i.alphaSlider,style:{"--alpha-color":E}}),(_||f)&&d(`div`,{className:i.hexRow,children:[_&&u(b,{hex:D,onChange:T}),f&&u(`button`,{type:`button`,className:i.eyeDropperButton,onClick:async()=>{let e=await p();e&&T(e)},"aria-label":`Pick color from screen`,children:u(c,{icon:l})})]})]})}var S=`#3b82f6`;function C({className:r,value:c=S,onChange:l,showInput:f=!1,showAlpha:p=!1,inline:C=!1,...w}){let[T,E]=o(!1),{hex6:D,alpha:O}=h(m(c)?c:S),k=v(D),[A,j]=o({h:k.h,s:k.s,v:k.v,a:O}),M=a(A),[N,P]=o(c);if(c!==N){P(c);let{hex6:e,alpha:t}=h(m(c)?c:S);if(e!==y(A.h,A.s,A.v)||t!==A.a){let n=v(e);j({h:n.h,s:n.s,v:n.v,a:t})}}let{h:F,s:I,v:L,a:R}=A;function z(e,t,n,r){l?.(g(y(e,t,n),r,p))}function B(e){M.current.h=e,j(t=>({...t,h:e})),z(e,M.current.s,M.current.v,M.current.a)}function V(e,t){M.current.s=e,M.current.v=t,j(n=>({...n,s:e,v:t})),z(M.current.h,e,t,M.current.a)}function H(e){M.current.a=e,j(t=>({...t,a:e})),z(M.current.h,M.current.s,M.current.v,e)}let U=y(F,I,L),W=p?_(U,R):U,G=g(U,R,p),K={hue:F,sat:I,val:L,alpha:R,onHueChange:B,onSVChange:V,onAlphaChange:H,showAlpha:p};return C?u(`div`,{...w,className:s(i.colorPicker,r),children:u(x,{...K,showInput:f})}):d(`div`,{...w,className:s(i.colorPicker,r),children:[u(n,{isOpen:T,onOpenChange:E,dontCloseOnChildClick:!0,align:t.Left,content:u(x,{...K}),children:d(e,{className:i.swatch,children:[u(`div`,{className:i.swatchFill,style:{background:W}}),u(`span`,{className:i.swatchHex,children:G})]})}),f&&u(b,{hex:G,onChange:e=>l?.(e),useInputComponent:!0})]})}export{C as default};
 //# sourceMappingURL=colorPicker.mjs.map

package/dist/esm/common/colorPicker/colorPicker.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, useEffect, type ReactElement } from 'react';\nimport cx from 'classnames';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerProps } from './colorPicker.types';\n\nimport styles from './colorPicker.module.pcss';\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction isValidHex(s: string): boolean {\n return /^#[0-9a-fA-F]{6}$/.test(s) \|\| /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. /\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n return {\n hex6: hex.slice(0, 7),\n alpha: Math.round((parseInt(hex.slice(7, 9), 16) / 255) 100),\n };\n }\n return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n * Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. /\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n if (!showAlpha \|\| alpha >= 100) return hex6;\n const a = Math.round((alpha / 100) 255).toString(16).padStart(2, '0');\n return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n const r = parseInt(hex6.slice(1, 3), 16);\n const g = parseInt(hex6.slice(3, 5), 16);\n const b = parseInt(hex6.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n const r = parseInt(hex6.slice(1, 3), 16) / 255;\n const g = parseInt(hex6.slice(3, 5), 16) / 255;\n const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = ((g - b) / delta) % 6;\n else if (max === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n h = Math.round(h * 60);\n if (h < 0) h += 360;\n }\n\n const s = max === 0 ? 0 : Math.round((delta / max) * 100);\n const v = Math.round(max * 100);\n\n return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n const sv = s / 100;\n const vv = v / 100;\n const c = vv * sv;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vv - c;\n\n let r = 0, g = 0, b = 0;\n if (h < 60) { r = c; g = x; b = 0; }\n else if (h < 120) { r = x; g = c; b = 0; }\n else if (h < 180) { r = 0; g = c; b = x; }\n else if (h < 240) { r = 0; g = x; b = c; }\n else if (h < 300) { r = x; g = 0; b = c; }\n else { r = c; g = 0; b = x; }\n\n const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n hex: string;\n onChange: (hex: string) => void;\n useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false }: HexInputProps): ReactElement {\n const [draft, setDraft] = useState(hex);\n\n useEffect(() => {\n setDraft(hex);\n }, [hex]);\n\n function handleChange(raw: string) {\n setDraft(raw);\n const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n if (isValidHex(normalized)) onChange(normalized);\n }\n\n function handleBlur() {\n const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n if (!isValidHex(normalized)) setDraft(hex);\n }\n\n if (useInputComponent) {\n return (\n <Input\n value={draft}\n onChange={(value: string) => handleChange(value)}\n onBlur={handleBlur}\n />\n );\n }\n\n return (\n <input\n type=\"text\"\n value={draft}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={handleBlur}\n className={styles.hexInput}\n spellCheck={false}\n />\n );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n hue: number;\n sat: number;\n val: number;\n alpha: number;\n onHueChange: (h: number) => void;\n onSVChange: (s: number, v: number) => void;\n onAlphaChange: (a: number) => void;\n showInput?: boolean;\n showAlpha?: boolean;\n}\n\nfunction PickerPanel({\n hue, sat, val, alpha,\n onHueChange, onSVChange, onAlphaChange,\n showInput = true, showAlpha = false,\n}: PickerPanelProps): ReactElement {\n const gradientRef = useRef<HTMLDivElement>(null);\n\n function getSVFromEvent(e: MouseEvent): { s: number; v: number } {\n const rect = gradientRef.current!.getBoundingClientRect();\n const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n return { s: x * 100, v: (1 - y) * 100 };\n }\n\n function onGradientMouseDown(e: React.MouseEvent) {\n const { s, v } = getSVFromEvent(e.nativeEvent);\n onSVChange(s, v);\n\n const onMove = (ev: MouseEvent) => {\n const { s, v } = getSVFromEvent(ev);\n onSVChange(s, v);\n };\n const onUp = () => {\n window.removeEventListener('mousemove', onMove);\n window.removeEventListener('mouseup', onUp);\n };\n window.addEventListener('mousemove', onMove);\n window.addEventListener('mouseup', onUp);\n }\n\n function onHexChange(normalized: string) {\n const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n const { h, s, v } = hexToHsv(hex6);\n onHueChange(h);\n onSVChange(s, v);\n if (showAlpha) onAlphaChange(parsedAlpha);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n return (\n <div className={styles.panel}>\n <div\n ref={gradientRef}\n className={styles.gradientArea}\n style={{ '--hue': hue } as React.CSSProperties}\n onMouseDown={onGradientMouseDown}\n >\n <div className={styles.gradientOverlay} />\n <div\n className={styles.cursor}\n style={{ left: `${sat}%`, top: `${100 - val}%` }}\n />\n </div>\n\n <input\n type=\"range\"\n min={0}\n max={359}\n value={hue}\n onChange={(e) => onHueChange(Number(e.target.value))}\n className={styles.hueSlider}\n />\n\n {showAlpha && (\n <input\n type=\"range\"\n min={0}\n max={100}\n value={alpha}\n onChange={(e) => onAlphaChange(Number(e.target.value))}\n className={styles.alphaSlider}\n style={{ '--alpha-color': hex6 } as React.CSSProperties}\n />\n )}\n\n {showInput && <HexInput hex={hexInputValue} onChange={onHexChange} />}\n </div>\n );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nfunction ColorPicker({\n className,\n value = DEFAULT_COLOR,\n onChange,\n showInput = false,\n showAlpha = false,\n inline = false,\n ...rest\n}: ColorPickerProps): ReactElement {\n const [isOpen, setIsOpen] = useState(false);\n\n const initSafe = isValidHex(value) ? value : DEFAULT_COLOR;\n const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n const initHsv = hexToHsv(initHex6);\n\n // Single state object so hue survives when saturation/value hit 0\n // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n // Ref mirrors state so drag callbacks never read stale closure values.\n const cur = useRef(hsva);\n\n // Sync from external prop changes: \"derive state during render\" pattern\n // avoids setState-in-effect. We compare the incoming hex against what our\n // current state produces — if they match, the change came from us and we skip.\n const [prevValue, setPrevValue] = useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n const safe = isValidHex(value) ? value : DEFAULT_COLOR;\n const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n if (incomingHex6 !== currentHex6 \|\| incomingA !== hsva.a) {\n const hsv = hexToHsv(incomingHex6);\n const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n setHsva(next);\n }\n }\n\n const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n function emit(h: number, s: number, v: number, a: number) {\n onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n }\n\n function handleHueChange(h: number) {\n cur.current.h = h;\n setHsva(prev => ({ ...prev, h }));\n emit(h, cur.current.s, cur.current.v, cur.current.a);\n }\n\n function handleSVChange(s: number, v: number) {\n cur.current.s = s;\n cur.current.v = v;\n setHsva(prev => ({ ...prev, s, v }));\n emit(cur.current.h, s, v, cur.current.a);\n }\n\n function handleAlphaChange(a: number) {\n cur.current.a = a;\n setHsva(prev => ({ ...prev, a }));\n emit(cur.current.h, cur.current.s, cur.current.v, a);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n const displayValue = buildValue(hex6, alpha, showAlpha);\n\n const pickerPanelProps: PickerPanelProps = {\n hue, sat, val, alpha,\n onHueChange: handleHueChange,\n onSVChange: handleSVChange,\n onAlphaChange: handleAlphaChange,\n showAlpha,\n };\n\n if (inline) {\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <PickerPanel {...pickerPanelProps} showInput={showInput} />\n </div>\n );\n }\n\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n dontCloseOnChildClick\n align={Align.Left}\n content={<PickerPanel {...pickerPanelProps} />}\n >\n <InteractableDiv className={styles.swatch}>\n <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n <span className={styles.swatchHex}>{displayValue}</span>\n </InteractableDiv>\n </FloatingMenu>\n\n {showInput && (\n <HexInput\n hex={displayValue}\n onChange={(v) => onChange?.(v)}\n useInputComponent\n />\n )}\n </div>\n );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}
1	+ {"version":3,"file":"colorPicker.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.tsx"],"sourcesContent":["import { useState, useRef, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faEyeDropper } from '@fortawesome/free-solid-svg-icons';\n\nimport InteractableDiv from 'components/common/interactableDiv';\nimport FloatingMenu from 'components/common/floatingMenu';\nimport Input from 'components/common/input';\nimport { Align } from 'components/common/floatingMenu/floatingMenu.types';\nimport type { ColorPickerProps } from './colorPicker.types';\n\nimport styles from './colorPicker.module.pcss';\n\ninterface EyeDropperConstructor {\n new (): { open: (options?: { signal?: AbortSignal }) => Promise<{ sRGBHex: string }> };\n}\n\nconst eyeDropperSupported = typeof window !== 'undefined' && 'EyeDropper' in window;\n\nasync function pickColorFromScreen(): Promise<string \| null> {\n const EyeDropperCtor = (window as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper;\n if (!EyeDropperCtor) return null;\n try {\n const result = await new EyeDropperCtor().open();\n return result.sRGBHex;\n } catch {\n return null; // user cancelled or picker failed\n }\n}\n\n// ── Color utilities ──────────────────────────────────────────────────────────\n\nfunction isValidHex(s: string): boolean {\n return /^#[0-9a-fA-F]{6}$/.test(s) \|\| /^#[0-9a-fA-F]{8}$/.test(s);\n}\n\n/** Split any valid hex into its 6-digit base and 0-100 alpha. /\nfunction parseHex(hex: string): { hex6: string; alpha: number } {\n if (/^#[0-9a-fA-F]{8}$/.test(hex)) {\n return {\n hex6: hex.slice(0, 7),\n alpha: Math.round((parseInt(hex.slice(7, 9), 16) / 255) 100),\n };\n }\n return { hex6: hex.slice(0, 7), alpha: 100 };\n}\n\n/** Combine a 6-digit hex + 0-100 alpha into the right output format.\n * Full opacity (alpha === 100) is omitted — 6-digit hex implies opaque. /\nfunction buildValue(hex6: string, alpha: number, showAlpha: boolean): string {\n if (!showAlpha \|\| alpha >= 100) return hex6;\n const a = Math.round((alpha / 100) 255).toString(16).padStart(2, '0');\n return `${hex6}${a}`;\n}\n\nfunction hexToRgba(hex6: string, alpha: number): string {\n const r = parseInt(hex6.slice(1, 3), 16);\n const g = parseInt(hex6.slice(3, 5), 16);\n const b = parseInt(hex6.slice(5, 7), 16);\n return `rgba(${r}, ${g}, ${b}, ${alpha / 100})`;\n}\n\nfunction hexToHsv(hex6: string): { h: number; s: number; v: number } {\n const r = parseInt(hex6.slice(1, 3), 16) / 255;\n const g = parseInt(hex6.slice(3, 5), 16) / 255;\n const b = parseInt(hex6.slice(5, 7), 16) / 255;\n\n const max = Math.max(r, g, b);\n const min = Math.min(r, g, b);\n const delta = max - min;\n\n let h = 0;\n if (delta !== 0) {\n if (max === r) h = ((g - b) / delta) % 6;\n else if (max === g) h = (b - r) / delta + 2;\n else h = (r - g) / delta + 4;\n h = Math.round(h * 60);\n if (h < 0) h += 360;\n }\n\n const s = max === 0 ? 0 : Math.round((delta / max) * 100);\n const v = Math.round(max * 100);\n\n return { h, s, v };\n}\n\nfunction hsvToHex(h: number, s: number, v: number): string {\n const sv = s / 100;\n const vv = v / 100;\n const c = vv * sv;\n const x = c * (1 - Math.abs(((h / 60) % 2) - 1));\n const m = vv - c;\n\n let r = 0, g = 0, b = 0;\n if (h < 60) { r = c; g = x; b = 0; }\n else if (h < 120) { r = x; g = c; b = 0; }\n else if (h < 180) { r = 0; g = c; b = x; }\n else if (h < 240) { r = 0; g = x; b = c; }\n else if (h < 300) { r = x; g = 0; b = c; }\n else { r = c; g = 0; b = x; }\n\n const toHex = (n: number) => Math.round((n + m) * 255).toString(16).padStart(2, '0');\n return `#${toHex(r)}${toHex(g)}${toHex(b)}`;\n}\n\n// ── HexInput ─────────────────────────────────────────────────────────────────\n\ninterface HexInputProps {\n hex: string;\n onChange: (hex: string) => void;\n useInputComponent?: boolean;\n}\n\nfunction HexInput({ hex, onChange, useInputComponent = false }: HexInputProps): ReactElement {\n const [draft, setDraft] = useState(hex);\n\n const [prevHex, setPrevHex] = useState(hex);\n if (hex !== prevHex) {\n setPrevHex(hex);\n setDraft(hex);\n }\n\n function handleChange(raw: string) {\n setDraft(raw);\n const normalized = raw.startsWith('#') ? raw : `#${raw}`;\n if (isValidHex(normalized)) onChange(normalized);\n }\n\n function handleBlur() {\n const normalized = draft.startsWith('#') ? draft : `#${draft}`;\n if (!isValidHex(normalized)) setDraft(hex);\n }\n\n if (useInputComponent) {\n return (\n <Input\n value={draft}\n onChange={(value: string) => handleChange(value)}\n onBlur={handleBlur}\n />\n );\n }\n\n return (\n <input\n type=\"text\"\n value={draft}\n onChange={(e) => handleChange(e.target.value)}\n onBlur={handleBlur}\n className={styles.hexInput}\n spellCheck={false}\n />\n );\n}\n\n// ── Picker panel ─────────────────────────────────────────────────────────────\n\ninterface PickerPanelProps {\n hue: number;\n sat: number;\n val: number;\n alpha: number;\n onHueChange: (h: number) => void;\n onSVChange: (s: number, v: number) => void;\n onAlphaChange: (a: number) => void;\n showInput?: boolean;\n showAlpha?: boolean;\n}\n\nfunction PickerPanel({\n hue, sat, val, alpha,\n onHueChange, onSVChange, onAlphaChange,\n showInput = true, showAlpha = false,\n}: PickerPanelProps): ReactElement {\n const gradientRef = useRef<HTMLDivElement>(null);\n\n function getSVFromEvent(e: { clientX: number; clientY: number }): { s: number; v: number } {\n const rect = gradientRef.current!.getBoundingClientRect();\n const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));\n const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));\n return { s: x * 100, v: (1 - y) * 100 };\n }\n\n // Pointer Events (not mouse events) so dragging works for touch/pen too.\n function onGradientPointerDown(e: React.PointerEvent) {\n e.currentTarget.setPointerCapture(e.pointerId);\n const { s, v } = getSVFromEvent(e);\n onSVChange(s, v);\n\n const onMove = (ev: PointerEvent) => {\n const { s, v } = getSVFromEvent(ev);\n onSVChange(s, v);\n };\n const onUp = () => {\n window.removeEventListener('pointermove', onMove);\n window.removeEventListener('pointerup', onUp);\n };\n window.addEventListener('pointermove', onMove);\n window.addEventListener('pointerup', onUp);\n }\n\n function onHexChange(normalized: string) {\n const { hex6, alpha: parsedAlpha } = parseHex(normalized);\n const { h, s, v } = hexToHsv(hex6);\n onHueChange(h);\n onSVChange(s, v);\n if (showAlpha) onAlphaChange(parsedAlpha);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const hexInputValue = showAlpha ? buildValue(hex6, alpha, true) : hex6;\n\n return (\n <div className={styles.panel}>\n <div\n ref={gradientRef}\n className={styles.gradientArea}\n style={{ '--hue': hue } as React.CSSProperties}\n onPointerDown={onGradientPointerDown}\n >\n <div className={styles.gradientOverlay} />\n <div\n className={styles.cursor}\n style={{ left: `${sat}%`, top: `${100 - val}%` }}\n />\n </div>\n\n <input\n type=\"range\"\n min={0}\n max={359}\n value={hue}\n onChange={(e) => onHueChange(Number(e.target.value))}\n className={styles.hueSlider}\n />\n\n {showAlpha && (\n <input\n type=\"range\"\n min={0}\n max={100}\n value={alpha}\n onChange={(e) => onAlphaChange(Number(e.target.value))}\n className={styles.alphaSlider}\n style={{ '--alpha-color': hex6 } as React.CSSProperties}\n />\n )}\n\n {(showInput \|\| eyeDropperSupported) && (\n <div className={styles.hexRow}>\n {showInput && <HexInput hex={hexInputValue} onChange={onHexChange} />}\n {eyeDropperSupported && (\n <button\n type=\"button\"\n className={styles.eyeDropperButton}\n onClick={async () => {\n const hex = await pickColorFromScreen();\n if (hex) onHexChange(hex);\n }}\n aria-label=\"Pick color from screen\"\n >\n <FontAwesomeIcon icon={faEyeDropper} />\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n\n// ── ColorPicker ───────────────────────────────────────────────────────────────\n\nconst DEFAULT_COLOR = '#3b82f6';\n\nfunction ColorPicker({\n className,\n value = DEFAULT_COLOR,\n onChange,\n showInput = false,\n showAlpha = false,\n inline = false,\n ...rest\n}: ColorPickerProps): ReactElement {\n const [isOpen, setIsOpen] = useState(false);\n\n const initSafe = isValidHex(value) ? value : DEFAULT_COLOR;\n const { hex6: initHex6, alpha: initAlpha } = parseHex(initSafe);\n const initHsv = hexToHsv(initHex6);\n\n // Single state object so hue survives when saturation/value hit 0\n // (hexToHsv of any grey returns h=0, which would corrupt hue if derived from props).\n const [hsva, setHsva] = useState({ h: initHsv.h, s: initHsv.s, v: initHsv.v, a: initAlpha });\n\n // Ref mirrors state so drag callbacks never read stale closure values.\n const cur = useRef(hsva);\n\n // Sync from external prop changes: \"derive state during render\" pattern\n // avoids setState-in-effect. We compare the incoming hex against what our\n // current state produces — if they match, the change came from us and we skip.\n const [prevValue, setPrevValue] = useState(value);\n if (value !== prevValue) {\n setPrevValue(value);\n const safe = isValidHex(value) ? value : DEFAULT_COLOR;\n const { hex6: incomingHex6, alpha: incomingA } = parseHex(safe);\n const currentHex6 = hsvToHex(hsva.h, hsva.s, hsva.v);\n if (incomingHex6 !== currentHex6 \|\| incomingA !== hsva.a) {\n const hsv = hexToHsv(incomingHex6);\n const next = { h: hsv.h, s: hsv.s, v: hsv.v, a: incomingA };\n setHsva(next);\n }\n }\n\n const { h: hue, s: sat, v: val, a: alpha } = hsva;\n\n function emit(h: number, s: number, v: number, a: number) {\n onChange?.(buildValue(hsvToHex(h, s, v), a, showAlpha));\n }\n\n function handleHueChange(h: number) {\n cur.current.h = h;\n setHsva(prev => ({ ...prev, h }));\n emit(h, cur.current.s, cur.current.v, cur.current.a);\n }\n\n function handleSVChange(s: number, v: number) {\n cur.current.s = s;\n cur.current.v = v;\n setHsva(prev => ({ ...prev, s, v }));\n emit(cur.current.h, s, v, cur.current.a);\n }\n\n function handleAlphaChange(a: number) {\n cur.current.a = a;\n setHsva(prev => ({ ...prev, a }));\n emit(cur.current.h, cur.current.s, cur.current.v, a);\n }\n\n const hex6 = hsvToHex(hue, sat, val);\n const swatchBackground = showAlpha ? hexToRgba(hex6, alpha) : hex6;\n const displayValue = buildValue(hex6, alpha, showAlpha);\n\n const pickerPanelProps: PickerPanelProps = {\n hue, sat, val, alpha,\n onHueChange: handleHueChange,\n onSVChange: handleSVChange,\n onAlphaChange: handleAlphaChange,\n showAlpha,\n };\n\n if (inline) {\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <PickerPanel {...pickerPanelProps} showInput={showInput} />\n </div>\n );\n }\n\n return (\n <div {...rest} className={cx(styles.colorPicker, className)}>\n <FloatingMenu\n isOpen={isOpen}\n onOpenChange={setIsOpen}\n dontCloseOnChildClick\n align={Align.Left}\n content={<PickerPanel {...pickerPanelProps} />}\n >\n <InteractableDiv className={styles.swatch}>\n <div className={styles.swatchFill} style={{ background: swatchBackground }} />\n <span className={styles.swatchHex}>{displayValue}</span>\n </InteractableDiv>\n </FloatingMenu>\n\n {showInput && (\n <HexInput\n hex={displayValue}\n onChange={(v) => onChange?.(v)}\n useInputComponent\n />\n )}\n </div>\n );\n}\n\nexport default ColorPicker;\n"],"mappings":"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"}

package/dist/esm/common/colorPicker/colorPicker.module.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
-var e={colorPicker:`colorPicker_Ts3an`,swatch:`swatch_NW78g`,swatchHex:`swatchHex_j7-i5`,swatchFill:`swatchFill_oNtHf`,panel:`panel_WXEvY`,gradientArea:`gradientArea_qEZim`,gradientOverlay:`gradientOverlay_ZQybe`,cursor:`cursor_m67Lm`,hueSlider:`hueSlider_k3Knb`,alphaSlider:`alphaSlider_OT2sD`,hexInput:`hexInput_zQw4s`};export{e as default};
+var e={colorPicker:`colorPicker_Ts3an`,swatch:`swatch_NW78g`,swatchHex:`swatchHex_j7-i5`,swatchFill:`swatchFill_oNtHf`,panel:`panel_WXEvY`,gradientArea:`gradientArea_qEZim`,gradientOverlay:`gradientOverlay_ZQybe`,cursor:`cursor_m67Lm`,hueSlider:`hueSlider_k3Knb`,alphaSlider:`alphaSlider_OT2sD`,hexRow:`hexRow_L4bZU`,hexInput:`hexInput_zQw4s`,eyeDropperButton:`eyeDropperButton_dOyRX`};export{e as default};
 //# sourceMappingURL=colorPicker.module.mjs.map

package/dist/esm/common/colorPicker/colorPicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.swatch {\n width: 32px;\n height: 32px;\n border-radius: var(--default-border-radius);\n position: relative;\n cursor: pointer;\n flex-shrink: 0;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);\n /* checkerboard so transparency is visible /\n background-image:\n linear-gradient(45deg, #bbb 25%, transparent 25%),\n linear-gradient(-45deg, #bbb 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #bbb 75%),\n linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size: 8px 8px;\n background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n background-color: white;\n\n &:hover {\n & .swatchHex {\n opacity: 1;\n }\n }\n}\n\n.swatchFill {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n}\n\n.swatchHex {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-family: monospace;\n background: rgba(0, 0, 0, 0.55);\n color: white;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.15s;\n user-select: none;\n pointer-events: none;\n z-index: 1;\n}\n\n.panel {\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 224px;\n}\n\n.gradientArea {\n width: 200px;\n height: 160px;\n position: relative;\n cursor: crosshair;\n border-radius: 4px;\n overflow: hidden;\n background: linear-gradient(to right, white, hsl(calc(var(--hue) 1deg), 100%, 50%));\n}\n\n.gradientOverlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1;\n}\n\n.hueSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n background: linear-gradient(\n to right,\n hsl(0, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(240, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n }\n}\n\n.alphaSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n /* checkerboard base so transparency is visible under the gradient */\n background-image:\n linear-gradient(to right, transparent, var(--alpha-color)),\n linear-gradient(45deg, #bbb 25%, transparent 25%),\n linear-gradient(-45deg, #bbb 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #bbb 75%),\n linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;\n background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;\n background-color: white;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n }\n}\n\n.hexInput {\n width: 100%;\n padding: 5px 8px;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n background: var(--input-background);\n color: var(--text-color);\n font-size: 13px;\n font-family: monospace;\n box-sizing: border-box;\n outline: none;\n\n &:focus {\n border-color: var(--primary-color);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.swatch {\n width: 32px;\n height: 32px;\n border-radius: var(--default-border-radius);\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n flex-shrink: 0;\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);\n /* checkerboard so transparency is visible /\n background-image:\n linear-gradient(45deg, #bbb 25%, transparent 25%),\n linear-gradient(-45deg, #bbb 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #bbb 75%),\n linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size: 8px 8px;\n background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n background-color: white;\n\n &:hover {\n & .swatchHex {\n opacity: 1;\n }\n }\n}\n\n.swatchFill {\n position: absolute;\n inset: 0;\n border-radius: inherit;\n}\n\n.swatchHex {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-family: monospace;\n background: rgba(0, 0, 0, 0.55);\n color: white;\n border-radius: inherit;\n opacity: 0;\n transition: opacity 0.15s;\n user-select: none;\n pointer-events: none;\n z-index: 1;\n}\n\n.panel {\n padding: 12px;\n display: flex;\n flex-direction: column;\n gap: 10px;\n width: 224px;\n}\n\n.gradientArea {\n width: 200px;\n height: 160px;\n position: relative;\n cursor: crosshair;\n border-radius: 4px;\n overflow: hidden;\n touch-action: none;\n background: linear-gradient(to right, white, hsl(calc(var(--hue) 1deg), 100%, 50%));\n}\n\n.gradientOverlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n position: absolute;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 2px solid white;\n box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 1;\n}\n\n.hueSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background: linear-gradient(\n to right,\n hsl(0, 100%, 50%),\n hsl(60, 100%, 50%),\n hsl(120, 100%, 50%),\n hsl(180, 100%, 50%),\n hsl(240, 100%, 50%),\n hsl(300, 100%, 50%),\n hsl(360, 100%, 50%)\n );\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n}\n\n.alphaSlider {\n -webkit-appearance: none;\n appearance: none;\n width: 100%;\n height: 10px;\n border-radius: var(--default-border-radius);\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n /* checkerboard base so transparency is visible under the gradient */\n background-image:\n linear-gradient(to right, transparent, var(--alpha-color)),\n linear-gradient(45deg, #bbb 25%, transparent 25%),\n linear-gradient(-45deg, #bbb 25%, transparent 25%),\n linear-gradient(45deg, transparent 75%, #bbb 75%),\n linear-gradient(-45deg, transparent 75%, #bbb 75%);\n background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;\n background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;\n background-color: white;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &::-moz-range-thumb {\n width: 6px;\n height: 20px;\n border-radius: var(--default-border-radius);\n background: var(--primary-color);\n box-shadow: var(--card-shadow);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n}\n\n.hexRow {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.hexInput {\n width: 100%;\n padding: 5px 8px;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n background: var(--input-background);\n color: var(--text-color);\n font-size: 13px;\n font-family: monospace;\n box-sizing: border-box;\n outline: none;\n\n &:focus {\n border-color: var(--primary-color);\n }\n}\n\n.eyeDropperButton {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 28px;\n height: 28px;\n padding: 0;\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n background: var(--input-background);\n color: var(--text-color);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover {\n border-color: var(--primary-color);\n color: var(--primary-color);\n }\n}\n"],"mappings":""}

package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datePickerMonth.module.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.module.pcss"],"sourcesContent":["\n.datePickerMonth {\n &-item {\n aspect-ratio: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 1px 0;\n }\n\n &-content {\n display: grid;\n text-align: center;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 0px;\n }\n\n &-day {\n cursor: pointer;\n\n &:hover {\n /* background-color: var(--primary-color);\n border-radius: 800px; */\n }\n\n &-today {\n background-color: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n }\n\n &-selected {\n background-color: var(--primary-color);\n color: var(--text-on-primary);\n border-radius: 0;\n\n &-start {\n border-top-left-radius: var(--default-border-radius);\n border-bottom-left-radius: var(--default-border-radius);\n }\n\n &-end {\n border-top-right-radius: var(--default-border-radius);\n border-bottom-right-radius: var(--default-border-radius);\n }\n }\n\n &-disabled {\n filter: brightness(0.5);\n cursor: not-allowed;\n }\n }\n\n &-placeholder {\n user-select: none;\n pointer-events: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"datePickerMonth.module.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.module.pcss"],"sourcesContent":["\n.datePickerMonth {\n &-item {\n aspect-ratio: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 1px 0;\n }\n\n &-content {\n display: grid;\n text-align: center;\n grid-template-columns: repeat(7, minmax(0, 1fr));\n gap: 0px;\n }\n\n &-day {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover {\n /* background-color: var(--primary-color);\n border-radius: 800px; */\n }\n\n &-today {\n background-color: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n }\n\n &-selected {\n background-color: var(--primary-color);\n color: var(--text-on-primary);\n border-radius: 0;\n\n &-start {\n border-top-left-radius: var(--default-border-radius);\n border-bottom-left-radius: var(--default-border-radius);\n }\n\n &-end {\n border-top-right-radius: var(--default-border-radius);\n border-bottom-right-radius: var(--default-border-radius);\n }\n }\n\n &-disabled {\n filter: brightness(0.5);\n cursor: not-allowed;\n }\n }\n\n &-placeholder {\n user-select: none;\n pointer-events: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/datePicker/datePicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"datePicker.module.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.module.pcss"],"sourcesContent":[".datePicker {\n position: relative;\n width: 100%;\n flex: 1;\n min-width: 105px;\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 8px 0;\n\n &-monthAndYear {\n display: flex;\n\n &-container {\n display: flex;\n gap: 16px;\n position: relative;\n }\n }\n\n &-month {\n width: 120px;\n }\n\n &-year {\n width: 75px;\n }\n }\n\n &-month {\n min-width: 185px;\n }\n\n &-modalInput {\n cursor: pointer;\n color: var(--text-color);\n -webkit-text-fill-color: var(--text-color);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"datePicker.module.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.module.pcss"],"sourcesContent":[".datePicker {\n position: relative;\n width: 100%;\n flex: 1;\n min-width: 105px;\n\n &-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin: 8px 0;\n\n &-monthAndYear {\n display: flex;\n\n &-container {\n display: flex;\n gap: 16px;\n position: relative;\n }\n }\n\n &-month {\n width: 120px;\n }\n\n &-year {\n width: 75px;\n }\n }\n\n &-month {\n min-width: 185px;\n }\n\n &-modalInput {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n color: var(--text-color);\n -webkit-text-fill-color: var(--text-color);\n }\n}\n"],"mappings":""}

package/dist/esm/common/dropZone/dropZone.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropZone.module.mjs","names":[],"sources":["../../../../package/common/dropZone/dropZone.module.pcss"],"sourcesContent":[".dropZone {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n outline: none;\n\n &-clickable {\n cursor: pointer;\n }\n\n &-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &-default {\n padding: var(--spacing-l, 24px);\n border: 1px dashed var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n transition: border-color 0.2s, background 0.2s, color 0.2s;\n }\n\n &-default&-clickable:hover {\n border-color: var(--primary-color);\n background: var(--background-accent-light);\n }\n\n /* A drag is somewhere in the window — the zone is armed. /\n &-dragging {\n border-color: var(--primary-color);\n }\n\n / A drag is hovering directly over this zone. /\n &-active {\n border-width: 2px;\n border-color: var(--primary-color);\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n\n &-error {\n border-color: var(--error-color);\n color: var(--error-color);\n }\n\n &-error&-clickable:hover {\n border-color: var(--error-color);\n background: var(--error-lighter);\n }\n\n &-content {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n / While dragging, let drop events fall through to the root instead of child elements. */\n &-dragging {\n pointer-events: none;\n }\n }\n\n &-fileList {\n width: 100%;\n margin-top: var(--spacing-s, 8px);\n pointer-events: none;\n }\n\n &-fileItem {\n font-size: var(--text-small-font-size);\n color: var(--text-dark);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n &-input {\n display: none;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"dropZone.module.mjs","names":[],"sources":["../../../../package/common/dropZone/dropZone.module.pcss"],"sourcesContent":[".dropZone {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n outline: none;\n\n &-clickable {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-disabled {\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n }\n\n &-default {\n padding: var(--spacing-l, 24px);\n border: 1px dashed var(--border-color);\n border-radius: var(--default-border-radius);\n background: transparent;\n color: var(--text-dark);\n transition: border-color 0.2s, background 0.2s, color 0.2s;\n }\n\n &-default&-clickable:hover {\n border-color: var(--primary-color);\n background: var(--background-accent-light);\n }\n\n /* A drag is somewhere in the window — the zone is armed. /\n &-dragging {\n border-color: var(--primary-color);\n }\n\n / A drag is hovering directly over this zone. /\n &-active {\n border-width: 2px;\n border-color: var(--primary-color);\n background: var(--background-accent-light);\n color: var(--text-color);\n }\n\n &-error {\n border-color: var(--error-color);\n color: var(--error-color);\n }\n\n &-error&-clickable:hover {\n border-color: var(--error-color);\n background: var(--error-lighter);\n }\n\n &-content {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n\n / While dragging, let drop events fall through to the root instead of child elements. */\n &-dragging {\n pointer-events: none;\n }\n }\n\n &-fileList {\n width: 100%;\n margin-top: var(--spacing-s, 8px);\n pointer-events: none;\n }\n\n &-fileItem {\n font-size: var(--text-small-font-size);\n color: var(--text-dark);\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n }\n\n &-input {\n display: none;\n }\n}\n"],"mappings":""}

package/dist/esm/common/dropdown/dropdown.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n position: relative;\n\n &-label {\n display: flex;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-size: 12px;\n position: absolute;\n top: -15px;\n }\n }\n\n &-input {\n position: relative;\n cursor: pointer;\n background-color: var(--input-background);\n border-radius: var(--default-border-radius);\n\n &-plain {\n background: transparent;\n }\n\n &-readOnly {\n cursor: default;\n }\n\n &:focus-within {\n outline: none;\n }\n\n &-button {\n padding: 7px 20% 7px 7.5px !important;\n background-color: transparent;\n border: none;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n text-align: left;\n width: 100%;\n line-height: 1.25;\n color: var(--text-color);\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n border-radius: var(--default-border-radius);\n }\n\n &-readOnly {\n cursor: default;\n }\n\n &:focus {\n outline: none;\n }\n\n &-icon {\n float: right;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--spacing-s);\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-color);\n cursor: pointer;\n\n &-arrow {\n transition: transform 0.25s;\n pointer-events: none;\n\n &-open {\n transform: rotate(180deg);\n }\n }\n }\n }\n\n &-list-anim {\n position: fixed;\n z-index: 1;\n color: var(--text-color);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n transform: scaleY(1);\n transition: transform 0.25s;\n transform-origin: right top;\n\n &-flip {\n transform-origin: right bottom;\n }\n\n &-wider {\n width: max-content !important;\n }\n }\n\n &-list {\n width: 100%;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 160px;\n list-style-type: none;\n\n &-item {\n border: none;\n cursor: pointer;\n background-color: var(--background-modal);\n padding: 8px;\n text-align: left;\n border-radius: 0;\n transition: all 0.3s;\n\n &-active {\n background-color: var(--background-accent);\n }\n\n &-selected {\n font-weight: 500;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: var(--background-accent);\n }\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--disabled-input-color);\n }\n }\n }\n\n &-hidden {\n transform: scaleY(0);\n }\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n inset: -10px 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n font-size: 13px;\n padding: 5px;\n opacity: 0;\n }\n\n /* With an empty label the span would still reserve its padding, leaving a gap in\n the fieldset's top border. Collapse it so the notch closes when there's no label. */\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-placeholder {\n position: absolute;\n top: 8px;\n left: 7px;\n transition: all 0.2s;\n opacity: 0;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n inset: 9px 0 0 7px;\n font-size: 16px;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n inset: -9px 0 0 14px;\n font-size: 13px;\n color: var(--input-label-floating-color, var(--text-color));\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-plain {\n border-color: transparent;\n outline-color: transparent;\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"dropdown.module.mjs","names":[],"sources":["../../../../package/common/dropdown/dropdown.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.dropdown {\n position: relative;\n\n &-label {\n display: flex;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n color: var(--text-color);\n font-size: 12px;\n position: absolute;\n top: -15px;\n }\n }\n\n &-input {\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: var(--input-background);\n border-radius: var(--default-border-radius);\n\n &-plain {\n background: transparent;\n }\n\n &-readOnly {\n cursor: default;\n }\n\n &:focus-within {\n outline: none;\n }\n\n &-button {\n padding: 7px 20% 7px 7.5px !important;\n background-color: transparent;\n border: none;\n font-family: inherit;\n font-size: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n text-align: left;\n width: 100%;\n line-height: 1.25;\n color: var(--text-color);\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n border-radius: var(--default-border-radius);\n }\n\n &-readOnly {\n cursor: default;\n }\n\n &:focus {\n outline: none;\n }\n\n &-icon {\n float: right;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: var(--spacing-s);\n top: 50%;\n transform: translateY(-50%);\n color: var(--text-color);\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &-arrow {\n transition: transform 0.25s;\n pointer-events: none;\n\n &-open {\n transform: rotate(180deg);\n }\n }\n }\n }\n\n &-list-anim {\n position: fixed;\n z-index: 1;\n color: var(--text-color);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n border-radius: var(--default-border-radius);\n overflow: hidden;\n transform: scaleY(1);\n transition: transform 0.25s;\n transform-origin: right top;\n\n &-flip {\n transform-origin: right bottom;\n }\n\n &-wider {\n width: max-content !important;\n }\n }\n\n &-list {\n width: 100%;\n display: flex;\n flex-direction: column;\n overflow-y: auto;\n max-height: 160px;\n list-style-type: none;\n\n &-item {\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: var(--background-modal);\n padding: 8px;\n text-align: left;\n border-radius: 0;\n transition: all 0.3s;\n\n &-active {\n background-color: var(--background-accent);\n }\n\n &-selected {\n font-weight: 500;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n background-color: var(--background-accent);\n }\n\n &-disabled {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n cursor: not-allowed;\n\n &:hover {\n background-color: var(--disabled-input-color);\n }\n }\n }\n\n &-hidden {\n transform: scaleY(0);\n }\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n inset: -10px 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n font-size: 13px;\n padding: 5px;\n opacity: 0;\n }\n\n /* With an empty label the span would still reserve its padding, leaving a gap in\n the fieldset's top border. Collapse it so the notch closes when there's no label. */\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-placeholder {\n position: absolute;\n top: 8px;\n left: 7px;\n transition: all 0.2s;\n opacity: 0;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n inset: 9px 0 0 7px;\n font-size: 16px;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n inset: -9px 0 0 14px;\n font-size: 13px;\n color: var(--input-label-floating-color, var(--text-color));\n }\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-plain {\n border-color: transparent;\n outline-color: transparent;\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/fab/fab.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"fab.module.mjs","names":[],"sources":["../../../../package/common/fab/fab.module.pcss"],"sourcesContent":["\n.fab {\n animation: appear 0.3s forwards;\n opacity: 0;\n transform: scale(0);\n box-shadow:\n 0px 3px 5px -1px rgb(0 0 0 / 20%),\n 0px 6px 10px 0px rgb(0 0 0 / 14%),\n 0px 1px 18px 0px rgb(0 0 0 / 12%);\n border-radius: 50%;\n\n &-container {\n position: fixed;\n bottom: 16px;\n right: 16px;\n\n @media (--breakpoint-tablet) {\n z-index: 2;\n }\n }\n\n &-menu {\n position: absolute;\n top: 0;\n transform: translateY(calc(-100% - 16px));\n width: 100%;\n display: flex;\n flex-flow: column-reverse;\n gap: 16px;\n align-items: center;\n pointer-events: none;\n user-select: none;\n\n &-backdrop {\n width: 0%;\n height: 0%;\n position: fixed;\n top: 0;\n left: 0;\n background: black;\n opacity: 0;\n transition: opacity 0.4s;\n\n &-open {\n width: 100%;\n height: 100%;\n opacity: 0.5;\n }\n }\n\n &-entry {\n position: relative;\n cursor: pointer;\n opacity: 0;\n transform: scale(0);\n transition: all 0.2s;\n pointer-events: all;\n\n &:nth-child(2) {\n transition-delay: 0.05s;\n }\n\n &:nth-child(3) {\n transition-delay: 0.1s;\n }\n\n &:nth-child(4) {\n transition-delay: 0.15s;\n }\n\n &:nth-child(5) {\n transition-delay: 0.2s;\n }\n\n &:nth-child(6) {\n transition-delay: 0.25s;\n }\n\n &:nth-child(7) {\n transition-delay: 0.3s;\n }\n\n &-shown {\n opacity: 1;\n transform: scale(1);\n }\n\n &-label {\n background: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n padding: 4px 8px;\n\n &-container {\n position: absolute;\n width: max-content;\n transform: translateX(-100%);\n height: 100%;\n margin-left: -8px;\n align-items: center;\n display: flex;\n }\n }\n }\n }\n\n &-icon {\n transition: all 0.4s;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n\n &-menuOpen {\n transform: rotate(225deg);\n }\n\n &-content {\n position: absolute;\n width: 18px;\n height: 18px;\n opacity: 0;\n transition: opacity 0.3s;\n\n &-shown {\n opacity: 1;\n }\n }\n }\n\n @keyframes appear {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"fab.module.mjs","names":[],"sources":["../../../../package/common/fab/fab.module.pcss"],"sourcesContent":["\n.fab {\n animation: appear 0.3s forwards;\n opacity: 0;\n transform: scale(0);\n box-shadow:\n 0px 3px 5px -1px rgb(0 0 0 / 20%),\n 0px 6px 10px 0px rgb(0 0 0 / 14%),\n 0px 1px 18px 0px rgb(0 0 0 / 12%);\n border-radius: 50%;\n\n &-container {\n position: fixed;\n bottom: 16px;\n right: 16px;\n\n @media (--breakpoint-tablet) {\n z-index: 2;\n }\n }\n\n &-menu {\n position: absolute;\n top: 0;\n transform: translateY(calc(-100% - 16px));\n width: 100%;\n display: flex;\n flex-flow: column-reverse;\n gap: 16px;\n align-items: center;\n pointer-events: none;\n user-select: none;\n\n &-backdrop {\n width: 0%;\n height: 0%;\n position: fixed;\n top: 0;\n left: 0;\n background: black;\n opacity: 0;\n transition: opacity 0.4s;\n\n &-open {\n width: 100%;\n height: 100%;\n opacity: 0.5;\n }\n }\n\n &-entry {\n position: relative;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n opacity: 0;\n transform: scale(0);\n transition: all 0.2s;\n pointer-events: all;\n\n &:nth-child(2) {\n transition-delay: 0.05s;\n }\n\n &:nth-child(3) {\n transition-delay: 0.1s;\n }\n\n &:nth-child(4) {\n transition-delay: 0.15s;\n }\n\n &:nth-child(5) {\n transition-delay: 0.2s;\n }\n\n &:nth-child(6) {\n transition-delay: 0.25s;\n }\n\n &:nth-child(7) {\n transition-delay: 0.3s;\n }\n\n &-shown {\n opacity: 1;\n transform: scale(1);\n }\n\n &-label {\n background: var(--background-accent-light);\n border-radius: var(--default-border-radius);\n padding: 4px 8px;\n\n &-container {\n position: absolute;\n width: max-content;\n transform: translateX(-100%);\n height: 100%;\n margin-left: -8px;\n align-items: center;\n display: flex;\n }\n }\n }\n }\n\n &-icon {\n transition: all 0.4s;\n display: flex;\n justify-content: center;\n align-items: center;\n position: relative;\n width: 100%;\n height: 100%;\n\n &-menuOpen {\n transform: rotate(225deg);\n }\n\n &-content {\n position: absolute;\n width: 18px;\n height: 18px;\n opacity: 0;\n transition: opacity 0.3s;\n\n &-shown {\n opacity: 1;\n }\n }\n }\n\n @keyframes appear {\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/floatingMenu/floatingMenu.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"floatingMenu.module.mjs","names":[],"sources":["../../../../package/common/floatingMenu/floatingMenu.module.pcss"],"sourcesContent":[".floatingMenu {\n position: relative;\n\n &-content {\n cursor: pointer;\n }\n\n &-container {\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n box-shadow: var(--card-shadow);\n position: absolute;\n margin-top: 10px;\n background: var(--background-modal);\n padding: 8px;\n border-radius: calc(var(--default-border-radius) + 4px);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 10px;\n }\n\n &-align {\n &-left {\n left: 0px;\n }\n\n &-right {\n right: 0px;\n }\n\n &-center {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &-flag {\n box-shadow: var(--card-shadow);\n background: var(--background-modal);\n height: 10px;\n width: 10px;\n position: absolute;\n margin-top: 5px;\n transform: rotate(45deg);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 5px;\n }\n\n &-align-right {\n right: 8px;\n }\n\n &-align-left {\n left: 8px;\n }\n\n &-align-center {\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n }\n }\n }\n\n &-anim {\n transform: scale(0.7);\n opacity: 0.7;\n animation: showMenu 0.1s forwards;\n position: fixed;\n z-index: 1;\n }\n\n @keyframes showMenu {\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"floatingMenu.module.mjs","names":[],"sources":["../../../../package/common/floatingMenu/floatingMenu.module.pcss"],"sourcesContent":[".floatingMenu {\n position: relative;\n\n &-content {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n\n &-container {\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n box-shadow: var(--card-shadow);\n position: absolute;\n margin-top: 10px;\n background: var(--background-modal);\n padding: 8px;\n border-radius: calc(var(--default-border-radius) + 4px);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 10px;\n }\n\n &-align {\n &-left {\n left: 0px;\n }\n\n &-right {\n right: 0px;\n }\n\n &-center {\n left: 50%;\n transform: translateX(-50%);\n }\n }\n\n &-flag {\n box-shadow: var(--card-shadow);\n background: var(--background-modal);\n height: 10px;\n width: 10px;\n position: absolute;\n margin-top: 5px;\n transform: rotate(45deg);\n\n .floatingMenu-anim-flip & {\n top: auto;\n bottom: 0;\n margin-top: 0;\n margin-bottom: 5px;\n }\n\n &-align-right {\n right: 8px;\n }\n\n &-align-left {\n left: 8px;\n }\n\n &-align-center {\n left: 50%;\n transform: translateX(-50%) rotate(45deg);\n }\n }\n }\n\n &-anim {\n transform: scale(0.7);\n opacity: 0.7;\n animation: showMenu 0.1s forwards;\n position: fixed;\n z-index: 1;\n }\n\n @keyframes showMenu {\n to {\n transform: scale(1);\n opacity: 1;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/iconPicker/iconPicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"iconPicker.module.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.module.pcss"],"sourcesContent":[".iconPicker {\n border-width: 1px;\n border-radius: var(--default-border-radius);\n border-color: transparent;\n border-style: solid;\n\n &-label {\n font-size: var(--text-small-font-size);\n margin-bottom: 8px;\n }\n\n &-item {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n width: 24px;\n height: 24px;\n background: var(--background-accent);\n border-radius: 200px;\n cursor: pointer;\n stroke: var(--text-color);\n position: relative;\n\n &:focus-visible {\n outline: 1px solid var(--primary-color);\n }\n\n &-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n gap: 8px 14px;\n }\n\n &-selected {\n background: var(--primary-color);\n }\n }\n\n &-error {\n border-color: red;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"iconPicker.module.mjs","names":[],"sources":["../../../../package/common/iconPicker/iconPicker.module.pcss"],"sourcesContent":[".iconPicker {\n border-width: 1px;\n border-radius: var(--default-border-radius);\n border-color: transparent;\n border-style: solid;\n\n &-label {\n font-size: var(--text-small-font-size);\n margin-bottom: 8px;\n }\n\n &-item {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 8px;\n width: 24px;\n height: 24px;\n background: var(--background-accent);\n border-radius: 200px;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n stroke: var(--text-color);\n position: relative;\n\n &:focus-visible {\n outline: 1px solid var(--primary-color);\n }\n\n &-container {\n display: flex;\n flex-wrap: wrap;\n justify-content: space-around;\n gap: 8px 14px;\n }\n\n &-selected {\n background: var(--primary-color);\n }\n }\n\n &-error {\n border-color: red;\n }\n}\n"],"mappings":""}

package/dist/esm/common/input/input.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n &-withIcon {\n padding-right: 37px !important;\n\n &-left {\n padding-right: 9px !important;\n padding-left: 37px !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: 10px;\n top: 8px;\n color: var(--input-icon-color);\n width: 19px !important;\n height: 19px !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: 10px;\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"input.module.mjs","names":[],"sources":["../../../../package/common/input/input.module.pcss"],"sourcesContent":["\n.required-mark {\n padding: 0px 0px 0px 4px;\n color: var(--required-mark-color, var(--error-color));\n}\n\n.input {\n position: relative;\n width: 100%;\n --input-notch-height: 1.75em;\n\n &-placeholder {\n position: absolute;\n top: 50%;\n left: 7px;\n transform: translateY(-50%);\n transition: all 0.2s;\n opacity: 0;\n user-select: none;\n pointer-events: none;\n\n &-shown {\n animation: 0.2s fadeIn 0.3s forwards;\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-matLabel {\n position: absolute;\n transition: all 0.3s;\n left: 7px;\n right: 0;\n top: 50%;\n transform: translateY(-50%);\n font-size: 1em;\n color: var(--input-label-resting-color, var(--text-light));\n pointer-events: none;\n user-select: none;\n\n &-floating {\n top: 0;\n bottom: auto;\n left: 14px;\n right: 0;\n font-size: 0.8em;\n color: var(--input-label-floating-color, var(--text-color));\n transform: translateY(-50%);\n }\n\n &-multiline {\n top: 14px;\n transform: translateY(0);\n }\n }\n\n &-fieldset {\n position: absolute;\n width: 100%;\n margin: 0;\n padding: 0;\n min-width: 0;\n box-sizing: border-box;\n border-radius: var(--default-border-radius);\n font-size: 0.8em;\n inset: calc(var(--input-notch-height) / -2) 0 0 0;\n padding-left: 8px;\n border-width: 1px;\n border-style: solid;\n border-color: var(--border-color);\n pointer-events: none;\n user-select: none;\n\n &-legend {\n display: block;\n max-width: 0;\n transition: max-width 0.2s;\n white-space: nowrap;\n padding: 0;\n\n &-active {\n max-width: 300px;\n }\n\n span {\n line-height: var(--input-notch-height);\n padding: 0 5px;\n opacity: 0;\n }\n\n span:empty {\n padding: 0.000001px;\n }\n }\n }\n\n &-container {\n display: flex;\n align-items: center;\n border-radius: var(--default-border-radius);\n background-color: var(--input-background);\n transition: border-color;\n cursor: text;\n height: 100%;\n\n &-multiline {\n overflow: hidden;\n padding-top: 10px;\n align-items: flex-start;\n }\n\n &-border {\n outline: 1px solid var(--border-color);\n transition: border-color;\n background-color: var(--input-background);\n outline: none;\n\n &-focused {\n outline-color: var(--primary-color);\n border-color: var(--primary-color);\n }\n\n &-searchFocused {\n outline-color: var(--search-input-color);\n outline-width: 2px;\n border-color: var(--search-input-color);\n }\n\n &-invalid {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-invalid:hover {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n\n &-error {\n outline-color: var(--error-border-color);\n border-color: var(--error-border-color);\n }\n }\n }\n\n &-label {\n display: flex;\n color: var(--text-color);\n height: 100%;\n\n &-column {\n flex-direction: column;\n }\n\n &-text {\n white-space: nowrap;\n margin-right: 5px;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n color: color(var(--border-color) lightness(40%));\n background-color: transparent;\n font-size: 12px;\n position: absolute;\n top: -15px;\n white-space: nowrap;\n }\n }\n\n &-upper-right-label {\n position: absolute;\n transform: translateY(calc(-100% - 1.5px));\n right: 8px;\n min-height: 12px;\n font-size: 12px;\n color: color(var(--border-color) lightness(40%));\n }\n\n &-field {\n appearance: none;\n -webkit-appearance: none;\n font-family: inherit;\n font-size: inherit;\n box-sizing: border-box;\n resize: none;\n width: 100%;\n border: none;\n border-radius: var(--default-border-radius);\n overflow: hidden;\n line-height: 1.25;\n color: var(--text-color);\n background: transparent;\n\n &:focus {\n outline: none;\n }\n\n &::placeholder {\n color: var(--text-light);\n }\n\n &-withIcon {\n padding-right: 37px !important;\n\n &-left {\n padding-right: 9px !important;\n padding-left: 37px !important;\n }\n }\n\n &-suffix {\n padding-right: 9px;\n }\n\n &-date {\n padding: 6px 9px;\n color-scheme: dark;\n\n svg {\n color: white;\n }\n }\n\n &-default {\n padding: 8px 7.5px 6px;\n }\n\n &[disabled] {\n background-color: var(--disabled-input-color);\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n opacity: 1;\n\n &::placeholder {\n color: var(--disabled-font-color);\n -webkit-text-fill-color: var(--disabled-font-color);\n }\n }\n\n &-readOnly {\n cursor: default;\n color: var(--text-dark);\n -webkit-text-fill-color: var(--text-dark);\n }\n\n &-uppercase {\n text-transform: uppercase;\n }\n\n &-multiline {\n overflow-y: auto;\n resize: vertical;\n padding-top: 4px;\n min-height: 30px;\n\n &-autoResize {\n resize: none;\n overflow: hidden;\n }\n }\n\n &-icon {\n appearance: none;\n -webkit-appearance: none;\n box-sizing: border-box;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n background-color: transparent;\n border: none;\n position: absolute;\n outline: none;\n right: 10px;\n top: 8px;\n color: var(--input-icon-color);\n width: 19px !important;\n height: 19px !important;\n user-select: none;\n top: 50%;\n transform: translateY(-50%);\n\n &-left {\n left: 10px;\n }\n\n &-notClickable {\n pointer-events: none;\n }\n }\n }\n\n &-error {\n height: 1em;\n padding-top: 3px;\n color: var(--error-font-color);\n font-size: 11px;\n }\n\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 0.5;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/inputDropdown/inputDropdown.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"inputDropdown.module.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.module.pcss"],"sourcesContent":[".inputDropdown {\n position: relative;\n}\n\n.dropdown {\n position: fixed;\n width: fit-content;\n max-width: 240px;\n color: var(--text-color);\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.1s;\n transform-origin: top left;\n opacity: 0;\n transform: scale(0.95);\n z-index: 1;\n\n &-scroll {\n overflow: auto;\n max-height: 200px;\n }\n\n &-shown {\n transform: scale(1);\n opacity: 1;\n }\n\n &-flip {\n transform-origin: bottom left;\n }\n\n &-item {\n padding: 8px;\n z-index: 0;\n outline: none;\n cursor: pointer;\n\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n\n &-highlighted {\n background: var(--background-accent);\n }\n }\n\n &-category {\n padding: 16px 8px 4px 8px;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"inputDropdown.module.mjs","names":[],"sources":["../../../../package/common/inputDropdown/inputDropdown.module.pcss"],"sourcesContent":[".inputDropdown {\n position: relative;\n}\n\n.dropdown {\n position: fixed;\n width: fit-content;\n max-width: 240px;\n color: var(--text-color);\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n box-sizing: border-box;\n overflow: hidden;\n transition: all 0.1s;\n transform-origin: top left;\n opacity: 0;\n transform: scale(0.95);\n z-index: 1;\n\n &-scroll {\n overflow: auto;\n max-height: 200px;\n }\n\n &-shown {\n transform: scale(1);\n opacity: 1;\n }\n\n &-flip {\n transform-origin: bottom left;\n }\n\n &-item {\n padding: 8px;\n z-index: 0;\n outline: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n\n &:hover,\n &:focus {\n background: var(--background-accent);\n }\n\n &-highlighted {\n background: var(--background-accent);\n }\n }\n\n &-category {\n padding: 16px 8px 4px 8px;\n }\n}\n"],"mappings":""}

package/dist/esm/common/klipyPicker/klipyPicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"klipyPicker.module.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.module.pcss"],"sourcesContent":[".klipyPicker {\n &-selected {\n margin-top: 8px;\n }\n\n &-modal {\n &-content {\n display: flex;\n flex-flow: column;\n gap: var(--spacing-m);\n }\n }\n\n &-suggestions {\n &-container {\n max-width: 420px;\n }\n\n &-item {\n cursor: pointer;\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"klipyPicker.module.mjs","names":[],"sources":["../../../../package/common/klipyPicker/klipyPicker.module.pcss"],"sourcesContent":[".klipyPicker {\n &-selected {\n margin-top: 8px;\n }\n\n &-modal {\n &-content {\n display: flex;\n flex-flow: column;\n gap: var(--spacing-m);\n }\n }\n\n &-suggestions {\n &-container {\n max-width: 420px;\n }\n\n &-item {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n}\n"],"mappings":""}

package/dist/esm/common/modal/modal.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":["\n.modal {\n padding: 16px;\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n color: var(--text-color);\n font-family: var(--default-font);\n box-sizing: border-box;\n position: relative;\n transform-origin: bottom center;\n animation:\n slideIn 0.2s,\n fadeIn 0.3s forwards;\n max-width: 95%;\n max-height: 95%;\n overflow: auto;\n\n @media not (--breakpoint-desktop) {\n max-width: 100%;\n max-height: 100%;\n }\n\n &-container {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 0;\n left: 0;\n\n @media (--breakpoint-tablet) {\n z-index: 1;\n }\n }\n\n &-header {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n margin-bottom: 16px;\n\n div {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n cursor: pointer;\n }\n }\n\n &-wrapper {\n position: fixed;\n width: 100%;\n height: 100%;\n background: #00000052;\n top: 0;\n left: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n\n &-shown {\n opacity: 1;\n }\n }\n}\n\n@keyframes slideIn {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(0.99);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"modal.module.mjs","names":[],"sources":["../../../../package/common/modal/modal.module.pcss"],"sourcesContent":["\n.modal {\n padding: 16px;\n border-radius: var(--default-border-radius);\n background: var(--background-modal);\n color: var(--text-color);\n font-family: var(--default-font);\n box-sizing: border-box;\n position: relative;\n transform-origin: bottom center;\n animation:\n slideIn 0.2s,\n fadeIn 0.3s forwards;\n max-width: 95%;\n max-height: 95%;\n overflow: auto;\n\n @media not (--breakpoint-desktop) {\n max-width: 100%;\n max-height: 100%;\n }\n\n &-container {\n position: absolute;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n top: 0;\n left: 0;\n\n @media (--breakpoint-tablet) {\n z-index: 1;\n }\n }\n\n &-header {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n margin-bottom: 16px;\n\n div {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n svg {\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n }\n\n &-wrapper {\n position: fixed;\n width: 100%;\n height: 100%;\n background: #00000052;\n top: 0;\n left: 0;\n transition: all 0.3s ease-in-out;\n opacity: 0;\n\n &-shown {\n opacity: 1;\n }\n }\n}\n\n@keyframes slideIn {\n from {\n transform: scale(0);\n }\n to {\n transform: scale(0.99);\n }\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n"],"mappings":""}

package/dist/esm/common/numberInput/numberInput.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {}\n\n.arrows {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--border-color);\n margin: 4px 0;\n}\n\n.arrowBtn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n color: var(--text-dark);\n padding: 0 6px;\n font-size: 0.55rem;\n line-height: 1;\n transition: color 0.15s, background 0.15s;\n\n &:hover {\n color: var(--primary-color);\n background: var(--background-accent-light);\n }\n\n &:active {\n color: var(--primary-lighter);\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"numberInput.module.mjs","names":[],"sources":["../../../../package/common/numberInput/numberInput.module.pcss"],"sourcesContent":[".numberInput {}\n\n.arrows {\n display: flex;\n flex-direction: column;\n align-self: stretch;\n border-left: 1px solid var(--border-color);\n margin: 4px 0;\n}\n\n.arrowBtn {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n background: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n color: var(--text-dark);\n padding: 0 6px;\n font-size: 0.55rem;\n line-height: 1;\n transition: color 0.15s, background 0.15s;\n\n &:hover {\n color: var(--primary-color);\n background: var(--background-accent-light);\n }\n\n &:active {\n color: var(--primary-lighter);\n }\n}\n"],"mappings":""}

package/dist/esm/common/optionPicker/optionPicker.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n display: flex;\n width: 100%;\n gap: var(--spacing-m);\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n text-align: center;\n cursor: pointer;\n padding: var(--spacing-m);\n overflow: hidden;\n text-overflow: ellipsis;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n\n &:focus {\n outline: var(--primary-color) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"optionPicker.module.mjs","names":[],"sources":["../../../../package/common/optionPicker/optionPicker.module.pcss"],"sourcesContent":[".optionPicker{\n display: flex;\n width: 100%;\n gap: var(--spacing-m);\n border-radius: var(--default-border-radius);\n border: 1px solid var(--border-color);\n justify-content: space-around;\n position: relative;\n overflow: hidden;\n\n &-chip {\n position: absolute;\n height: 100%;\n top: 0;\n left: 0;\n background: var(--primary-color);\n border-radius: var(--default-border-radius);\n transition: left 0.25s ease-in-out, width 0.25s ease-in-out;\n }\n\n &-option {\n position: relative;\n width: 100%;\n height: 100%;\n display: block;\n text-align: center;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n padding: var(--spacing-m);\n overflow: hidden;\n text-overflow: ellipsis;\n border-radius: var(--default-border-radius);\n transition: color 0.25s;\n\n &:focus {\n outline: var(--primary-color) solid 2px;\n outline-offset: -2px;\n }\n\n &-active {\n color: var(--text-on-primary);\n }\n }\n}\n"],"mappings":""}