@ahrowe/ui 0.8.0 → 0.10.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 (77) hide show
  1. package/dist/esm/common/animatedLogo/animatedLogo.module.mjs.map +1 -1
  2. package/dist/esm/common/animatedText/animatedText.mjs +2 -0
  3. package/dist/esm/common/animatedText/animatedText.mjs.map +1 -0
  4. package/dist/esm/common/animatedText/animatedText.module.mjs +2 -0
  5. package/dist/esm/common/animatedText/animatedText.module.mjs.map +1 -0
  6. package/dist/esm/common/animatedText/animatedText.types.mjs +2 -0
  7. package/dist/esm/common/animatedText/animatedText.types.mjs.map +1 -0
  8. package/dist/esm/common/datePicker/datePicker.mjs +1 -1
  9. package/dist/esm/common/datePicker/datePicker.mjs.map +1 -1
  10. package/dist/esm/common/datePicker/datePicker.module.mjs +1 -1
  11. package/dist/esm/common/datePicker/datePicker.module.mjs.map +1 -1
  12. package/dist/esm/common/dropZone/dropZone.module.mjs.map +1 -1
  13. package/dist/esm/common/floatingMenu/useFloatingPosition.mjs +1 -1
  14. package/dist/esm/common/floatingMenu/useFloatingPosition.mjs.map +1 -1
  15. package/dist/esm/common/popover/popover.mjs +2 -0
  16. package/dist/esm/common/popover/popover.mjs.map +1 -0
  17. package/dist/esm/common/popover/popover.module.mjs +2 -0
  18. package/dist/esm/common/popover/popover.module.mjs.map +1 -0
  19. package/dist/esm/common/popover/popover.types.mjs +2 -0
  20. package/dist/esm/common/popover/popover.types.mjs.map +1 -0
  21. package/dist/esm/common/popover/usePopoverPosition.mjs +2 -0
  22. package/dist/esm/common/popover/usePopoverPosition.mjs.map +1 -0
  23. package/dist/esm/common/radioGroup/radioGroup.mjs +2 -0
  24. package/dist/esm/common/radioGroup/radioGroup.mjs.map +1 -0
  25. package/dist/esm/common/radioGroup/radioGroup.module.mjs +2 -0
  26. package/dist/esm/common/radioGroup/radioGroup.module.mjs.map +1 -0
  27. package/dist/esm/common/radioGroup/radioGroup.types.mjs +2 -0
  28. package/dist/esm/common/radioGroup/radioGroup.types.mjs.map +1 -0
  29. package/dist/esm/common/scrollbarProvider/scrollbarProvider.module.mjs.map +1 -1
  30. package/dist/esm/common/stepper/stepper.mjs +1 -1
  31. package/dist/esm/common/stepper/stepper.mjs.map +1 -1
  32. package/dist/esm/common/stepper/stepper.module.mjs +1 -1
  33. package/dist/esm/common/stepper/stepper.module.mjs.map +1 -1
  34. package/dist/esm/common/stepper/stepper.types.mjs +2 -0
  35. package/dist/esm/common/stepper/stepper.types.mjs.map +1 -0
  36. package/dist/esm/common/sticky/sticky.mjs +1 -1
  37. package/dist/esm/common/sticky/sticky.mjs.map +1 -1
  38. package/dist/esm/common/sticky/stickyStack.mjs +2 -0
  39. package/dist/esm/common/sticky/stickyStack.mjs.map +1 -0
  40. package/dist/esm/common/themeProvider/themeProvider.mjs +1 -1
  41. package/dist/esm/common/themeProvider/themeProvider.mjs.map +1 -1
  42. package/dist/esm/common/utils/scrollAncestors.mjs +2 -0
  43. package/dist/esm/common/utils/scrollAncestors.mjs.map +1 -0
  44. package/dist/esm/favicon.ico +0 -0
  45. package/dist/esm/index.mjs +1 -1
  46. package/dist/esm/logo.svg +4 -0
  47. package/dist/favicon.ico +0 -0
  48. package/dist/index.cjs +4 -4
  49. package/dist/index.cjs.map +1 -1
  50. package/dist/logo.svg +4 -0
  51. package/dist/style.css +1 -1
  52. package/dist/types/package/common/animatedText/animatedText.d.ts +4 -0
  53. package/dist/types/package/common/animatedText/animatedText.types.d.ts +59 -0
  54. package/dist/types/package/common/animatedText/index.d.ts +2 -0
  55. package/dist/types/package/common/configProvider/configProvider.types.d.ts +2 -0
  56. package/dist/types/package/common/popover/index.d.ts +2 -0
  57. package/dist/types/package/common/popover/popover.d.ts +3 -0
  58. package/dist/types/package/common/popover/popover.types.d.ts +58 -0
  59. package/dist/types/package/common/popover/usePopoverPosition.d.ts +23 -0
  60. package/dist/types/package/common/radioGroup/index.d.ts +2 -0
  61. package/dist/types/package/common/radioGroup/radioGroup.d.ts +4 -0
  62. package/dist/types/package/common/radioGroup/radioGroup.types.d.ts +45 -0
  63. package/dist/types/package/common/stepper/index.d.ts +1 -0
  64. package/dist/types/package/common/stepper/stepper.d.ts +1 -1
  65. package/dist/types/package/common/stepper/stepper.types.d.ts +61 -5
  66. package/dist/types/package/common/sticky/stickyStack.d.ts +41 -0
  67. package/dist/types/package/common/themeProvider/theme.types.d.ts +22 -0
  68. package/dist/types/package/common/utils/scrollAncestors.d.ts +2 -0
  69. package/dist/types/package/index.d.ts +6 -0
  70. package/docs/AnimatedText.md +94 -0
  71. package/docs/CLAUDE.md +3 -0
  72. package/docs/ConfigProvider.md +1 -1
  73. package/docs/Popover.md +61 -0
  74. package/docs/RadioGroup.md +76 -0
  75. package/docs/Stepper.md +101 -8
  76. package/docs/Sticky.md +11 -0
  77. package/package.json +2 -1
