@ahrowe/ui 0.19.1 → 0.19.2

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

@@ -1 +1 @@
-{"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  /* The visible swatch (below) is nested inside a FloatingMenu trigger, not this root — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --swatch-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n}\n\n.swatch {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--swatch-radius);\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 8px 8px;\n  background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n  background-color: white;\n\n  &:hover {\n    & .swatchHex {\n      opacity: 1;\n    }\n  }\n}\n\n.swatchFill {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n}\n\n.swatchHex {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-family: monospace;\n  background: rgba(0, 0, 0, 0.55);\n  color: white;\n  border-radius: inherit;\n  opacity: 0;\n  transition: opacity 0.15s;\n  user-select: none;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.panel {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 224px;\n}\n\n.gradientArea {\n  width: 200px;\n  height: 160px;\n  position: relative;\n  cursor: crosshair;\n  border-radius: 4px;\n  overflow: hidden;\n  touch-action: none;\n  background: linear-gradient(to right, white, hsl(calc(var(--hue) * 1deg), 100%, 50%));\n}\n\n.gradientOverlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 1;\n}\n\n.hueSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  background: linear-gradient(\n    to right,\n    hsl(0, 100%, 50%),\n    hsl(60, 100%, 50%),\n    hsl(120, 100%, 50%),\n    hsl(180, 100%, 50%),\n    hsl(240, 100%, 50%),\n    hsl(300, 100%, 50%),\n    hsl(360, 100%, 50%)\n  );\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.alphaSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)),\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;\n  background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;\n  background-color: white;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.hexRow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hexInput {\n  width: 100%;\n  padding: 5px 8px;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  font-size: 13px;\n  font-family: monospace;\n  box-sizing: border-box;\n  outline: none;\n\n  &:focus {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n}\n\n.eyeDropperButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &:hover {\n    border-color: var(--primary-color);\n    color: var(--primary-color);\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"colorPicker.module.mjs","names":[],"sources":["../../../../package/common/colorPicker/colorPicker.module.pcss"],"sourcesContent":[".colorPicker {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  /* The visible swatch (below) is nested inside a FloatingMenu trigger, not this root — see\n     input.module.pcss for why this variable exists: a wrapping ButtonGroup sets --group-radius-*\n     per corner on the position this occupies, and unlike border-radius itself, custom properties\n     inherit through any nesting depth, reaching descendants a plain ancestor selector can't. */\n  --swatch-radius: var(--group-radius-tl, var(--default-border-radius)) var(--group-radius-tr, var(--default-border-radius))\n    var(--group-radius-br, var(--default-border-radius)) var(--group-radius-bl, var(--default-border-radius));\n}\n\n.swatch {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--swatch-radius);\n  position: relative;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);\n  /* checkerboard so transparency is visible */\n  background-image:\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 8px 8px;\n  background-position: 0 0, 0 4px, 4px -4px, -4px 0;\n  background-color: white;\n\n  &:hover {\n    & .swatchHex {\n      opacity: 1;\n    }\n  }\n}\n\n.swatchFill {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n}\n\n.swatchHex {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-family: monospace;\n  background: rgba(0, 0, 0, 0.55);\n  color: white;\n  border-radius: inherit;\n  opacity: 0;\n  transition: opacity 0.15s;\n  user-select: none;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.panel {\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 224px;\n}\n\n.gradientArea {\n  width: 200px;\n  height: 160px;\n  position: relative;\n  cursor: crosshair;\n  border-radius: 4px;\n  overflow: hidden;\n  touch-action: none;\n  background: linear-gradient(to right, white, hsl(calc(var(--hue) * 1deg), 100%, 50%));\n}\n\n.gradientOverlay {\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(to bottom, transparent, black);\n}\n\n.cursor {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  border: 2px solid white;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 1;\n}\n\n.hueSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  background: linear-gradient(\n    to right,\n    hsl(0, 100%, 50%),\n    hsl(60, 100%, 50%),\n    hsl(120, 100%, 50%),\n    hsl(180, 100%, 50%),\n    hsl(240, 100%, 50%),\n    hsl(300, 100%, 50%),\n    hsl(360, 100%, 50%)\n  );\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.alphaSlider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 100%;\n  height: 10px;\n  border-radius: var(--default-border-radius);\n  outline: none;\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n  /* checkerboard base so transparency is visible under the gradient */\n  background-image:\n    linear-gradient(to right, transparent, var(--alpha-color)),\n    linear-gradient(45deg, #bbb 25%, transparent 25%),\n    linear-gradient(-45deg, #bbb 25%, transparent 25%),\n    linear-gradient(45deg, transparent 75%, #bbb 75%),\n    linear-gradient(-45deg, transparent 75%, #bbb 75%);\n  background-size: 100% 100%, 8px 8px, 8px 8px, 8px 8px, 8px 8px;\n  background-position: 0 0, 0 0, 0 4px, 4px -4px, -4px 0;\n  background-color: white;\n\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    appearance: none;\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  &::-moz-range-thumb {\n    width: 6px;\n    height: 20px;\n    border-radius: var(--default-border-radius);\n    background: var(--primary-color);\n    box-shadow: var(--card-shadow);\n    cursor: pointer;\n    -webkit-tap-highlight-color: transparent;\n  }\n}\n\n.hexRow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.hexInput {\n  width: 100%;\n  padding: 5px 8px;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  font-size: var(--default-font-size);\n  font-family: monospace;\n  box-sizing: border-box;\n  outline: none;\n\n  &:focus {\n    border-color: var(--focus-border-color, var(--primary-color));\n  }\n}\n\n.eyeDropperButton {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  border-radius: var(--default-border-radius);\n  border: 1px solid var(--border-color);\n  background: var(--input-background);\n  color: var(--text-color);\n  cursor: pointer;\n  -webkit-tap-highlight-color: transparent;\n\n  &:hover {\n    border-color: var(--primary-color);\n    color: var(--primary-color);\n  }\n}\n"],"mappings":""}

package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs

@@ -1,2 +1,2 @@
-import e from"../../../interactableDiv/index.mjs";import t from"./datePickerMonth.module.mjs";import{getLocale as n}from"../../../../services/localization.mjs";import{getDateFromDayMonthAndYear as r,getDayMonthAndYearOfDate as i,getDaysInMonth as a,getStartWeekDayOfMonth as o,getWeekDays as s}from"../../dateFunctions.mjs";import c from"classnames";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d(e,t,n,a,o){let{day:s,month:c,year:l}=a?i(a):{day:void 0,month:void 0,year:void 0},{day:u,month:d,year:f}=o?i(o):{day:void 0,month:void 0,year:void 0},p=r(e,t,n),m=e===s&&t===c&&n===l,h=e===u&&t===d&&n===f,g=!1;if(s!==void 0&&c!==void 0&&l!==void 0&&u!==void 0&&d!==void 0&&f!==void 0){let e=r(s,c,l),t=r(u,d,f);g=p.getTime()>=e.getTime()&&p.getTime()<=t.getTime()}return{isStartDate:m,isInRange:g,isEndDate:h}}function f(e,t,n,a,o){let s=r(e,t,n);if(a){let{day:e,month:t,year:n}=i(a);if(s<r(e,t,n))return!0}if(o){let{day:e,month:t,year:n}=i(o);if(s>r(e,t,n))return!0}return!1}function p(e,t,n){let{day:r,month:a,year:o}=i(new Date);return e===r&&t===a&&n===o}function m({className:i=``,month:m=new Date().getMonth()+1,year:h=new Date().getFullYear(),onSelect:g=()=>null,selectionStart:_,selectionEnd:v,minDate:y=null,maxDate:b=null}){let x=n(`-`),S=a(m,h),C=o(m,h);return l(`div`,{className:c(t.datePickerMonth,i),children:u(`div`,{className:c(t.datePickerMonthContent),children:[s(x).map((e,t)=>l(`div`,{children:e},t)),Array.from(Array(C-1).keys()).map(e=>l(`div`,{className:c(t.datePickerMonthItem,t.datePickerMonthPlaceholder)},e)),Array.from(Array(S).keys()).map(n=>{let i=n+1,a=d(i,m,h,_,v),o=f(i,m,h,y,b),s=p(i,m,h);return l(e,{onClick:()=>o?null:g(r(i,m,h)),className:c(t.datePickerMonthDay,t.datePickerMonthItem,{[t.datePickerMonthDaySelected]:a.isInRange,[t.datePickerMonthDaySelectedStart]:a.isStartDate,[t.datePickerMonthDaySelectedEnd]:a.isEndDate,[t.datePickerMonthDayDisabled]:o,[t.datePickerMonthDayToday]:s}),children:i},i)}),Array.from(Array(42-(C+S-1)).keys()).map(e=>l(`div`,{className:c(t.datePickerMonthItem,t.datePickerMonthPlaceholder),children:`\xA0`},e))]})})}export{m as default};
+import e from"../../../interactableDiv/index.mjs";import t from"./datePickerMonth.module.mjs";import{getLocale as n}from"../../../../services/localization.mjs";import{addDays as r,getDateFromDayMonthAndYear as i,getDayMonthAndYearOfDate as a,getDaysInMonth as o,getStartWeekDayOfMonth as s,getWeekDays as c}from"../../dateFunctions.mjs";import{useEffect as l,useRef as u,useState as d}from"react";import f from"classnames";import{jsx as p,jsxs as m}from"react/jsx-runtime";function h(e,t,n){if(n){let r=a(n);if(r.month===e&&r.year===t)return r.day}let r=a(new Date);return r.month===e&&r.year===t?r.day:1}function g(e,t,n,r,o){let{day:s,month:c,year:l}=r?a(r):{day:void 0,month:void 0,year:void 0},{day:u,month:d,year:f}=o?a(o):{day:void 0,month:void 0,year:void 0},p=i(e,t,n),m=e===s&&t===c&&n===l,h=e===u&&t===d&&n===f,g=!1;if(s!==void 0&&c!==void 0&&l!==void 0&&u!==void 0&&d!==void 0&&f!==void 0){let e=i(s,c,l),t=i(u,d,f);g=p.getTime()>=e.getTime()&&p.getTime()<=t.getTime()}return{isStartDate:m,isInRange:g,isEndDate:h}}function _(e,t,n,r,o){let s=i(e,t,n);if(r){let{day:e,month:t,year:n}=a(r);if(s<i(e,t,n))return!0}if(o){let{day:e,month:t,year:n}=a(o);if(s>i(e,t,n))return!0}return!1}function v(e,t,n){let{day:r,month:i,year:o}=a(new Date);return e===r&&t===i&&n===o}function y({className:a=``,month:y=new Date().getMonth()+1,year:b=new Date().getFullYear(),onSelect:x=()=>null,selectionStart:S,selectionEnd:C,minDate:w=null,maxDate:T=null,onNavigateMonth:E}){let D=n(`-`),O=o(y,b),k=s(y,b),A=u({}),[j,M]=d(()=>h(y,b,S)),N=u(null);l(()=>{if(N.current!=null){let e=N.current;N.current=null,M(e),A.current[e]?.focus()}else M(h(y,b,S))},[y,b]);function P(e,t){let n=0;if(e.key===`ArrowRight`)n=1;else if(e.key===`ArrowLeft`)n=-1;else if(e.key===`ArrowDown`)n=7;else if(e.key===`ArrowUp`)n=-7;else return;e.preventDefault();let i=r(t,y,b,n);i.month!==y||i.year!==b?(N.current=i.day,E?.(i.month>y||i.year>b?1:-1)):(M(i.day),A.current[i.day]?.focus())}return p(`div`,{className:f(t.datePickerMonth,a),children:m(`div`,{className:f(t.datePickerMonthContent),children:[c(D).map((e,t)=>p(`div`,{children:e},t)),Array.from(Array(k-1).keys()).map(e=>p(`div`,{className:f(t.datePickerMonthItem,t.datePickerMonthPlaceholder)},e)),Array.from(Array(O).keys()).map(n=>{let r=n+1,a=g(r,y,b,S,C),o=_(r,y,b,w,T),s=v(r,y,b);return p(e,{ref:e=>{A.current[r]=e},tabIndex:r===j?0:-1,onKeyDown:e=>P(e,r),onClick:()=>o?null:x(i(r,y,b)),className:f(t.datePickerMonthDay,t.datePickerMonthItem,{[t.datePickerMonthDaySelected]:a.isInRange,[t.datePickerMonthDaySelectedStart]:a.isStartDate,[t.datePickerMonthDaySelectedEnd]:a.isEndDate,[t.datePickerMonthDayDisabled]:o,[t.datePickerMonthDayToday]:s}),children:r},r)}),Array.from(Array(42-(k+O-1)).keys()).map(e=>p(`div`,{className:f(t.datePickerMonthItem,t.datePickerMonthPlaceholder),children:`\xA0`},e))]})})}export{y as default};
 //# sourceMappingURL=datePickerMonth.mjs.map

package/dist/esm/common/datePicker/components/datePickerMonth/datePickerMonth.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"datePickerMonth.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.tsx"],"sourcesContent":["import cx from 'classnames';\n\nimport styles from './datePickerMonth.module.pcss';\nimport { getLocale } from 'services/localization';\nimport InteractableDiv from 'components/common/interactableDiv';\nimport {\n  getDateFromDayMonthAndYear,\n  getDayMonthAndYearOfDate,\n  getDaysInMonth,\n  getStartWeekDayOfMonth,\n  getWeekDays,\n} from '../../dateFunctions';\n\ninterface DatePickerMonthProps {\n  className?: string;\n  month?: number;\n  year?: number;\n  onSelect?: (date: Date) => void;\n  selectionStart?: Date;\n  selectionEnd?: Date;\n  minDate?: Date | null;\n  maxDate?: Date | null;\n}\n\nfunction checkSelected(\n  day: number,\n  month: number,\n  year: number,\n  selectionStart: Date | undefined,\n  selectionEnd: Date | undefined,\n) {\n  const { day: startDay, month: startMonth, year: startYear } = selectionStart\n    ? getDayMonthAndYearOfDate(selectionStart)\n    : { day: undefined, month: undefined, year: undefined };\n  const { day: endDay, month: endMonth, year: endYear } = selectionEnd\n    ? getDayMonthAndYearOfDate(selectionEnd)\n    : { day: undefined, month: undefined, year: undefined };\n\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  const isStartDate = day === startDay && month === startMonth && year === startYear;\n  const isEndDate = day === endDay && month === endMonth && year === endYear;\n\n  let isInRange = false;\n  if (startDay !== undefined && startMonth !== undefined && startYear !== undefined &&\n      endDay !== undefined && endMonth !== undefined && endYear !== undefined) {\n    const selectionStartNoTime = getDateFromDayMonthAndYear(startDay, startMonth, startYear);\n    const selectionEndNoTime = getDateFromDayMonthAndYear(endDay, endMonth, endYear);\n    isInRange =\n      toCheckNoTime.getTime() >= selectionStartNoTime.getTime() &&\n      toCheckNoTime.getTime() <= selectionEndNoTime.getTime();\n  }\n\n  return { isStartDate, isInRange, isEndDate };\n}\n\nfunction checkDisabled(\n  day: number,\n  month: number,\n  year: number,\n  minDate: Date | null | undefined,\n  maxDate: Date | null | undefined,\n): boolean {\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  if (minDate) {\n    const { day: minDay, month: minMonth, year: minYear } = getDayMonthAndYearOfDate(minDate);\n    if (toCheckNoTime < getDateFromDayMonthAndYear(minDay, minMonth, minYear)) return true;\n  }\n\n  if (maxDate) {\n    const { day: maxDay, month: maxMonth, year: maxYear } = getDayMonthAndYearOfDate(maxDate);\n    if (toCheckNoTime > getDateFromDayMonthAndYear(maxDay, maxMonth, maxYear)) return true;\n  }\n\n  return false;\n}\n\nfunction checkIsToday(day: number, month: number, year: number): boolean {\n  const { day: currDay, month: currMonth, year: currYear } = getDayMonthAndYearOfDate(new Date());\n  return day === currDay && month === currMonth && year === currYear;\n}\n\nexport default function DatePickerMonth({\n  className = '',\n  month = new Date().getMonth() + 1,\n  year = new Date().getFullYear(),\n  onSelect = () => null,\n  selectionStart,\n  selectionEnd,\n  minDate = null,\n  maxDate = null,\n}: DatePickerMonthProps) {\n  const locale = getLocale('-');\n  const daysInMonth = getDaysInMonth(month, year);\n  const startWeekDayOfMonth = getStartWeekDayOfMonth(month, year);\n\n  return (\n    <div className={cx(styles.datePickerMonth, className)}>\n      <div className={cx(styles.datePickerMonthContent)}>\n        {getWeekDays(locale).map((weekDay, index) => <div key={index}>{weekDay}</div>)}\n        {Array.from(Array(startWeekDayOfMonth - 1).keys()).map((index) => (\n          <div\n            key={index}\n            className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)}\n          />\n        ))}\n        {Array.from(Array(daysInMonth).keys()).map((index) => {\n          const day = index + 1;\n          const selectedRes = checkSelected(day, month, year, selectionStart, selectionEnd);\n          const isDisabled = checkDisabled(day, month, year, minDate, maxDate);\n          const isToday = checkIsToday(day, month, year);\n\n          return (\n            <InteractableDiv\n              key={day}\n              onClick={() => isDisabled ? null : onSelect(getDateFromDayMonthAndYear(day, month, year))}\n              className={cx(styles.datePickerMonthDay, styles.datePickerMonthItem, {\n                [styles.datePickerMonthDaySelected]: selectedRes.isInRange,\n                [styles.datePickerMonthDaySelectedStart]: selectedRes.isStartDate,\n                [styles.datePickerMonthDaySelectedEnd]: selectedRes.isEndDate,\n                [styles.datePickerMonthDayDisabled]: isDisabled,\n                [styles.datePickerMonthDayToday]: isToday,\n              })}\n            >\n              {day}\n            </InteractableDiv>\n          );\n        })}\n        {Array.from(Array(42 - (startWeekDayOfMonth + daysInMonth - 1)).keys()).map((index) => (\n          <div\n            key={index}\n            className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)}\n          >\n            &nbsp;\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"datePickerMonth.mjs","names":[],"sources":["../../../../../../package/common/datePicker/components/datePickerMonth/datePickerMonth.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport cx from 'classnames';\n\nimport styles from './datePickerMonth.module.pcss';\nimport { getLocale } from 'services/localization';\nimport InteractableDiv from 'components/common/interactableDiv';\nimport {\n  addDays,\n  getDateFromDayMonthAndYear,\n  getDayMonthAndYearOfDate,\n  getDaysInMonth,\n  getStartWeekDayOfMonth,\n  getWeekDays,\n} from '../../dateFunctions';\n\ninterface DatePickerMonthProps {\n  className?: string;\n  month?: number;\n  year?: number;\n  onSelect?: (date: Date) => void;\n  selectionStart?: Date;\n  selectionEnd?: Date;\n  minDate?: Date | null;\n  maxDate?: Date | null;\n  /** Called to shift the displayed month by ±1 when arrow navigation runs past its edge. */\n  onNavigateMonth?: (delta: 1 | -1) => void;\n}\n\n// Which day gets the sole tab stop when this month first renders (or when the displayed\n// month changes via the header, not via arrow navigation): the selected day if it falls in\n// this month, else today if it falls in this month, else the 1st.\nfunction getDefaultFocusedDay(\n  month: number,\n  year: number,\n  selectionStart: Date | undefined,\n): number {\n  if (selectionStart) {\n    const sel = getDayMonthAndYearOfDate(selectionStart);\n    if (sel.month === month && sel.year === year) return sel.day;\n  }\n  const today = getDayMonthAndYearOfDate(new Date());\n  if (today.month === month && today.year === year) return today.day;\n  return 1;\n}\n\nfunction checkSelected(\n  day: number,\n  month: number,\n  year: number,\n  selectionStart: Date | undefined,\n  selectionEnd: Date | undefined,\n) {\n  const { day: startDay, month: startMonth, year: startYear } = selectionStart\n    ? getDayMonthAndYearOfDate(selectionStart)\n    : { day: undefined, month: undefined, year: undefined };\n  const { day: endDay, month: endMonth, year: endYear } = selectionEnd\n    ? getDayMonthAndYearOfDate(selectionEnd)\n    : { day: undefined, month: undefined, year: undefined };\n\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  const isStartDate = day === startDay && month === startMonth && year === startYear;\n  const isEndDate = day === endDay && month === endMonth && year === endYear;\n\n  let isInRange = false;\n  if (startDay !== undefined && startMonth !== undefined && startYear !== undefined &&\n      endDay !== undefined && endMonth !== undefined && endYear !== undefined) {\n    const selectionStartNoTime = getDateFromDayMonthAndYear(startDay, startMonth, startYear);\n    const selectionEndNoTime = getDateFromDayMonthAndYear(endDay, endMonth, endYear);\n    isInRange =\n      toCheckNoTime.getTime() >= selectionStartNoTime.getTime() &&\n      toCheckNoTime.getTime() <= selectionEndNoTime.getTime();\n  }\n\n  return { isStartDate, isInRange, isEndDate };\n}\n\nfunction checkDisabled(\n  day: number,\n  month: number,\n  year: number,\n  minDate: Date | null | undefined,\n  maxDate: Date | null | undefined,\n): boolean {\n  const toCheckNoTime = getDateFromDayMonthAndYear(day, month, year);\n\n  if (minDate) {\n    const { day: minDay, month: minMonth, year: minYear } = getDayMonthAndYearOfDate(minDate);\n    if (toCheckNoTime < getDateFromDayMonthAndYear(minDay, minMonth, minYear)) return true;\n  }\n\n  if (maxDate) {\n    const { day: maxDay, month: maxMonth, year: maxYear } = getDayMonthAndYearOfDate(maxDate);\n    if (toCheckNoTime > getDateFromDayMonthAndYear(maxDay, maxMonth, maxYear)) return true;\n  }\n\n  return false;\n}\n\nfunction checkIsToday(day: number, month: number, year: number): boolean {\n  const { day: currDay, month: currMonth, year: currYear } = getDayMonthAndYearOfDate(new Date());\n  return day === currDay && month === currMonth && year === currYear;\n}\n\nexport default function DatePickerMonth({\n  className = '',\n  month = new Date().getMonth() + 1,\n  year = new Date().getFullYear(),\n  onSelect = () => null,\n  selectionStart,\n  selectionEnd,\n  minDate = null,\n  maxDate = null,\n  onNavigateMonth,\n}: DatePickerMonthProps) {\n  const locale = getLocale('-');\n  const daysInMonth = getDaysInMonth(month, year);\n  const startWeekDayOfMonth = getStartWeekDayOfMonth(month, year);\n\n  const dayRefs = useRef<Record<number, HTMLDivElement | null>>({});\n  const [focusedDay, setFocusedDay] = useState(() => getDefaultFocusedDay(month, year, selectionStart));\n\n  // A day arrowed onto in an adjacent month, waiting for that month's grid to render so it\n  // can be focused. `onNavigateMonth` only shifts `month`/`year` — the actual DOM focus has\n  // to happen after this component re-renders with the new days, hence the effect below.\n  const pendingFocusDayRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (pendingFocusDayRef.current != null) {\n      const day = pendingFocusDayRef.current;\n      pendingFocusDayRef.current = null;\n      setFocusedDay(day);\n      dayRefs.current[day]?.focus();\n    } else {\n      // The displayed month changed some other way (header chevrons, month/year dropdowns) —\n      // re-pick a sensible tab stop, but don't steal focus from whatever the user just used.\n      setFocusedDay(getDefaultFocusedDay(month, year, selectionStart));\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [month, year]);\n\n  function handleDayKeyDown(event: React.KeyboardEvent<HTMLDivElement>, day: number) {\n    let delta = 0;\n    if (event.key === 'ArrowRight') delta = 1;\n    else if (event.key === 'ArrowLeft') delta = -1;\n    else if (event.key === 'ArrowDown') delta = 7;\n    else if (event.key === 'ArrowUp') delta = -7;\n    else return;\n\n    event.preventDefault();\n    const next = addDays(day, month, year, delta);\n\n    if (next.month !== month || next.year !== year) {\n      pendingFocusDayRef.current = next.day;\n      onNavigateMonth?.(next.month > month || next.year > year ? 1 : -1);\n    } else {\n      setFocusedDay(next.day);\n      dayRefs.current[next.day]?.focus();\n    }\n  }\n\n  return (\n    <div className={cx(styles.datePickerMonth, className)}>\n      <div className={cx(styles.datePickerMonthContent)}>\n        {getWeekDays(locale).map((weekDay, index) => <div key={index}>{weekDay}</div>)}\n        {Array.from(Array(startWeekDayOfMonth - 1).keys()).map((index) => (\n          <div\n            key={index}\n            className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)}\n          />\n        ))}\n        {Array.from(Array(daysInMonth).keys()).map((index) => {\n          const day = index + 1;\n          const selectedRes = checkSelected(day, month, year, selectionStart, selectionEnd);\n          const isDisabled = checkDisabled(day, month, year, minDate, maxDate);\n          const isToday = checkIsToday(day, month, year);\n\n          return (\n            <InteractableDiv\n              key={day}\n              ref={(el) => { dayRefs.current[day] = el; }}\n              tabIndex={day === focusedDay ? 0 : -1}\n              onKeyDown={(event) => handleDayKeyDown(event, day)}\n              onClick={() => isDisabled ? null : onSelect(getDateFromDayMonthAndYear(day, month, year))}\n              className={cx(styles.datePickerMonthDay, styles.datePickerMonthItem, {\n                [styles.datePickerMonthDaySelected]: selectedRes.isInRange,\n                [styles.datePickerMonthDaySelectedStart]: selectedRes.isStartDate,\n                [styles.datePickerMonthDaySelectedEnd]: selectedRes.isEndDate,\n                [styles.datePickerMonthDayDisabled]: isDisabled,\n                [styles.datePickerMonthDayToday]: isToday,\n              })}\n            >\n              {day}\n            </InteractableDiv>\n          );\n        })}\n        {Array.from(Array(42 - (startWeekDayOfMonth + daysInMonth - 1)).keys()).map((index) => (\n          <div\n            key={index}\n            className={cx(styles.datePickerMonthItem, styles.datePickerMonthPlaceholder)}\n          >\n            &nbsp;\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/esm/common/datePicker/dateFunctions.mjs

@@ -1,2 +1,2 @@
-import{getLocale as e}from"../../services/localization.mjs";function t(e,t){return new Date(t,e,0).getDate()}function n(e,t,n){return new Date(Date.UTC(n,t-1,e))}function r(e,t,n,r,i=!1){return new Date(Date.UTC(t,n-1,r)).toLocaleDateString(e,{month:i?`short`:`long`})}function i(t=e(`-`)){return Array.from(Array(12).keys()).map(e=>r(t,2023,e+1,1))}function a(e,t=!0){let n=new Date(Date.UTC(2023,3,10)),r=[];for(let i=0;i<7;i++)r.push(n.toLocaleDateString(e,{weekday:t?`short`:`long`})),n.setDate(n.getDate()+1);return r}function o(e,t){return new Date(Date.UTC(t,e-1,1)).getDay()||7}function s(e){return{day:e.getDate(),month:e.getMonth()+1,year:e.getFullYear()}}function c(e){let t=e.getDate(),n=e.getMonth()+1,r=e.getFullYear();return`${t<10?`0${t}`:t}.${n<10?`0${n}`:n}.${r}`}function l(e,t,n){let r=e,i=n;return r[0]!==`_`&&(r[0]>`3`?(r=`0${r[0]}${t.substring(2)}`,i={start:3,end:3}):r[0]===`3`&&r[1]!==`_`&&r[1]>`1`&&(r=`0${r[1]}${t.substring(2)}`,i={start:3,end:3})),r[3]!==`_`&&r[3]>`1`&&(r=`${r.substring(0,3)}0${r[3]}${t.substring(5)}`,i={start:6,end:6}),r[3]===`1`&&r[4]!==`_`&&r[4]>`2`&&(r=`${r.substring(0,3)}${r[3]}2${t.substring(5)}`),{value:r,selection:i}}export{l as correctDateMaskValue,n as getDateFromDayMonthAndYear,c as getDateString,s as getDayMonthAndYearOfDate,t as getDaysInMonth,r as getMonthName,i as getMonthNames,o as getStartWeekDayOfMonth,a as getWeekDays};
+import{getLocale as e}from"../../services/localization.mjs";function t(e,t){return new Date(t,e,0).getDate()}function n(e,t,n){return new Date(Date.UTC(n,t-1,e))}function r(e,t,n,r,i=!1){return new Date(Date.UTC(t,n-1,r)).toLocaleDateString(e,{month:i?`short`:`long`})}function i(t=e(`-`)){return Array.from(Array(12).keys()).map(e=>r(t,2023,e+1,1))}function a(e,t=!0){let n=new Date(Date.UTC(2023,3,10)),r=[];for(let i=0;i<7;i++)r.push(n.toLocaleDateString(e,{weekday:t?`short`:`long`})),n.setDate(n.getDate()+1);return r}function o(e,t){return new Date(Date.UTC(t,e-1,1)).getDay()||7}function s(e,n,r,i){let a=e+i,o=n,s=r;for(;a<1;)--o,o<1&&(o=12,--s),a+=t(o,s);for(;a>t(o,s);)a-=t(o,s),o+=1,o>12&&(o=1,s+=1);return{day:a,month:o,year:s}}function c(e){return{day:e.getDate(),month:e.getMonth()+1,year:e.getFullYear()}}function l(e){let t=e.getDate(),n=e.getMonth()+1,r=e.getFullYear();return`${t<10?`0${t}`:t}.${n<10?`0${n}`:n}.${r}`}function u(e,t,n){let r=e,i=n;return r[0]!==`_`&&(r[0]>`3`?(r=`0${r[0]}${t.substring(2)}`,i={start:3,end:3}):r[0]===`3`&&r[1]!==`_`&&r[1]>`1`&&(r=`0${r[1]}${t.substring(2)}`,i={start:3,end:3})),r[3]!==`_`&&r[3]>`1`&&(r=`${r.substring(0,3)}0${r[3]}${t.substring(5)}`,i={start:6,end:6}),r[3]===`1`&&r[4]!==`_`&&r[4]>`2`&&(r=`${r.substring(0,3)}${r[3]}2${t.substring(5)}`),{value:r,selection:i}}export{s as addDays,u as correctDateMaskValue,n as getDateFromDayMonthAndYear,l as getDateString,c as getDayMonthAndYearOfDate,t as getDaysInMonth,r as getMonthName,i as getMonthNames,o as getStartWeekDayOfMonth,a as getWeekDays};
 //# sourceMappingURL=dateFunctions.mjs.map

package/dist/esm/common/datePicker/dateFunctions.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"dateFunctions.mjs","names":[],"sources":["../../../../package/common/datePicker/dateFunctions.ts"],"sourcesContent":["import { getLocale } from 'services/localization';\n\nexport function getDaysInMonth(month: number, year: number): number {\n  return new Date(year, month, 0).getDate();\n}\n\nexport function getDateFromDayMonthAndYear(day: number, month: number, year: number): Date {\n  return new Date(Date.UTC(year, month - 1, day));\n}\n\nexport function getMonthName(locale: string, year: number, month: number, day: number, short = false): string {\n  const currDate = new Date(Date.UTC(year, month - 1, day));\n  return currDate.toLocaleDateString(locale, { month: short ? 'short' : 'long' });\n}\n\nexport function getMonthNames(locale = getLocale('-')): string[] {\n  return Array.from(Array(12).keys()).map((index) => getMonthName(locale, 2023, index + 1, 1));\n}\n\nexport function getWeekDays(locale: string, short = true): string[] {\n  const currDate = new Date(Date.UTC(2023, 3, 10)); // Random Monday - 10.4.2023\n  const weekDays: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    weekDays.push(currDate.toLocaleDateString(locale, { weekday: short ? 'short' : 'long' }));\n    currDate.setDate(currDate.getDate() + 1);\n  }\n  return weekDays;\n}\n\nexport function getStartWeekDayOfMonth(month: number, year: number): number {\n  const start = new Date(Date.UTC(year, month - 1, 1)).getDay();\n  return start || 7;\n}\n\nexport function getDayMonthAndYearOfDate(date: Date): { day: number; month: number; year: number } {\n  return {\n    day: date.getDate(),\n    month: date.getMonth() + 1,\n    year: date.getFullYear(),\n  };\n}\n\nexport function getDateString(date: Date): string {\n  const day = date.getDate();\n  const month = date.getMonth() + 1;\n  const year = date.getFullYear();\n\n  return `${day < 10 ? `0${day}` : day}.${month < 10 ? `0${month}` : month}.${year}`;\n}\n\nexport interface DateMaskSelection {\n  start: number;\n  end: number;\n}\n\nexport interface DateMaskState {\n  value: string;\n  selection: DateMaskSelection | null;\n}\n\n/**\n * Auto-corrects a partially typed `dd.mm.yyyy` mask value so a single out-of-range\n * digit doesn't force the user to backtrack:\n * - a day \"tens\" digit > 3 (e.g. typing `4`) becomes `04` and the caret jumps to the month\n * - a day of `3x` where x > 1 (e.g. `35`) becomes `0x`\n * - a month \"tens\" digit > 1 (e.g. `2`) becomes `02` and the caret jumps to the year\n * - a month `1x` where x > 2 (e.g. `13`) is clamped to `12`\n *\n * `previousValue` supplies the digits to retain for the part of the field that isn't\n * being rewritten. The returned `selection` is the adjusted caret position, or the\n * passed-in `selection` when no correction applies.\n */\nexport function correctDateMaskValue(\n  nextValue: string,\n  previousValue: string,\n  selection: DateMaskSelection | null,\n): DateMaskState {\n  let value = nextValue;\n  let nextSelection = selection;\n\n  if (value[0] !== '_') {\n    if (value[0] > '3') {\n      value = `0${value[0]}${previousValue.substring(2)}`;\n      nextSelection = { start: 3, end: 3 };\n    } else if (value[0] === '3') {\n      if (value[1] !== '_' && value[1] > '1') {\n        value = `0${value[1]}${previousValue.substring(2)}`;\n        nextSelection = { start: 3, end: 3 };\n      }\n    }\n  }\n  if (value[3] !== '_' && value[3] > '1') {\n    value = `${value.substring(0, 3)}0${value[3]}${previousValue.substring(5)}`;\n    nextSelection = { start: 6, end: 6 };\n  }\n  if (value[3] === '1' && value[4] !== '_' && value[4] > '2') {\n    value = `${value.substring(0, 3)}${value[3]}2${previousValue.substring(5)}`;\n  }\n\n  return { value, selection: nextSelection };\n}\n"],"mappings":"4DAEA,SAAgB,EAAe,EAAe,EAAsB,CAClE,OAAO,IAAI,KAAK,EAAM,EAAO,CAAC,EAAE,QAAQ,CAC1C,CAEA,SAAgB,EAA2B,EAAa,EAAe,EAAoB,CACzF,OAAO,IAAI,KAAK,KAAK,IAAI,EAAM,EAAQ,EAAG,CAAG,CAAC,CAChD,CAEA,SAAgB,EAAa,EAAgB,EAAc,EAAe,EAAa,EAAQ,GAAe,CAE5G,OAAO,IADc,KAAK,KAAK,IAAI,EAAM,EAAQ,EAAG,CAAG,CAChD,EAAS,mBAAmB,EAAQ,CAAE,MAAO,EAAQ,QAAU,MAAO,CAAC,CAChF,CAEA,SAAgB,EAAc,EAAS,EAAU,GAAG,EAAa,CAC/D,OAAO,MAAM,KAAK,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,IAAK,GAAU,EAAa,EAAQ,KAAM,EAAQ,EAAG,CAAC,CAAC,CAC7F,CAEA,SAAgB,EAAY,EAAgB,EAAQ,GAAgB,CAClE,IAAM,EAAW,IAAI,KAAK,KAAK,IAAI,KAAM,EAAG,EAAE,CAAC,EACzC,EAAqB,CAAC,EAC5B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAG,IACrB,EAAS,KAAK,EAAS,mBAAmB,EAAQ,CAAE,QAAS,EAAQ,QAAU,MAAO,CAAC,CAAC,EACxF,EAAS,QAAQ,EAAS,QAAQ,EAAI,CAAC,EAEzC,OAAO,CACT,CAEA,SAAgB,EAAuB,EAAe,EAAsB,CAE1E,OADc,IAAI,KAAK,KAAK,IAAI,EAAM,EAAQ,EAAG,CAAC,CAAC,EAAE,OAC9C,GAAS,CAClB,CAEA,SAAgB,EAAyB,EAA0D,CACjG,MAAO,CACL,IAAK,EAAK,QAAQ,EAClB,MAAO,EAAK,SAAS,EAAI,EACzB,KAAM,EAAK,YAAY,CACzB,CACF,CAEA,SAAgB,EAAc,EAAoB,CAChD,IAAM,EAAM,EAAK,QAAQ,EACnB,EAAQ,EAAK,SAAS,EAAI,EAC1B,EAAO,EAAK,YAAY,EAE9B,MAAO,GAAG,EAAM,GAAK,IAAI,IAAQ,EAAI,GAAG,EAAQ,GAAK,IAAI,IAAU,EAAM,GAAG,GAC9E,CAwBA,SAAgB,EACd,EACA,EACA,EACe,CACf,IAAI,EAAQ,EACR,EAAgB,EAqBpB,OAnBI,EAAM,KAAO,MACX,EAAM,GAAK,KACb,EAAQ,IAAI,EAAM,KAAK,EAAc,UAAU,CAAC,IAChD,EAAgB,CAAE,MAAO,EAAG,IAAK,CAAE,GAC1B,EAAM,KAAO,KAClB,EAAM,KAAO,KAAO,EAAM,GAAK,MACjC,EAAQ,IAAI,EAAM,KAAK,EAAc,UAAU,CAAC,IAChD,EAAgB,CAAE,MAAO,EAAG,IAAK,CAAE,IAIrC,EAAM,KAAO,KAAO,EAAM,GAAK,MACjC,EAAQ,GAAG,EAAM,UAAU,EAAG,CAAC,EAAE,GAAG,EAAM,KAAK,EAAc,UAAU,CAAC,IACxE,EAAgB,CAAE,MAAO,EAAG,IAAK,CAAE,GAEjC,EAAM,KAAO,KAAO,EAAM,KAAO,KAAO,EAAM,GAAK,MACrD,EAAQ,GAAG,EAAM,UAAU,EAAG,CAAC,IAAI,EAAM,GAAG,GAAG,EAAc,UAAU,CAAC,KAGnE,CAAE,QAAO,UAAW,CAAc,CAC3C"}
+{"version":3,"file":"dateFunctions.mjs","names":[],"sources":["../../../../package/common/datePicker/dateFunctions.ts"],"sourcesContent":["import { getLocale } from 'services/localization';\n\nexport function getDaysInMonth(month: number, year: number): number {\n  return new Date(year, month, 0).getDate();\n}\n\nexport function getDateFromDayMonthAndYear(day: number, month: number, year: number): Date {\n  return new Date(Date.UTC(year, month - 1, day));\n}\n\nexport function getMonthName(locale: string, year: number, month: number, day: number, short = false): string {\n  const currDate = new Date(Date.UTC(year, month - 1, day));\n  return currDate.toLocaleDateString(locale, { month: short ? 'short' : 'long' });\n}\n\nexport function getMonthNames(locale = getLocale('-')): string[] {\n  return Array.from(Array(12).keys()).map((index) => getMonthName(locale, 2023, index + 1, 1));\n}\n\nexport function getWeekDays(locale: string, short = true): string[] {\n  const currDate = new Date(Date.UTC(2023, 3, 10)); // Random Monday - 10.4.2023\n  const weekDays: string[] = [];\n  for (let i = 0; i < 7; i++) {\n    weekDays.push(currDate.toLocaleDateString(locale, { weekday: short ? 'short' : 'long' }));\n    currDate.setDate(currDate.getDate() + 1);\n  }\n  return weekDays;\n}\n\nexport function getStartWeekDayOfMonth(month: number, year: number): number {\n  const start = new Date(Date.UTC(year, month - 1, 1)).getDay();\n  return start || 7;\n}\n\n/**\n * Adds `delta` days to a day/month/year triple, rolling over into adjacent months/years as\n * needed. Pure integer arithmetic over `getDaysInMonth` rather than a `Date` object, so it\n * can't drift a day from local-vs-UTC ambiguity the way mutating a UTC-constructed `Date`\n * with its local `setDate` would.\n */\nexport function addDays(day: number, month: number, year: number, delta: number): { day: number; month: number; year: number } {\n  let d = day + delta;\n  let m = month;\n  let y = year;\n  while (d < 1) {\n    m -= 1;\n    if (m < 1) { m = 12; y -= 1; }\n    d += getDaysInMonth(m, y);\n  }\n  while (d > getDaysInMonth(m, y)) {\n    d -= getDaysInMonth(m, y);\n    m += 1;\n    if (m > 12) { m = 1; y += 1; }\n  }\n  return { day: d, month: m, year: y };\n}\n\nexport function getDayMonthAndYearOfDate(date: Date): { day: number; month: number; year: number } {\n  return {\n    day: date.getDate(),\n    month: date.getMonth() + 1,\n    year: date.getFullYear(),\n  };\n}\n\nexport function getDateString(date: Date): string {\n  const day = date.getDate();\n  const month = date.getMonth() + 1;\n  const year = date.getFullYear();\n\n  return `${day < 10 ? `0${day}` : day}.${month < 10 ? `0${month}` : month}.${year}`;\n}\n\nexport interface DateMaskSelection {\n  start: number;\n  end: number;\n}\n\nexport interface DateMaskState {\n  value: string;\n  selection: DateMaskSelection | null;\n}\n\n/**\n * Auto-corrects a partially typed `dd.mm.yyyy` mask value so a single out-of-range\n * digit doesn't force the user to backtrack:\n * - a day \"tens\" digit > 3 (e.g. typing `4`) becomes `04` and the caret jumps to the month\n * - a day of `3x` where x > 1 (e.g. `35`) becomes `0x`\n * - a month \"tens\" digit > 1 (e.g. `2`) becomes `02` and the caret jumps to the year\n * - a month `1x` where x > 2 (e.g. `13`) is clamped to `12`\n *\n * `previousValue` supplies the digits to retain for the part of the field that isn't\n * being rewritten. The returned `selection` is the adjusted caret position, or the\n * passed-in `selection` when no correction applies.\n */\nexport function correctDateMaskValue(\n  nextValue: string,\n  previousValue: string,\n  selection: DateMaskSelection | null,\n): DateMaskState {\n  let value = nextValue;\n  let nextSelection = selection;\n\n  if (value[0] !== '_') {\n    if (value[0] > '3') {\n      value = `0${value[0]}${previousValue.substring(2)}`;\n      nextSelection = { start: 3, end: 3 };\n    } else if (value[0] === '3') {\n      if (value[1] !== '_' && value[1] > '1') {\n        value = `0${value[1]}${previousValue.substring(2)}`;\n        nextSelection = { start: 3, end: 3 };\n      }\n    }\n  }\n  if (value[3] !== '_' && value[3] > '1') {\n    value = `${value.substring(0, 3)}0${value[3]}${previousValue.substring(5)}`;\n    nextSelection = { start: 6, end: 6 };\n  }\n  if (value[3] === '1' && value[4] !== '_' && value[4] > '2') {\n    value = `${value.substring(0, 3)}${value[3]}2${previousValue.substring(5)}`;\n  }\n\n  return { value, selection: nextSelection };\n}\n"],"mappings":"4DAEA,SAAgB,EAAe,EAAe,EAAsB,CAClE,OAAO,IAAI,KAAK,EAAM,EAAO,CAAC,EAAE,QAAQ,CAC1C,CAEA,SAAgB,EAA2B,EAAa,EAAe,EAAoB,CACzF,OAAO,IAAI,KAAK,KAAK,IAAI,EAAM,EAAQ,EAAG,CAAG,CAAC,CAChD,CAEA,SAAgB,EAAa,EAAgB,EAAc,EAAe,EAAa,EAAQ,GAAe,CAE5G,OAAO,IADc,KAAK,KAAK,IAAI,EAAM,EAAQ,EAAG,CAAG,CAChD,EAAS,mBAAmB,EAAQ,CAAE,MAAO,EAAQ,QAAU,MAAO,CAAC,CAChF,CAEA,SAAgB,EAAc,EAAS,EAAU,GAAG,EAAa,CAC/D,OAAO,MAAM,KAAK,MAAM,EAAE,EAAE,KAAK,CAAC,EAAE,IAAK,GAAU,EAAa,EAAQ,KAAM,EAAQ,EAAG,CAAC,CAAC,CAC7F,CAEA,SAAgB,EAAY,EAAgB,EAAQ,GAAgB,CAClE,IAAM,EAAW,IAAI,KAAK,KAAK,IAAI,KAAM,EAAG,EAAE,CAAC,EACzC,EAAqB,CAAC,EAC5B,IAAK,IAAI,EAAI,EAAG,EAAI,EAAG,IACrB,EAAS,KAAK,EAAS,mBAAmB,EAAQ,CAAE,QAAS,EAAQ,QAAU,MAAO,CAAC,CAAC,EACxF,EAAS,QAAQ,EAAS,QAAQ,EAAI,CAAC,EAEzC,OAAO,CACT,CAEA,SAAgB,EAAuB,EAAe,EAAsB,CAE1E,OADc,IAAI,KAAK,KAAK,IAAI,EAAM,EAAQ,EAAG,CAAC,CAAC,EAAE,OAC9C,GAAS,CAClB,CAQA,SAAgB,EAAQ,EAAa,EAAe,EAAc,EAA6D,CAC7H,IAAI,EAAI,EAAM,EACV,EAAI,EACJ,EAAI,EACR,KAAO,EAAI,GACT,IACI,EAAI,IAAK,EAAI,GAAI,KACrB,GAAK,EAAe,EAAG,CAAC,EAE1B,KAAO,EAAI,EAAe,EAAG,CAAC,GAC5B,GAAK,EAAe,EAAG,CAAC,EACxB,GAAK,EACD,EAAI,KAAM,EAAI,EAAG,GAAK,GAE5B,MAAO,CAAE,IAAK,EAAG,MAAO,EAAG,KAAM,CAAE,CACrC,CAEA,SAAgB,EAAyB,EAA0D,CACjG,MAAO,CACL,IAAK,EAAK,QAAQ,EAClB,MAAO,EAAK,SAAS,EAAI,EACzB,KAAM,EAAK,YAAY,CACzB,CACF,CAEA,SAAgB,EAAc,EAAoB,CAChD,IAAM,EAAM,EAAK,QAAQ,EACnB,EAAQ,EAAK,SAAS,EAAI,EAC1B,EAAO,EAAK,YAAY,EAE9B,MAAO,GAAG,EAAM,GAAK,IAAI,IAAQ,EAAI,GAAG,EAAQ,GAAK,IAAI,IAAU,EAAM,GAAG,GAC9E,CAwBA,SAAgB,EACd,EACA,EACA,EACe,CACf,IAAI,EAAQ,EACR,EAAgB,EAqBpB,OAnBI,EAAM,KAAO,MACX,EAAM,GAAK,KACb,EAAQ,IAAI,EAAM,KAAK,EAAc,UAAU,CAAC,IAChD,EAAgB,CAAE,MAAO,EAAG,IAAK,CAAE,GAC1B,EAAM,KAAO,KAClB,EAAM,KAAO,KAAO,EAAM,GAAK,MACjC,EAAQ,IAAI,EAAM,KAAK,EAAc,UAAU,CAAC,IAChD,EAAgB,CAAE,MAAO,EAAG,IAAK,CAAE,IAIrC,EAAM,KAAO,KAAO,EAAM,GAAK,MACjC,EAAQ,GAAG,EAAM,UAAU,EAAG,CAAC,EAAE,GAAG,EAAM,KAAK,EAAc,UAAU,CAAC,IACxE,EAAgB,CAAE,MAAO,EAAG,IAAK,CAAE,GAEjC,EAAM,KAAO,KAAO,EAAM,KAAO,KAAO,EAAM,GAAK,MACrD,EAAQ,GAAG,EAAM,UAAU,EAAG,CAAC,IAAI,EAAM,GAAG,GAAG,EAAc,UAAU,CAAC,KAGnE,CAAE,QAAO,UAAW,CAAc,CAC3C"}

package/dist/esm/common/datePicker/datePicker.mjs

@@ -1,2 +1,2 @@
-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};
+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 c}from"../../services/localization.mjs";import{correctDateMaskValue as ee,getDateFromDayMonthAndYear as te,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 ce from"@mona-health/react-input-mask";function v(v){let{className:le=``,selected:y,onSelect:b=()=>null,formValidator:x=null,noInput:S=!1,noHeader:C=!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`,v),N=()=>x?x.value:y,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(y),G=p(x);if(_e!==y){ve(y);let e=y??new Date;I(e.getMonth()+1),R(e.getFullYear()),H(y?l(y):``)}f(()=>{if(G.current=x,!x)return;let e=()=>{let e=x.value;e?(I(e.getMonth()+1),R(e.getFullYear()),H(l(e))):H(``),ge(e=>e+1)};return x.registerOnUpdateListener(e),()=>x.removeOnUpdateListener(e)},[x]);let ye=()=>x?x.touched&&x.hasError():!O||!!k,be=()=>!!(A||x?.validators.find(e=>e.validatorId===`required`)),K=e=>{H(e?l(e):``),x&&x.set(e),ue(e)},q=e=>{K(e),b(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=te(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=ee(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:[C?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(c(`-`),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,onNavigateMonth:J}),fe&&g(t,{onClick:()=>q(null),children:`Clear`}),de]}),$=S?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(ce,{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,le),children:[(w||T)&&$,Ce,g(a,{variant:`error`,message:x?x.getCurrentErrorMessage():k||``,isVisible:Z&&(me||he)})]})}export{v as default};
 //# sourceMappingURL=datePicker.mjs.map

package/dist/esm/common/datePicker/datePicker.mjs.map

@@ -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      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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"}
+{"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        onNavigateMonth={changeMonth}\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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"}

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

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

package/dist/esm/common/floatingMenu/useFloatingPosition.mjs

@@ -1,2 +1,2 @@
-import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{useLayoutEffect as n}from"react";var r=8;function i({isOpen:i,triggerRef:a,anchorRef:o,panelRef:s,flipClassName:c,placement:l=`bottom`}){n(()=>{if(!i)return;let n,u;function d(){let i=a.current,f=o.current;if(!i||!f){n=requestAnimationFrame(d);return}let p=e(i);function m(){let e=i.getBoundingClientRect(),n=s.current?.offsetHeight??0,a=window.innerHeight-e.bottom,o=e.top,u=l===`top`?o:a,d=u<n&&(l===`top`?a:o)>u,m=l===`top`?!d:d;f.classList.toggle(c,d),f.style.top=`${m?e.top-f.offsetHeight:e.bottom}px`,f.style.left=`${e.left}px`;let h=s.current;if(h){let t=h===f?0:h.offsetLeft,n=e.left+t,i=n+h.offsetWidth-(window.innerWidth-r),a=r-n;i>0?f.style.left=`${e.left-i}px`:a>0&&(f.style.left=`${e.left+a}px`)}f.style.visibility=t(e,p)?`hidden`:``;let v=s.current;v&&!g.has(v)&&_()}let h=new ResizeObserver(()=>m()),g=new Set;function _(){[f,s.current].forEach(e=>{!e||g.has(e)||(g.add(e),h.observe(e))})}m();let v=[window,...p];v.forEach(e=>e.addEventListener(`scroll`,m,{passive:!0})),window.addEventListener(`resize`,m),u=()=>{v.forEach(e=>e.removeEventListener(`scroll`,m)),window.removeEventListener(`resize`,m),h.disconnect()}}return d(),()=>{n!==void 0&&cancelAnimationFrame(n),u?.()}},[i,a,o,s,c,l])}export{i as useFloatingPosition};
+import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as n}from"../utils/visualViewport.mjs";import{useLayoutEffect as r}from"react";var i=8;function a({isOpen:a,triggerRef:o,anchorRef:s,panelRef:c,flipClassName:l,placement:u=`bottom`}){r(()=>{if(!a)return;let r,d;function f(){let a=o.current,p=s.current;if(!a||!p){r=requestAnimationFrame(f);return}let m=e(a);function h(){let e=a.getBoundingClientRect(),r=c.current?.offsetHeight??0,o=n(),s=o.top+o.height-e.bottom,d=e.top-o.top,f=u===`top`?d:s,h=f<r&&(u===`top`?s:d)>f,g=u===`top`?!h:h;p.classList.toggle(l,h),p.style.top=`${g?e.top-p.offsetHeight:e.bottom}px`,p.style.left=`${e.left}px`;let y=c.current;if(y){let t=y===p?0:y.offsetLeft,n=e.left+t,r=n+y.offsetWidth-(o.left+o.width-i),a=o.left+i-n;r>0?p.style.left=`${e.left-r}px`:a>0&&(p.style.left=`${e.left+a}px`)}p.style.visibility=t(e,m)?`hidden`:``;let b=c.current;b&&!_.has(b)&&v()}let g=new ResizeObserver(()=>h()),_=new Set;function v(){[p,c.current].forEach(e=>{!e||_.has(e)||(_.add(e),g.observe(e))})}h();let y=[window,...m];y.forEach(e=>e.addEventListener(`scroll`,h,{passive:!0})),window.addEventListener(`resize`,h),window.visualViewport?.addEventListener(`resize`,h),window.visualViewport?.addEventListener(`scroll`,h),d=()=>{y.forEach(e=>e.removeEventListener(`scroll`,h)),window.removeEventListener(`resize`,h),window.visualViewport?.removeEventListener(`resize`,h),window.visualViewport?.removeEventListener(`scroll`,h),g.disconnect()}}return f(),()=>{r!==void 0&&cancelAnimationFrame(r),d?.()}},[a,o,s,c,l,u])}export{a as useFloatingPosition};
 //# sourceMappingURL=useFloatingPosition.mjs.map

package/dist/esm/common/floatingMenu/useFloatingPosition.mjs.map

@@ -1 +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/** Minimum gap kept between the panel and the viewport edge when horizontally clamped. */\nconst EDGE_MARGIN = 8;\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 * It also shifts the popup horizontally to stay within the viewport: `align`/RTL-style CSS\n * only positions the panel relative to the anchor's own box and has no awareness of where\n * that box actually sits on screen, so a trigger near a screen edge would otherwise let the\n * panel overflow it with no correction.\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\n        // Horizontal clamp: shift the anchor so the panel stays within the viewport, since\n        // `align` CSS only positions it relative to the anchor's own box. Use offsetWidth/\n        // offsetLeft (untransformed layout geometry), not getBoundingClientRect — both this\n        // anchor and Dropdown's animate in via a CSS `transform: scale(...)`, which\n        // getBoundingClientRect reflects but the box-model offsets don't, so measuring via\n        // the transformed rect would under- or over-correct while that entrance animation runs.\n        const panelForClamp = panelRef.current;\n        if (panelForClamp) {\n          const relativeLeft = panelForClamp === anchor ? 0 : panelForClamp.offsetLeft;\n          const panelLeft = rect.left + relativeLeft;\n          const panelRight = panelLeft + panelForClamp.offsetWidth;\n          const overflowRight = panelRight - (window.innerWidth - EDGE_MARGIN);\n          const overflowLeft = EDGE_MARGIN - panelLeft;\n          if (overflowRight > 0) {\n            anchor!.style.left = `${rect.left - overflowRight}px`;\n          } else if (overflowLeft > 0) {\n            anchor!.style.left = `${rect.left + overflowLeft}px`;\n          }\n        }\n\n        anchor!.style.visibility = isHiddenByAnyAncestor(rect, ancestors) ? 'hidden' : '';\n        // The panel can mount a commit later than the anchor; once it's observed this\n        // is a single Set lookup, so it costs nothing on the scroll path.\n        const panel = panelRef.current;\n        if (panel && !observed.has(panel)) observeSizeTargets();\n      }\n\n      // The panel's own height feeds both the flip decision and, when rendering above,\n      // the top offset — so a popup whose content changes size while open (a filtered\n      // list shrinking, an async list loading in) has to be re-measured, or it keeps a\n      // top computed for its old height and ends up detached from the trigger.\n      const resizeObserver = new ResizeObserver(() => updatePos());\n      const observed = new Set<Element>();\n      function observeSizeTargets() {\n        // Both, since they're the same element for a panel-as-anchor consumer (Dropdown)\n        // but not for a zero-height wrapper whose content sits inside it (FloatingMenu).\n        // Called from updatePos too: the panel can mount a commit later than the anchor.\n        [anchor, panelRef.current].forEach((el) => {\n          if (!el || observed.has(el)) return;\n          observed.add(el);\n          resizeObserver.observe(el);\n        });\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        resizeObserver.disconnect();\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":"yIAkBA,IAAM,EAAc,EAgBpB,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,IAQlC,IAAM,EAAgB,EAAS,QAC/B,GAAI,EAAe,CACjB,IAAM,EAAe,IAAkB,EAAS,EAAI,EAAc,WAC5D,EAAY,EAAK,KAAO,EAExB,EADa,EAAY,EAAc,aACT,OAAO,WAAa,GAClD,EAAe,EAAc,EAC/B,EAAgB,EAClB,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAO,EAAc,IACzC,EAAe,IACxB,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAO,EAAa,IAErD,CAEA,EAAQ,MAAM,WAAa,EAAsB,EAAM,CAAS,EAAI,SAAW,GAG/E,IAAM,EAAQ,EAAS,QACnB,GAAS,CAAC,EAAS,IAAI,CAAK,GAAG,EAAmB,CACxD,CAMA,IAAM,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IACrB,SAAS,GAAqB,CAI5B,CAAC,EAAQ,EAAS,OAAO,EAAE,QAAS,GAAO,CACrC,CAAC,GAAM,EAAS,IAAI,CAAE,IAC1B,EAAS,IAAI,CAAE,EACf,EAAe,QAAQ,CAAE,EAC3B,CAAC,CACH,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,EAC9C,EAAe,WAAW,CAC5B,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"}
+{"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';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\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/** Minimum gap kept between the panel and the viewport edge when horizontally clamped. */\nconst EDGE_MARGIN = 8;\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 * It also shifts the popup horizontally to stay within the viewport: `align`/RTL-style CSS\n * only positions the panel relative to the anchor's own box and has no awareness of where\n * that box actually sits on screen, so a trigger near a screen edge would otherwise let the\n * panel overflow it with no correction.\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        // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n        // open, so flip/clamp react to what's actually on screen instead of the keyboard hiding\n        // a panel that \"fit\" against the unshrunk layout viewport.\n        const vv = getVisualViewportRect();\n        const spaceBelow = vv.top + vv.height - rect.bottom;\n        const spaceAbove = rect.top - vv.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\n        // Horizontal clamp: shift the anchor so the panel stays within the viewport, since\n        // `align` CSS only positions it relative to the anchor's own box. Use offsetWidth/\n        // offsetLeft (untransformed layout geometry), not getBoundingClientRect — both this\n        // anchor and Dropdown's animate in via a CSS `transform: scale(...)`, which\n        // getBoundingClientRect reflects but the box-model offsets don't, so measuring via\n        // the transformed rect would under- or over-correct while that entrance animation runs.\n        const panelForClamp = panelRef.current;\n        if (panelForClamp) {\n          const relativeLeft = panelForClamp === anchor ? 0 : panelForClamp.offsetLeft;\n          const panelLeft = rect.left + relativeLeft;\n          const panelRight = panelLeft + panelForClamp.offsetWidth;\n          const overflowRight = panelRight - (vv.left + vv.width - EDGE_MARGIN);\n          const overflowLeft = vv.left + EDGE_MARGIN - panelLeft;\n          if (overflowRight > 0) {\n            anchor!.style.left = `${rect.left - overflowRight}px`;\n          } else if (overflowLeft > 0) {\n            anchor!.style.left = `${rect.left + overflowLeft}px`;\n          }\n        }\n\n        anchor!.style.visibility = isHiddenByAnyAncestor(rect, ancestors) ? 'hidden' : '';\n        // The panel can mount a commit later than the anchor; once it's observed this\n        // is a single Set lookup, so it costs nothing on the scroll path.\n        const panel = panelRef.current;\n        if (panel && !observed.has(panel)) observeSizeTargets();\n      }\n\n      // The panel's own height feeds both the flip decision and, when rendering above,\n      // the top offset — so a popup whose content changes size while open (a filtered\n      // list shrinking, an async list loading in) has to be re-measured, or it keeps a\n      // top computed for its old height and ends up detached from the trigger.\n      const resizeObserver = new ResizeObserver(() => updatePos());\n      const observed = new Set<Element>();\n      function observeSizeTargets() {\n        // Both, since they're the same element for a panel-as-anchor consumer (Dropdown)\n        // but not for a zero-height wrapper whose content sits inside it (FloatingMenu).\n        // Called from updatePos too: the panel can mount a commit later than the anchor.\n        [anchor, panelRef.current].forEach((el) => {\n          if (!el || observed.has(el)) return;\n          observed.add(el);\n          resizeObserver.observe(el);\n        });\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      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the space/clamp math above is measured against.\n      window.visualViewport?.addEventListener('resize', updatePos);\n      window.visualViewport?.addEventListener('scroll', updatePos);\n      teardown = () => {\n        scrollTargets.forEach((t) => t.removeEventListener('scroll', updatePos));\n        window.removeEventListener('resize', updatePos);\n        window.visualViewport?.removeEventListener('resize', updatePos);\n        window.visualViewport?.removeEventListener('scroll', updatePos);\n        resizeObserver.disconnect();\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":"6MAmBA,IAAM,EAAc,EAgBpB,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,EAIhD,EAAK,EAAsB,EAC3B,EAAa,EAAG,IAAM,EAAG,OAAS,EAAK,OACvC,EAAa,EAAK,IAAM,EAAG,IAC3B,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,IAQlC,IAAM,EAAgB,EAAS,QAC/B,GAAI,EAAe,CACjB,IAAM,EAAe,IAAkB,EAAS,EAAI,EAAc,WAC5D,EAAY,EAAK,KAAO,EAExB,EADa,EAAY,EAAc,aACT,EAAG,KAAO,EAAG,MAAQ,GACnD,EAAe,EAAG,KAAO,EAAc,EACzC,EAAgB,EAClB,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAO,EAAc,IACzC,EAAe,IACxB,EAAQ,MAAM,KAAO,GAAG,EAAK,KAAO,EAAa,IAErD,CAEA,EAAQ,MAAM,WAAa,EAAsB,EAAM,CAAS,EAAI,SAAW,GAG/E,IAAM,EAAQ,EAAS,QACnB,GAAS,CAAC,EAAS,IAAI,CAAK,GAAG,EAAmB,CACxD,CAMA,IAAM,EAAiB,IAAI,mBAAqB,EAAU,CAAC,EACrD,EAAW,IAAI,IACrB,SAAS,GAAqB,CAI5B,CAAC,EAAQ,EAAS,OAAO,EAAE,QAAS,GAAO,CACrC,CAAC,GAAM,EAAS,IAAI,CAAE,IAC1B,EAAS,IAAI,CAAE,EACf,EAAe,QAAQ,CAAE,EAC3B,CAAC,CACH,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,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,MAAiB,CACf,EAAc,QAAS,GAAM,EAAE,oBAAoB,SAAU,CAAS,CAAC,EACvE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,EAAe,WAAW,CAC5B,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"}

package/dist/esm/common/hooks/useVisualViewportSize.mjs

@@ -0,0 +1,2 @@
+import{getVisualViewportRect as e}from"../utils/visualViewport.mjs";import{useEffect as t,useState as n}from"react";function r(){let[r,i]=n(()=>{let t=e();return{height:t.height,offsetTop:t.top}});return t(()=>{let t=window.visualViewport;if(!t)return;function n(){let t=e();i({height:t.height,offsetTop:t.top})}return n(),t.addEventListener(`resize`,n),t.addEventListener(`scroll`,n),()=>{t.removeEventListener(`resize`,n),t.removeEventListener(`scroll`,n)}},[]),r}export{r as useVisualViewportSize};
+//# sourceMappingURL=useVisualViewportSize.mjs.map

package/dist/esm/common/hooks/useVisualViewportSize.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisualViewportSize.mjs","names":[],"sources":["../../../../package/common/hooks/useVisualViewportSize.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { getVisualViewportRect } from 'components/common/utils/visualViewport';\n\nexport interface VisualViewportSize {\n  /** Height of the actually-visible viewport in px — shrinks when a mobile on-screen keyboard\n   * opens, unlike `window.innerHeight` / CSS `vh`, which stay pinned to the full layout viewport. */\n  height: number;\n  /** Vertical offset of the visible viewport's top edge within the layout viewport — non-zero once\n   * the page has scrolled to keep a focused field above the keyboard. */\n  offsetTop: number;\n}\n\n/**\n * Tracks `window.visualViewport` so layout can react to the on-screen keyboard opening/closing.\n * Falls back to `window.innerHeight`/0 in browsers without the API.\n */\nexport function useVisualViewportSize(): VisualViewportSize {\n  const [size, setSize] = useState<VisualViewportSize>(() => {\n    const rect = getVisualViewportRect();\n    return { height: rect.height, offsetTop: rect.top };\n  });\n\n  useEffect(() => {\n    const vv = window.visualViewport;\n    if (!vv) return;\n\n    function update() {\n      const rect = getVisualViewportRect();\n      setSize({ height: rect.height, offsetTop: rect.top });\n    }\n\n    update();\n    vv.addEventListener('resize', update);\n    vv.addEventListener('scroll', update);\n    return () => {\n      vv.removeEventListener('resize', update);\n      vv.removeEventListener('scroll', update);\n    };\n  }, []);\n\n  return size;\n}\n"],"mappings":"oHAgBA,SAAgB,GAA4C,CAC1D,GAAM,CAAC,EAAM,GAAW,MAAmC,CACzD,IAAM,EAAO,EAAsB,EACnC,MAAO,CAAE,OAAQ,EAAK,OAAQ,UAAW,EAAK,GAAI,CACpD,CAAC,EAoBD,OAlBA,MAAgB,CACd,IAAM,EAAK,OAAO,eAClB,GAAI,CAAC,EAAI,OAET,SAAS,GAAS,CAChB,IAAM,EAAO,EAAsB,EACnC,EAAQ,CAAE,OAAQ,EAAK,OAAQ,UAAW,EAAK,GAAI,CAAC,CACtD,CAKA,OAHA,EAAO,EACP,EAAG,iBAAiB,SAAU,CAAM,EACpC,EAAG,iBAAiB,SAAU,CAAM,MACvB,CACX,EAAG,oBAAoB,SAAU,CAAM,EACvC,EAAG,oBAAoB,SAAU,CAAM,CACzC,CACF,EAAG,CAAC,CAAC,EAEE,CACT"}

package/dist/esm/common/modal/modal.mjs

@@ -1,2 +1,2 @@
-import e from"../bodyEnd/bodyEnd.mjs";import t from"./modal.module.mjs";import{useEffect as n,useState as r}from"react";import i from"classnames";import{FontAwesomeIcon as a}from"@fortawesome/react-fontawesome";import{faXmark as o}from"@fortawesome/free-solid-svg-icons";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({children:l=null,title:u=``,isOpen:d=!1,onClose:f=()=>null,className:p=``,style:m,hideHeader:h=!1,classNames:g,styles:_}){let[v,y]=r(d),[b,x]=r(d);return n(()=>{d?(y(d),setTimeout(()=>x(!0),1)):(x(!1),setTimeout(()=>y(d),300))},[d]),v?s(e,{children:c(`div`,{className:i(t.modalContainer,g?.container),style:_?.container,children:[s(`div`,{className:i(t.modalWrapper,b&&t.modalWrapperShown,g?.backdrop),style:_?.backdrop,onClick:f}),b&&c(`div`,{className:i(t.modal,b&&t.modalShown,p,g?.modal),style:{...m,..._?.modal},onClick:e=>e.stopPropagation(),children:[!h&&c(`div`,{className:i(t.modalHeader,g?.header),style:_?.header,children:[s(`div`,{className:g?.title,style:_?.title,children:u}),s(a,{onClick:f,icon:o,className:g?.closeButton,style:_?.closeButton})]}),l]})]})}):null}export{l as default};
+import e from"../bodyEnd/bodyEnd.mjs";import t from"./modal.module.mjs";import{useVisualViewportSize as n}from"../hooks/useVisualViewportSize.mjs";import{useEffect as r,useState as i}from"react";import a from"classnames";import{FontAwesomeIcon as o}from"@fortawesome/react-fontawesome";import{faXmark as s}from"@fortawesome/free-solid-svg-icons";import{jsx as c,jsxs as l}from"react/jsx-runtime";function u({children:u=null,title:d=``,isOpen:f=!1,onClose:p=()=>null,className:m=``,style:h,hideHeader:g=!1,classNames:_,styles:v}){let[y,b]=i(f),[x,S]=i(f),{height:C,offsetTop:w}=n();return r(()=>{f?(b(f),setTimeout(()=>S(!0),1)):(S(!1),setTimeout(()=>b(f),300))},[f]),y?c(e,{children:l(`div`,{className:a(t.modalContainer,_?.container),style:{height:C,top:w,...v?.container},children:[c(`div`,{className:a(t.modalWrapper,x&&t.modalWrapperShown,_?.backdrop),style:v?.backdrop,onClick:p}),x&&l(`div`,{className:a(t.modal,x&&t.modalShown,m,_?.modal),style:{...h,...v?.modal},onClick:e=>e.stopPropagation(),children:[!g&&l(`div`,{className:a(t.modalHeader,_?.header),style:v?.header,children:[c(`div`,{className:_?.title,style:v?.title,children:d}),c(o,{onClick:p,icon:s,className:_?.closeButton,style:v?.closeButton})]}),u]})]})}):null}export{u as default};
 //# sourceMappingURL=modal.mjs.map

package/dist/esm/common/modal/modal.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useState } from 'react';\n\nfunction Modal({\n  children = null,\n  title = '',\n  isOpen = false,\n  onClose = () => null,\n  className = '',\n  style,\n  hideHeader = false,\n  classNames,\n  styles: slotStyles,\n}: ModalProps) {\n  const [isRendered, setIsRendered] = useState(isOpen);\n  const [animateIn, setAnimateIn] = useState(isOpen);\n\n  useEffect(() => {\n    if (isOpen) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsRendered(isOpen);\n      setTimeout(() => setAnimateIn(true), 1);\n    } else {\n      setAnimateIn(false);\n      setTimeout(() => setIsRendered(isOpen), 300);\n    }\n  }, [isOpen]);\n\n  if (!isRendered) return null;\n\n  return (\n    <BodyEnd>\n      <div className={cx(styles.modalContainer, classNames?.container)} style={slotStyles?.container}>\n        <div\n          className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n          style={slotStyles?.backdrop}\n          onClick={onClose}\n        />\n        {animateIn && (\n          <div\n            className={cx(styles.modal, animateIn && styles.modalShown, className, classNames?.modal)}\n            style={{ ...style, ...slotStyles?.modal }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {!hideHeader && (\n              <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n                <div className={classNames?.title} style={slotStyles?.title}>{title}</div>\n                <FontAwesomeIcon onClick={onClose} icon={closeIcon} className={classNames?.closeButton} style={slotStyles?.closeButton as React.CSSProperties & Record<`--fa-font-${string}`, string>} />\n              </div>\n            )}\n            {children}\n          </div>\n        )}\n      </div>\n    </BodyEnd>\n  );\n}\n\nexport default Modal;\n"],"mappings":"iUAUA,SAAS,EAAM,CACb,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,aACA,OAAQ,GACK,CACb,GAAM,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAejD,OAbA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAEN,EAGH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAAG,MAAO,GAAY,mBAArF,CACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,MAAO,GAAa,EAAO,WAAY,EAAW,GAAY,KAAK,EACxF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,KAAM,EACxC,QAAU,GAAM,EAAE,gBAAgB,WAHpC,CAKG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,gBAA/E,CACE,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,GAAY,eAAQ,CAAW,CAAA,EACzE,EAAC,EAAD,CAAiB,QAAS,EAAS,KAAM,EAAW,UAAW,GAAY,YAAa,MAAO,GAAY,WAA6E,CAAA,CACrL,IAEN,CACE,GAEJ,GACE,CAAA,EA1Ba,IA4B1B"}
+{"version":3,"file":"modal.mjs","names":[],"sources":["../../../../package/common/modal/modal.tsx"],"sourcesContent":["import React from 'react';\nimport cx from 'classnames';\nimport BodyEnd from 'components/common/bodyEnd';\n\nimport styles from './modal.module.pcss';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faXmark as closeIcon } from '@fortawesome/free-solid-svg-icons';\nimport { ModalProps } from './modal.types';\nimport { useEffect, useState } from 'react';\nimport { useVisualViewportSize } from 'components/common/hooks/useVisualViewportSize';\n\nfunction Modal({\n  children = null,\n  title = '',\n  isOpen = false,\n  onClose = () => null,\n  className = '',\n  style,\n  hideHeader = false,\n  classNames,\n  styles: slotStyles,\n}: ModalProps) {\n  const [isRendered, setIsRendered] = useState(isOpen);\n  const [animateIn, setAnimateIn] = useState(isOpen);\n  // Centering/sizing against the actually-visible viewport (not the full layout viewport) keeps\n  // the modal — and whatever's focused inside it — from ending up under a mobile keyboard.\n  const { height: viewportHeight, offsetTop: viewportOffsetTop } = useVisualViewportSize();\n\n  useEffect(() => {\n    if (isOpen) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect\n      setIsRendered(isOpen);\n      setTimeout(() => setAnimateIn(true), 1);\n    } else {\n      setAnimateIn(false);\n      setTimeout(() => setIsRendered(isOpen), 300);\n    }\n  }, [isOpen]);\n\n  if (!isRendered) return null;\n\n  return (\n    <BodyEnd>\n      <div\n        className={cx(styles.modalContainer, classNames?.container)}\n        style={{ height: viewportHeight, top: viewportOffsetTop, ...slotStyles?.container }}\n      >\n        <div\n          className={cx(styles.modalWrapper, animateIn && styles.modalWrapperShown, classNames?.backdrop)}\n          style={slotStyles?.backdrop}\n          onClick={onClose}\n        />\n        {animateIn && (\n          <div\n            className={cx(styles.modal, animateIn && styles.modalShown, className, classNames?.modal)}\n            style={{ ...style, ...slotStyles?.modal }}\n            onClick={(e) => e.stopPropagation()}\n          >\n            {!hideHeader && (\n              <div className={cx(styles.modalHeader, classNames?.header)} style={slotStyles?.header}>\n                <div className={classNames?.title} style={slotStyles?.title}>{title}</div>\n                <FontAwesomeIcon onClick={onClose} icon={closeIcon} className={classNames?.closeButton} style={slotStyles?.closeButton as React.CSSProperties & Record<`--fa-font-${string}`, string>} />\n              </div>\n            )}\n            {children}\n          </div>\n        )}\n      </div>\n    </BodyEnd>\n  );\n}\n\nexport default Modal;\n"],"mappings":"4YAWA,SAAS,EAAM,CACb,WAAW,KACX,QAAQ,GACR,SAAS,GACT,cAAgB,KAChB,YAAY,GACZ,QACA,aAAa,GACb,aACA,OAAQ,GACK,CACb,GAAM,CAAC,EAAY,GAAiB,EAAS,CAAM,EAC7C,CAAC,EAAW,GAAgB,EAAS,CAAM,EAG3C,CAAE,OAAQ,EAAgB,UAAW,GAAsB,EAAsB,EAevF,OAbA,MAAgB,CACV,GAEF,EAAc,CAAM,EACpB,eAAiB,EAAa,EAAI,EAAG,CAAC,IAEtC,EAAa,EAAK,EAClB,eAAiB,EAAc,CAAM,EAAG,GAAG,EAE/C,EAAG,CAAC,CAAM,CAAC,EAEN,EAGH,EAAC,EAAD,CAAA,SACE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,eAAgB,GAAY,SAAS,EAC1D,MAAO,CAAE,OAAQ,EAAgB,IAAK,EAAmB,GAAG,GAAY,SAAU,WAFpF,CAIE,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,aAAc,GAAa,EAAO,kBAAmB,GAAY,QAAQ,EAC9F,MAAO,GAAY,SACnB,QAAS,CACV,CAAA,EACA,GACC,EAAC,MAAD,CACE,UAAW,EAAG,EAAO,MAAO,GAAa,EAAO,WAAY,EAAW,GAAY,KAAK,EACxF,MAAO,CAAE,GAAG,EAAO,GAAG,GAAY,KAAM,EACxC,QAAU,GAAM,EAAE,gBAAgB,WAHpC,CAKG,CAAC,GACA,EAAC,MAAD,CAAK,UAAW,EAAG,EAAO,YAAa,GAAY,MAAM,EAAG,MAAO,GAAY,gBAA/E,CACE,EAAC,MAAD,CAAK,UAAW,GAAY,MAAO,MAAO,GAAY,eAAQ,CAAW,CAAA,EACzE,EAAC,EAAD,CAAiB,QAAS,EAAS,KAAM,EAAW,UAAW,GAAY,YAAa,MAAO,GAAY,WAA6E,CAAA,CACrL,IAEN,CACE,GAEJ,GACE,CAAA,EA7Ba,IA+B1B"}

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

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

package/dist/esm/common/popover/usePopoverPosition.mjs

@@ -1,2 +1,2 @@
-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};
+import{getScrollableAncestors as e,isHiddenByAnyAncestor as t}from"../utils/scrollAncestors.mjs";import{getVisualViewportRect as n}from"../utils/visualViewport.mjs";import{PopoverAlign as r,PopoverPlacement as i}from"./popover.types.mjs";import{useLayoutEffect as a}from"react";var o={[i.Top]:`bottom`,[i.Bottom]:`top`,[i.Left]:`right`,[i.Right]:`left`},s=8;function c({isOpen:c,placement:l,align:u,offset:d,triggerRef:f,floatingRef:p,panelRef:m,arrowRef:h}){a(()=>{if(!c)return;let a,g;function _(){let c=f.current,v=p.current,y=m.current;if(!c||!v||!y){a=requestAnimationFrame(_);return}let b=e(c);function x(){let e=c.getBoundingClientRect(),a=y.offsetWidth,f=y.offsetHeight,p=n(),m={top:e.top-p.top,bottom:p.top+p.height-e.bottom,left:e.left-p.left,right:p.left+p.width-e.right},g=l===i.Top||l===i.Bottom?f:a,_=l,x=o[l];m[_]<g+d&&m[x]>m[_]&&(_=x);let S=_===`top`||_===`bottom`,C,w;_===`bottom`?C=e.bottom+d:_===`top`?C=e.top-d-f:w=_===`right`?e.right+d:e.left-d-a,S?(w=u===r.Start?e.left:u===r.End?e.right-a:e.left+e.width/2-a/2,w=Math.max(p.left+s,Math.min(w,p.left+p.width-a-s))):(C=u===r.Start?e.top:u===r.End?e.bottom-f:e.top+e.height/2-f/2,C=Math.max(p.top+s,Math.min(C,p.top+p.height-f-s))),v.style.top=`${C}px`,v.style.left=`${w}px`,v.style.visibility=t(e,b)?`hidden`:`visible`,v.dataset.placement=_;let T=h.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,a-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,f-t-2))}px`),T.style.removeProperty(`--arrow-x`)}}}x();let S=[window,...b];S.forEach(e=>e.addEventListener(`scroll`,x,{passive:!0})),window.addEventListener(`resize`,x),window.visualViewport?.addEventListener(`resize`,x),window.visualViewport?.addEventListener(`scroll`,x),g=()=>{S.forEach(e=>e.removeEventListener(`scroll`,x)),window.removeEventListener(`resize`,x),window.visualViewport?.removeEventListener(`resize`,x),window.visualViewport?.removeEventListener(`scroll`,x)}}return _(),()=>{a!==void 0&&cancelAnimationFrame(a),g?.()}},[c,l,u,d,f,p,m,h])}export{c as usePopoverPosition};
 //# sourceMappingURL=usePopoverPosition.mjs.map

package/dist/esm/common/popover/usePopoverPosition.mjs.map

@@ -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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"}
+{"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 { getVisualViewportRect } from 'components/common/utils/visualViewport';\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        // The visible area, not the full layout viewport — shrinks on mobile when a keyboard is\n        // open, so the panel flips/clamps against what's actually on screen instead of ending up\n        // hidden behind the keyboard.\n        const vv = getVisualViewportRect();\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 - vv.top,\n          bottom: vv.top + vv.height - t.bottom,\n          left: t.left - vv.left,\n          right: vv.left + vv.width - 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(vv.left + MARGIN, Math.min(left!, vv.left + vv.width - 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(vv.top + MARGIN, Math.min(top!, vv.top + vv.height - 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      // `window.resize` doesn't reliably fire when a mobile keyboard opens/closes — visualViewport\n      // does, and is what the room/clamp math above is measured against.\n      window.visualViewport?.addEventListener('resize', updatePos);\n      window.visualViewport?.addEventListener('scroll', updatePos);\n      teardown = () => {\n        scrollTargets.forEach((tt) => tt.removeEventListener('scroll', updatePos));\n        window.removeEventListener('resize', updatePos);\n        window.visualViewport?.removeEventListener('resize', updatePos);\n        window.visualViewport?.removeEventListener('scroll', 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":"sRAMA,IAAM,EAA2C,EAC9C,EAAiB,KAAM,UACvB,EAAiB,QAAS,OAC1B,EAAiB,MAAO,SACxB,EAAiB,OAAQ,MAC5B,EAEM,EAAS,EAuBf,SAAgB,EAAmB,CACjC,SAAQ,YAAW,QAAO,SAAQ,aAAY,cAAa,WAAU,YAC5C,CACzB,MAAsB,CACpB,GAAI,CAAC,EAAQ,OAEb,IAAI,EACA,EAIJ,SAAS,GAAW,CAClB,IAAM,EAAU,EAAW,QACrB,EAAW,EAAY,QACvB,EAAQ,EAAS,QACvB,GAAI,CAAC,GAAW,CAAC,GAAY,CAAC,EAAO,CACnC,EAAQ,sBAAsB,CAAQ,EACtC,MACF,CACA,IAAM,EAAY,EAAuB,CAAO,EAEhD,SAAS,GAAY,CACnB,IAAM,EAAI,EAAS,sBAAsB,EACnC,EAAK,EAAO,YACZ,EAAK,EAAO,aAIZ,EAAK,EAAsB,EAI3B,EAA6B,CACjC,IAAK,EAAE,IAAM,EAAG,IAChB,OAAQ,EAAG,IAAM,EAAG,OAAS,EAAE,OAC/B,KAAM,EAAE,KAAO,EAAG,KAClB,MAAO,EAAG,KAAO,EAAG,MAAQ,EAAE,KAChC,EACM,EAAQ,IAAc,EAAiB,KAAO,IAAc,EAAiB,OAAU,EAAK,EAC9F,EAAa,EACX,EAAM,EAAS,GACjB,EAAK,GAAQ,EAAO,GAAU,EAAK,GAAO,EAAK,KAAO,EAAO,GAEjE,IAAM,EAAW,IAAS,OAAS,IAAS,SAGxC,EACA,EACA,IAAS,SAAY,EAAM,EAAE,OAAS,EACjC,IAAS,MAAS,EAAM,EAAE,IAAM,EAAS,EAC7C,AACE,EADE,IAAS,QAAkB,EAAE,MAAQ,EAChC,EAAE,KAAO,EAAS,EAG5B,GACF,AAEK,EAFD,IAAU,EAAa,MAAc,EAAE,KAClC,IAAU,EAAa,IAAY,EAAE,MAAQ,EAC1C,EAAE,KAAO,EAAE,MAAQ,EAAI,EAAK,EACxC,EAAO,KAAK,IAAI,EAAG,KAAO,EAAQ,KAAK,IAAI,EAAO,EAAG,KAAO,EAAG,MAAQ,EAAK,CAAM,CAAC,IAEnF,AAEK,EAFD,IAAU,EAAa,MAAa,EAAE,IACjC,IAAU,EAAa,IAAW,EAAE,OAAS,EAC3C,EAAE,IAAM,EAAE,OAAS,EAAI,EAAK,EACvC,EAAM,KAAK,IAAI,EAAG,IAAM,EAAQ,KAAK,IAAI,EAAM,EAAG,IAAM,EAAG,OAAS,EAAK,CAAM,CAAC,GAGlF,EAAU,MAAM,IAAM,GAAG,EAAK,IAC9B,EAAU,MAAM,KAAO,GAAG,EAAM,IAChC,EAAU,MAAM,WAAa,EAAsB,EAAG,CAAS,EAAI,SAAW,UAC9E,EAAU,QAAQ,UAAY,EAG9B,IAAM,EAAQ,EAAS,QACvB,GAAI,EAAO,CACT,IAAM,EAAO,EAAM,YAAc,GAAK,EACtC,GAAI,EAAU,CACZ,IAAM,EAAI,EAAE,KAAO,EAAE,MAAQ,EAAI,EACjC,EAAM,MAAM,YAAY,YAAa,GAAG,KAAK,IAAI,EAAO,EAAG,KAAK,IAAI,EAAG,EAAK,EAAO,CAAC,CAAC,EAAE,GAAG,EAC1F,EAAM,MAAM,eAAe,WAAW,CACxC,KAAO,CACL,IAAM,EAAI,EAAE,IAAM,EAAE,OAAS,EAAI,EACjC,EAAM,MAAM,YAAY,YAAa,GAAG,KAAK,IAAI,EAAO,EAAG,KAAK,IAAI,EAAG,EAAK,EAAO,CAAC,CAAC,EAAE,GAAG,EAC1F,EAAM,MAAM,eAAe,WAAW,CACxC,CACF,CACF,CAEA,EAAU,EAEV,IAAM,EAA0C,CAAC,OAAQ,GAAG,CAAS,EACrE,EAAc,QAAS,GAAO,EAAG,iBAAiB,SAAU,EAAW,CAAE,QAAS,EAAK,CAAC,CAAC,EACzF,OAAO,iBAAiB,SAAU,CAAS,EAG3C,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,OAAO,gBAAgB,iBAAiB,SAAU,CAAS,EAC3D,MAAiB,CACf,EAAc,QAAS,GAAO,EAAG,oBAAoB,SAAU,CAAS,CAAC,EACzE,OAAO,oBAAoB,SAAU,CAAS,EAC9C,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,EAC9D,OAAO,gBAAgB,oBAAoB,SAAU,CAAS,CAChE,CACF,CAIA,OAFA,EAAS,MAEI,CACP,IAAU,IAAA,IAAW,qBAAqB,CAAK,EACnD,IAAW,CACb,CACF,EAAG,CAAC,EAAQ,EAAW,EAAO,EAAQ,EAAY,EAAa,EAAU,CAAQ,CAAC,CACpF"}