@@ -1 +1 @@
1
- {"version":3,"file":"animatedLogo.module.mjs","names":[],"sources":["../../../../package/common/animatedLogo/animatedLogo.module.pcss"],"sourcesContent":[".animatedLogo {\n display: inline-block;\n overflow: visible;\n\n &-path {\n stroke: var(--primary-color);\n fill: var(--primary-color);\n fill-opacity: 0;\n }\n\n &-pathLoop {\n animation-name: animatedLogoRevealLoop;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: infinite;\n }\n\n &-pathOnce {\n animation-name: animatedLogoRevealOnce;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-pathLoopNoFill {\n animation-name: animatedLogoRevealLoopNoFill;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: infinite;\n }\n\n &-pathOnceNoFill {\n animation-name: animatedLogoRevealOnceNoFill;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-spinLoop,\n &-spinOnce,\n &-scaleLoop,\n &-scaleOnce {\n display: inline-block;\n transform-box: fill-box;\n transform-origin: center;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n }\n\n &-spinLoop {\n animation-name: animatedLogoRotateLoop;\n animation-iteration-count: infinite;\n }\n\n &-spinOnce {\n animation-name: animatedLogoRotateOnce;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-scaleLoop {\n animation-name: animatedLogoGrowLoop;\n animation-iteration-count: infinite;\n }\n\n &-scaleOnce {\n animation-name: animatedLogoGrowOnce;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &-pathLoop,\n &-pathOnce {\n animation: none;\n fill-opacity: 1;\n stroke-dashoffset: 0;\n }\n\n &-pathLoopNoFill,\n &-pathOnceNoFill {\n animation: none;\n stroke-dashoffset: 0;\n }\n\n &-spinLoop,\n &-spinOnce,\n &-scaleLoop,\n &-scaleOnce {\n animation: none;\n }\n }\n}\n\n@keyframes animatedLogoRevealLoop {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n\n 38% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 62% {\n fill-opacity: 1;\n }\n\n 86% {\n fill-opacity: 1;\n }\n\n 96% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 100% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n}\n\n@keyframes animatedLogoRevealOnce {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n\n 45% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 100% {\n fill-opacity: 1;\n }\n}\n\n@keyframes animatedLogoRevealLoopNoFill {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n\n 38% {\n stroke-dashoffset: 0;\n }\n\n 86% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n}\n\n@keyframes animatedLogoRevealOnceNoFill {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n\n 45% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes animatedLogoRotateLoop {\n 0% {\n transform: rotate(180deg);\n }\n\n 38% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes animatedLogoRotateOnce {\n 0% {\n transform: rotate(180deg);\n }\n\n 45% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes animatedLogoGrowLoop {\n 0% {\n transform: scale(0);\n }\n\n 38% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n\n@keyframes animatedLogoGrowOnce {\n 0% {\n transform: scale(0);\n }\n\n 45% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"animatedLogo.module.mjs","names":[],"sources":["../../../../package/common/animatedLogo/animatedLogo.module.pcss"],"sourcesContent":[".animatedLogo {\n display: inline-block;\n overflow: visible;\n\n &-path {\n stroke: var(--primary-color);\n fill: var(--primary-color);\n fill-opacity: 0;\n }\n\n &-pathLoop {\n animation-name: animatedLogoRevealLoop;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: infinite;\n }\n\n &-pathOnce {\n animation-name: animatedLogoRevealOnce;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-pathLoopNoFill {\n animation-name: animatedLogoRevealLoopNoFill;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: infinite;\n }\n\n &-pathOnceNoFill {\n animation-name: animatedLogoRevealOnceNoFill;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-spinLoop,\n &-spinOnce,\n &-scaleLoop,\n &-scaleOnce {\n display: inline-block;\n transform-box: fill-box;\n transform-origin: center;\n animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);\n }\n\n &-spinLoop {\n animation-name: animatedLogoRotateLoop;\n animation-iteration-count: infinite;\n }\n\n &-spinOnce {\n animation-name: animatedLogoRotateOnce;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n &-scaleLoop {\n animation-name: animatedLogoGrowLoop;\n animation-iteration-count: infinite;\n }\n\n &-scaleOnce {\n animation-name: animatedLogoGrowOnce;\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &-pathLoop,\n &-pathOnce {\n animation: none;\n fill-opacity: 1;\n stroke-dashoffset: 0;\n }\n\n &-pathLoopNoFill,\n &-pathOnceNoFill {\n animation: none;\n stroke-dashoffset: 0;\n }\n\n &-spinLoop,\n &-spinOnce,\n &-scaleLoop,\n &-scaleOnce {\n animation: none;\n }\n }\n}\n\n@keyframes animatedLogoRevealLoop {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n\n 38% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 62% {\n fill-opacity: 1;\n }\n\n 86% {\n fill-opacity: 1;\n }\n\n 96% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 100% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n}\n\n@keyframes animatedLogoRevealOnce {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n fill-opacity: 0;\n }\n\n 45% {\n stroke-dashoffset: 0;\n fill-opacity: 0;\n }\n\n 100% {\n stroke-dashoffset: 0;\n fill-opacity: 1;\n }\n}\n\n@keyframes animatedLogoRevealLoopNoFill {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n\n 38% {\n stroke-dashoffset: 0;\n }\n\n 86% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n}\n\n@keyframes animatedLogoRevealOnceNoFill {\n 0% {\n stroke-dashoffset: var(--animated-logo-length);\n }\n\n 45% {\n stroke-dashoffset: 0;\n }\n\n 100% {\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes animatedLogoRotateLoop {\n 0% {\n transform: rotate(180deg);\n }\n\n 38% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes animatedLogoRotateOnce {\n 0% {\n transform: rotate(180deg);\n }\n\n 45% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(0deg);\n }\n}\n\n@keyframes animatedLogoGrowLoop {\n 0% {\n transform: scale(0);\n }\n\n 38% {\n transform: scale(1);\n }\n\n 96% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(0);\n }\n}\n\n@keyframes animatedLogoGrowOnce {\n 0% {\n transform: scale(0);\n }\n\n 45% {\n transform: scale(1);\n }\n\n 100% {\n transform: scale(1);\n }\n}\n"],"mappings":""}
@@ -0,0 +1,2 @@
1
+ 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};
2
+ //# sourceMappingURL=animatedText.mjs.map
@@ -0,0 +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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"}
@@ -0,0 +1,2 @@
1
+ var e={animatedText:`animatedText_xkLRE`,"animatedText-visually-hidden":`animatedText-visually-hidden_N-uxP`,animatedTextVisuallyHidden:`animatedText-visually-hidden_N-uxP`,"animatedText-letter":`animatedText-letter_HBpbr`,animatedTextLetter:`animatedText-letter_HBpbr`,"animatedText-variant-rise-up":`animatedText-variant-rise-up_iZl7w`,animatedTextVariantRiseUp:`animatedText-variant-rise-up_iZl7w`,animatedTextRiseUp:`animatedTextRiseUp_4tb02`,"animatedText-variant-blur-in":`animatedText-variant-blur-in_TaxXd`,animatedTextVariantBlurIn:`animatedText-variant-blur-in_TaxXd`,animatedTextBlurIn:`animatedTextBlurIn_OPXmX`,"animatedText-variant-bounce":`animatedText-variant-bounce_1EWqT`,animatedTextVariantBounce:`animatedText-variant-bounce_1EWqT`,animatedTextBounceIn:`animatedTextBounceIn_R8l6K`,"animatedText-variant-glitch":`animatedText-variant-glitch_A-F8k`,animatedTextVariantGlitch:`animatedText-variant-glitch_A-F8k`,animatedTextGlitch:`animatedTextGlitch_tM2K9`,"animatedText-variant-wave":`animatedText-variant-wave_Wiv27`,animatedTextVariantWave:`animatedText-variant-wave_Wiv27`,animatedTextWave:`animatedTextWave_ztd68`,"animatedText-typewriter-letter":`animatedText-typewriter-letter_gAdNb`,animatedTextTypewriterLetter:`animatedText-typewriter-letter_gAdNb`,"animatedText-scramble-letter":`animatedText-scramble-letter_18T2z`,animatedTextScrambleLetter:`animatedText-scramble-letter_18T2z`,"animatedText-cursor":`animatedText-cursor_ns0l7`,animatedTextCursor:`animatedText-cursor_ns0l7`,"animatedText-cursor-blinking":`animatedText-cursor-blinking_IdVo3`,animatedTextCursorBlinking:`animatedText-cursor-blinking_IdVo3`,animatedTextCursorBlink:`animatedTextCursorBlink_MTiee`,"animatedText-shine":`animatedText-shine_VmmS9`,animatedTextShine:`animatedText-shine_VmmS9`,animatedTextShineSweep:`animatedTextShineSweep_-A864`,"animatedText-highlight":`animatedText-highlight_Bu-rP`,animatedTextHighlight:`animatedText-highlight_Bu-rP`,animatedTextHighlightSweep:`animatedTextHighlightSweep_e4-hF`};export{e as default};
2
+ //# sourceMappingURL=animatedText.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"animatedText.module.mjs","names":[],"sources":["../../../../package/common/animatedText/animatedText.module.pcss"],"sourcesContent":[".animatedText {\n display: inline-block;\n position: relative;\n\n &-visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n margin: -1px;\n padding: 0;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border: 0;\n }\n\n &-letter {\n display: inline-block;\n white-space: pre;\n opacity: 0;\n animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);\n animation-fill-mode: forwards;\n }\n\n &-variant {\n &-rise-up {\n animation-name: animatedTextRiseUp;\n }\n\n &-blur-in {\n animation-name: animatedTextBlurIn;\n }\n\n &-bounce {\n animation-name: animatedTextBounceIn;\n animation-timing-function: ease-out;\n }\n\n &-glitch {\n animation-name: animatedTextGlitch;\n animation-timing-function: steps(5, jump-none);\n }\n\n &-wave {\n /* Ambient/looping, not an entrance, so the letter stays visible throughout, overriding\n `.animatedText-letter`'s opacity:0 base (meant for one-shot entrance variants). */\n opacity: 1;\n animation-name: animatedTextWave;\n animation-iteration-count: infinite;\n animation-timing-function: ease-in-out;\n }\n }\n\n &-typewriter-letter {\n display: inline-block;\n white-space: pre;\n }\n\n &-scramble-letter {\n display: inline-block;\n white-space: pre;\n }\n\n &-cursor {\n display: inline-block;\n width: 0.08em;\n min-width: 1px;\n height: 0.85em;\n margin-left: 0.05em;\n background: var(--text-color);\n vertical-align: baseline;\n\n &-blinking {\n animation: animatedTextCursorBlink 1s step-end infinite;\n }\n }\n\n &-shine {\n display: inline-block;\n white-space: pre;\n /* currentColor can't be used here: it would resolve against this same rule's\n `color: transparent` below, making the whole gradient transparent. */\n background-image: linear-gradient(90deg, var(--text-color) 25%, var(--primary-lighter) 50%, var(--text-color) 75%);\n background-size: 200% 100%;\n background-clip: text;\n -webkit-background-clip: text;\n color: transparent;\n -webkit-text-fill-color: transparent;\n animation-name: animatedTextShineSweep;\n animation-timing-function: linear;\n animation-iteration-count: infinite;\n }\n\n &-highlight {\n display: inline-block;\n white-space: pre;\n background-image: linear-gradient(var(--primary-lighter), var(--primary-lighter));\n background-repeat: no-repeat;\n background-position: left center;\n background-size: 0% 100%;\n animation-name: animatedTextHighlightSweep;\n animation-timing-function: ease-out;\n animation-fill-mode: forwards;\n }\n\n @media (prefers-reduced-motion: reduce) {\n &-letter {\n animation: none;\n opacity: 1;\n }\n\n &-shine {\n animation: none;\n background-image: none;\n color: currentColor;\n -webkit-text-fill-color: currentColor;\n }\n\n &-highlight {\n animation: none;\n background-size: 100% 100%;\n }\n\n &-cursor-blinking {\n animation: none;\n opacity: 1;\n }\n }\n}\n\n@keyframes animatedTextRiseUp {\n from {\n opacity: 0;\n transform: translateY(0.6em);\n }\n\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes animatedTextBlurIn {\n from {\n opacity: 0;\n filter: blur(8px);\n }\n\n to {\n opacity: 1;\n filter: blur(0);\n }\n}\n\n@keyframes animatedTextBounceIn {\n 0% {\n opacity: 0;\n transform: translateY(-0.8em);\n }\n\n 60% {\n opacity: 1;\n transform: translateY(0.15em);\n }\n\n 80% {\n transform: translateY(-0.05em);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes animatedTextGlitch {\n 0% {\n opacity: 0;\n transform: translate(0, 0);\n text-shadow: none;\n }\n\n 15% {\n opacity: 1;\n transform: translate(-0.05em, 0.03em);\n text-shadow: 0.06em 0 var(--error-color), -0.06em 0 var(--info-color);\n }\n\n 30% {\n transform: translate(0.05em, -0.03em);\n text-shadow: -0.06em 0 var(--error-color), 0.06em 0 var(--info-color);\n }\n\n 45% {\n transform: translate(-0.03em, 0);\n text-shadow: 0.03em 0 var(--error-color), -0.03em 0 var(--info-color);\n }\n\n 60%,\n 100% {\n opacity: 1;\n transform: translate(0, 0);\n text-shadow: none;\n }\n}\n\n@keyframes animatedTextWave {\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-0.25em);\n }\n}\n\n@keyframes animatedTextShineSweep {\n 0% {\n background-position: 200% 0;\n }\n\n 100% {\n background-position: -200% 0;\n }\n}\n\n@keyframes animatedTextHighlightSweep {\n from {\n background-size: 0% 100%;\n }\n\n to {\n background-size: 100% 100%;\n }\n}\n\n@keyframes animatedTextCursorBlink {\n 0%,\n 50% {\n opacity: 1;\n }\n\n 50.01%,\n 100% {\n opacity: 0;\n }\n}\n"],"mappings":""}
@@ -0,0 +1,2 @@
1
+ var e=function(e){return e.RiseUp=`rise-up`,e.BlurIn=`blur-in`,e.Bounce=`bounce`,e.Typewriter=`typewriter`,e.Scramble=`scramble`,e.Glitch=`glitch`,e.Wave=`wave`,e.Shine=`shine`,e.Highlight=`highlight`,e}({}),t=function(e){return e.Letter=`letter`,e.Word=`word`,e}({});export{t as AnimatedTextUnit,e as AnimatedTextVariant};
2
+ //# sourceMappingURL=animatedText.types.mjs.map
@@ -0,0 +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,2 +1,2 @@
1
- import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../tooltip/tooltip.mjs";import o from"../input/input.mjs";import s from"../modal/modal.mjs";import{getLocale as ee}from"../../services/localization.mjs";import{correctDateMaskValue as te,getDateFromDayMonthAndYear as c,getDateString as l,getMonthName as ne,getMonthNames as re}from"./dateFunctions.mjs";import ie from"./components/datePickerMonth/datePickerMonth.mjs";import u from"../dropdown/dropdown.mjs";import d from"./datePicker.module.mjs";import{useEffect as f,useRef as p,useState as m}from"react";import h from"classnames";import{faChevronLeft as ae,faChevronRight as oe}from"@fortawesome/free-solid-svg-icons";import{Fragment as se,jsx as g,jsxs as _}from"react/jsx-runtime";import v from"@mona-health/react-input-mask";function y(y){let{className:ce=``,selected:b,onSelect:x=()=>null,formValidator:S=null,noInput:C=!1,noHeader:le=!1,isModal:w=!1,isInline:T=!1,onChange:ue=()=>null,minDate:E=null,maxDate:D=null,children:de=null,showClearButton:fe=!1,label:pe=``,isValid:O=!0,errorMessage:k=``,isRequired:A=!1,startDate:j,endDate:M}=e(`DatePicker`,y),N=()=>S?S.value:b,P=N()??new Date,[F,I]=m(P.getMonth()+1),[L,R]=m(P.getFullYear()),[z,B]=m(!1),[V,H]=m(()=>N()?l(P):``),[me,U]=m(!1),[he,W]=m(!1),[,ge]=m(0),[_e,ve]=m(b),G=p(S);if(_e!==b){ve(b);let e=b??new Date;I(e.getMonth()+1),R(e.getFullYear()),H(b?l(b):``)}f(()=>{if(G.current=S,!S)return;let e=()=>{let e=S.value;e?(I(e.getMonth()+1),R(e.getFullYear()),H(l(e))):H(``),ge(e=>e+1)};return S.registerOnUpdateListener(e),()=>S.removeOnUpdateListener(e)},[S]);let ye=()=>S?S.touched&&S.hasError():!O||!!k,be=()=>!!(A||S?.validators.find(e=>e.validatorId===`required`)),K=e=>{H(e?l(e):``),S&&S.set(e),ue(e)},q=e=>{K(e),x(e),B(!1)},J=e=>{I(t=>{let n=t+e;return n<1?(n=12,R(e=>e-1)):n>12&&(n=1,R(e=>e+1)),n})},Y=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=c(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!D||i<=D)&&(!E||i>=E))return i}return null},xe=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=te(t.value,e.value,t.selection??null),r=Y(n.value);return r&&K(r),n},Se=()=>{let e=400,t=new Date().getFullYear()-200;return E&&(t=E.getFullYear()),D&&(e=D.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=N(),Z=ye(),Q=_(se,{children:[le?null:_(`div`,{className:d.datePickerHeader,children:[g(n,{icon:ae,onClick:()=>J(-1)}),g(`div`,{className:d.datePickerHeaderMonthAndYearContainer,children:_(`div`,{className:d.datePickerHeaderMonthAndYear,children:[g(u,{plainStyle:!0,scrollToSelected:!0,onChange:e=>I(e),className:d.datePickerHeaderMonth,value:ne(ee(`-`),L,F,1),items:re().map((e,t)=>({key:t+1,label:e}))}),g(u,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:d.datePickerHeaderYear,onChange:e=>R(e),value:L,items:Se()})]})}),g(n,{icon:oe,onClick:()=>J(1)})]}),g(ie,{className:d.datePickerMonth,month:F,year:L,onSelect:q,selectionStart:j??X,selectionEnd:M??X,minDate:E,maxDate:D}),fe&&g(t,{onClick:()=>q(null),children:`Clear`}),de]}),$=C?null:g(o,{readOnly:w,label:`${pe}${be()?` *`:``}`,value:V,onChange:e=>H(e),onClick:()=>B(!0),customInput:g(v,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:xe}),onBlur:()=>{G.current&&(G.current.touched=!0),U(!1),K(Y(V))},onFocus:()=>U(!0),onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),isValid:!Z}),Ce=T?Q:w?g(s,{hideHeader:!0,isOpen:z,onClose:()=>B(!1),children:Q}):g(i,{isOpen:z,onOpenChange:e=>B(e),content:Q,align:r.Left,dontCloseOnChildClick:!0,children:$});return _(`div`,{className:h(d.datePicker,ce),children:[(w||T)&&$,Ce,g(a,{variant:`error`,message:S?S.getCurrentErrorMessage():k||``,isVisible:Z&&(me||he)})]})}export{y as default};
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../button/button.mjs";import n from"../actionIcon/actionIcon.mjs";import{Align as r}from"../floatingMenu/floatingMenu.types.mjs";import i from"../floatingMenu/floatingMenu.mjs";import a from"../tooltip/tooltip.mjs";import o from"../input/input.mjs";import s from"../modal/modal.mjs";import{getLocale as ee}from"../../services/localization.mjs";import{correctDateMaskValue as te,getDateFromDayMonthAndYear as c,getDateString as l,getMonthName as ne,getMonthNames as re}from"./dateFunctions.mjs";import ie from"./components/datePickerMonth/datePickerMonth.mjs";import u from"../dropdown/dropdown.mjs";import d from"./datePicker.module.mjs";import{useEffect as f,useRef as p,useState as m}from"react";import h from"classnames";import{faChevronLeft as ae,faChevronRight as oe}from"@fortawesome/free-solid-svg-icons";import{Fragment as se,jsx as g,jsxs as _}from"react/jsx-runtime";import v from"@mona-health/react-input-mask";function y(y){let{className:ce=``,selected:b,onSelect:x=()=>null,formValidator:S=null,noInput:C=!1,noHeader:le=!1,isModal:w=!1,isInline:T=!1,onChange:ue=()=>null,minDate:E=null,maxDate:D=null,children:de=null,showClearButton:fe=!1,label:pe=``,isValid:O=!0,errorMessage:k=``,isRequired:A=!1,startDate:j,endDate:M}=e(`DatePicker`,y),N=()=>S?S.value:b,P=N()??new Date,[F,I]=m(P.getMonth()+1),[L,R]=m(P.getFullYear()),[z,B]=m(!1),[V,H]=m(()=>N()?l(P):``),[me,U]=m(!1),[he,W]=m(!1),[,ge]=m(0),[_e,ve]=m(b),G=p(S);if(_e!==b){ve(b);let e=b??new Date;I(e.getMonth()+1),R(e.getFullYear()),H(b?l(b):``)}f(()=>{if(G.current=S,!S)return;let e=()=>{let e=S.value;e?(I(e.getMonth()+1),R(e.getFullYear()),H(l(e))):H(``),ge(e=>e+1)};return S.registerOnUpdateListener(e),()=>S.removeOnUpdateListener(e)},[S]);let ye=()=>S?S.touched&&S.hasError():!O||!!k,be=()=>!!(A||S?.validators.find(e=>e.validatorId===`required`)),K=e=>{H(e?l(e):``),S&&S.set(e),ue(e)},q=e=>{K(e),x(e),B(!1)},J=e=>{I(t=>{let n=t+e;return n<1?(n=12,R(e=>e-1)):n>12&&(n=1,R(e=>e+1)),n})},Y=e=>{if(e.match(/\d{2}\.\d{2}\.\d{4}/gi)){let[t,n,r]=e.split(`.`),i=c(Number(t),Number(n),Number(r));if(i&&i.toString()!==`Invalid Date`&&(!D||i<=D)&&(!E||i>=E))return i}return null},xe=({previousState:e,nextState:t})=>{if(!e||t.value===e.value)return t;let n=te(t.value,e.value,t.selection??null),r=Y(n.value);return r&&K(r),n},Se=()=>{let e=400,t=new Date().getFullYear()-200;return E&&(t=E.getFullYear()),D&&(e=D.getFullYear()-t+1),Array.from(Array(e).keys()).map(e=>({key:e+t,label:e+t}))},X=N(),Z=ye(),Q=_(se,{children:[le?null:_(`div`,{className:d.datePickerHeader,children:[g(n,{icon:ae,onClick:()=>J(-1)}),g(`div`,{className:d.datePickerHeaderMonthAndYearContainer,children:_(`div`,{className:d.datePickerHeaderMonthAndYear,children:[g(u,{plainStyle:!0,scrollToSelected:!0,onChange:e=>I(e),className:d.datePickerHeaderMonth,value:ne(ee(`-`),L,F,1),items:re().map((e,t)=>({key:t+1,label:e}))}),g(u,{plainStyle:!0,scrollToSelected:!0,useMatLabelStyle:!1,className:d.datePickerHeaderYear,onChange:e=>R(e),value:L,items:Se()})]})}),g(n,{icon:oe,onClick:()=>J(1)})]}),g(ie,{className:d.datePickerMonth,month:F,year:L,onSelect:q,selectionStart:j??X,selectionEnd:M??X,minDate:E,maxDate:D}),fe&&g(t,{onClick:()=>q(null),children:`Clear`}),de]}),$=C?null:g(o,{readOnly:w,classNames:w?{input:d.datePickerModalInput}:void 0,label:`${pe}${be()?` *`:``}`,value:V,onChange:e=>H(e),onClick:()=>B(!0),customInput:g(v,{mask:`99.99.9999`,maskPlaceholder:`_`,beforeMaskedStateChange:xe}),onBlur:()=>{G.current&&(G.current.touched=!0),U(!1),K(Y(V))},onFocus:()=>U(!0),onMouseEnter:()=>W(!0),onMouseLeave:()=>W(!1),isValid:!Z}),Ce=T?Q:w?g(s,{hideHeader:!0,isOpen:z,onClose:()=>B(!1),children:Q}):g(i,{isOpen:z,onOpenChange:e=>B(e),content:Q,align:r.Left,dontCloseOnChildClick:!0,children:$});return _(`div`,{className:h(d.datePicker,ce),children:[(w||T)&&$,Ce,g(a,{variant:`error`,message:S?S.getCurrentErrorMessage():k||``,isVisible:Z&&(me||he)})]})}export{y as default};
2
2
  //# sourceMappingURL=datePicker.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport { getDateFromDayMonthAndYear, getMonthName, getMonthNames, getDateString, correctDateMaskValue } from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { FormValidator } from 'services/formValidation';\n\nimport styles from './datePicker.module.pcss';\n\nexport interface DatePickerProps {\n className?: string;\n selected?: Date;\n onSelect?: (date: Date | null) => void;\n formValidator?: FormValidator | null;\n noInput?: boolean;\n noHeader?: boolean;\n isModal?: boolean;\n isInline?: boolean;\n onChange?: (date: Date | null) => void;\n minDate?: Date | null;\n maxDate?: Date | null;\n children?: React.ReactNode;\n showClearButton?: boolean;\n label?: string;\n isValid?: boolean;\n errorMessage?: string;\n isRequired?: boolean;\n startDate?: Date;\n endDate?: Date;\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n const {\n className = '',\n selected,\n onSelect = () => null,\n formValidator = null,\n noInput = false,\n noHeader = false,\n isModal = false,\n isInline = false,\n onChange = () => null,\n minDate = null,\n maxDate = null,\n children = null,\n showClearButton = false,\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n startDate,\n endDate,\n } = useComponentDefaults('DatePicker', props);\n const getCurrValue = (): Date | undefined =>\n formValidator ? (formValidator.value as Date) : selected;\n\n const initialDate = getCurrValue() ?? new Date();\n\n const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n const [currentDateString, setCurrentDateString] = useState(() =>\n getCurrValue() ? getDateString(initialDate) : ''\n );\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const [prevSelected, setPrevSelected] = useState(selected);\n\n const fvRef = useRef(formValidator);\n\n // Sync navigation view when `selected` prop changes externally\n if (prevSelected !== selected) {\n setPrevSelected(selected);\n const d = selected ?? new Date();\n setCurrentMonth(d.getMonth() + 1);\n setCurrentYear(d.getFullYear());\n setCurrentDateString(selected ? getDateString(selected) : '');\n }\n\n // Subscribe to formValidator updates (external system → setState in callback)\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => {\n const val = formValidator.value as Date | undefined;\n if (val) {\n setCurrentMonth(val.getMonth() + 1);\n setCurrentYear(val.getFullYear());\n setCurrentDateString(getDateString(val));\n } else {\n setCurrentDateString('');\n }\n forceUpdate((n: number) => n + 1);\n };\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const handleChange = (date: Date | null) => {\n setCurrentDateString(date ? getDateString(date) : '');\n if (formValidator) formValidator.set(date);\n onChange(date);\n };\n\n const handleSelect = (date: Date | null) => {\n handleChange(date);\n onSelect(date);\n setIsPickerOpen(false);\n };\n\n const changeMonth = (delta: number) => {\n setCurrentMonth((prev) => {\n let next = prev + delta;\n if (next < 1) { next = 12; setCurrentYear((y) => y - 1); }\n else if (next > 12) { next = 1; setCurrentYear((y) => y + 1); }\n return next;\n });\n };\n\n const tryParseDateString = (dateString: string): Date | null => {\n if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n const [day, month, year] = dateString.split('.');\n const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n }\n }\n return null;\n };\n\n const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n // previousState is only supplied on user-driven change events; on mount/focus/blur\n // there is nothing to auto-correct, so the next state passes through unchanged.\n if (!previousState || nextState.value === previousState.value) return nextState;\n\n const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n const parsedDate = tryParseDateString(corrected.value);\n if (parsedDate) handleChange(parsedDate);\n\n return corrected;\n };\n\n const getYearDropdownOptions = () => {\n let length = 400;\n let zeroOffset = new Date().getFullYear() - 200;\n if (minDate) zeroOffset = minDate.getFullYear();\n if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n };\n\n const currValue = getCurrValue();\n const hasErr = hasError();\n\n const header = noHeader ? null : (\n <div className={styles.datePickerHeader}>\n <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n <div className={styles.datePickerHeaderMonthAndYearContainer}>\n <div className={styles.datePickerHeaderMonthAndYear}>\n <Dropdown\n plainStyle\n scrollToSelected\n onChange={(v) => setCurrentMonth(v as number)}\n className={styles.datePickerHeaderMonth}\n value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n />\n <Dropdown\n plainStyle\n scrollToSelected\n useMatLabelStyle={false}\n className={styles.datePickerHeaderYear}\n onChange={(v) => setCurrentYear(v as number)}\n value={currentYear}\n items={getYearDropdownOptions()}\n />\n </div>\n </div>\n <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n </div>\n );\n\n const pickerContent = (\n <>\n {header}\n <DatePickerMonth\n className={styles.datePickerMonth}\n month={currentMonth}\n year={currentYear}\n onSelect={handleSelect}\n selectionStart={startDate ?? currValue}\n selectionEnd={endDate ?? currValue}\n minDate={minDate}\n maxDate={maxDate}\n />\n {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n {children}\n </>\n );\n\n const input = noInput ? null : (\n <Input\n readOnly={isModal}\n label={`${label}${computedIsRequired() ? ' *' : ''}`}\n value={currentDateString}\n onChange={(v) => setCurrentDateString(v as string)}\n onClick={() => setIsPickerOpen(true)}\n customInput={\n <InputMask mask=\"99.99.9999\" maskPlaceholder=\"_\" beforeMaskedStateChange={beforeMaskedStateChange} />\n }\n onBlur={() => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n handleChange(tryParseDateString(currentDateString));\n }}\n onFocus={() => setIsFocused(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n isValid={!hasErr}\n />\n );\n\n const picker = (() => {\n if (isInline) return pickerContent;\n if (isModal) {\n return (\n <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n {pickerContent}\n </Modal>\n );\n }\n return (\n <FloatingMenu\n isOpen={isPickerOpen}\n onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n content={pickerContent}\n align={Align.Left}\n dontCloseOnChildClick\n >\n {input}\n </FloatingMenu>\n );\n })();\n\n return (\n <div className={cx(styles.datePicker, className)}>\n {(isModal || isInline) && input}\n {picker}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"datePicker.mjs","names":[],"sources":["../../../../package/common/datePicker/datePicker.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport cx from 'classnames';\nimport Input from '../input';\nimport { useComponentDefaults } from '../configProvider';\nimport DatePickerMonth from './components/datePickerMonth';\nimport { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons';\nimport { getLocale } from 'services/localization';\nimport ActionIcon from '../actionIcon';\nimport Modal from '../modal';\nimport FloatingMenu from '../floatingMenu';\nimport Dropdown from '../dropdown';\nimport { Align } from '../floatingMenu/floatingMenu.types';\nimport InputMask, { InputState, BeforeMaskedStateChangeStates } from '@mona-health/react-input-mask';\nimport { getDateFromDayMonthAndYear, getMonthName, getMonthNames, getDateString, correctDateMaskValue } from './dateFunctions';\nimport Button from '../button';\nimport Tooltip from '../tooltip';\nimport type { FormValidator } from 'services/formValidation';\n\nimport styles from './datePicker.module.pcss';\n\nexport interface DatePickerProps {\n className?: string;\n selected?: Date;\n onSelect?: (date: Date | null) => void;\n formValidator?: FormValidator | null;\n noInput?: boolean;\n noHeader?: boolean;\n isModal?: boolean;\n isInline?: boolean;\n onChange?: (date: Date | null) => void;\n minDate?: Date | null;\n maxDate?: Date | null;\n children?: React.ReactNode;\n showClearButton?: boolean;\n label?: string;\n isValid?: boolean;\n errorMessage?: string;\n isRequired?: boolean;\n startDate?: Date;\n endDate?: Date;\n}\n\nexport default function DatePicker(props: DatePickerProps) {\n const {\n className = '',\n selected,\n onSelect = () => null,\n formValidator = null,\n noInput = false,\n noHeader = false,\n isModal = false,\n isInline = false,\n onChange = () => null,\n minDate = null,\n maxDate = null,\n children = null,\n showClearButton = false,\n label = '',\n isValid = true,\n errorMessage = '',\n isRequired = false,\n startDate,\n endDate,\n } = useComponentDefaults('DatePicker', props);\n const getCurrValue = (): Date | undefined =>\n formValidator ? (formValidator.value as Date) : selected;\n\n const initialDate = getCurrValue() ?? new Date();\n\n const [currentMonth, setCurrentMonth] = useState(initialDate.getMonth() + 1);\n const [currentYear, setCurrentYear] = useState(initialDate.getFullYear());\n const [isPickerOpen, setIsPickerOpen] = useState(false);\n const [currentDateString, setCurrentDateString] = useState(() =>\n getCurrValue() ? getDateString(initialDate) : ''\n );\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n const [, forceUpdate] = useState(0);\n const [prevSelected, setPrevSelected] = useState(selected);\n\n const fvRef = useRef(formValidator);\n\n // Sync navigation view when `selected` prop changes externally\n if (prevSelected !== selected) {\n setPrevSelected(selected);\n const d = selected ?? new Date();\n setCurrentMonth(d.getMonth() + 1);\n setCurrentYear(d.getFullYear());\n setCurrentDateString(selected ? getDateString(selected) : '');\n }\n\n // Subscribe to formValidator updates (external system → setState in callback)\n useEffect(() => {\n fvRef.current = formValidator;\n if (!formValidator) return;\n const listener = () => {\n const val = formValidator.value as Date | undefined;\n if (val) {\n setCurrentMonth(val.getMonth() + 1);\n setCurrentYear(val.getFullYear());\n setCurrentDateString(getDateString(val));\n } else {\n setCurrentDateString('');\n }\n forceUpdate((n: number) => n + 1);\n };\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = (): boolean => {\n return formValidator\n ? (formValidator.touched && formValidator.hasError())\n : (!isValid || !!errorMessage);\n };\n\n const computedIsRequired = (): boolean => {\n return !!(isRequired || formValidator?.validators.find(\n (v) => (v as { validatorId?: string }).validatorId === 'required'\n ));\n };\n\n const handleChange = (date: Date | null) => {\n setCurrentDateString(date ? getDateString(date) : '');\n if (formValidator) formValidator.set(date);\n onChange(date);\n };\n\n const handleSelect = (date: Date | null) => {\n handleChange(date);\n onSelect(date);\n setIsPickerOpen(false);\n };\n\n const changeMonth = (delta: number) => {\n setCurrentMonth((prev) => {\n let next = prev + delta;\n if (next < 1) { next = 12; setCurrentYear((y) => y - 1); }\n else if (next > 12) { next = 1; setCurrentYear((y) => y + 1); }\n return next;\n });\n };\n\n const tryParseDateString = (dateString: string): Date | null => {\n if (dateString.match(/\\d{2}\\.\\d{2}\\.\\d{4}/gi)) {\n const [day, month, year] = dateString.split('.');\n const parsedDate = getDateFromDayMonthAndYear(Number(day), Number(month), Number(year));\n if (parsedDate && parsedDate.toString() !== 'Invalid Date') {\n const isSmallerThanMaxDate = !maxDate || parsedDate <= maxDate;\n const isBiggerThanMinDate = !minDate || parsedDate >= minDate;\n if (isSmallerThanMaxDate && isBiggerThanMinDate) return parsedDate;\n }\n }\n return null;\n };\n\n const beforeMaskedStateChange = ({ previousState, nextState }: BeforeMaskedStateChangeStates): InputState => {\n // previousState is only supplied on user-driven change events; on mount/focus/blur\n // there is nothing to auto-correct, so the next state passes through unchanged.\n if (!previousState || nextState.value === previousState.value) return nextState;\n\n const corrected = correctDateMaskValue(nextState.value, previousState.value, nextState.selection ?? null);\n\n const parsedDate = tryParseDateString(corrected.value);\n if (parsedDate) handleChange(parsedDate);\n\n return corrected;\n };\n\n const getYearDropdownOptions = () => {\n let length = 400;\n let zeroOffset = new Date().getFullYear() - 200;\n if (minDate) zeroOffset = minDate.getFullYear();\n if (maxDate) length = maxDate.getFullYear() - zeroOffset + 1;\n return Array.from(Array(length).keys()).map((i) => ({ key: i + zeroOffset, label: i + zeroOffset }));\n };\n\n const currValue = getCurrValue();\n const hasErr = hasError();\n\n const header = noHeader ? null : (\n <div className={styles.datePickerHeader}>\n <ActionIcon icon={faChevronLeft} onClick={() => changeMonth(-1)} />\n <div className={styles.datePickerHeaderMonthAndYearContainer}>\n <div className={styles.datePickerHeaderMonthAndYear}>\n <Dropdown\n plainStyle\n scrollToSelected\n onChange={(v) => setCurrentMonth(v as number)}\n className={styles.datePickerHeaderMonth}\n value={getMonthName(getLocale('-'), currentYear, currentMonth, 1)}\n items={getMonthNames().map((month, index) => ({ key: index + 1, label: month }))}\n />\n <Dropdown\n plainStyle\n scrollToSelected\n useMatLabelStyle={false}\n className={styles.datePickerHeaderYear}\n onChange={(v) => setCurrentYear(v as number)}\n value={currentYear}\n items={getYearDropdownOptions()}\n />\n </div>\n </div>\n <ActionIcon icon={faChevronRight} onClick={() => changeMonth(1)} />\n </div>\n );\n\n const pickerContent = (\n <>\n {header}\n <DatePickerMonth\n className={styles.datePickerMonth}\n month={currentMonth}\n year={currentYear}\n onSelect={handleSelect}\n selectionStart={startDate ?? currValue}\n selectionEnd={endDate ?? currValue}\n minDate={minDate}\n maxDate={maxDate}\n />\n {showClearButton && <Button onClick={() => handleSelect(null)}>Clear</Button>}\n {children}\n </>\n );\n\n const input = noInput ? null : (\n <Input\n readOnly={isModal}\n classNames={isModal ? { input: styles.datePickerModalInput } : undefined}\n label={`${label}${computedIsRequired() ? ' *' : ''}`}\n value={currentDateString}\n onChange={(v) => setCurrentDateString(v as string)}\n onClick={() => setIsPickerOpen(true)}\n customInput={\n <InputMask mask=\"99.99.9999\" maskPlaceholder=\"_\" beforeMaskedStateChange={beforeMaskedStateChange} />\n }\n onBlur={() => {\n if (fvRef.current) fvRef.current.touched = true;\n setIsFocused(false);\n handleChange(tryParseDateString(currentDateString));\n }}\n onFocus={() => setIsFocused(true)}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n isValid={!hasErr}\n />\n );\n\n const picker = (() => {\n if (isInline) return pickerContent;\n if (isModal) {\n return (\n <Modal hideHeader isOpen={isPickerOpen} onClose={() => setIsPickerOpen(false)}>\n {pickerContent}\n </Modal>\n );\n }\n return (\n <FloatingMenu\n isOpen={isPickerOpen}\n onOpenChange={(open: boolean) => setIsPickerOpen(open)}\n content={pickerContent}\n align={Align.Left}\n dontCloseOnChildClick\n >\n {input}\n </FloatingMenu>\n );\n })();\n\n return (\n <div className={cx(styles.datePicker, className)}>\n {(isModal || isInline) && input}\n {picker}\n <Tooltip\n variant=\"error\"\n message={formValidator ? formValidator.getCurrentErrorMessage() : (errorMessage || '')}\n isVisible={hasErr && (isFocused || isHovered)}\n />\n </div>\n );\n}\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- var e={datePicker:`datePicker_ZohTp`,"datePicker-header":`datePicker-header_YmSWE`,datePickerHeader:`datePicker-header_YmSWE`,"datePicker-header-monthAndYear":`datePicker-header-monthAndYear_b5ntO`,datePickerHeaderMonthAndYear:`datePicker-header-monthAndYear_b5ntO`,"datePicker-header-monthAndYear-container":`datePicker-header-monthAndYear-container_Hcgks`,datePickerHeaderMonthAndYearContainer:`datePicker-header-monthAndYear-container_Hcgks`,"datePicker-header-month":`datePicker-header-month_jqFHl`,datePickerHeaderMonth:`datePicker-header-month_jqFHl`,"datePicker-header-year":`datePicker-header-year_4egHF`,datePickerHeaderYear:`datePicker-header-year_4egHF`,"datePicker-month":`datePicker-month_7iosT`,datePickerMonth:`datePicker-month_7iosT`};export{e as default};
1
+ var e={datePicker:`datePicker_ZohTp`,"datePicker-header":`datePicker-header_YmSWE`,datePickerHeader:`datePicker-header_YmSWE`,"datePicker-header-monthAndYear":`datePicker-header-monthAndYear_b5ntO`,datePickerHeaderMonthAndYear:`datePicker-header-monthAndYear_b5ntO`,"datePicker-header-monthAndYear-container":`datePicker-header-monthAndYear-container_Hcgks`,datePickerHeaderMonthAndYearContainer:`datePicker-header-monthAndYear-container_Hcgks`,"datePicker-header-month":`datePicker-header-month_jqFHl`,datePickerHeaderMonth:`datePicker-header-month_jqFHl`,"datePicker-header-year":`datePicker-header-year_4egHF`,datePickerHeaderYear:`datePicker-header-year_4egHF`,"datePicker-month":`datePicker-month_7iosT`,datePickerMonth:`datePicker-month_7iosT`,"datePicker-modalInput":`datePicker-modalInput_E2Vig`,datePickerModalInput:`datePicker-modalInput_E2Vig`};export{e as default};
2
2
  //# sourceMappingURL=datePicker.module.mjs.map
@@ -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"],"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 color: var(--text-color);\n -webkit-text-fill-color: var(--text-color);\n }\n}\n"],"mappings":""}
@@ -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(--primary-lighter);\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 &:hover {\n border-color: var(--primary-color);\n background: var(--background-accent-light);\n }\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 &:hover {\n border-color: var(--error-color);\n background: var(--error-lighter);\n }\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 }\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,2 +1,2 @@
1
- import{useLayoutEffect as e}from"react";function t(e){let t=[],n=e.parentElement;for(;n&&n!==document.body&&n!==document.documentElement;){let e=getComputedStyle(n);(e.overflowX!==`visible`||e.overflowY!==`visible`)&&t.push(n),n=n.parentElement}return t}function n(e,t){return t.some(t=>{let n=t.getBoundingClientRect();return e.bottom<=n.top||e.top>=n.bottom||e.right<=n.left||e.left>=n.right})}function r({isOpen:r,triggerRef:i,anchorRef:a,panelRef:o,flipClassName:s,placement:c=`bottom`}){e(()=>{if(!r)return;let e,l;function u(){let r=i.current,d=a.current;if(!r||!d){e=requestAnimationFrame(u);return}let f=t(r);function p(){let e=r.getBoundingClientRect(),t=o.current?.offsetHeight??0,i=window.innerHeight-e.bottom,a=e.top,l=c===`top`?a:i,u=l<t&&(c===`top`?i:a)>l,p=c===`top`?!u:u;d.classList.toggle(s,u),d.style.top=`${p?e.top-d.offsetHeight:e.bottom}px`,d.style.left=`${e.left}px`,d.style.visibility=n(e,f)?`hidden`:``}p();let m=[window,...f];m.forEach(e=>e.addEventListener(`scroll`,p,{passive:!0})),window.addEventListener(`resize`,p),l=()=>{m.forEach(e=>e.removeEventListener(`scroll`,p)),window.removeEventListener(`resize`,p)}}return u(),()=>{e!==void 0&&cancelAnimationFrame(e),l?.()}},[r,i,a,o,s,c])}export{r as useFloatingPosition};
1
+ import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{useLayoutEffect as n}from"react";function r({isOpen:r,triggerRef:i,anchorRef:a,panelRef:o,flipClassName:s,placement:c=`bottom`}){n(()=>{if(!r)return;let n,l;function u(){let r=i.current,d=a.current;if(!r||!d){n=requestAnimationFrame(u);return}let f=e(r);function p(){let e=r.getBoundingClientRect(),n=o.current?.offsetHeight??0,i=window.innerHeight-e.bottom,a=e.top,l=c===`top`?a:i,u=l<n&&(c===`top`?i:a)>l,p=c===`top`?!u:u;d.classList.toggle(s,u),d.style.top=`${p?e.top-d.offsetHeight:e.bottom}px`,d.style.left=`${e.left}px`,d.style.visibility=t(e,f)?`hidden`:``}p();let m=[window,...f];m.forEach(e=>e.addEventListener(`scroll`,p,{passive:!0})),window.addEventListener(`resize`,p),l=()=>{m.forEach(e=>e.removeEventListener(`scroll`,p)),window.removeEventListener(`resize`,p)}}return u(),()=>{n!==void 0&&cancelAnimationFrame(n),l?.()}},[r,i,a,o,s,c])}export{r as useFloatingPosition};
2
2
  //# sourceMappingURL=useFloatingPosition.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"useFloatingPosition.mjs","names":[],"sources":["../../../../package/common/floatingMenu/useFloatingPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\n\n// Scrollable ancestors up to (not including) <body> — computed once per open, not on\n// every scroll tick, since walking the tree and reading computed style forces layout\n// and is too expensive to repeat at scroll frequency (this is what Floating UI's\n// autoUpdate does too: it resolves the ancestor list once via getOverflowAncestors).\n// Plain page/viewport scroll deliberately isn't included: a trigger that scrolls off\n// the top of the page already renders its fixed-position anchor off-screen for free.\nfunction getScrollableAncestors(el: HTMLElement): HTMLElement[] {\n const ancestors: HTMLElement[] = [];\n let node = el.parentElement;\n while (node && node !== document.body && node !== document.documentElement) {\n const style = getComputedStyle(node);\n if (style.overflowX !== 'visible' || style.overflowY !== 'visible') ancestors.push(node);\n node = node.parentElement;\n }\n return ancestors;\n}\n\nfunction isHiddenByAnyAncestor(rect: DOMRect, ancestors: HTMLElement[]) {\n return ancestors.some((ancestor) => {\n const a = ancestor.getBoundingClientRect();\n return rect.bottom <= a.top || rect.top >= a.bottom || rect.right <= a.left || rect.left >= a.right;\n });\n}\n\nexport interface UseFloatingPositionArgs {\n isOpen: boolean;\n /** The element the popup is anchored to. */\n triggerRef: RefObject<HTMLElement | null>;\n /** The `position: fixed` element that gets `top`/`left`/`visibility` written to it directly. */\n anchorRef: RefObject<HTMLElement | null>;\n /** The visible panel whose height decides whether there's room to render on the preferred side. */\n panelRef: RefObject<HTMLElement | null>;\n /** Class toggled on `anchorRef` when flipped to the non-preferred side. */\n flipClassName: string;\n /** Preferred side relative to the trigger (default `'bottom'`) — flips to the other side when there's no room. */\n placement?: 'top' | 'bottom';\n}\n\n/**\n * Keeps a portaled, `position: fixed` popup anchored to a trigger element: tracks the\n * trigger across scroll/resize on every real scrolling ancestor, flips above the trigger\n * when there's no room below, and hides (not closes) the popup when the trigger itself\n * scrolls behind a clipping ancestor — matching Floating UI's autoUpdate + hide middleware.\n *\n * Position/visibility are written straight to the DOM via refs, not through React state:\n * going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useFloatingPosition({ isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement = 'bottom' }: UseFloatingPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The anchor/trigger may not be mounted yet on the very first invocation of this\n // effect: a portal target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on\n // the initial render, in which case the portaled content — and this ref — commits\n // one render later. Since refs never change identity, that later commit doesn't\n // re-trigger this effect on its own, so retry on the next frame until it's there.\n function trySetup() {\n const trigger = triggerRef.current;\n const anchor = anchorRef.current;\n if (!trigger || !anchor) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const rect = trigger!.getBoundingClientRect();\n const panelHeight = panelRef.current?.offsetHeight ?? 0;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n const preferredSpace = placement === 'top' ? spaceAbove : spaceBelow;\n const alternateSpace = placement === 'top' ? spaceBelow : spaceAbove;\n const flip = preferredSpace < panelHeight && alternateSpace > preferredSpace;\n const renderAbove = placement === 'top' ? !flip : flip;\n anchor!.classList.toggle(flipClassName, flip);\n // Shift up by the anchor's own height when rendering above, so this works whether\n // the anchor is a zero-height decorative wrapper (FloatingMenu, whose real panel\n // hangs off it via absolute-positioned CSS) or the visible panel itself\n // (Dropdown) — for the former the shift is a no-op (height 0).\n anchor!.style.top = `${renderAbove ? rect.top - anchor!.offsetHeight : rect.bottom}px`;\n anchor!.style.left = `${rect.left}px`;\n anchor!.style.visibility = isHiddenByAnyAncestor(rect, ancestors) ? 'hidden' : '';\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((t) => t.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n teardown = () => {\n scrollTargets.forEach((t) => t.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement]);\n}"],"mappings":"wCAQA,SAAS,EAAuB,EAAgC,CAC9D,IAAM,EAA2B,CAAC,EAC9B,EAAO,EAAG,cACd,KAAO,GAAQ,IAAS,SAAS,MAAQ,IAAS,SAAS,iBAAiB,CAC1E,IAAM,EAAQ,iBAAiB,CAAI,GAC/B,EAAM,YAAc,WAAa,EAAM,YAAc,YAAW,EAAU,KAAK,CAAI,EACvF,EAAO,EAAK,aACd,CACA,OAAO,CACT,CAEA,SAAS,EAAsB,EAAe,EAA0B,CACtE,OAAO,EAAU,KAAM,GAAa,CAClC,IAAM,EAAI,EAAS,sBAAsB,EACzC,OAAO,EAAK,QAAU,EAAE,KAAO,EAAK,KAAO,EAAE,QAAU,EAAK,OAAS,EAAE,MAAQ,EAAK,MAAQ,EAAE,KAChG,CAAC,CACH,CA0BA,SAAgB,EAAoB,CAAE,SAAQ,aAAY,YAAW,WAAU,gBAAe,YAAY,UAAqC,CAC7I,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAOJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAS,EAAU,QACzB,GAAI,CAAC,GAAW,CAAC,EAAQ,CACvB,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAEhD,SAAS,GAAY,CACnB,IAAM,EAAO,EAAS,sBAAsB,EACtC,EAAc,EAAS,SAAS,cAAgB,EAChD,EAAa,OAAO,YAAc,EAAK,OACvC,EAAa,EAAK,IAClB,EAAiB,IAAc,MAAQ,EAAa,EAEpD,EAAO,EAAiB,IADP,IAAc,MAAQ,EAAa,GACI,EACxD,EAAc,IAAc,MAAQ,CAAC,EAAO,EAClD,EAAQ,UAAU,OAAO,EAAe,CAAI,EAK5C,EAAQ,MAAM,IAAM,GAAG,EAAc,EAAK,IAAM,EAAQ,aAAe,EAAK,OAAO,IACnF,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAK,IAClC,EAAQ,MAAM,WAAa,EAAsB,EAAM,CAAS,EAAI,SAAW,EACjF,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAC3C,MAAiB,CACf,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,CAChD,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAW,CACb,CACF,EAAG,CAAC,EAAQ,EAAY,EAAW,EAAU,EAAe,CAAS,CAAC,CACxE"}
1
+ {"version":3,"file":"useFloatingPosition.mjs","names":[],"sources":["../../../../package/common/floatingMenu/useFloatingPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\n\nexport interface UseFloatingPositionArgs {\n isOpen: boolean;\n /** The element the popup is anchored to. */\n triggerRef: RefObject<HTMLElement | null>;\n /** The `position: fixed` element that gets `top`/`left`/`visibility` written to it directly. */\n anchorRef: RefObject<HTMLElement | null>;\n /** The visible panel whose height decides whether there's room to render on the preferred side. */\n panelRef: RefObject<HTMLElement | null>;\n /** Class toggled on `anchorRef` when flipped to the non-preferred side. */\n flipClassName: string;\n /** Preferred side relative to the trigger (default `'bottom'`) — flips to the other side when there's no room. */\n placement?: 'top' | 'bottom';\n}\n\n/**\n * Keeps a portaled, `position: fixed` popup anchored to a trigger element: tracks the\n * trigger across scroll/resize on every real scrolling ancestor, flips above the trigger\n * when there's no room below, and hides (not closes) the popup when the trigger itself\n * scrolls behind a clipping ancestor — matching Floating UI's autoUpdate + hide middleware.\n *\n * Position/visibility are written straight to the DOM via refs, not through React state:\n * going through setState -> re-render -> commit adds a round-trip that lags behind the\n * browser's own scroll painting by at least a frame.\n */\nexport function useFloatingPosition({ isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement = 'bottom' }: UseFloatingPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The anchor/trigger may not be mounted yet on the very first invocation of this\n // effect: a portal target (e.g. BodyEnd's `#bodyEnd` div) can still be missing on\n // the initial render, in which case the portaled content — and this ref — commits\n // one render later. Since refs never change identity, that later commit doesn't\n // re-trigger this effect on its own, so retry on the next frame until it's there.\n function trySetup() {\n const trigger = triggerRef.current;\n const anchor = anchorRef.current;\n if (!trigger || !anchor) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const rect = trigger!.getBoundingClientRect();\n const panelHeight = panelRef.current?.offsetHeight ?? 0;\n const spaceBelow = window.innerHeight - rect.bottom;\n const spaceAbove = rect.top;\n const preferredSpace = placement === 'top' ? spaceAbove : spaceBelow;\n const alternateSpace = placement === 'top' ? spaceBelow : spaceAbove;\n const flip = preferredSpace < panelHeight && alternateSpace > preferredSpace;\n const renderAbove = placement === 'top' ? !flip : flip;\n anchor!.classList.toggle(flipClassName, flip);\n // Shift up by the anchor's own height when rendering above, so this works whether\n // the anchor is a zero-height decorative wrapper (FloatingMenu, whose real panel\n // hangs off it via absolute-positioned CSS) or the visible panel itself\n // (Dropdown) — for the former the shift is a no-op (height 0).\n anchor!.style.top = `${renderAbove ? rect.top - anchor!.offsetHeight : rect.bottom}px`;\n anchor!.style.left = `${rect.left}px`;\n anchor!.style.visibility = isHiddenByAnyAncestor(rect, ancestors) ? 'hidden' : '';\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((t) => t.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n teardown = () => {\n scrollTargets.forEach((t) => t.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, triggerRef, anchorRef, panelRef, flipClassName, placement]);\n}"],"mappings":"yIA2BA,SAAgB,EAAoB,CAAE,SAAQ,aAAY,YAAW,WAAU,gBAAe,YAAY,UAAqC,CAC7I,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAOJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAS,EAAU,QACzB,GAAI,CAAC,GAAW,CAAC,EAAQ,CACvB,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAEhD,SAAS,GAAY,CACnB,IAAM,EAAO,EAAS,sBAAsB,EACtC,EAAc,EAAS,SAAS,cAAgB,EAChD,EAAa,OAAO,YAAc,EAAK,OACvC,EAAa,EAAK,IAClB,EAAiB,IAAc,MAAQ,EAAa,EAEpD,EAAO,EAAiB,IADP,IAAc,MAAQ,EAAa,GACI,EACxD,EAAc,IAAc,MAAQ,CAAC,EAAO,EAClD,EAAQ,UAAU,OAAO,EAAe,CAAI,EAK5C,EAAQ,MAAM,IAAM,GAAG,EAAc,EAAK,IAAM,EAAQ,aAAe,EAAK,OAAO,IACnF,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAK,IAClC,EAAQ,MAAM,WAAa,EAAsB,EAAM,CAAS,EAAI,SAAW,EACjF,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAM,EAAE,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACvF,OAAO,iBAAiB,SAAU,CAAS,EAC3C,MAAiB,CACf,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,CAChD,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAW,CACb,CACF,EAAG,CAAC,EAAQ,EAAY,EAAW,EAAU,EAAe,CAAS,CAAC,CACxE"}
@@ -0,0 +1,2 @@
1
+ import e from"../bodyEnd/bodyEnd.mjs";import t from"./popover.module.mjs";import{PopoverAlign as n,PopoverPlacement as r,PopoverTrigger as i}from"./popover.types.mjs";import{usePopoverPosition as a}from"./usePopoverPosition.mjs";import{useCallback as o,useEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{jsx as d,jsxs as f}from"react/jsx-runtime";var p=[`a[href]`,`area[href]`,`button:not([disabled])`,`input:not([disabled])`,`select:not([disabled])`,`textarea:not([disabled])`,`[tabindex]:not([tabindex="-1"])`,`[contenteditable="true"]`].join(`,`);function m(e){return e?Array.from(e.querySelectorAll(p)):[]}function h({children:p=null,content:h=null,placement:g=r.Bottom,align:_=n.Center,trigger:v=i.Click,isOpen:y,defaultOpen:b=!1,onOpenChange:x=()=>{},offset:S=10,withArrow:C=!0,closeOnOutsideClick:w=!0,closeOnEscape:T=!0,openDelay:E=100,closeDelay:D=120,disabled:O=!1,className:k,style:A,classNames:j,styles:M,...N}){let P=c(null),F=c(null),I=c(null),L=c(null),R=c(void 0),z=y!==void 0,[B,V]=l(b),H=z?y:B,U=c(x);s(()=>{U.current=x});let W=o(e=>{O&&e||(z||V(e),U.current(e))},[O,z]);a({isOpen:!!H,placement:g,align:_,offset:S,triggerRef:P,floatingRef:F,panelRef:I,arrowRef:C?L:{current:null}});function G(){return m(P.current)[0]??P.current}function K(){G()?.focus()}function q(){let e=m(document.body).filter(e=>!F.current?.contains(e)),t=G(),n=t?e.indexOf(t):-1;n>=0&&e[n+1]?.focus()}s(()=>{if(!H||v!==i.Click)return;let e=m(I.current);e.length!==0&&(F.current?.setAttribute(`role`,`dialog`),e[0].focus())},[H,v]);function J(e){if(e.key!==`Tab`||v!==i.Click)return;let t=m(I.current);if(t.length===0)return;let n=document.activeElement;!e.shiftKey&&n===t[t.length-1]?(e.preventDefault(),q(),W(!1)):e.shiftKey&&n===t[0]&&(e.preventDefault(),K(),W(!1))}s(()=>{if(!H)return;function e(e){let t=e.target,n=F.current?.contains(t),r=P.current?.contains(t);!n&&!r&&W(!1)}function t(e){e.key===`Escape`&&(F.current?.contains(document.activeElement)&&(m(P.current)[0]??P.current)?.focus(),W(!1))}function n(e){let t=e.target,n=F.current?.contains(t),r=P.current?.contains(t);!n&&!r&&W(!1)}return w&&v!==i.Hover&&(window.addEventListener(`mouseup`,e),document.addEventListener(`focusin`,n)),T&&window.addEventListener(`keydown`,t),()=>{window.removeEventListener(`mouseup`,e),document.removeEventListener(`focusin`,n),window.removeEventListener(`keydown`,t)}},[H,w,T,v,W]),s(()=>()=>clearTimeout(R.current),[]);function Y(e){clearTimeout(R.current),R.current=setTimeout(()=>W(e),e?E:D)}let X=v===i.Click?{onClick:()=>W(!H)}:v===i.Hover?{onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)}:{onFocus:()=>W(!0),onBlur:()=>W(!1)},Z=v===i.Hover?{onMouseEnter:()=>Y(!0),onMouseLeave:()=>Y(!1)}:{};return f(`div`,{...N,className:u(t.popover,k,j?.root),style:{...A,...M?.root},children:[d(`div`,{ref:P,className:u(t.popoverTrigger,j?.trigger),style:M?.trigger,...X,children:p}),H&&d(e,{children:f(`div`,{ref:F,className:u(t.popoverFloating,j?.floating),style:M?.floating,"data-placement":g,onKeyDown:J,...Z,children:[d(`div`,{ref:I,className:u(t.popoverPanel,j?.panel),style:M?.panel,children:h}),C&&d(`div`,{ref:L,className:u(t.popoverArrow,j?.arrow),style:M?.arrow})]})})]})}export{h as default};
2
+ //# sourceMappingURL=popover.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.mjs","names":[],"sources":["../../../../package/common/popover/popover.tsx"],"sourcesContent":["import { useRef, useEffect, useState, useCallback } from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './popover.module.pcss';\nimport { usePopoverPosition } from './usePopoverPosition';\nimport { PopoverPlacement, PopoverAlign, PopoverTrigger, type PopoverProps } from './popover.types';\n\nconst FOCUSABLE_SELECTOR = [\n 'a[href]',\n 'area[href]',\n 'button:not([disabled])',\n 'input:not([disabled])',\n 'select:not([disabled])',\n 'textarea:not([disabled])',\n '[tabindex]:not([tabindex=\"-1\"])',\n '[contenteditable=\"true\"]',\n].join(',');\n\n/** Tabbable descendants of `root`, in DOM order. */\nfunction tabbablesIn(root: ParentNode | null): HTMLElement[] {\n if (!root) return [];\n return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n}\n\nfunction Popover({\n children = null,\n content = null,\n placement = PopoverPlacement.Bottom,\n align = PopoverAlign.Center,\n trigger = PopoverTrigger.Click,\n isOpen,\n defaultOpen = false,\n onOpenChange = () => {},\n offset = 10,\n withArrow = true,\n closeOnOutsideClick = true,\n closeOnEscape = true,\n openDelay = 100,\n closeDelay = 120,\n disabled = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: PopoverProps) {\n const triggerRef = useRef<HTMLDivElement>(null);\n const floatingRef = useRef<HTMLDivElement>(null);\n const panelRef = useRef<HTMLDivElement>(null);\n const arrowRef = useRef<HTMLDivElement>(null);\n const hoverTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n\n const isControlled = isOpen !== undefined;\n const [internalOpen, setInternalOpen] = useState(defaultOpen);\n const open = isControlled ? isOpen : internalOpen;\n\n // Keep the outside-click/Escape listeners pointed at the latest setter without re-subscribing.\n const onOpenChangeRef = useRef(onOpenChange);\n useEffect(() => { onOpenChangeRef.current = onOpenChange; });\n\n const setOpen = useCallback((next: boolean) => {\n if (disabled && next) return;\n if (!isControlled) setInternalOpen(next);\n onOpenChangeRef.current(next);\n }, [disabled, isControlled]);\n\n usePopoverPosition({\n isOpen: !!open,\n placement,\n align,\n offset,\n triggerRef,\n floatingRef,\n panelRef,\n arrowRef: withArrow ? arrowRef : { current: null },\n });\n\n function firstTriggerFocusable(): HTMLElement | null {\n return tabbablesIn(triggerRef.current)[0] ?? triggerRef.current;\n }\n\n // Hand focus back to the trigger — used on Escape and on Shift+Tab out of the panel top.\n function restoreFocusToTrigger() {\n firstTriggerFocusable()?.focus();\n }\n\n // Move focus to the tabbable element that follows the trigger in the document, skipping the\n // portaled panel — the \"natural next\" stop when Tab exits the bottom of the panel.\n function focusAfterTrigger() {\n const all = tabbablesIn(document.body).filter((el) => !floatingRef.current?.contains(el));\n const trig = firstTriggerFocusable();\n const idx = trig ? all.indexOf(trig) : -1;\n if (idx >= 0) all[idx + 1]?.focus();\n }\n\n // The panel is portaled to the end of the DOM, so Tab never flows into it naturally. When we\n // manage focus (click trigger + focusable content), move focus in on open and, on Tab out of\n // either end, close and continue focus as if the panel sat right after the trigger.\n useEffect(() => {\n if (!open || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n // Only claim the dialog role when we're actually managing focus for real content.\n floatingRef.current?.setAttribute('role', 'dialog');\n focusables[0].focus();\n }, [open, trigger]);\n\n function handleFloatingKeyDown(event: React.KeyboardEvent) {\n if (event.key !== 'Tab' || trigger !== PopoverTrigger.Click) return;\n const focusables = tabbablesIn(panelRef.current);\n if (focusables.length === 0) return;\n const active = document.activeElement;\n if (!event.shiftKey && active === focusables[focusables.length - 1]) {\n event.preventDefault();\n focusAfterTrigger();\n setOpen(false);\n } else if (event.shiftKey && active === focusables[0]) {\n event.preventDefault();\n restoreFocusToTrigger();\n setOpen(false);\n }\n }\n\n // Outside click + Escape. Registered only while open and only for the relevant trigger mode.\n useEffect(() => {\n if (!open) return;\n\n function onMouseUp(event: MouseEvent) {\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanel && !inTrigger) setOpen(false);\n }\n function onKeyDown(event: KeyboardEvent) {\n if (event.key !== 'Escape') return;\n // Hand focus back to the trigger when it currently sits inside the panel.\n if (floatingRef.current?.contains(document.activeElement)) {\n (tabbablesIn(triggerRef.current)[0] ?? triggerRef.current)?.focus();\n }\n setOpen(false);\n }\n // Keyboard counterpart to the outside click: once focus leaves both the trigger\n // and the (portaled) panel — e.g. tabbing on to the next element — close.\n function onFocusIn(event: FocusEvent) {\n const target = event.target as Node;\n const inPanel = floatingRef.current?.contains(target);\n const inTrigger = triggerRef.current?.contains(target);\n if (!inPanel && !inTrigger) setOpen(false);\n }\n\n if (closeOnOutsideClick && trigger !== PopoverTrigger.Hover) {\n window.addEventListener('mouseup', onMouseUp);\n document.addEventListener('focusin', onFocusIn);\n }\n if (closeOnEscape) window.addEventListener('keydown', onKeyDown);\n return () => {\n window.removeEventListener('mouseup', onMouseUp);\n document.removeEventListener('focusin', onFocusIn);\n window.removeEventListener('keydown', onKeyDown);\n };\n }, [open, closeOnOutsideClick, closeOnEscape, trigger, setOpen]);\n\n useEffect(() => () => clearTimeout(hoverTimer.current), []);\n\n function scheduleHover(next: boolean) {\n clearTimeout(hoverTimer.current);\n hoverTimer.current = setTimeout(() => setOpen(next), next ? openDelay : closeDelay);\n }\n\n const triggerHandlers =\n trigger === PopoverTrigger.Click\n ? { onClick: () => setOpen(!open) }\n : trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : { onFocus: () => setOpen(true), onBlur: () => setOpen(false) };\n\n const floatingHoverHandlers =\n trigger === PopoverTrigger.Hover\n ? { onMouseEnter: () => scheduleHover(true), onMouseLeave: () => scheduleHover(false) }\n : {};\n\n return (\n <div\n {...rest}\n className={cx(styles.popover, className, classNames?.root)}\n style={{ ...style, ...slotStyles?.root }}\n >\n <div\n ref={triggerRef}\n className={cx(styles.popoverTrigger, classNames?.trigger)}\n style={slotStyles?.trigger}\n {...triggerHandlers}\n >\n {children}\n </div>\n {open && (\n <BodyEnd>\n <div\n ref={floatingRef}\n className={cx(styles.popoverFloating, classNames?.floating)}\n style={slotStyles?.floating}\n data-placement={placement}\n onKeyDown={handleFloatingKeyDown}\n {...floatingHoverHandlers}\n >\n <div\n ref={panelRef}\n className={cx(styles.popoverPanel, classNames?.panel)}\n style={slotStyles?.panel}\n >\n {content}\n </div>\n {withArrow && (\n <div\n ref={arrowRef}\n className={cx(styles.popoverArrow, classNames?.arrow)}\n style={slotStyles?.arrow}\n />\n )}\n </div>\n </BodyEnd>\n )}\n </div>\n );\n}\n\nexport default Popover;\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ var e={popover:`popover_hhmvN`,"popover-trigger":`popover-trigger_R4ckf`,popoverTrigger:`popover-trigger_R4ckf`,"popover-floating":`popover-floating_mhXrQ`,popoverFloating:`popover-floating_mhXrQ`,"popover-panel":`popover-panel_tVB2k`,popoverPanel:`popover-panel_tVB2k`,popoverIn:`popoverIn_nKOqX`,"popover-arrow":`popover-arrow_B8kB-`,popoverArrow:`popover-arrow_B8kB-`};export{e as default};
2
+ //# sourceMappingURL=popover.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.module.mjs","names":[],"sources":["../../../../package/common/popover/popover.module.pcss"],"sourcesContent":[".popover {\n position: relative;\n display: inline-flex;\n\n &-trigger {\n display: inline-flex;\n }\n\n &-floating {\n position: fixed;\n top: 0;\n left: 0;\n z-index: 1000;\n /* Hidden until usePopoverPosition writes the first coordinates, to avoid a top-left flash. */\n visibility: hidden;\n }\n\n &-panel {\n position: relative;\n /* Above the arrow so the panel background hides the arrow's inner half — only the\n tip pokes out past the panel edge. */\n z-index: 1;\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n border-radius: calc(var(--default-border-radius) + 4px);\n padding: 12px 14px;\n max-width: min(320px, calc(100vw - 24px));\n animation: popoverIn 0.12s ease forwards;\n }\n\n &-arrow {\n position: absolute;\n width: 10px;\n height: 10px;\n background: var(--background-modal);\n box-shadow: var(--card-shadow);\n transform: rotate(45deg);\n }\n\n /* Arrow sits on the panel edge facing the trigger; --arrow-x / --arrow-y centre it on the trigger. */\n &-floating[data-placement='bottom'] &-arrow {\n top: -5px;\n left: var(--arrow-x, 50%);\n margin-left: -5px;\n }\n &-floating[data-placement='top'] &-arrow {\n bottom: -5px;\n left: var(--arrow-x, 50%);\n margin-left: -5px;\n }\n &-floating[data-placement='right'] &-arrow {\n left: -5px;\n top: var(--arrow-y, 50%);\n margin-top: -5px;\n }\n &-floating[data-placement='left'] &-arrow {\n right: -5px;\n top: var(--arrow-y, 50%);\n margin-top: -5px;\n }\n\n /* Grow from the edge nearest the trigger. */\n &-floating[data-placement='bottom'] &-panel { transform-origin: top center; }\n &-floating[data-placement='top'] &-panel { transform-origin: bottom center; }\n &-floating[data-placement='right'] &-panel { transform-origin: center left; }\n &-floating[data-placement='left'] &-panel { transform-origin: center right; }\n\n @keyframes popoverIn {\n from {\n opacity: 0;\n transform: scale(0.94);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n}\n"],"mappings":""}
@@ -0,0 +1,2 @@
1
+ var e=function(e){return e.Top=`top`,e.Bottom=`bottom`,e.Left=`left`,e.Right=`right`,e}({}),t=function(e){return e.Start=`start`,e.Center=`center`,e.End=`end`,e}({}),n=function(e){return e.Click=`click`,e.Hover=`hover`,e.Focus=`focus`,e}({});export{t as PopoverAlign,e as PopoverPlacement,n as PopoverTrigger};
2
+ //# sourceMappingURL=popover.types.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"popover.types.mjs","names":[],"sources":["../../../../package/common/popover/popover.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\n/** Preferred side of the trigger the panel opens on. Flips to the opposite side when there's no room. */\nexport enum PopoverPlacement {\n Top = 'top',\n Bottom = 'bottom',\n Left = 'left',\n Right = 'right',\n}\n\n/** Alignment along the trigger's cross axis (horizontal for top/bottom, vertical for left/right). */\nexport enum PopoverAlign {\n Start = 'start',\n Center = 'center',\n End = 'end',\n}\n\n/** What opens the popover. */\nexport enum PopoverTrigger {\n Click = 'click',\n Hover = 'hover',\n Focus = 'focus',\n}\n\nexport type PopoverSlots = 'root' | 'trigger' | 'floating' | 'panel' | 'arrow';\n\nexport interface PopoverProps extends HtmlProps {\n /** The trigger element. */\n children?: ReactNode;\n /** The popover body. */\n content?: ReactNode;\n /** Preferred side (default `Bottom`). */\n placement?: PopoverPlacement;\n /** Cross-axis alignment (default `Center`). */\n align?: PopoverAlign;\n /** What opens the popover (default `Click`). */\n trigger?: PopoverTrigger;\n /** Controlled open state. Omit for uncontrolled. */\n isOpen?: boolean;\n /** Initial open state when uncontrolled (default `false`). */\n defaultOpen?: boolean;\n /** Fires whenever the popover wants to open or close. */\n onOpenChange?: (isOpen: boolean) => void;\n /** Gap in px between trigger and panel (default `10`). */\n offset?: number;\n /** Render the arrow pointing at the trigger (default `true`). */\n withArrow?: boolean;\n /** Close when clicking outside the panel (default `true`). */\n closeOnOutsideClick?: boolean;\n /** Close when pressing Escape (default `true`). */\n closeOnEscape?: boolean;\n /** Delay in ms before a hover-triggered popover opens (default `100`). */\n openDelay?: number;\n /** Delay in ms before a hover-triggered popover closes (default `120`). */\n closeDelay?: number;\n /** Prevent the popover from opening. */\n disabled?: boolean;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<PopoverSlots>;\n styles?: SlotStyles<PopoverSlots>;\n}\n"],"mappings":"AAIA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,IAAA,MACA,EAAA,OAAA,SACA,EAAA,KAAA,OACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,OAAA,SACA,EAAA,IAAA,OACF,EAAA,CAAA,CAAA,EAGY,EAAL,SAAA,EAAA,OACL,GAAA,MAAA,QACA,EAAA,MAAA,QACA,EAAA,MAAA,SACF,EAAA,CAAA,CAAA"}
@@ -0,0 +1,2 @@
1
+ import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{PopoverAlign as n,PopoverPlacement as r}from"./popover.types.mjs";import{useLayoutEffect as i}from"react";var a={[r.Top]:`bottom`,[r.Bottom]:`top`,[r.Left]:`right`,[r.Right]:`left`},o=8;function s({isOpen:s,placement:c,align:l,offset:u,triggerRef:d,floatingRef:f,panelRef:p,arrowRef:m}){i(()=>{if(!s)return;let i,h;function g(){let s=d.current,_=f.current,v=p.current;if(!s||!_||!v){i=requestAnimationFrame(g);return}let y=e(s);function b(){let e=s.getBoundingClientRect(),i=v.offsetWidth,d=v.offsetHeight,f=window.innerWidth,p=window.innerHeight,h={top:e.top,bottom:p-e.bottom,left:e.left,right:f-e.right},g=c===r.Top||c===r.Bottom?d:i,b=c,x=a[c];h[b]<g+u&&h[x]>h[b]&&(b=x);let S=b===`top`||b===`bottom`,C,w;b===`bottom`?C=e.bottom+u:b===`top`?C=e.top-u-d:w=b===`right`?e.right+u:e.left-u-i,S?(w=l===n.Start?e.left:l===n.End?e.right-i:e.left+e.width/2-i/2,w=Math.max(o,Math.min(w,f-i-o))):(C=l===n.Start?e.top:l===n.End?e.bottom-d:e.top+e.height/2-d/2,C=Math.max(o,Math.min(C,p-d-o))),_.style.top=`${C}px`,_.style.left=`${w}px`,_.style.visibility=t(e,y)?`hidden`:`visible`,_.dataset.placement=b;let T=m.current;if(T){let t=T.offsetWidth/2||5;if(S){let n=e.left+e.width/2-w;T.style.setProperty(`--arrow-x`,`${Math.max(t+2,Math.min(n,i-t-2))}px`),T.style.removeProperty(`--arrow-y`)}else{let n=e.top+e.height/2-C;T.style.setProperty(`--arrow-y`,`${Math.max(t+2,Math.min(n,d-t-2))}px`),T.style.removeProperty(`--arrow-x`)}}}b();let x=[window,...y];x.forEach(e=>e.addEventListener(`scroll`,b,{passive:!0})),window.addEventListener(`resize`,b),h=()=>{x.forEach(e=>e.removeEventListener(`scroll`,b)),window.removeEventListener(`resize`,b)}}return g(),()=>{i!==void 0&&cancelAnimationFrame(i),h?.()}},[s,c,l,u,d,f,p,m])}export{s as usePopoverPosition};
2
+ //# sourceMappingURL=usePopoverPosition.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"usePopoverPosition.mjs","names":[],"sources":["../../../../package/common/popover/usePopoverPosition.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\nimport { getScrollableAncestors, isHiddenByAnyAncestor } from 'components/common/utils/scrollAncestors';\nimport { PopoverPlacement, PopoverAlign } from './popover.types';\n\ntype Axis = 'top' | 'bottom' | 'left' | 'right';\nconst OPPOSITE: Record<PopoverPlacement, Axis> = {\n [PopoverPlacement.Top]: 'bottom',\n [PopoverPlacement.Bottom]: 'top',\n [PopoverPlacement.Left]: 'right',\n [PopoverPlacement.Right]: 'left',\n};\n\nconst MARGIN = 8; // viewport gutter kept clear when shifting a panel back on-screen\n\nexport interface UsePopoverPositionArgs {\n isOpen: boolean;\n placement: PopoverPlacement;\n align: PopoverAlign;\n offset: number;\n triggerRef: RefObject<HTMLElement | null>;\n /** `position: fixed` wrapper that receives top/left/visibility and the resolved-placement data attribute. */\n floatingRef: RefObject<HTMLElement | null>;\n /** Visible panel, measured to decide flip and shift. */\n panelRef: RefObject<HTMLElement | null>;\n /** Arrow element; gets `--arrow-x` / `--arrow-y` written to it. Pass a null ref when `withArrow` is false. */\n arrowRef: RefObject<HTMLElement | null>;\n}\n\n/**\n * Positions a portaled, `position: fixed` popover on any of the four sides of its trigger with\n * start/center/end cross-axis alignment. Flips to the opposite side when the preferred one has no\n * room, shifts back on-screen along the cross axis, points the arrow at the trigger centre, and\n * hides (not closes) the panel once the trigger scrolls behind a clipping ancestor. Position is\n * written straight to the DOM via refs — going through setState lags the browser's scroll paint.\n */\nexport function usePopoverPosition({\n isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef,\n}: UsePopoverPositionArgs) {\n useLayoutEffect(() => {\n if (!isOpen) return;\n\n let rafId: number | undefined;\n let teardown: (() => void) | undefined;\n\n // The portal target (BodyEnd's #bodyEnd) can still be missing on the first commit, so the\n // floating ref lands one render later. Refs don't re-fire the effect, so retry each frame.\n function trySetup() {\n const trigger = triggerRef.current;\n const floating = floatingRef.current;\n const panel = panelRef.current;\n if (!trigger || !floating || !panel) {\n rafId = requestAnimationFrame(trySetup);\n return;\n }\n const ancestors = getScrollableAncestors(trigger);\n\n function updatePos() {\n const t = trigger!.getBoundingClientRect();\n const pw = panel!.offsetWidth;\n const ph = panel!.offsetHeight;\n const vw = window.innerWidth;\n const vh = window.innerHeight;\n\n // Resolve the main-axis side, flipping when the preferred side lacks room and the\n // opposite side has more.\n const room: Record<Axis, number> = {\n top: t.top,\n bottom: vh - t.bottom,\n left: t.left,\n right: vw - t.right,\n };\n const need = (placement === PopoverPlacement.Top || placement === PopoverPlacement.Bottom) ? ph : pw;\n let side: Axis = placement as unknown as Axis;\n const opp = OPPOSITE[placement];\n if (room[side] < need + offset && room[opp] > room[side]) side = opp;\n\n const vertical = side === 'top' || side === 'bottom';\n\n // Main axis: place the panel just outside the trigger on the resolved side.\n let top: number;\n let left: number;\n if (side === 'bottom') { top = t.bottom + offset; }\n else if (side === 'top') { top = t.top - offset - ph; }\n else if (side === 'right') { left = t.right + offset; }\n else { left = t.left - offset - pw; }\n\n // Cross axis: align start/center/end against the trigger, then shift on-screen.\n if (vertical) {\n if (align === PopoverAlign.Start) left = t.left;\n else if (align === PopoverAlign.End) left = t.right - pw;\n else left = t.left + t.width / 2 - pw / 2;\n left = Math.max(MARGIN, Math.min(left!, vw - pw - MARGIN));\n } else {\n if (align === PopoverAlign.Start) top = t.top;\n else if (align === PopoverAlign.End) top = t.bottom - ph;\n else top = t.top + t.height / 2 - ph / 2;\n top = Math.max(MARGIN, Math.min(top!, vh - ph - MARGIN));\n }\n\n floating!.style.top = `${top!}px`;\n floating!.style.left = `${left!}px`;\n floating!.style.visibility = isHiddenByAnyAncestor(t, ancestors) ? 'hidden' : 'visible';\n floating!.dataset.placement = side;\n\n // Arrow: centre it on the trigger along the cross axis, clamped inside the panel edges.\n const arrow = arrowRef.current;\n if (arrow) {\n const half = arrow.offsetWidth / 2 || 5;\n if (vertical) {\n const x = t.left + t.width / 2 - left!;\n arrow.style.setProperty('--arrow-x', `${Math.max(half + 2, Math.min(x, pw - half - 2))}px`);\n arrow.style.removeProperty('--arrow-y');\n } else {\n const y = t.top + t.height / 2 - top!;\n arrow.style.setProperty('--arrow-y', `${Math.max(half + 2, Math.min(y, ph - half - 2))}px`);\n arrow.style.removeProperty('--arrow-x');\n }\n }\n }\n\n updatePos();\n\n const scrollTargets: (Window | HTMLElement)[] = [window, ...ancestors];\n scrollTargets.forEach((tt) => tt.addEventListener('scroll', updatePos, { passive: true }));\n window.addEventListener('resize', updatePos);\n teardown = () => {\n scrollTargets.forEach((tt) => tt.removeEventListener('scroll', updatePos));\n window.removeEventListener('resize', updatePos);\n };\n }\n\n trySetup();\n\n return () => {\n if (rafId !== undefined) cancelAnimationFrame(rafId);\n teardown?.();\n };\n }, [isOpen, placement, align, offset, triggerRef, floatingRef, panelRef, arrowRef]);\n}\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ import{useComponentDefaults as e}from"../configProvider/useComponentDefaults.mjs";import t from"../tooltip/tooltip.mjs";import{RadioGroupOrientation as n}from"./radioGroup.types.mjs";import r from"./radioGroup.module.mjs";import{useEffect as i,useRef as a,useState as o}from"react";import s from"classnames";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u(u){let{options:d=[],value:f,defaultValue:p,onChange:m=()=>{},orientation:h=n.Vertical,disabled:g=!1,size:_=`18px`,tabIndex:v=0,formValidator:y=null,errorMessage:b=``,isValid:x=!0,className:S,style:C,classNames:w,styles:T,...E}=e(`RadioGroup`,u),D=a([]),O=a(y);i(()=>{O.current=y});let[,k]=o(0),[A,j]=o(p),[M,N]=o(!1),[P,F]=o(!1);i(()=>{if(!y)return;y.validate();let e=()=>k(e=>e+1);return y.registerOnUpdateListener(e),()=>y.removeOnUpdateListener(e)},[y]);let I=y?y.touched&&y.hasError():!x||!!b,L=y?y.getCurrentErrorMessage():b||``,R=f!==void 0&&!y,z=y?y.value:R?f:A;function B(e,t){y?y.set(e):R||j(e),m(e,t)}function V(e){e.currentTarget.contains(e.relatedTarget)||(N(!1),O.current&&(O.current.touched=!0))}let H=d.findIndex(e=>e.value===z),U=d.findIndex(e=>!e.disabled),W=H>=0?H:U;function G(e){D.current[e]?.focus()}function K(e,t,n){if(g||d.length===0)return;let r=t;for(let t=0;t<d.length;t++)if(r=(r+e+d.length)%d.length,!d[r].disabled){G(r),B(d[r].value,n);return}}function q(e,t){let n=d[t];switch(e.key){case`ArrowDown`:case`ArrowRight`:e.preventDefault(),K(1,t,e);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),K(-1,t,e);break;case` `:case`Enter`:e.preventDefault(),!g&&!n.disabled&&B(n.value,e);break;default:break}}return l(`div`,{...E,role:`radiogroup`,"aria-orientation":h,"aria-disabled":g||void 0,"aria-invalid":I||void 0,className:s(r.radioGroup,h===n.Horizontal&&r.radioGroupHorizontal,g&&r.radioGroupDisabled,I&&r.radioGroupError,S,w?.root),style:{"--radio-size":_,...C,...T?.root},onFocus:()=>N(!0),onBlur:V,onMouseEnter:()=>F(!0),onMouseLeave:()=>F(!1),children:[d.map((e,t)=>{let n=e.value===z,i=g||!!e.disabled;return l(`div`,{ref:e=>{D.current[t]=e},role:`radio`,"aria-checked":n,"aria-disabled":i||void 0,tabIndex:i?-1:t===W?v:-1,className:s(r.radioGroupOption,n&&r.radioGroupOptionChecked,i&&r.radioGroupOptionDisabled,w?.option),style:T?.option,onClick:()=>{i||B(e.value)},onKeyDown:e=>q(e,t),children:[c(`div`,{className:s(r.radioGroupRadio,n&&r.radioGroupRadioChecked,w?.radio),style:T?.radio,children:c(`div`,{className:s(r.radioGroupDot,n&&r.radioGroupDotChecked,w?.dot),style:T?.dot})}),(e.label??e.value)!==``&&l(`div`,{className:r.radioGroupText,children:[c(`div`,{className:s(r.radioGroupLabel,w?.label),style:T?.label,children:e.label??e.value}),e.description!=null&&c(`div`,{className:s(r.radioGroupDescription,w?.description),style:T?.description,children:e.description})]})]},String(e.value))}),c(t,{variant:`error`,message:L,isVisible:I&&(M||P)})]})}export{u as default};
2
+ //# sourceMappingURL=radioGroup.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radioGroup.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactElement } from 'react';\nimport cx from 'classnames';\nimport Tooltip from 'components/common/tooltip';\n\nimport { useComponentDefaults } from '../configProvider';\nimport { RadioGroupOrientation, type RadioGroupProps, type RadioValue } from './radioGroup.types';\nimport styles from './radioGroup.module.pcss';\n\nfunction RadioGroup(props: RadioGroupProps): ReactElement {\n const {\n options = [],\n value,\n defaultValue,\n onChange = () => {},\n orientation = RadioGroupOrientation.Vertical,\n disabled = false,\n size = '18px',\n tabIndex = 0,\n formValidator = null,\n errorMessage = '',\n isValid = true,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n } = useComponentDefaults('RadioGroup', props);\n\n const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\n const fvRef = useRef(formValidator);\n useEffect(() => { fvRef.current = formValidator; });\n const [, forceUpdate] = useState(0);\n const [internalValue, setInternalValue] = useState<RadioValue | undefined>(defaultValue);\n const [isFocused, setIsFocused] = useState(false);\n const [isHovered, setIsHovered] = useState(false);\n\n useEffect(() => {\n if (!formValidator) return;\n formValidator.validate();\n const listener = () => forceUpdate((n) => n + 1);\n formValidator.registerOnUpdateListener(listener);\n return () => formValidator.removeOnUpdateListener(listener);\n }, [formValidator]);\n\n const hasError = formValidator\n ? formValidator.touched && formValidator.hasError()\n : !isValid || !!errorMessage;\n const errorText = formValidator ? formValidator.getCurrentErrorMessage() : errorMessage || '';\n\n const isControlled = value !== undefined && !formValidator;\n const currentValue = (formValidator ? formValidator.value : isControlled ? value : internalValue) as\n | RadioValue\n | undefined;\n\n function select(next: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) {\n if (formValidator) formValidator.set(next);\n else if (!isControlled) setInternalValue(next);\n onChange(next, event);\n }\n\n function handleBlur(event: React.FocusEvent<HTMLDivElement>) {\n if (event.currentTarget.contains(event.relatedTarget as Node | null)) return;\n setIsFocused(false);\n if (fvRef.current) fvRef.current.touched = true;\n }\n\n const selectedIndex = options.findIndex((o) => o.value === currentValue);\n const firstEnabledIndex = options.findIndex((o) => !o.disabled);\n const rovingIndex = selectedIndex >= 0 ? selectedIndex : firstEnabledIndex;\n\n function focusOption(index: number) {\n optionRefs.current[index]?.focus();\n }\n\n function moveTo(step: 1 | -1, fromIndex: number, event: React.KeyboardEvent) {\n if (disabled || options.length === 0) return;\n let i = fromIndex;\n for (let count = 0; count < options.length; count++) {\n i = (i + step + options.length) % options.length;\n if (!options[i].disabled) {\n focusOption(i);\n select(options[i].value, event);\n return;\n }\n }\n }\n\n function handleKeyDown(event: React.KeyboardEvent, index: number) {\n const option = options[index];\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n event.preventDefault();\n moveTo(1, index, event);\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n event.preventDefault();\n moveTo(-1, index, event);\n break;\n case ' ':\n case 'Enter':\n event.preventDefault();\n if (!disabled && !option.disabled) select(option.value, event);\n break;\n default:\n break;\n }\n }\n\n return (\n <div\n {...rest}\n role=\"radiogroup\"\n aria-orientation={orientation}\n aria-disabled={disabled || undefined}\n aria-invalid={hasError || undefined}\n className={cx(\n styles.radioGroup,\n orientation === RadioGroupOrientation.Horizontal && styles.radioGroupHorizontal,\n disabled && styles.radioGroupDisabled,\n hasError && styles.radioGroupError,\n className,\n classNames?.root,\n )}\n style={{ '--radio-size': size, ...style, ...slotStyles?.root } as React.CSSProperties}\n onFocus={() => setIsFocused(true)}\n onBlur={handleBlur}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {options.map((option, index) => {\n const checked = option.value === currentValue;\n const optionDisabled = disabled || !!option.disabled;\n return (\n <div\n key={String(option.value)}\n ref={(el) => { optionRefs.current[index] = el; }}\n role=\"radio\"\n aria-checked={checked}\n aria-disabled={optionDisabled || undefined}\n tabIndex={optionDisabled ? -1 : index === rovingIndex ? tabIndex : -1}\n className={cx(\n styles.radioGroupOption,\n checked && styles.radioGroupOptionChecked,\n optionDisabled && styles.radioGroupOptionDisabled,\n classNames?.option,\n )}\n style={slotStyles?.option}\n onClick={() => { if (!optionDisabled) select(option.value); }}\n onKeyDown={(e) => handleKeyDown(e, index)}\n >\n <div\n className={cx(styles.radioGroupRadio, checked && styles.radioGroupRadioChecked, classNames?.radio)}\n style={slotStyles?.radio}\n >\n <div\n className={cx(styles.radioGroupDot, checked && styles.radioGroupDotChecked, classNames?.dot)}\n style={slotStyles?.dot}\n />\n </div>\n {(option.label ?? option.value) !== '' && (\n <div className={styles.radioGroupText}>\n <div className={cx(styles.radioGroupLabel, classNames?.label)} style={slotStyles?.label}>\n {option.label ?? option.value}\n </div>\n {option.description != null && (\n <div\n className={cx(styles.radioGroupDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {option.description}\n </div>\n )}\n </div>\n )}\n </div>\n );\n })}\n <Tooltip\n variant=\"error\"\n message={errorText}\n isVisible={hasError && (isFocused || isHovered)}\n />\n </div>\n );\n}\n\nexport default RadioGroup;\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ var e={radioGroup:`radioGroup_5PUYO`,"radioGroup-horizontal":`radioGroup-horizontal_cfCch`,radioGroupHorizontal:`radioGroup-horizontal_cfCch`,"radioGroup-disabled":`radioGroup-disabled_O2hKy`,radioGroupDisabled:`radioGroup-disabled_O2hKy`,"radioGroup-error":`radioGroup-error_HVUcn`,radioGroupError:`radioGroup-error_HVUcn`,"radioGroup-radio":`radioGroup-radio_XLU2j`,radioGroupRadio:`radioGroup-radio_XLU2j`,"radioGroup-radio-checked":`radioGroup-radio-checked_AOEJu`,radioGroupRadioChecked:`radioGroup-radio-checked_AOEJu`,"radioGroup-option":`radioGroup-option_QxMeW`,radioGroupOption:`radioGroup-option_QxMeW`,"radioGroup-option-disabled":`radioGroup-option-disabled_Q0y35`,radioGroupOptionDisabled:`radioGroup-option-disabled_Q0y35`,"radioGroup-dot":`radioGroup-dot_Q-4Ge`,radioGroupDot:`radioGroup-dot_Q-4Ge`,"radioGroup-dot-checked":`radioGroup-dot-checked_7djgv`,radioGroupDotChecked:`radioGroup-dot-checked_7djgv`,"radioGroup-text":`radioGroup-text_8ekBs`,radioGroupText:`radioGroup-text_8ekBs`,"radioGroup-label":`radioGroup-label_hJD2S`,radioGroupLabel:`radioGroup-label_hJD2S`,"radioGroup-description":`radioGroup-description_xZSLE`,radioGroupDescription:`radioGroup-description_xZSLE`};export{e as default};
2
+ //# sourceMappingURL=radioGroup.module.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radioGroup.module.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.module.pcss"],"sourcesContent":[".radioGroup {\n --radio-size: 18px;\n user-select: none;\n display: flex;\n flex-direction: column;\n gap: 12px;\n width: fit-content;\n\n &-horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n gap: 20px;\n }\n\n &-disabled {\n filter: brightness(0.85);\n cursor: not-allowed;\n }\n\n &-error &-radio:not(.radioGroup-radio-checked) {\n border-color: var(--error-color);\n }\n\n &-option {\n display: flex;\n align-items: flex-start;\n column-gap: 10px;\n cursor: pointer;\n border: 1px solid transparent;\n border-radius: var(--default-border-radius);\n margin: -1px;\n color: var(--text-color);\n font-family: var(--default-font);\n font-size: var(--default-font-size);\n\n &:focus-visible {\n outline: none;\n border-color: var(--primary-color);\n }\n\n &-disabled {\n cursor: not-allowed;\n opacity: 0.55;\n }\n }\n\n &-radio {\n flex-shrink: 0;\n width: var(--radio-size);\n height: var(--radio-size);\n border-radius: 50%;\n border: 1.8px solid var(--border-color);\n display: flex;\n align-items: center;\n justify-content: center;\n margin-top: 1px;\n transition: border-color 0.15s;\n\n &-checked {\n border-color: var(--primary-color);\n }\n }\n\n &-dot {\n width: calc(var(--radio-size) * 0.5);\n height: calc(var(--radio-size) * 0.5);\n border-radius: 50%;\n background-color: var(--primary-color);\n transform: scale(0);\n transition: transform 0.15s ease;\n\n &-checked {\n transform: scale(1);\n }\n }\n\n &-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n }\n\n &-label {\n line-height: 1.2;\n color: var(--text-color);\n }\n\n &-description {\n font-size: 0.85em;\n line-height: 1.3;\n color: var(--text-dark);\n }\n}\n"],"mappings":""}
@@ -0,0 +1,2 @@
1
+ var e=function(e){return e.Vertical=`vertical`,e.Horizontal=`horizontal`,e}({});export{e as RadioGroupOrientation};
2
+ //# sourceMappingURL=radioGroup.types.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radioGroup.types.mjs","names":[],"sources":["../../../../package/common/radioGroup/radioGroup.types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport type { FormValidator } from 'services/formValidation';\nimport type { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types';\n\nexport type RadioValue = string | number;\n\nexport enum RadioGroupOrientation {\n Vertical = 'vertical',\n Horizontal = 'horizontal',\n}\n\nexport interface RadioOption {\n value: RadioValue;\n /** Visible label; falls back to `value` when omitted. */\n label?: ReactNode;\n /** Secondary description shown under the label. */\n description?: ReactNode;\n /** Disable just this option. */\n disabled?: boolean;\n}\n\nexport type RadioGroupSlots = 'root' | 'option' | 'radio' | 'dot' | 'label' | 'description';\n\nexport interface RadioGroupProps extends HtmlProps {\n /** The selectable options. */\n options: RadioOption[];\n /** Controlled selected value. Omit for uncontrolled. */\n value?: RadioValue;\n /** Initial value when uncontrolled. */\n defaultValue?: RadioValue;\n /** Fires with the newly selected value. */\n onChange?: (value: RadioValue, event?: React.MouseEvent | React.KeyboardEvent) => void;\n /** Layout direction (default `Vertical`). */\n orientation?: RadioGroupOrientation;\n /** Disable the whole group. */\n disabled?: boolean;\n /** Diameter of the radio circle (default `'18px'`). */\n size?: string;\n /** Tab index of the active (roving) option. */\n tabIndex?: number;\n formValidator?: FormValidator | null;\n /** Manual error message shown in a tooltip (used when there's no `formValidator`, or to force one). */\n errorMessage?: string;\n /** Manual valid state when not using a `formValidator` (default `true`). */\n isValid?: boolean;\n\n className?: string;\n style?: CSSProperties;\n classNames?: SlotClassNames<RadioGroupSlots>;\n styles?: SlotStyles<RadioGroupSlots>;\n}\n"],"mappings":"AAMA,IAAY,EAAL,SAAA,EAAA,OACL,GAAA,SAAA,WACA,EAAA,WAAA,cACF,EAAA,CAAA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"scrollbarProvider.module.mjs","names":[],"sources":["../../../../package/common/scrollbarProvider/scrollbarProvider.module.pcss"],"sourcesContent":[".scrollbarProvider{\n display: contents;\n /* Firefox */\n * {\n scrollbar-width: thin;\n scrollbar-color: var(--background-accent-light) var(--background);\n }\n\n /* Chrome, Edge, and Safari */\n *::-webkit-scrollbar {\n width: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background: transparent;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: var(--background-accent-light);\n border-radius: 10px;\n border: 3px solid var(--background);\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"scrollbarProvider.module.mjs","names":[],"sources":["../../../../package/common/scrollbarProvider/scrollbarProvider.module.pcss"],"sourcesContent":[".scrollbarProvider{\n display: contents;\n /* Firefox */\n * {\n scrollbar-width: thin;\n scrollbar-color: var(--background-accent-light) transparent;\n }\n\n /* Chrome, Edge, and Safari */\n *::-webkit-scrollbar {\n width: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background: transparent;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: var(--background-accent-light);\n border-radius: 10px;\n border: 3px solid transparent;\n background-clip: padding-box;\n }\n}\n"],"mappings":""}
@@ -1,2 +1,2 @@
1
- import e from"../interactableDiv/index.mjs";import t from"./stepper.module.mjs";import n from"react";import r from"classnames";import{Fragment as i,jsx as a,jsxs as o}from"react/jsx-runtime";function s(){return a(`svg`,{strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.2 -1.2 3.4 2`,height:`20px`,width:`20px`,children:a(`path`,{d:`M 0 0 l 1 1 l 2 -2`,stroke:`white`,strokeWidth:`0.4`,fill:`none`})})}function c({steps:c=[],currentStep:l=0,alignment:u=`horizontal`,onStepClicked:d=null,nonLinear:f=!1,hideLabels:p=!1,className:m,style:h,classNames:g,styles:_,...v}){let y=u===`vertical`;return a(`div`,{...v,className:r(t.stepper,{[t.stepperVertical]:y},g?.root,m),style:{..._?.root,...h},children:c.map((u,m)=>{let h=m<l,v=m<=l,b=!!d&&(f?m!==l:h),x=r(t.stepperEntry,{[t.stepperEntryActive]:v},{[t.stepperEntryDone]:h},{[t.stepperClickable]:b},g?.entry),S=o(i,{children:[a(`div`,{className:r(t.stepperEntryNumber,{[t.stepperEntryNumberDone]:h},g?.entryNumber),style:_?.entryNumber,children:h?a(s,{}):m+1}),!p&&a(`div`,{className:r(t.stepperEntryLabel,{[t.stepperEntryLabelVertical]:y},g?.entryLabel),style:_?.entryLabel,children:u.label})]});return o(n.Fragment,{children:[b?a(e,{className:x,style:_?.entry,onClick:()=>d(m),"aria-current":m===l?`step`:void 0,children:S}):a(`div`,{className:x,style:_?.entry,"aria-current":m===l?`step`:void 0,children:S}),m<c.length-1&&a(`div`,{className:r(t.stepperConnector,{[t.stepperConnectorFilled]:h},{[t.stepperConnectorVertical]:y},g?.connector),style:_?.connector})]},m)})})}export{c as default};
1
+ import e from"../interactableDiv/index.mjs";import t from"./stepper.module.mjs";import{StepperAlignment as n,StepperCollapse as r,StepperLabelPlacement as i,StepperStyleType as a}from"./stepper.types.mjs";import o,{useEffect as s,useRef as c,useState as l}from"react";import u from"classnames";import{FontAwesomeIcon as d}from"@fortawesome/react-fontawesome";import{jsx as f,jsxs as p}from"react/jsx-runtime";var m={[a.Default]:t.stepperDefault,[a.Outlined]:t.stepperOutlined,[a.Dots]:t.stepperDots},h={[i.Top]:t.stepperLabelTop,[i.Bottom]:t.stepperLabelBottom,[i.Left]:t.stepperLabelLeft,[i.Right]:t.stepperLabelRight};function g(){return f(`svg`,{className:t.stepperCheckmark,strokeLinejoin:`round`,strokeLinecap:`round`,xmlns:`http://www.w3.org/2000/svg`,viewBox:`-0.2 -1.2 3.4 2`,height:`20px`,width:`20px`,children:f(`path`,{d:`M 0 0 l 1 1 l 2 -2`,strokeWidth:`0.4`,fill:`none`})})}function _({open:e,className:n,style:r,children:i}){let a=c(null),[o,d]=l(null);return s(()=>{let e=a.current;if(!e)return;let t=new ResizeObserver(()=>d(e.offsetHeight));return t.observe(e),()=>t.disconnect()},[]),f(`div`,{className:u(t.stepperContent,n),style:{...r,height:e?o??`auto`:0},"aria-hidden":!e,children:f(`div`,{ref:a,className:t.stepperContentInner,children:i})})}function v(e,t){let n=[i.Left,i.Right];return t?e&&n.includes(e)?e:i.Right:e&&!n.includes(e)?e:i.Bottom}function y({steps:i=[],currentStep:s=0,alignment:c=n.Horizontal,onStepClicked:l=null,nonLinear:y=!1,hideLabels:b=!1,styleType:x=a.Default,collapse:S=r.None,labelPlacement:C,className:w,style:T,classNames:E,styles:D,...O}){let k=c===n.Vertical,A=v(C,k);return f(`div`,{...O,className:u(t.stepper,m[x],h[A],{[t.stepperVertical]:k},E?.root,w),style:{...D?.root,...T},children:i.map((n,a)=>{let c=a<s,m=a<=s,h=!!n.error,v=!!l&&!n.disabled&&(y?a!==s:c),x=u(t.stepperEntry,{[t.stepperEntryActive]:m},{[t.stepperEntryDone]:c&&!h},{[t.stepperEntryError]:h},{[t.stepperEntryDisabled]:n.disabled},{[t.stepperClickable]:v},E?.entry),C=n.icon?f(d,{icon:n.icon,className:E?.icon,style:D?.icon}):c&&!h?f(g,{}):a+1,w=f(`div`,{className:u(t.stepperEntryNumber,{[t.stepperEntryNumberDone]:c&&!h},E?.entryNumber),style:D?.entryNumber,children:C}),T=n.optional===!0?`Optional`:n.optional===!1?null:n.optional,O=!b&&p(`div`,{className:t.stepperEntryLabels,children:[f(`div`,{className:u(t.stepperEntryLabel,E?.entryLabel),style:D?.entryLabel,children:n.label}),n.description!=null&&f(`div`,{className:u(t.stepperDescription,E?.description),style:D?.description,children:n.description}),T!=null&&f(`div`,{className:u(t.stepperOptional,E?.optional),style:D?.optional,children:T})]}),A=v?p(e,{className:x,style:D?.entry,onClick:()=>l?.(a),"aria-current":a===s?`step`:void 0,"aria-invalid":h||void 0,children:[w,O]}):p(`div`,{className:x,style:D?.entry,"aria-current":a===s?`step`:void 0,"aria-invalid":h||void 0,children:[w,O]}),j=a<i.length-1&&f(`div`,{className:u(t.stepperConnector,{[t.stepperConnectorFilled]:c},E?.connector),style:D?.connector});if(k){let e=S===r.None?!0:S===r.ActiveOnly?a===s:!c;return p(`div`,{className:t.stepperStep,children:[A,j,n.content!=null&&!b&&f(_,{open:e,className:E?.content,style:D?.content,children:n.content})]},a)}return p(o.Fragment,{children:[A,j]},a)})})}export{y as default};
2
2
  //# sourceMappingURL=stepper.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport styles from './stepper.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport type { StepperProps, StepperStep } from './stepper.types';\n\nfunction Checkmark() {\n return (\n <svg\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-0.2 -1.2 3.4 2\"\n height=\"20px\"\n width=\"20px\"\n >\n <path d=\"M 0 0 l 1 1 l 2 -2\" stroke=\"white\" strokeWidth=\"0.4\" fill=\"none\" />\n </svg>\n );\n}\n\nexport default function Stepper({\n steps = [],\n currentStep = 0,\n alignment = 'horizontal',\n onStepClicked = null,\n nonLinear = false,\n hideLabels = false,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: StepperProps) {\n const isVertical = alignment === 'vertical';\n\n return (\n <div\n {...rest}\n className={cx(styles.stepper, { [styles.stepperVertical]: isVertical }, classNames?.root, className)}\n style={{ ...slotStyles?.root, ...style }}\n >\n {steps.map((step: StepperStep, index: number) => {\n const isDone = index < currentStep;\n const isActive = index <= currentStep;\n // nonLinear: every step except the current one is clickable\n // linear: only completed steps are clickable\n const isClickable = !!onStepClicked && (nonLinear ? index !== currentStep : isDone);\n\n const entryClassName = cx(\n styles.stepperEntry,\n { [styles.stepperEntryActive]: isActive },\n { [styles.stepperEntryDone]: isDone },\n { [styles.stepperClickable]: isClickable },\n classNames?.entry\n );\n\n const entryContent = (\n <>\n <div\n className={cx(\n styles.stepperEntryNumber,\n { [styles.stepperEntryNumberDone]: isDone },\n classNames?.entryNumber\n )}\n style={slotStyles?.entryNumber}\n >\n {isDone ? <Checkmark /> : index + 1}\n </div>\n {!hideLabels && (\n <div\n className={cx(\n styles.stepperEntryLabel,\n { [styles.stepperEntryLabelVertical]: isVertical },\n classNames?.entryLabel\n )}\n style={slotStyles?.entryLabel}\n >\n {step.label}\n </div>\n )}\n </>\n );\n\n return (\n <React.Fragment key={index}>\n {isClickable ? (\n <InteractableDiv\n className={entryClassName}\n style={slotStyles?.entry}\n onClick={() => onStepClicked(index)}\n aria-current={index === currentStep ? 'step' : undefined}\n >\n {entryContent}\n </InteractableDiv>\n ) : (\n <div\n className={entryClassName}\n style={slotStyles?.entry}\n aria-current={index === currentStep ? 'step' : undefined}\n >\n {entryContent}\n </div>\n )}\n\n {index < steps.length - 1 && (\n <div\n className={cx(\n styles.stepperConnector,\n { [styles.stepperConnectorFilled]: isDone },\n { [styles.stepperConnectorVertical]: isVertical },\n classNames?.connector\n )}\n style={slotStyles?.connector}\n />\n )}\n </React.Fragment>\n );\n })}\n </div>\n );\n}\n"],"mappings":"+LAMA,SAAS,GAAY,CACnB,OACE,EAAC,MAAD,CACE,eAAe,QACf,cAAc,QACd,MAAM,6BACN,QAAQ,kBACR,OAAO,OACP,MAAM,gBAEN,EAAC,OAAD,CAAM,EAAE,qBAAqB,OAAO,QAAQ,YAAY,MAAM,KAAK,MAAQ,CAAA,CACxE,CAAA,CAET,CAEA,SAAwB,EAAQ,CAC9B,QAAQ,CAAC,EACT,cAAc,EACd,YAAY,aACZ,gBAAgB,KAChB,YAAY,GACZ,aAAa,GACb,YACA,QACA,aACA,OAAQ,EACR,GAAG,GACY,CACf,IAAM,EAAa,IAAc,WAEjC,OACE,EAAC,MAAD,CACE,GAAI,EACJ,UAAW,EAAG,EAAO,QAAS,EAAG,EAAO,iBAAkB,CAAW,EAAG,GAAY,KAAM,CAAS,EACnG,MAAO,CAAE,GAAG,GAAY,KAAM,GAAG,CAAM,WAEtC,EAAM,KAAK,EAAmB,IAAkB,CAC/C,IAAM,EAAS,EAAQ,EACjB,EAAW,GAAS,EAGpB,EAAc,CAAC,CAAC,IAAkB,EAAY,IAAU,EAAc,GAEtE,EAAiB,EACrB,EAAO,aACP,EAAG,EAAO,oBAAqB,CAAS,EACxC,EAAG,EAAO,kBAAmB,CAAO,EACpC,EAAG,EAAO,kBAAmB,CAAY,EACzC,GAAY,KACd,EAEM,EACJ,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CACE,UAAW,EACT,EAAO,mBACP,EAAG,EAAO,wBAAyB,CAAO,EAC1C,GAAY,WACd,EACA,MAAO,GAAY,qBAElB,EAAS,EAAC,EAAD,CAAY,CAAA,EAAI,EAAQ,CAC/B,CAAA,EACJ,CAAC,GACA,EAAC,MAAD,CACE,UAAW,EACT,EAAO,kBACP,EAAG,EAAO,2BAA4B,CAAW,EACjD,GAAY,UACd,EACA,MAAO,GAAY,oBAElB,EAAK,KACH,CAAA,CAEP,CAAA,CAAA,EAGJ,OACE,EAAC,EAAM,SAAP,CAAA,SAAA,CACG,EACC,EAAC,EAAD,CACE,UAAW,EACX,MAAO,GAAY,MACnB,YAAe,EAAc,CAAK,EAClC,eAAc,IAAU,EAAc,OAAS,IAAA,YAE9C,CACc,CAAA,EAEjB,EAAC,MAAD,CACE,UAAW,EACX,MAAO,GAAY,MACnB,eAAc,IAAU,EAAc,OAAS,IAAA,YAE9C,CACE,CAAA,EAGN,EAAQ,EAAM,OAAS,GACtB,EAAC,MAAD,CACE,UAAW,EACT,EAAO,iBACP,EAAG,EAAO,wBAAyB,CAAO,EAC1C,EAAG,EAAO,0BAA2B,CAAW,EAChD,GAAY,SACd,EACA,MAAO,GAAY,SACpB,CAAA,CAEW,CAAA,EA/BK,CA+BL,CAEpB,CAAC,CACE,CAAA,CAET"}
1
+ {"version":3,"file":"stepper.mjs","names":[],"sources":["../../../../package/common/stepper/stepper.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport styles from './stepper.module.pcss';\nimport InteractableDiv from '../interactableDiv';\nimport {\n StepperAlignment,\n StepperCollapse,\n StepperLabelPlacement,\n StepperStyleType,\n type StepperProps,\n type StepperStep,\n} from './stepper.types';\n\nconst STYLE_CLASS: Record<StepperStyleType, string> = {\n [StepperStyleType.Default]: styles.stepperDefault,\n [StepperStyleType.Outlined]: styles.stepperOutlined,\n [StepperStyleType.Dots]: styles.stepperDots,\n};\n\nconst PLACEMENT_CLASS: Record<StepperLabelPlacement, string> = {\n [StepperLabelPlacement.Top]: styles.stepperLabelTop,\n [StepperLabelPlacement.Bottom]: styles.stepperLabelBottom,\n [StepperLabelPlacement.Left]: styles.stepperLabelLeft,\n [StepperLabelPlacement.Right]: styles.stepperLabelRight,\n};\n\nfunction Checkmark() {\n return (\n <svg\n className={styles.stepperCheckmark}\n strokeLinejoin=\"round\"\n strokeLinecap=\"round\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"-0.2 -1.2 3.4 2\"\n height=\"20px\"\n width=\"20px\"\n >\n <path d=\"M 0 0 l 1 1 l 2 -2\" strokeWidth=\"0.4\" fill=\"none\" />\n </svg>\n );\n}\n\nfunction StepBody({\n open,\n className,\n style,\n children,\n}: {\n open: boolean;\n className?: string;\n style?: React.CSSProperties;\n children: React.ReactNode;\n}) {\n const innerRef = useRef<HTMLDivElement>(null);\n const [height, setHeight] = useState<number | null>(null);\n\n useEffect(() => {\n const el = innerRef.current;\n if (!el) return;\n const observer = new ResizeObserver(() => setHeight(el.offsetHeight));\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n return (\n <div\n className={cx(styles.stepperContent, className)}\n style={{ ...style, height: open ? (height ?? 'auto') : 0 }}\n aria-hidden={!open}\n >\n <div ref={innerRef} className={styles.stepperContentInner}>\n {children}\n </div>\n </div>\n );\n}\n\nfunction resolvePlacement(\n placement: StepperLabelPlacement | undefined,\n isVertical: boolean,\n): StepperLabelPlacement {\n const verticalValues = [StepperLabelPlacement.Left, StepperLabelPlacement.Right];\n if (isVertical) {\n return placement && verticalValues.includes(placement) ? placement : StepperLabelPlacement.Right;\n }\n return placement && !verticalValues.includes(placement) ? placement : StepperLabelPlacement.Bottom;\n}\n\nexport default function Stepper({\n steps = [],\n currentStep = 0,\n alignment = StepperAlignment.Horizontal,\n onStepClicked = null,\n nonLinear = false,\n hideLabels = false,\n styleType = StepperStyleType.Default,\n collapse = StepperCollapse.None,\n labelPlacement,\n className,\n style,\n classNames,\n styles: slotStyles,\n ...rest\n}: StepperProps) {\n const isVertical = alignment === StepperAlignment.Vertical;\n const placement = resolvePlacement(labelPlacement, isVertical);\n\n return (\n <div\n {...rest}\n className={cx(\n styles.stepper,\n STYLE_CLASS[styleType],\n PLACEMENT_CLASS[placement],\n { [styles.stepperVertical]: isVertical },\n classNames?.root,\n className,\n )}\n style={{ ...slotStyles?.root, ...style }}\n >\n {steps.map((step: StepperStep, index: number) => {\n const isDone = index < currentStep;\n const isActive = index <= currentStep;\n const hasError = !!step.error;\n // nonLinear: every enabled step except the current one is clickable.\n // linear: only completed steps are clickable.\n const isClickable =\n !!onStepClicked && !step.disabled && (nonLinear ? index !== currentStep : isDone);\n\n const entryClassName = cx(\n styles.stepperEntry,\n { [styles.stepperEntryActive]: isActive },\n { [styles.stepperEntryDone]: isDone && !hasError },\n { [styles.stepperEntryError]: hasError },\n { [styles.stepperEntryDisabled]: step.disabled },\n { [styles.stepperClickable]: isClickable },\n classNames?.entry,\n );\n\n const markerContent = step.icon ? (\n <FontAwesomeIcon\n icon={step.icon}\n className={classNames?.icon}\n style={slotStyles?.icon as React.CSSProperties & Record<`--fa-font-${string}`, string>}\n />\n ) : isDone && !hasError ? (\n <Checkmark />\n ) : (\n index + 1\n );\n\n const marker = (\n <div\n className={cx(\n styles.stepperEntryNumber,\n { [styles.stepperEntryNumberDone]: isDone && !hasError },\n classNames?.entryNumber,\n )}\n style={slotStyles?.entryNumber}\n >\n {markerContent}\n </div>\n );\n\n const optionalNode =\n step.optional === true ? 'Optional' : step.optional !== false ? step.optional : null;\n\n const labels = !hideLabels && (\n <div className={styles.stepperEntryLabels}>\n <div\n className={cx(styles.stepperEntryLabel, classNames?.entryLabel)}\n style={slotStyles?.entryLabel}\n >\n {step.label}\n </div>\n {step.description != null && (\n <div\n className={cx(styles.stepperDescription, classNames?.description)}\n style={slotStyles?.description}\n >\n {step.description}\n </div>\n )}\n {optionalNode != null && (\n <div\n className={cx(styles.stepperOptional, classNames?.optional)}\n style={slotStyles?.optional}\n >\n {optionalNode}\n </div>\n )}\n </div>\n );\n\n const header = isClickable ? (\n <InteractableDiv\n className={entryClassName}\n style={slotStyles?.entry}\n onClick={() => onStepClicked?.(index)}\n aria-current={index === currentStep ? 'step' : undefined}\n aria-invalid={hasError || undefined}\n >\n {marker}\n {labels}\n </InteractableDiv>\n ) : (\n <div\n className={entryClassName}\n style={slotStyles?.entry}\n aria-current={index === currentStep ? 'step' : undefined}\n aria-invalid={hasError || undefined}\n >\n {marker}\n {labels}\n </div>\n );\n\n const connector = index < steps.length - 1 && (\n <div\n className={cx(\n styles.stepperConnector,\n { [styles.stepperConnectorFilled]: isDone },\n classNames?.connector,\n )}\n style={slotStyles?.connector}\n />\n );\n\n if (isVertical) {\n const bodyOpen =\n collapse === StepperCollapse.None\n ? true\n : collapse === StepperCollapse.ActiveOnly\n ? index === currentStep\n : !isDone;\n return (\n <div key={index} className={styles.stepperStep}>\n {header}\n {connector}\n {step.content != null && !hideLabels && (\n <StepBody open={bodyOpen} className={classNames?.content} style={slotStyles?.content}>\n {step.content}\n </StepBody>\n )}\n </div>\n );\n }\n\n return (\n <React.Fragment key={index}>\n {header}\n {connector}\n </React.Fragment>\n );\n })}\n </div>\n );\n}\n"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- var e={stepper:`stepper_kiS2A`,"stepper-clickable":`stepper-clickable_Nm6fP`,stepperClickable:`stepper-clickable_Nm6fP`,"stepper-vertical":`stepper-vertical_2y9rg`,stepperVertical:`stepper-vertical_2y9rg`,"stepper-connector":`stepper-connector_J2FwZ`,stepperConnector:`stepper-connector_J2FwZ`,"stepper-connector-vertical":`stepper-connector-vertical_vwY38`,stepperConnectorVertical:`stepper-connector-vertical_vwY38`,"stepper-connector-filled":`stepper-connector-filled_W8UZS`,stepperConnectorFilled:`stepper-connector-filled_W8UZS`,"stepper-entry":`stepper-entry_KD4JJ`,stepperEntry:`stepper-entry_KD4JJ`,"stepper-entry-active":`stepper-entry-active_V1aRt`,stepperEntryActive:`stepper-entry-active_V1aRt`,"stepper-entry-done":`stepper-entry-done_M3wb5`,stepperEntryDone:`stepper-entry-done_M3wb5`,"stepper-entry-number":`stepper-entry-number_J168Q`,stepperEntryNumber:`stepper-entry-number_J168Q`,"stepper-entry-number-done":`stepper-entry-number-done_-m7sD`,stepperEntryNumberDone:`stepper-entry-number-done_-m7sD`,showCheckmark:`showCheckmark_Rd0oW`,"stepper-entry-label":`stepper-entry-label_b94eg`,stepperEntryLabel:`stepper-entry-label_b94eg`,"stepper-entry-label-vertical":`stepper-entry-label-vertical_Zm8i4`,stepperEntryLabelVertical:`stepper-entry-label-vertical_Zm8i4`};export{e as default};
1
+ var e={stepper:`stepper_kiS2A`,"stepper-vertical":`stepper-vertical_2y9rg`,stepperVertical:`stepper-vertical_2y9rg`,"stepper-label-bottom":`stepper-label-bottom_lDfhy`,stepperLabelBottom:`stepper-label-bottom_lDfhy`,"stepper-label-top":`stepper-label-top_sBw4-`,stepperLabelTop:`stepper-label-top_sBw4-`,"stepper-entry":`stepper-entry_KD4JJ`,stepperEntry:`stepper-entry_KD4JJ`,"stepper-clickable":`stepper-clickable_Nm6fP`,stepperClickable:`stepper-clickable_Nm6fP`,"stepper-entry-disabled":`stepper-entry-disabled_T9S5R`,stepperEntryDisabled:`stepper-entry-disabled_T9S5R`,"stepper-entry-number":`stepper-entry-number_J168Q`,stepperEntryNumber:`stepper-entry-number_J168Q`,"stepper-entry-active":`stepper-entry-active_V1aRt`,stepperEntryActive:`stepper-entry-active_V1aRt`,"stepper-entry-done":`stepper-entry-done_M3wb5`,stepperEntryDone:`stepper-entry-done_M3wb5`,"stepper-entry-error":`stepper-entry-error_xjGSr`,stepperEntryError:`stepper-entry-error_xjGSr`,"stepper-checkmark":`stepper-checkmark_iKCap`,stepperCheckmark:`stepper-checkmark_iKCap`,showCheckmark:`showCheckmark_Rd0oW`,"stepper-entry-labels":`stepper-entry-labels_nQT8D`,stepperEntryLabels:`stepper-entry-labels_nQT8D`,"stepper-entry-label":`stepper-entry-label_b94eg`,stepperEntryLabel:`stepper-entry-label_b94eg`,"stepper-description":`stepper-description_5Q0YP`,stepperDescription:`stepper-description_5Q0YP`,"stepper-optional":`stepper-optional_N8mkW`,stepperOptional:`stepper-optional_N8mkW`,"stepper-connector":`stepper-connector_J2FwZ`,stepperConnector:`stepper-connector_J2FwZ`,"stepper-connector-filled":`stepper-connector-filled_W8UZS`,stepperConnectorFilled:`stepper-connector-filled_W8UZS`,"stepper-step":`stepper-step_nUfsV`,stepperStep:`stepper-step_nUfsV`,"stepper-content":`stepper-content_yjlFH`,stepperContent:`stepper-content_yjlFH`,"stepper-label-left":`stepper-label-left_yGbjC`,stepperLabelLeft:`stepper-label-left_yGbjC`,"stepper-content-inner":`stepper-content-inner_0w2wP`,stepperContentInner:`stepper-content-inner_0w2wP`,"stepper-outlined":`stepper-outlined_V7UjP`,stepperOutlined:`stepper-outlined_V7UjP`,"stepper-dots":`stepper-dots_s4cgN`,stepperDots:`stepper-dots_s4cgN`};export{e as default};
2
2
  //# sourceMappingURL=stepper.module.mjs.map