package/dist/esm/common/themeProvider/defaultTheme.mjs

@@ -1,2 +1,2 @@
-var e={id:`default`,variables:{"--grey":`#8A8A8A`,"--lightgrey":`#e0e0e0`,"--lightergrey":`#B1B1B1`,"--white":`#FFFFFF`,"--red":`#D6002A`,"--lighter-red":`#ffeae9`,"--green":`#287626`,"--lighter-green":`#C4FFC9`,"--blue":`#5873d5`,"--lighter-blue":`#C6DBFF`,"--black":`black`,"--orange":`#ff7f50`,"--lighter-orange":`#ffe5d9`,"--primary-color":`#8184d6`,"--primary-accent":`#90CAF9`,"--primary-lighter":`#9a9ce4`,"--accent-color":`var(--grey)`,"--accent-color-light":`var(--lightgrey)`,"--text-color":`var(--white)`,"--text-dark":`var(--lightergrey)`,"--text-light":`var(--lightergrey)`,"--text-on-primary":`var(--white)`,"--text-on-delete":`var(--white)`,"--border-color":`#656574`,"--focus-border-color":`var(--primary-color)`,"--background":`#393945`,"--background-accent":`#33333c`,"--background-accent-dark":`var(--grey)`,"--background-accent-light":`#484856`,"--background-modal":`#484856`,"--success-color":`var(--green)`,"--success-lighter":`var(--lighter-green)`,"--error-color":`var(--red)`,"--error-lighter":`var(--lighter-red)`,"--required-mark-color":`var(--error-color)`,"--info-color":`var(--blue)`,"--info-lighter":`var(--lighter-blue)`,"--warn-color":`var(--orange)`,"--warn-lighter":`var(--lighter-orange)`,"--default-font-size":`14px`,"--text-small-font-size":`12px`,"--header-font-size":`24px`,"--header-medium-font-size":`18px`,"--header-small-font-size":`16px`,"--default-font-weight":`400`,"--header-font-weight":`600`,"--input-background":`transparent`,"--input-icon-color":`var(--text-color)`,"--error-border-color":`var(--red)`,"--button-default-color":`var(--primary-color)`,"--button-default-border":`1px solid var(--primary-color)`,"--default-border-radius":`8px`,"--padding-sides":`15px`,"--margin-top":`10px`,"--default-font":`'Inter', sans-serif`,"--themed-font":`'Inter', sans-serif`,"--card-shadow":`0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)`,"--background-card-elevated":`var(--background-accent-light)`,"--background-card-outlined":`transparent`,"--background-card-filled":`var(--background-accent)`,"--spacing-s":`4px`,"--spacing-m":`8px`,"--spacing-l":`16px`}};export{e as defaultTheme};
+var e={id:`default`,variables:{"--grey":`#8A8A8A`,"--lightgrey":`#e0e0e0`,"--lightergrey":`#B1B1B1`,"--white":`#FFFFFF`,"--red":`#D6002A`,"--lighter-red":`#ffeae9`,"--green":`#287626`,"--lighter-green":`#C4FFC9`,"--blue":`#5873d5`,"--lighter-blue":`#C6DBFF`,"--black":`black`,"--orange":`#ff7f50`,"--lighter-orange":`#ffe5d9`,"--primary-color":`#8184d6`,"--primary-accent":`#90CAF9`,"--primary-lighter":`#9a9ce4`,"--accent-color":`var(--grey)`,"--accent-color-light":`var(--lightgrey)`,"--text-color":`var(--white)`,"--text-dark":`var(--lightergrey)`,"--text-light":`var(--lightergrey)`,"--text-on-primary":`var(--white)`,"--text-on-delete":`var(--white)`,"--border-color":`#656574`,"--focus-border-color":`var(--primary-color)`,"--background":`#393945`,"--background-accent":`#33333c`,"--background-accent-dark":`var(--grey)`,"--background-accent-light":`#484856`,"--background-modal":`#484856`,"--success-color":`var(--green)`,"--success-lighter":`var(--lighter-green)`,"--error-color":`var(--red)`,"--error-lighter":`var(--lighter-red)`,"--required-mark-color":`var(--error-color)`,"--info-color":`var(--blue)`,"--info-lighter":`var(--lighter-blue)`,"--warn-color":`var(--orange)`,"--warn-lighter":`var(--lighter-orange)`,"--default-font-size":`16px`,"--text-small-font-size":`14px`,"--header-font-size":`24px`,"--header-medium-font-size":`18px`,"--header-small-font-size":`16px`,"--default-font-weight":`400`,"--header-font-weight":`600`,"--input-background":`transparent`,"--input-icon-color":`var(--text-color)`,"--error-border-color":`var(--red)`,"--button-default-color":`var(--primary-color)`,"--button-default-border":`1px solid var(--primary-color)`,"--default-border-radius":`8px`,"--padding-sides":`15px`,"--margin-top":`10px`,"--default-font":`'Inter', sans-serif`,"--themed-font":`'Inter', sans-serif`,"--card-shadow":`0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)`,"--background-card-elevated":`var(--background-accent-light)`,"--background-card-outlined":`transparent`,"--background-card-filled":`var(--background-accent)`,"--spacing-s":`4px`,"--spacing-m":`8px`,"--spacing-l":`16px`}};export{e as defaultTheme};
 //# sourceMappingURL=defaultTheme.mjs.map

package/dist/esm/common/themeProvider/defaultTheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"defaultTheme.mjs","names":[],"sources":["../../../../package/common/themeProvider/defaultTheme.ts"],"sourcesContent":["import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n  id: 'default',\n  variables: {\n    '--grey': '#8A8A8A',\n    '--lightgrey': '#e0e0e0',\n    '--lightergrey': '#B1B1B1',\n    '--white': '#FFFFFF',\n    '--red': '#D6002A',\n    '--lighter-red': '#ffeae9',\n    '--green': '#287626',\n    '--lighter-green': '#C4FFC9',\n    '--blue': '#5873d5',\n    '--lighter-blue': '#C6DBFF',\n    '--black': 'black',\n    '--orange': '#ff7f50',\n    '--lighter-orange': '#ffe5d9',\n\n    '--primary-color': '#8184d6',\n    '--primary-accent': '#90CAF9',\n    '--primary-lighter': '#9a9ce4',\n    '--accent-color': 'var(--grey)',\n    '--accent-color-light': 'var(--lightgrey)',\n\n    '--text-color': 'var(--white)',\n    '--text-dark': 'var(--lightergrey)',\n    '--text-light': 'var(--lightergrey)',\n    '--text-on-primary': 'var(--white)',\n    '--text-on-delete': 'var(--white)',\n    '--border-color': '#656574',\n    '--focus-border-color': 'var(--primary-color)',\n\n    '--background': '#393945',\n    '--background-accent': '#33333c',\n    '--background-accent-dark': 'var(--grey)',\n    '--background-accent-light': '#484856',\n    '--background-modal': '#484856',\n\n    '--success-color': 'var(--green)',\n    '--success-lighter': 'var(--lighter-green)',\n    '--error-color': 'var(--red)',\n    '--error-lighter': 'var(--lighter-red)',\n    '--required-mark-color': 'var(--error-color)',\n    '--info-color': 'var(--blue)',\n    '--info-lighter': 'var(--lighter-blue)',\n    '--warn-color': 'var(--orange)',\n    '--warn-lighter': 'var(--lighter-orange)',\n\n    '--default-font-size': '14px',\n    '--text-small-font-size': '12px',\n    '--header-font-size': '24px',\n    '--header-medium-font-size': '18px',\n    '--header-small-font-size': '16px',\n\n    '--default-font-weight': '400',\n    '--header-font-weight': '600',\n\n    '--input-background': 'transparent',\n    '--input-icon-color': 'var(--text-color)',\n    '--error-border-color': 'var(--red)',\n\n    '--button-default-color': 'var(--primary-color)',\n    '--button-default-border': '1px solid var(--primary-color)',\n\n    '--default-border-radius': '8px',\n    '--padding-sides': '15px',\n    '--margin-top': '10px',\n\n    '--default-font': \"'Inter', sans-serif\",\n    '--themed-font': \"'Inter', sans-serif\",\n\n    '--card-shadow':\n      '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n    '--background-card-elevated': 'var(--background-accent-light)',\n    '--background-card-outlined': 'transparent',\n    '--background-card-filled': 'var(--background-accent)',\n\n    '--spacing-s': '4px',\n    '--spacing-m': '8px',\n    '--spacing-l': '16px',\n  },\n};\n"],"mappings":"AAOA,IAAa,EAAsB,CACjC,GAAI,UACJ,UAAW,CACT,SAAU,UACV,cAAe,UACf,gBAAiB,UACjB,UAAW,UACX,QAAS,UACT,gBAAiB,UACjB,UAAW,UACX,kBAAmB,UACnB,SAAU,UACV,iBAAkB,UAClB,UAAW,QACX,WAAY,UACZ,mBAAoB,UAEpB,kBAAmB,UACnB,mBAAoB,UACpB,oBAAqB,UACrB,iBAAkB,cAClB,uBAAwB,mBAExB,eAAgB,eAChB,cAAe,qBACf,eAAgB,qBAChB,oBAAqB,eACrB,mBAAoB,eACpB,iBAAkB,UAClB,uBAAwB,uBAExB,eAAgB,UAChB,sBAAuB,UACvB,2BAA4B,cAC5B,4BAA6B,UAC7B,qBAAsB,UAEtB,kBAAmB,eACnB,oBAAqB,uBACrB,gBAAiB,aACjB,kBAAmB,qBACnB,wBAAyB,qBACzB,eAAgB,cAChB,iBAAkB,sBAClB,eAAgB,gBAChB,iBAAkB,wBAElB,sBAAuB,OACvB,yBAA0B,OAC1B,qBAAsB,OACtB,4BAA6B,OAC7B,2BAA4B,OAE5B,wBAAyB,MACzB,uBAAwB,MAExB,qBAAsB,cACtB,qBAAsB,oBACtB,uBAAwB,aAExB,yBAA0B,uBAC1B,0BAA2B,iCAE3B,0BAA2B,MAC3B,kBAAmB,OACnB,eAAgB,OAEhB,iBAAkB,sBAClB,gBAAiB,sBAEjB,gBACE,8FAEF,6BAA8B,iCAC9B,6BAA8B,cAC9B,2BAA4B,2BAE5B,cAAe,MACf,cAAe,MACf,cAAe,MACjB,CACF"}
+{"version":3,"file":"defaultTheme.mjs","names":[],"sources":["../../../../package/common/themeProvider/defaultTheme.ts"],"sourcesContent":["import type { Theme } from './theme.types';\n\n/**\n * Built-in default theme used by ThemeProvider when no `themes` prop is\n * supplied. Provides a complete set of CSS variables so the component\n * library renders correctly out of the box.\n */\nexport const defaultTheme: Theme = {\n  id: 'default',\n  variables: {\n    '--grey': '#8A8A8A',\n    '--lightgrey': '#e0e0e0',\n    '--lightergrey': '#B1B1B1',\n    '--white': '#FFFFFF',\n    '--red': '#D6002A',\n    '--lighter-red': '#ffeae9',\n    '--green': '#287626',\n    '--lighter-green': '#C4FFC9',\n    '--blue': '#5873d5',\n    '--lighter-blue': '#C6DBFF',\n    '--black': 'black',\n    '--orange': '#ff7f50',\n    '--lighter-orange': '#ffe5d9',\n\n    '--primary-color': '#8184d6',\n    '--primary-accent': '#90CAF9',\n    '--primary-lighter': '#9a9ce4',\n    '--accent-color': 'var(--grey)',\n    '--accent-color-light': 'var(--lightgrey)',\n\n    '--text-color': 'var(--white)',\n    '--text-dark': 'var(--lightergrey)',\n    '--text-light': 'var(--lightergrey)',\n    '--text-on-primary': 'var(--white)',\n    '--text-on-delete': 'var(--white)',\n    '--border-color': '#656574',\n    '--focus-border-color': 'var(--primary-color)',\n\n    '--background': '#393945',\n    '--background-accent': '#33333c',\n    '--background-accent-dark': 'var(--grey)',\n    '--background-accent-light': '#484856',\n    '--background-modal': '#484856',\n\n    '--success-color': 'var(--green)',\n    '--success-lighter': 'var(--lighter-green)',\n    '--error-color': 'var(--red)',\n    '--error-lighter': 'var(--lighter-red)',\n    '--required-mark-color': 'var(--error-color)',\n    '--info-color': 'var(--blue)',\n    '--info-lighter': 'var(--lighter-blue)',\n    '--warn-color': 'var(--orange)',\n    '--warn-lighter': 'var(--lighter-orange)',\n\n    '--default-font-size': '16px',\n    '--text-small-font-size': '14px',\n    '--header-font-size': '24px',\n    '--header-medium-font-size': '18px',\n    '--header-small-font-size': '16px',\n\n    '--default-font-weight': '400',\n    '--header-font-weight': '600',\n\n    '--input-background': 'transparent',\n    '--input-icon-color': 'var(--text-color)',\n    '--error-border-color': 'var(--red)',\n\n    '--button-default-color': 'var(--primary-color)',\n    '--button-default-border': '1px solid var(--primary-color)',\n\n    '--default-border-radius': '8px',\n    '--padding-sides': '15px',\n    '--margin-top': '10px',\n\n    '--default-font': \"'Inter', sans-serif\",\n    '--themed-font': \"'Inter', sans-serif\",\n\n    '--card-shadow':\n      '0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%), 0 1px 5px 0 rgb(0 0 0 / 12%)',\n\n    '--background-card-elevated': 'var(--background-accent-light)',\n    '--background-card-outlined': 'transparent',\n    '--background-card-filled': 'var(--background-accent)',\n\n    '--spacing-s': '4px',\n    '--spacing-m': '8px',\n    '--spacing-l': '16px',\n  },\n};\n"],"mappings":"AAOA,IAAa,EAAsB,CACjC,GAAI,UACJ,UAAW,CACT,SAAU,UACV,cAAe,UACf,gBAAiB,UACjB,UAAW,UACX,QAAS,UACT,gBAAiB,UACjB,UAAW,UACX,kBAAmB,UACnB,SAAU,UACV,iBAAkB,UAClB,UAAW,QACX,WAAY,UACZ,mBAAoB,UAEpB,kBAAmB,UACnB,mBAAoB,UACpB,oBAAqB,UACrB,iBAAkB,cAClB,uBAAwB,mBAExB,eAAgB,eAChB,cAAe,qBACf,eAAgB,qBAChB,oBAAqB,eACrB,mBAAoB,eACpB,iBAAkB,UAClB,uBAAwB,uBAExB,eAAgB,UAChB,sBAAuB,UACvB,2BAA4B,cAC5B,4BAA6B,UAC7B,qBAAsB,UAEtB,kBAAmB,eACnB,oBAAqB,uBACrB,gBAAiB,aACjB,kBAAmB,qBACnB,wBAAyB,qBACzB,eAAgB,cAChB,iBAAkB,sBAClB,eAAgB,gBAChB,iBAAkB,wBAElB,sBAAuB,OACvB,yBAA0B,OAC1B,qBAAsB,OACtB,4BAA6B,OAC7B,2BAA4B,OAE5B,wBAAyB,MACzB,uBAAwB,MAExB,qBAAsB,cACtB,qBAAsB,oBACtB,uBAAwB,aAExB,yBAA0B,uBAC1B,0BAA2B,iCAE3B,0BAA2B,MAC3B,kBAAmB,OACnB,eAAgB,OAEhB,iBAAkB,sBAClB,gBAAiB,sBAEjB,gBACE,8FAEF,6BAA8B,iCAC9B,6BAA8B,cAC9B,2BAA4B,2BAE5B,cAAe,MACf,cAAe,MACf,cAAe,MACjB,CACF"}

package/dist/esm/common/utils/visualViewport.mjs

@@ -0,0 +1,2 @@
+function e(){let e=typeof window<`u`?window.visualViewport:null;return e?{left:e.offsetLeft,top:e.offsetTop,width:e.width,height:e.height}:{left:0,top:0,width:typeof window<`u`?window.innerWidth:0,height:typeof window<`u`?window.innerHeight:0}}export{e as getVisualViewportRect};
+//# sourceMappingURL=visualViewport.mjs.map

package/dist/esm/common/utils/visualViewport.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"visualViewport.mjs","names":[],"sources":["../../../../package/common/utils/visualViewport.ts"],"sourcesContent":["export interface VisualViewportRect {\n  left: number;\n  top: number;\n  width: number;\n  height: number;\n}\n\n// `window.visualViewport` reports the actually-visible area, which shrinks (and offsets) when a\n// mobile on-screen keyboard opens — unlike `window.innerWidth`/`innerHeight`, which stay pinned to\n// the full layout viewport. `getBoundingClientRect()` is relative to the layout viewport's origin,\n// so `left`/`top` here let callers translate into the same coordinate space before clamping.\nexport function getVisualViewportRect(): VisualViewportRect {\n  const vv = typeof window !== 'undefined' ? window.visualViewport : null;\n  if (vv) return { left: vv.offsetLeft, top: vv.offsetTop, width: vv.width, height: vv.height };\n  return {\n    left: 0,\n    top: 0,\n    width: typeof window !== 'undefined' ? window.innerWidth : 0,\n    height: typeof window !== 'undefined' ? window.innerHeight : 0,\n  };\n}\n"],"mappings":"AAWA,SAAgB,GAA4C,CAC1D,IAAM,EAAK,OAAO,OAAW,IAAc,OAAO,eAAiB,KAEnE,OADI,EAAW,CAAE,KAAM,EAAG,WAAY,IAAK,EAAG,UAAW,MAAO,EAAG,MAAO,OAAQ,EAAG,MAAO,EACrF,CACL,KAAM,EACN,IAAK,EACL,MAAO,OAAO,OAAW,IAAc,OAAO,WAAa,EAC3D,OAAQ,OAAO,OAAW,IAAc,OAAO,YAAc,CAC/D,CACF"}