@fremtind/jokul 0.24.0 → 0.24.1

package/build/cjs/components/datepicker/DatePicker.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),n=require("date-fns"),o=require("react"),i=require("react-dom");require("../icon/Icon.js"),require("../icon/icons/animated/ArrowVerticalAnimated.js"),require("../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../icon/icons/animated/PlusRemoveAnimated.js"),require("../icon/icons/ArrowDownIcon.js"),require("../icon/icons/ArrowLeftIcon.js"),require("../icon/icons/ArrowNorthEastIcon.js"),require("../icon/icons/ArrowRightIcon.js"),require("../icon/icons/ArrowUpIcon.js");const t=require("../icon/icons/CalendarIcon.js");require("../icon/icons/CheckIcon.js"),require("../icon/icons/ChevronDownIcon.js"),require("../icon/icons/ChevronLeftIcon.js"),require("../icon/icons/ChevronRightIcon.js"),require("../icon/icons/ChevronUpIcon.js"),require("../icon/icons/CloseIcon.js"),require("../icon/icons/CopyIcon.js"),require("../icon/icons/DotsIcon.js"),require("../icon/icons/DragIcon.js"),require("../icon/icons/ErrorIcon.js"),require("../icon/icons/GreenCheckIcon.js"),require("../icon/icons/HamburgerIcon.js"),require("../icon/icons/InfoIcon.js"),require("../icon/icons/LinkIcon.js"),require("../icon/icons/PlusIcon.js"),require("../icon/icons/QuestionIcon.js"),require("../icon/icons/RedCrossIcon.js"),require("../icon/icons/SearchIcon.js"),require("../icon/icons/SuccessIcon.js"),require("../icon/icons/WarningIcon.js"),require("../icon/icons/MinusIcon.js"),require("../icon/icons/ThumbDownIcon.js"),require("../icon/icons/ThumbUpIcon.js"),require("../icon/icons/TrashCanIcon.js"),require("../icon/icons/PenIcon.js");const s=require("../icon-button/IconButton.js");require("../../hooks/useScreen/useScreen.js"),require("../../hooks/useId/useId.js"),require("../tooltip/Tooltip.js"),require("../tooltip/TooltipContent.js"),require("../tooltip/TooltipTrigger.js");const a=require("../input-group/InputGroup.js"),c=require("../popover/Popover.js");require("../text-input/BaseTextArea.js");const u=require("../text-input/BaseTextInput.js");require("../text-input/TextArea.js"),require("../text-input/TextInput.js");const l=require("./internal/Calendar.js"),d=require("./internal/utils.js"),p=require("./utils.js"),j=require("./validation.js"),q=o.forwardRef(((q,I)=>{const{"data-testautoid":h,id:b,className:f="",label:k="Velg dato",labelProps:v,defaultValue:m,defaultShow:C=!1,value:g,disableBeforeDate:D,disableAfterDate:x,yearsToShow:y,name:w,helpLabel:T,errorLabel:S,invalid:L,density:P,days:A,months:R,monthLabel:B,yearLabel:E,placeholder:O="dd.mm.åååå",width:_="11.25rem",onChange:N,onBlur:U,onFocus:V,onKeyDown:W,action:F,showCalendarLabel:G="Åpne kalender",hideCalendarLabel:H="Lukk kalender",supportLabelProps:K,tooltipProps:M,...z}=q;"production"!==process.env.NODE_ENV&&g&&m&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const Q=p.parseDateString(D),J=Q?n.startOfDay(Q):void 0,X=p.parseDateString(x),Y=X?n.startOfDay(X):void 0,[Z,$]=o.useState(d.getInitialDate(g,m,J,Y)),[ee,re]=o.useState(null),[ne,oe]=o.useState(C),ie=o.useRef(null),te=o.useRef(null),se=o.useRef(null),ae=o.useRef(null),ce=o.useCallback((e=>{ae.current=e,I&&("function"==typeof I?I(e):I.current=e)}),[ae,I]),ue=o.useCallback((e=>{V&&te.current&&(te.current.contains(e.relatedTarget)||V(e,Z,{error:ee,value:e.target.value}))}),[V,Z,ee]),le=o.useCallback((e=>{U&&U(e,Z,{error:ee,value:e.target.value})}),[U,Z,ee]),de=o.useCallback((e=>{"Escape"===e.key&&(oe(!1),e.preventDefault(),e.stopPropagation()),null!=F&&F.onKeyDown&&F.onKeyDown(e)}),[oe,F]),pe=o.useCallback((e=>{let r=null,n=null;if(e.target.value){const o=p.parseDateString(e.target.value);o?J&&!j.isWithinLowerBound(o,J)?n="OUTSIDE_LOWER_BOUND":Y&&!j.isWithinUpperBound(o,Y)?n="OUTSIDE_UPPER_BOUND":oe(!1):n="WRONG_FORMAT",r=o||null}re(n),$(r),N&&N(e,r,{error:n,value:e.target.value})}),[N,re,$,oe,J,Y]),je=o.useCallback((e=>{i.flushSync((()=>{oe(!ne)}));const r=ie.current,n=r&&r.querySelector('[aria-pressed="true"]');n&&n.focus(),null!=F&&F.onClick&&F.onClick(e)}),[oe,ne,F,ie]),qe=o.useCallback((({date:e})=>{if(oe(!1),$(e),ae.current){const r=ae.current;r.value=p.formatInput(e);const n=document.createEvent("HTMLEvents");n.initEvent("input",!0,!1),r.dispatchEvent(n),r.focus(),N&&N(n,e,{error:null,value:r.value})}}),[oe,$,N]),Ie=o.useCallback((e=>{e.preventDefault(),oe(!1),se.current&&se.current.focus()}),[oe]);return e.jsx(a.InputGroup,{id:b,className:r.clsx("jkl-datepicker",f,{"jkl-datepicker--open":ne}),...z,ref:te,label:k,labelProps:v,density:P,helpLabel:T,errorLabel:S,supportLabelProps:K,tooltipProps:M,render:r=>e.jsx(u.BaseTextInput,{ref:ce,"data-testid":"jkl-datepicker__input","data-testautoid":h,className:"jkl-datepicker__input",name:w,defaultValue:m,density:P,value:g,type:"text",placeholder:O,width:_,onFocus:ue,onBlur:le,onChange:pe,actionButton:e.jsxs(c,{positionReference:ae,open:ne,onOpenChange:()=>oe(!ne),offset:8,children:[e.jsx(c.Trigger,{...F,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ne?H:G,tabIndex:0,onClick:je,onKeyDown:de,asChild:!0,children:e.jsx(s.IconButton,{children:e.jsx(t.CalendarIcon,{})})}),e.jsx(c.Content,{initialFocus:-1,padding:24,children:e.jsx(l.Calendar,{ref:ie,density:P,date:Z,minDate:J,maxDate:Y,days:A,months:R,monthLabel:B,yearLabel:E,yearsToShow:y,onDateSelected:qe,onTabOutside:Ie})})]}),...r})})}));q.displayName="DatePicker",exports.DatePicker=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../../../clsx-E3yX_9sL.cjs"),n=require("date-fns"),o=require("react"),i=require("react-dom");require("../icon/Icon.js"),require("../icon/icons/animated/ArrowVerticalAnimated.js"),require("../icon/icons/animated/ArrowHorizontalAnimated.js"),require("../icon/icons/animated/PlusRemoveAnimated.js"),require("../icon/icons/ArrowDownIcon.js"),require("../icon/icons/ArrowLeftIcon.js"),require("../icon/icons/ArrowNorthEastIcon.js"),require("../icon/icons/ArrowRightIcon.js"),require("../icon/icons/ArrowUpIcon.js");const t=require("../icon/icons/CalendarIcon.js");require("../icon/icons/CheckIcon.js"),require("../icon/icons/ChevronDownIcon.js"),require("../icon/icons/ChevronLeftIcon.js"),require("../icon/icons/ChevronRightIcon.js"),require("../icon/icons/ChevronUpIcon.js"),require("../icon/icons/CloseIcon.js"),require("../icon/icons/CopyIcon.js"),require("../icon/icons/DotsIcon.js"),require("../icon/icons/DragIcon.js"),require("../icon/icons/ErrorIcon.js"),require("../icon/icons/GreenCheckIcon.js"),require("../icon/icons/HamburgerIcon.js"),require("../icon/icons/InfoIcon.js"),require("../icon/icons/LinkIcon.js"),require("../icon/icons/PlusIcon.js"),require("../icon/icons/QuestionIcon.js"),require("../icon/icons/RedCrossIcon.js"),require("../icon/icons/SearchIcon.js"),require("../icon/icons/SuccessIcon.js"),require("../icon/icons/WarningIcon.js"),require("../icon/icons/MinusIcon.js"),require("../icon/icons/ThumbDownIcon.js"),require("../icon/icons/ThumbUpIcon.js"),require("../icon/icons/TrashCanIcon.js"),require("../icon/icons/PenIcon.js");const s=require("../icon-button/IconButton.js");require("../../hooks/useScreen/useScreen.js"),require("../../hooks/useId/useId.js"),require("../tooltip/Tooltip.js"),require("../tooltip/TooltipContent.js"),require("../tooltip/TooltipTrigger.js");const a=require("../input-group/InputGroup.js"),c=require("../popover/Popover.js");require("../text-input/BaseTextArea.js");const u=require("../text-input/BaseTextInput.js");require("../text-input/TextArea.js"),require("../text-input/TextInput.js");const l=require("./internal/Calendar.js"),d=require("./internal/utils.js"),p=require("./utils.js"),j=require("./validation.js"),q=o.forwardRef(((q,I)=>{const{"data-testautoid":h,id:b,className:f="",label:k="Velg dato",labelProps:m,defaultValue:v,defaultShow:C=!1,value:g,disableBeforeDate:D,disableAfterDate:x,yearsToShow:w,name:y,helpLabel:T,errorLabel:S,invalid:L,density:P,days:A,months:R,monthLabel:B,yearLabel:E,placeholder:O="dd.mm.åååå",width:_="11.25rem",onChange:N,onBlur:U,onFocus:V,onKeyDown:F,action:W,showCalendarLabel:G="Åpne kalender",hideCalendarLabel:H="Lukk kalender",supportLabelProps:K,tooltipProps:M,...z}=q;"production"!==process.env.NODE_ENV&&g&&v&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const Q=p.parseDateString(D),J=Q?n.startOfDay(Q):void 0,X=p.parseDateString(x),Y=X?n.startOfDay(X):void 0,[Z,$]=o.useState(d.getInitialDate(g,v,J,Y)),[ee,re]=o.useState(null),[ne,oe]=o.useState(C),ie=o.useRef(null),te=o.useRef(null),se=o.useRef(null),ae=o.useRef(null),ce=o.useCallback((e=>{ae.current=e,I&&("function"==typeof I?I(e):I.current=e)}),[ae,I]),ue=o.useCallback((e=>{V&&te.current&&(te.current.contains(e.relatedTarget)||V(e,Z,{error:ee,value:e.target.value}))}),[V,Z,ee]),le=o.useCallback((e=>{U&&U(e,Z,{error:ee,value:e.target.value})}),[U,Z,ee]),de=o.useCallback((e=>{"Escape"===e.key&&(oe(!1),e.preventDefault(),e.stopPropagation()),null!=W&&W.onKeyDown&&W.onKeyDown(e)}),[oe,W]),pe=o.useCallback((e=>{let r=null,n=null;if(e.target.value){const o=p.parseDateString(e.target.value);o?J&&!j.isWithinLowerBound(o,J)?n="OUTSIDE_LOWER_BOUND":Y&&!j.isWithinUpperBound(o,Y)?n="OUTSIDE_UPPER_BOUND":oe(!1):n="WRONG_FORMAT",r=o||null}re(n),$(r),N&&N(e,r,{error:n,value:e.target.value})}),[N,re,$,oe,J,Y]),je=o.useCallback((e=>{i.flushSync((()=>{oe(!ne)}));const r=ie.current,n=r&&r.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>n&&n.focus())),null!=W&&W.onClick&&W.onClick(e)}),[oe,ne,W,ie]),qe=o.useCallback((({date:e})=>{if(oe(!1),$(e),ae.current){const r=ae.current;r.value=p.formatInput(e);const n=document.createEvent("HTMLEvents");n.initEvent("input",!0,!1),r.dispatchEvent(n),r.focus(),N&&N(n,e,{error:null,value:r.value})}}),[oe,$,N]),Ie=o.useCallback((e=>{e.preventDefault(),oe(!1),se.current&&se.current.focus()}),[oe]);return e.jsx(a.InputGroup,{id:b,className:r.clsx("jkl-datepicker",f,{"jkl-datepicker--open":ne}),...z,ref:te,label:k,labelProps:m,density:P,helpLabel:T,errorLabel:S,supportLabelProps:K,tooltipProps:M,render:r=>e.jsx(u.BaseTextInput,{ref:ce,"data-testid":"jkl-datepicker__input","data-testautoid":h,className:"jkl-datepicker__input",name:y,defaultValue:v,density:P,value:g,type:"text",placeholder:O,width:_,onFocus:ue,onBlur:le,onChange:pe,actionButton:e.jsxs(c,{positionReference:ae,open:ne,onOpenChange:()=>oe(!ne),offset:8,children:[e.jsx(c.Trigger,{...W,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ne?H:G,tabIndex:0,onClick:je,onKeyDown:de,asChild:!0,children:e.jsx(s.IconButton,{children:e.jsx(t.CalendarIcon,{})})}),e.jsx(c.Content,{initialFocus:-1,padding:24,children:e.jsx(l.Calendar,{ref:ie,density:P,date:Z,minDate:J,maxDate:Y,days:A,months:R,monthLabel:B,yearLabel:E,yearsToShow:w,onDateSelected:qe,onTabOutside:Ie})})]}),...r})})}));q.displayName="DatePicker",exports.DatePicker=q;
 //# sourceMappingURL=DatePicker.js.map

package/build/cjs/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n    ChangeEvent,\n    FocusEvent,\n    KeyboardEvent,\n    MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { InputGroup } from \"../input-group\";\nimport { Popover } from \"../popover\";\nimport { BaseTextInput } from \"../text-input\";\nimport { Calendar } from \"./internal/Calendar\";\nimport { getInitialDate, DateInfo } from \"./internal/utils\";\nimport { DatePickerProps, DateValidationError } from \"./types\";\nimport { formatInput, parseDateString } from \"./utils\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>((props, forwardedInputRef) => {\n    const {\n        \"data-testautoid\": testAutoId,\n        id,\n        className = \"\",\n        label = \"Velg dato\",\n        labelProps,\n        defaultValue,\n        defaultShow = false,\n        value,\n        disableBeforeDate: disableBefore,\n        disableAfterDate: disableAfter,\n        yearsToShow,\n        name,\n        helpLabel,\n        errorLabel,\n        invalid,\n        density,\n        days,\n        months,\n        monthLabel,\n        yearLabel,\n        placeholder = \"dd.mm.åååå\",\n        width = \"11.25rem\",\n        onChange,\n        onBlur,\n        onFocus,\n        onKeyDown,\n        action,\n        showCalendarLabel = \"Åpne kalender\",\n        hideCalendarLabel = \"Lukk kalender\",\n        supportLabelProps,\n        tooltipProps,\n        ...rest\n    } = props;\n\n    if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n        console.warn(\n            \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n        );\n    }\n    /// Input state\n\n    const disableBeforeDate = parseDateString(disableBefore);\n    const minDate = disableBeforeDate ? startOfDay(disableBeforeDate) : undefined;\n    const disableAfterDate = parseDateString(disableAfter);\n    const maxDate = disableAfterDate ? startOfDay(disableAfterDate) : undefined;\n\n    const [date, setDate] = useState(getInitialDate(value, defaultValue, minDate, maxDate));\n    const [error, setError] = useState<DateValidationError | null>(null);\n\n    /// Calendar state\n\n    const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n    const calendarRef = useRef<HTMLDivElement>(null);\n    const datepickerRef = useRef<HTMLDivElement>(null);\n\n    /// Input events\n\n    const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n    const unifiedInputRef = useCallback(\n        (instance: HTMLInputElement | null) => {\n            inputRef.current = instance;\n            if (forwardedInputRef) {\n                if (typeof forwardedInputRef === \"function\") {\n                    forwardedInputRef(instance);\n                } else {\n                    forwardedInputRef.current = instance;\n                }\n            }\n        },\n        [inputRef, forwardedInputRef],\n    );\n\n    const handleFocus = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (!onFocus || !datepickerRef.current) {\n                return;\n            }\n\n            const nextFocusIsInside = datepickerRef.current.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInside) {\n                onFocus(e, date, { error, value: e.target.value });\n            }\n        },\n        [onFocus, date, error],\n    );\n\n    const handleBlur = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (onBlur) {\n                onBlur(e, date, { error, value: e.target.value });\n            }\n        },\n        [onBlur, date, error],\n    );\n\n    const handleKeyDownAction = useCallback(\n        (e: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === \"Escape\") {\n                setShowCalendar(false);\n                e.preventDefault();\n                e.stopPropagation();\n            }\n\n            if (action?.onKeyDown) {\n                action.onKeyDown(e);\n            }\n        },\n        [setShowCalendar, action],\n    );\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            let nextDate: Date | null = null;\n            let nextError: DateValidationError | null = null;\n\n            if (e.target.value) {\n                const val = parseDateString(e.target.value);\n                if (!val) {\n                    nextError = \"WRONG_FORMAT\";\n                } else if (minDate && !isWithinLowerBound(val, minDate)) {\n                    nextError = \"OUTSIDE_LOWER_BOUND\";\n                } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n                    nextError = \"OUTSIDE_UPPER_BOUND\";\n                } else {\n                    setShowCalendar(false);\n                }\n                nextDate = val || null;\n            }\n\n            setError(nextError);\n            setDate(nextDate);\n\n            if (onChange) {\n                onChange(e, nextDate, { error: nextError, value: e.target.value });\n            }\n        },\n        [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n    );\n\n    /// Calendar events\n\n    const clickCalendar = useCallback(\n        (e: MouseEvent<HTMLButtonElement>) => {\n            flushSync(() => {\n                setShowCalendar(!showCalendar);\n            });\n\n            const calendarEl = calendarRef.current;\n            const button = calendarEl && (calendarEl.querySelector('[aria-pressed=\"true\"]') as HTMLButtonElement);\n            button && button.focus();\n\n            if (action?.onClick) {\n                action.onClick(e);\n            }\n        },\n        [setShowCalendar, showCalendar, action, calendarRef],\n    );\n\n    const handleClickCalendarDay = useCallback(\n        ({ date }: DateInfo) => {\n            setShowCalendar(false);\n            setDate(date);\n\n            if (inputRef.current) {\n                const node = inputRef.current;\n\n                node.value = formatInput(date);\n\n                // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                const event = document.createEvent(\"HTMLEvents\");\n                event.initEvent(\"input\", true, false);\n                node.dispatchEvent(event);\n\n                node.focus();\n\n                if (onChange) {\n                    // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                    // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                    // så kan det hende du må utvide denne for å dekke behovet ditt.\n                    onChange(event as unknown as ChangeEvent<HTMLInputElement>, date, {\n                        error: null,\n                        value: node.value,\n                    });\n                }\n            }\n        },\n        [setShowCalendar, setDate, onChange],\n    );\n\n    const handleTabOutsideCalendar = useCallback(\n        (e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current && iconButtonRef.current.focus();\n        },\n        [setShowCalendar],\n    );\n\n    return (\n        <InputGroup\n            id={id}\n            className={clsx(\"jkl-datepicker\", className, {\n                \"jkl-datepicker--open\": showCalendar,\n            })}\n            {...rest}\n            ref={datepickerRef}\n            label={label}\n            labelProps={labelProps}\n            density={density}\n            helpLabel={helpLabel}\n            errorLabel={errorLabel}\n            supportLabelProps={supportLabelProps}\n            tooltipProps={tooltipProps}\n            render={(inputProps) => (\n                <BaseTextInput\n                    ref={unifiedInputRef}\n                    data-testid=\"jkl-datepicker__input\"\n                    data-testautoid={testAutoId}\n                    className=\"jkl-datepicker__input\"\n                    name={name}\n                    defaultValue={defaultValue}\n                    density={density}\n                    value={value}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    width={width}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    onChange={handleChange}\n                    actionButton={\n                        <Popover\n                            positionReference={inputRef}\n                            open={showCalendar}\n                            onOpenChange={() => setShowCalendar(!showCalendar)}\n                            offset={8}\n                        >\n                            <Popover.Trigger\n                                {...action}\n                                data-testid=\"jkl-datepicker__trigger\"\n                                className=\"jkl-text-input-action-button\"\n                                title={showCalendar ? hideCalendarLabel : showCalendarLabel}\n                                tabIndex={0}\n                                onClick={clickCalendar}\n                                onKeyDown={handleKeyDownAction}\n                                asChild\n                            >\n                                <IconButton>\n                                    <CalendarIcon />\n                                </IconButton>\n                            </Popover.Trigger>\n                            <Popover.Content initialFocus={-1} padding={24}>\n                                <Calendar\n                                    ref={calendarRef}\n                                    density={density}\n                                    date={date}\n                                    minDate={minDate}\n                                    maxDate={maxDate}\n                                    days={days}\n                                    months={months}\n                                    monthLabel={monthLabel}\n                                    yearLabel={yearLabel}\n                                    yearsToShow={yearsToShow}\n                                    onDateSelected={handleClickCalendarDay}\n                                    onTabOutside={handleTabOutsideCalendar}\n                                />\n                            </Popover.Content>\n                        </Popover>\n                    }\n                    {...inputProps}\n                />\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltipProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n    ChangeEvent,\n    FocusEvent,\n    KeyboardEvent,\n    MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { InputGroup } from \"../input-group\";\nimport { Popover } from \"../popover\";\nimport { BaseTextInput } from \"../text-input\";\nimport { Calendar } from \"./internal/Calendar\";\nimport { getInitialDate, DateInfo } from \"./internal/utils\";\nimport { DatePickerProps, DateValidationError } from \"./types\";\nimport { formatInput, parseDateString } from \"./utils\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>((props, forwardedInputRef) => {\n    const {\n        \"data-testautoid\": testAutoId,\n        id,\n        className = \"\",\n        label = \"Velg dato\",\n        labelProps,\n        defaultValue,\n        defaultShow = false,\n        value,\n        disableBeforeDate: disableBefore,\n        disableAfterDate: disableAfter,\n        yearsToShow,\n        name,\n        helpLabel,\n        errorLabel,\n        invalid,\n        density,\n        days,\n        months,\n        monthLabel,\n        yearLabel,\n        placeholder = \"dd.mm.åååå\",\n        width = \"11.25rem\",\n        onChange,\n        onBlur,\n        onFocus,\n        onKeyDown,\n        action,\n        showCalendarLabel = \"Åpne kalender\",\n        hideCalendarLabel = \"Lukk kalender\",\n        supportLabelProps,\n        tooltipProps,\n        ...rest\n    } = props;\n\n    if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n        console.warn(\n            \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n        );\n    }\n    /// Input state\n\n    const disableBeforeDate = parseDateString(disableBefore);\n    const minDate = disableBeforeDate ? startOfDay(disableBeforeDate) : undefined;\n    const disableAfterDate = parseDateString(disableAfter);\n    const maxDate = disableAfterDate ? startOfDay(disableAfterDate) : undefined;\n\n    const [date, setDate] = useState(getInitialDate(value, defaultValue, minDate, maxDate));\n    const [error, setError] = useState<DateValidationError | null>(null);\n\n    /// Calendar state\n\n    const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n    const calendarRef = useRef<HTMLDivElement>(null);\n    const datepickerRef = useRef<HTMLDivElement>(null);\n\n    /// Input events\n\n    const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n    const unifiedInputRef = useCallback(\n        (instance: HTMLInputElement | null) => {\n            inputRef.current = instance;\n            if (forwardedInputRef) {\n                if (typeof forwardedInputRef === \"function\") {\n                    forwardedInputRef(instance);\n                } else {\n                    forwardedInputRef.current = instance;\n                }\n            }\n        },\n        [inputRef, forwardedInputRef],\n    );\n\n    const handleFocus = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (!onFocus || !datepickerRef.current) {\n                return;\n            }\n\n            const nextFocusIsInside = datepickerRef.current.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInside) {\n                onFocus(e, date, { error, value: e.target.value });\n            }\n        },\n        [onFocus, date, error],\n    );\n\n    const handleBlur = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (onBlur) {\n                onBlur(e, date, { error, value: e.target.value });\n            }\n        },\n        [onBlur, date, error],\n    );\n\n    const handleKeyDownAction = useCallback(\n        (e: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === \"Escape\") {\n                setShowCalendar(false);\n                e.preventDefault();\n                e.stopPropagation();\n            }\n\n            if (action?.onKeyDown) {\n                action.onKeyDown(e);\n            }\n        },\n        [setShowCalendar, action],\n    );\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            let nextDate: Date | null = null;\n            let nextError: DateValidationError | null = null;\n\n            if (e.target.value) {\n                const val = parseDateString(e.target.value);\n                if (!val) {\n                    nextError = \"WRONG_FORMAT\";\n                } else if (minDate && !isWithinLowerBound(val, minDate)) {\n                    nextError = \"OUTSIDE_LOWER_BOUND\";\n                } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n                    nextError = \"OUTSIDE_UPPER_BOUND\";\n                } else {\n                    setShowCalendar(false);\n                }\n                nextDate = val || null;\n            }\n\n            setError(nextError);\n            setDate(nextDate);\n\n            if (onChange) {\n                onChange(e, nextDate, { error: nextError, value: e.target.value });\n            }\n        },\n        [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n    );\n\n    /// Calendar events\n\n    const clickCalendar = useCallback(\n        (e: MouseEvent<HTMLButtonElement>) => {\n            flushSync(() => {\n                setShowCalendar(!showCalendar);\n            });\n\n            const calendarEl = calendarRef.current;\n            const button = calendarEl && (calendarEl.querySelector('[aria-pressed=\"true\"]') as HTMLButtonElement);\n            // Make sure the popover-modal is correctly positioned before focusing a button\n            // so we avoid accidentally scrolling to the top of the page\n            window.requestAnimationFrame(() => button && button.focus());\n\n            if (action?.onClick) {\n                action.onClick(e);\n            }\n        },\n        [setShowCalendar, showCalendar, action, calendarRef],\n    );\n\n    const handleClickCalendarDay = useCallback(\n        ({ date }: DateInfo) => {\n            setShowCalendar(false);\n            setDate(date);\n\n            if (inputRef.current) {\n                const node = inputRef.current;\n\n                node.value = formatInput(date);\n\n                // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                const event = document.createEvent(\"HTMLEvents\");\n                event.initEvent(\"input\", true, false);\n                node.dispatchEvent(event);\n\n                node.focus();\n\n                if (onChange) {\n                    // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                    // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                    // så kan det hende du må utvide denne for å dekke behovet ditt.\n                    onChange(event as unknown as ChangeEvent<HTMLInputElement>, date, {\n                        error: null,\n                        value: node.value,\n                    });\n                }\n            }\n        },\n        [setShowCalendar, setDate, onChange],\n    );\n\n    const handleTabOutsideCalendar = useCallback(\n        (e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current && iconButtonRef.current.focus();\n        },\n        [setShowCalendar],\n    );\n\n    return (\n        <InputGroup\n            id={id}\n            className={clsx(\"jkl-datepicker\", className, {\n                \"jkl-datepicker--open\": showCalendar,\n            })}\n            {...rest}\n            ref={datepickerRef}\n            label={label}\n            labelProps={labelProps}\n            density={density}\n            helpLabel={helpLabel}\n            errorLabel={errorLabel}\n            supportLabelProps={supportLabelProps}\n            tooltipProps={tooltipProps}\n            render={(inputProps) => (\n                <BaseTextInput\n                    ref={unifiedInputRef}\n                    data-testid=\"jkl-datepicker__input\"\n                    data-testautoid={testAutoId}\n                    className=\"jkl-datepicker__input\"\n                    name={name}\n                    defaultValue={defaultValue}\n                    density={density}\n                    value={value}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    width={width}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    onChange={handleChange}\n                    actionButton={\n                        <Popover\n                            positionReference={inputRef}\n                            open={showCalendar}\n                            onOpenChange={() => setShowCalendar(!showCalendar)}\n                            offset={8}\n                        >\n                            <Popover.Trigger\n                                {...action}\n                                data-testid=\"jkl-datepicker__trigger\"\n                                className=\"jkl-text-input-action-button\"\n                                title={showCalendar ? hideCalendarLabel : showCalendarLabel}\n                                tabIndex={0}\n                                onClick={clickCalendar}\n                                onKeyDown={handleKeyDownAction}\n                                asChild\n                            >\n                                <IconButton>\n                                    <CalendarIcon />\n                                </IconButton>\n                            </Popover.Trigger>\n                            <Popover.Content initialFocus={-1} padding={24}>\n                                <Calendar\n                                    ref={calendarRef}\n                                    density={density}\n                                    date={date}\n                                    minDate={minDate}\n                                    maxDate={maxDate}\n                                    days={days}\n                                    months={months}\n                                    monthLabel={monthLabel}\n                                    yearLabel={yearLabel}\n                                    yearsToShow={yearsToShow}\n                                    onDateSelected={handleClickCalendarDay}\n                                    onTabOutside={handleTabOutsideCalendar}\n                                />\n                            </Popover.Content>\n                        </Popover>\n                    }\n                    {...inputProps}\n                />\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltipProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

package/build/es/components/datepicker/DatePicker.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as n}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{startOfDay as t}from"date-fns";import{forwardRef as r,useState as i,useRef as s,useCallback as a}from"react";import{flushSync as c}from"react-dom";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import{CalendarIcon as l}from"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as p}from"../icon-button/IconButton.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import{InputGroup as u}from"../input-group/InputGroup.js";import m from"../popover/Popover.js";import"../text-input/BaseTextArea.js";import{BaseTextInput as d}from"../text-input/BaseTextInput.js";import"../text-input/TextArea.js";import"../text-input/TextInput.js";import{Calendar as j}from"./internal/Calendar.js";import{getInitialDate as I}from"./internal/utils.js";import{parseDateString as f,formatInput as h}from"./utils.js";import{isWithinLowerBound as v,isWithinUpperBound as k}from"./validation.js";const b=r(((r,b)=>{const{"data-testautoid":g,id:D,className:C="",label:w="Velg dato",labelProps:y,defaultValue:T,defaultShow:L=!1,value:x,disableBeforeDate:P,disableAfterDate:A,yearsToShow:S,name:B,helpLabel:E,errorLabel:_,invalid:N,density:O,days:R,months:U,monthLabel:V,yearLabel:W,placeholder:F="dd.mm.åååå",width:G="11.25rem",onChange:H,onBlur:K,onFocus:M,onKeyDown:q,action:z,showCalendarLabel:Q="Åpne kalender",hideCalendarLabel:J="Lukk kalender",supportLabelProps:X,tooltipProps:Y,...Z}=r;"production"!==process.env.NODE_ENV&&x&&T&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const $=f(P),oo=$?t($):void 0,no=f(A),eo=no?t(no):void 0,[to,ro]=i(I(x,T,oo,eo)),[io,so]=i(null),[ao,co]=i(L),lo=s(null),po=s(null),uo=s(null),mo=s(null),jo=a((o=>{mo.current=o,b&&("function"==typeof b?b(o):b.current=o)}),[mo,b]),Io=a((o=>{M&&po.current&&(po.current.contains(o.relatedTarget)||M(o,to,{error:io,value:o.target.value}))}),[M,to,io]),fo=a((o=>{K&&K(o,to,{error:io,value:o.target.value})}),[K,to,io]),ho=a((o=>{"Escape"===o.key&&(co(!1),o.preventDefault(),o.stopPropagation()),null!=z&&z.onKeyDown&&z.onKeyDown(o)}),[co,z]),vo=a((o=>{let n=null,e=null;if(o.target.value){const t=f(o.target.value);t?oo&&!v(t,oo)?e="OUTSIDE_LOWER_BOUND":eo&&!k(t,eo)?e="OUTSIDE_UPPER_BOUND":co(!1):e="WRONG_FORMAT",n=t||null}so(e),ro(n),H&&H(o,n,{error:e,value:o.target.value})}),[H,so,ro,co,oo,eo]),ko=a((o=>{c((()=>{co(!ao)}));const n=lo.current,e=n&&n.querySelector('[aria-pressed="true"]');e&&e.focus(),null!=z&&z.onClick&&z.onClick(o)}),[co,ao,z,lo]),bo=a((({date:o})=>{if(co(!1),ro(o),mo.current){const n=mo.current;n.value=h(o);const e=document.createEvent("HTMLEvents");e.initEvent("input",!0,!1),n.dispatchEvent(e),n.focus(),H&&H(e,o,{error:null,value:n.value})}}),[co,ro,H]),go=a((o=>{o.preventDefault(),co(!1),uo.current&&uo.current.focus()}),[co]);return o(u,{id:D,className:e("jkl-datepicker",C,{"jkl-datepicker--open":ao}),...Z,ref:po,label:w,labelProps:y,density:O,helpLabel:E,errorLabel:_,supportLabelProps:X,tooltipProps:Y,render:e=>o(d,{ref:jo,"data-testid":"jkl-datepicker__input","data-testautoid":g,className:"jkl-datepicker__input",name:B,defaultValue:T,density:O,value:x,type:"text",placeholder:F,width:G,onFocus:Io,onBlur:fo,onChange:vo,actionButton:n(m,{positionReference:mo,open:ao,onOpenChange:()=>co(!ao),offset:8,children:[o(m.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ao?J:Q,tabIndex:0,onClick:ko,onKeyDown:ho,asChild:!0,children:o(p,{children:o(l,{})})}),o(m.Content,{initialFocus:-1,padding:24,children:o(j,{ref:lo,density:O,date:to,minDate:oo,maxDate:eo,days:R,months:U,monthLabel:V,yearLabel:W,yearsToShow:S,onDateSelected:bo,onTabOutside:go})})]}),...e})})}));b.displayName="DatePicker";export{b as DatePicker};
+import{jsx as o,jsxs as n}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{startOfDay as t}from"date-fns";import{forwardRef as r,useState as i,useRef as s,useCallback as a}from"react";import{flushSync as c}from"react-dom";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import{CalendarIcon as l}from"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";import{IconButton as p}from"../icon-button/IconButton.js";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import"../tooltip/Tooltip.js";import"../tooltip/TooltipContent.js";import"../tooltip/TooltipTrigger.js";import{InputGroup as u}from"../input-group/InputGroup.js";import m from"../popover/Popover.js";import"../text-input/BaseTextArea.js";import{BaseTextInput as d}from"../text-input/BaseTextInput.js";import"../text-input/TextArea.js";import"../text-input/TextInput.js";import{Calendar as j}from"./internal/Calendar.js";import{getInitialDate as I}from"./internal/utils.js";import{parseDateString as f,formatInput as h}from"./utils.js";import{isWithinLowerBound as v,isWithinUpperBound as k}from"./validation.js";const b=r(((r,b)=>{const{"data-testautoid":g,id:D,className:C="",label:w="Velg dato",labelProps:y,defaultValue:T,defaultShow:L=!1,value:x,disableBeforeDate:P,disableAfterDate:A,yearsToShow:S,name:B,helpLabel:E,errorLabel:_,invalid:N,density:O,days:R,months:U,monthLabel:V,yearLabel:F,placeholder:W="dd.mm.åååå",width:G="11.25rem",onChange:H,onBlur:K,onFocus:M,onKeyDown:q,action:z,showCalendarLabel:Q="Åpne kalender",hideCalendarLabel:J="Lukk kalender",supportLabelProps:X,tooltipProps:Y,...Z}=r;"production"!==process.env.NODE_ENV&&x&&T&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const $=f(P),oo=$?t($):void 0,no=f(A),eo=no?t(no):void 0,[to,ro]=i(I(x,T,oo,eo)),[io,so]=i(null),[ao,co]=i(L),lo=s(null),po=s(null),uo=s(null),mo=s(null),jo=a((o=>{mo.current=o,b&&("function"==typeof b?b(o):b.current=o)}),[mo,b]),Io=a((o=>{M&&po.current&&(po.current.contains(o.relatedTarget)||M(o,to,{error:io,value:o.target.value}))}),[M,to,io]),fo=a((o=>{K&&K(o,to,{error:io,value:o.target.value})}),[K,to,io]),ho=a((o=>{"Escape"===o.key&&(co(!1),o.preventDefault(),o.stopPropagation()),null!=z&&z.onKeyDown&&z.onKeyDown(o)}),[co,z]),vo=a((o=>{let n=null,e=null;if(o.target.value){const t=f(o.target.value);t?oo&&!v(t,oo)?e="OUTSIDE_LOWER_BOUND":eo&&!k(t,eo)?e="OUTSIDE_UPPER_BOUND":co(!1):e="WRONG_FORMAT",n=t||null}so(e),ro(n),H&&H(o,n,{error:e,value:o.target.value})}),[H,so,ro,co,oo,eo]),ko=a((o=>{c((()=>{co(!ao)}));const n=lo.current,e=n&&n.querySelector('[aria-pressed="true"]');window.requestAnimationFrame((()=>e&&e.focus())),null!=z&&z.onClick&&z.onClick(o)}),[co,ao,z,lo]),bo=a((({date:o})=>{if(co(!1),ro(o),mo.current){const n=mo.current;n.value=h(o);const e=document.createEvent("HTMLEvents");e.initEvent("input",!0,!1),n.dispatchEvent(e),n.focus(),H&&H(e,o,{error:null,value:n.value})}}),[co,ro,H]),go=a((o=>{o.preventDefault(),co(!1),uo.current&&uo.current.focus()}),[co]);return o(u,{id:D,className:e("jkl-datepicker",C,{"jkl-datepicker--open":ao}),...Z,ref:po,label:w,labelProps:y,density:O,helpLabel:E,errorLabel:_,supportLabelProps:X,tooltipProps:Y,render:e=>o(d,{ref:jo,"data-testid":"jkl-datepicker__input","data-testautoid":g,className:"jkl-datepicker__input",name:B,defaultValue:T,density:O,value:x,type:"text",placeholder:W,width:G,onFocus:Io,onBlur:fo,onChange:vo,actionButton:n(m,{positionReference:mo,open:ao,onOpenChange:()=>co(!ao),offset:8,children:[o(m.Trigger,{...z,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ao?J:Q,tabIndex:0,onClick:ko,onKeyDown:ho,asChild:!0,children:o(p,{children:o(l,{})})}),o(m.Content,{initialFocus:-1,padding:24,children:o(j,{ref:lo,density:O,date:to,minDate:oo,maxDate:eo,days:R,months:U,monthLabel:V,yearLabel:F,yearsToShow:S,onDateSelected:bo,onTabOutside:go})})]}),...e})})}));b.displayName="DatePicker";export{b as DatePicker};
 //# sourceMappingURL=DatePicker.js.map

package/build/es/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n    ChangeEvent,\n    FocusEvent,\n    KeyboardEvent,\n    MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { InputGroup } from \"../input-group\";\nimport { Popover } from \"../popover\";\nimport { BaseTextInput } from \"../text-input\";\nimport { Calendar } from \"./internal/Calendar\";\nimport { getInitialDate, DateInfo } from \"./internal/utils\";\nimport { DatePickerProps, DateValidationError } from \"./types\";\nimport { formatInput, parseDateString } from \"./utils\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>((props, forwardedInputRef) => {\n    const {\n        \"data-testautoid\": testAutoId,\n        id,\n        className = \"\",\n        label = \"Velg dato\",\n        labelProps,\n        defaultValue,\n        defaultShow = false,\n        value,\n        disableBeforeDate: disableBefore,\n        disableAfterDate: disableAfter,\n        yearsToShow,\n        name,\n        helpLabel,\n        errorLabel,\n        invalid,\n        density,\n        days,\n        months,\n        monthLabel,\n        yearLabel,\n        placeholder = \"dd.mm.åååå\",\n        width = \"11.25rem\",\n        onChange,\n        onBlur,\n        onFocus,\n        onKeyDown,\n        action,\n        showCalendarLabel = \"Åpne kalender\",\n        hideCalendarLabel = \"Lukk kalender\",\n        supportLabelProps,\n        tooltipProps,\n        ...rest\n    } = props;\n\n    if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n        console.warn(\n            \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n        );\n    }\n    /// Input state\n\n    const disableBeforeDate = parseDateString(disableBefore);\n    const minDate = disableBeforeDate ? startOfDay(disableBeforeDate) : undefined;\n    const disableAfterDate = parseDateString(disableAfter);\n    const maxDate = disableAfterDate ? startOfDay(disableAfterDate) : undefined;\n\n    const [date, setDate] = useState(getInitialDate(value, defaultValue, minDate, maxDate));\n    const [error, setError] = useState<DateValidationError | null>(null);\n\n    /// Calendar state\n\n    const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n    const calendarRef = useRef<HTMLDivElement>(null);\n    const datepickerRef = useRef<HTMLDivElement>(null);\n\n    /// Input events\n\n    const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n    const unifiedInputRef = useCallback(\n        (instance: HTMLInputElement | null) => {\n            inputRef.current = instance;\n            if (forwardedInputRef) {\n                if (typeof forwardedInputRef === \"function\") {\n                    forwardedInputRef(instance);\n                } else {\n                    forwardedInputRef.current = instance;\n                }\n            }\n        },\n        [inputRef, forwardedInputRef],\n    );\n\n    const handleFocus = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (!onFocus || !datepickerRef.current) {\n                return;\n            }\n\n            const nextFocusIsInside = datepickerRef.current.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInside) {\n                onFocus(e, date, { error, value: e.target.value });\n            }\n        },\n        [onFocus, date, error],\n    );\n\n    const handleBlur = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (onBlur) {\n                onBlur(e, date, { error, value: e.target.value });\n            }\n        },\n        [onBlur, date, error],\n    );\n\n    const handleKeyDownAction = useCallback(\n        (e: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === \"Escape\") {\n                setShowCalendar(false);\n                e.preventDefault();\n                e.stopPropagation();\n            }\n\n            if (action?.onKeyDown) {\n                action.onKeyDown(e);\n            }\n        },\n        [setShowCalendar, action],\n    );\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            let nextDate: Date | null = null;\n            let nextError: DateValidationError | null = null;\n\n            if (e.target.value) {\n                const val = parseDateString(e.target.value);\n                if (!val) {\n                    nextError = \"WRONG_FORMAT\";\n                } else if (minDate && !isWithinLowerBound(val, minDate)) {\n                    nextError = \"OUTSIDE_LOWER_BOUND\";\n                } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n                    nextError = \"OUTSIDE_UPPER_BOUND\";\n                } else {\n                    setShowCalendar(false);\n                }\n                nextDate = val || null;\n            }\n\n            setError(nextError);\n            setDate(nextDate);\n\n            if (onChange) {\n                onChange(e, nextDate, { error: nextError, value: e.target.value });\n            }\n        },\n        [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n    );\n\n    /// Calendar events\n\n    const clickCalendar = useCallback(\n        (e: MouseEvent<HTMLButtonElement>) => {\n            flushSync(() => {\n                setShowCalendar(!showCalendar);\n            });\n\n            const calendarEl = calendarRef.current;\n            const button = calendarEl && (calendarEl.querySelector('[aria-pressed=\"true\"]') as HTMLButtonElement);\n            button && button.focus();\n\n            if (action?.onClick) {\n                action.onClick(e);\n            }\n        },\n        [setShowCalendar, showCalendar, action, calendarRef],\n    );\n\n    const handleClickCalendarDay = useCallback(\n        ({ date }: DateInfo) => {\n            setShowCalendar(false);\n            setDate(date);\n\n            if (inputRef.current) {\n                const node = inputRef.current;\n\n                node.value = formatInput(date);\n\n                // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                const event = document.createEvent(\"HTMLEvents\");\n                event.initEvent(\"input\", true, false);\n                node.dispatchEvent(event);\n\n                node.focus();\n\n                if (onChange) {\n                    // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                    // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                    // så kan det hende du må utvide denne for å dekke behovet ditt.\n                    onChange(event as unknown as ChangeEvent<HTMLInputElement>, date, {\n                        error: null,\n                        value: node.value,\n                    });\n                }\n            }\n        },\n        [setShowCalendar, setDate, onChange],\n    );\n\n    const handleTabOutsideCalendar = useCallback(\n        (e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current && iconButtonRef.current.focus();\n        },\n        [setShowCalendar],\n    );\n\n    return (\n        <InputGroup\n            id={id}\n            className={clsx(\"jkl-datepicker\", className, {\n                \"jkl-datepicker--open\": showCalendar,\n            })}\n            {...rest}\n            ref={datepickerRef}\n            label={label}\n            labelProps={labelProps}\n            density={density}\n            helpLabel={helpLabel}\n            errorLabel={errorLabel}\n            supportLabelProps={supportLabelProps}\n            tooltipProps={tooltipProps}\n            render={(inputProps) => (\n                <BaseTextInput\n                    ref={unifiedInputRef}\n                    data-testid=\"jkl-datepicker__input\"\n                    data-testautoid={testAutoId}\n                    className=\"jkl-datepicker__input\"\n                    name={name}\n                    defaultValue={defaultValue}\n                    density={density}\n                    value={value}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    width={width}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    onChange={handleChange}\n                    actionButton={\n                        <Popover\n                            positionReference={inputRef}\n                            open={showCalendar}\n                            onOpenChange={() => setShowCalendar(!showCalendar)}\n                            offset={8}\n                        >\n                            <Popover.Trigger\n                                {...action}\n                                data-testid=\"jkl-datepicker__trigger\"\n                                className=\"jkl-text-input-action-button\"\n                                title={showCalendar ? hideCalendarLabel : showCalendarLabel}\n                                tabIndex={0}\n                                onClick={clickCalendar}\n                                onKeyDown={handleKeyDownAction}\n                                asChild\n                            >\n                                <IconButton>\n                                    <CalendarIcon />\n                                </IconButton>\n                            </Popover.Trigger>\n                            <Popover.Content initialFocus={-1} padding={24}>\n                                <Calendar\n                                    ref={calendarRef}\n                                    density={density}\n                                    date={date}\n                                    minDate={minDate}\n                                    maxDate={maxDate}\n                                    days={days}\n                                    months={months}\n                                    monthLabel={monthLabel}\n                                    yearLabel={yearLabel}\n                                    yearsToShow={yearsToShow}\n                                    onDateSelected={handleClickCalendarDay}\n                                    onTabOutside={handleTabOutsideCalendar}\n                                />\n                            </Popover.Content>\n                        </Popover>\n                    }\n                    {...inputProps}\n                />\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltipProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { startOfDay } from \"date-fns\";\nimport React, {\n    ChangeEvent,\n    FocusEvent,\n    KeyboardEvent,\n    MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { CalendarIcon } from \"../icon\";\nimport { IconButton } from \"../icon-button\";\nimport { InputGroup } from \"../input-group\";\nimport { Popover } from \"../popover\";\nimport { BaseTextInput } from \"../text-input\";\nimport { Calendar } from \"./internal/Calendar\";\nimport { getInitialDate, DateInfo } from \"./internal/utils\";\nimport { DatePickerProps, DateValidationError } from \"./types\";\nimport { formatInput, parseDateString } from \"./utils\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation\";\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>((props, forwardedInputRef) => {\n    const {\n        \"data-testautoid\": testAutoId,\n        id,\n        className = \"\",\n        label = \"Velg dato\",\n        labelProps,\n        defaultValue,\n        defaultShow = false,\n        value,\n        disableBeforeDate: disableBefore,\n        disableAfterDate: disableAfter,\n        yearsToShow,\n        name,\n        helpLabel,\n        errorLabel,\n        invalid,\n        density,\n        days,\n        months,\n        monthLabel,\n        yearLabel,\n        placeholder = \"dd.mm.åååå\",\n        width = \"11.25rem\",\n        onChange,\n        onBlur,\n        onFocus,\n        onKeyDown,\n        action,\n        showCalendarLabel = \"Åpne kalender\",\n        hideCalendarLabel = \"Lukk kalender\",\n        supportLabelProps,\n        tooltipProps,\n        ...rest\n    } = props;\n\n    if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n        console.warn(\n            \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n        );\n    }\n    /// Input state\n\n    const disableBeforeDate = parseDateString(disableBefore);\n    const minDate = disableBeforeDate ? startOfDay(disableBeforeDate) : undefined;\n    const disableAfterDate = parseDateString(disableAfter);\n    const maxDate = disableAfterDate ? startOfDay(disableAfterDate) : undefined;\n\n    const [date, setDate] = useState(getInitialDate(value, defaultValue, minDate, maxDate));\n    const [error, setError] = useState<DateValidationError | null>(null);\n\n    /// Calendar state\n\n    const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n    const calendarRef = useRef<HTMLDivElement>(null);\n    const datepickerRef = useRef<HTMLDivElement>(null);\n\n    /// Input events\n\n    const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n    const unifiedInputRef = useCallback(\n        (instance: HTMLInputElement | null) => {\n            inputRef.current = instance;\n            if (forwardedInputRef) {\n                if (typeof forwardedInputRef === \"function\") {\n                    forwardedInputRef(instance);\n                } else {\n                    forwardedInputRef.current = instance;\n                }\n            }\n        },\n        [inputRef, forwardedInputRef],\n    );\n\n    const handleFocus = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (!onFocus || !datepickerRef.current) {\n                return;\n            }\n\n            const nextFocusIsInside = datepickerRef.current.contains(e.relatedTarget as Node);\n            if (!nextFocusIsInside) {\n                onFocus(e, date, { error, value: e.target.value });\n            }\n        },\n        [onFocus, date, error],\n    );\n\n    const handleBlur = useCallback(\n        (e: FocusEvent<HTMLInputElement>) => {\n            if (onBlur) {\n                onBlur(e, date, { error, value: e.target.value });\n            }\n        },\n        [onBlur, date, error],\n    );\n\n    const handleKeyDownAction = useCallback(\n        (e: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (e.key === \"Escape\") {\n                setShowCalendar(false);\n                e.preventDefault();\n                e.stopPropagation();\n            }\n\n            if (action?.onKeyDown) {\n                action.onKeyDown(e);\n            }\n        },\n        [setShowCalendar, action],\n    );\n\n    const handleChange = useCallback(\n        (e: ChangeEvent<HTMLInputElement>) => {\n            let nextDate: Date | null = null;\n            let nextError: DateValidationError | null = null;\n\n            if (e.target.value) {\n                const val = parseDateString(e.target.value);\n                if (!val) {\n                    nextError = \"WRONG_FORMAT\";\n                } else if (minDate && !isWithinLowerBound(val, minDate)) {\n                    nextError = \"OUTSIDE_LOWER_BOUND\";\n                } else if (maxDate && !isWithinUpperBound(val, maxDate)) {\n                    nextError = \"OUTSIDE_UPPER_BOUND\";\n                } else {\n                    setShowCalendar(false);\n                }\n                nextDate = val || null;\n            }\n\n            setError(nextError);\n            setDate(nextDate);\n\n            if (onChange) {\n                onChange(e, nextDate, { error: nextError, value: e.target.value });\n            }\n        },\n        [onChange, setError, setDate, setShowCalendar, minDate, maxDate],\n    );\n\n    /// Calendar events\n\n    const clickCalendar = useCallback(\n        (e: MouseEvent<HTMLButtonElement>) => {\n            flushSync(() => {\n                setShowCalendar(!showCalendar);\n            });\n\n            const calendarEl = calendarRef.current;\n            const button = calendarEl && (calendarEl.querySelector('[aria-pressed=\"true\"]') as HTMLButtonElement);\n            // Make sure the popover-modal is correctly positioned before focusing a button\n            // so we avoid accidentally scrolling to the top of the page\n            window.requestAnimationFrame(() => button && button.focus());\n\n            if (action?.onClick) {\n                action.onClick(e);\n            }\n        },\n        [setShowCalendar, showCalendar, action, calendarRef],\n    );\n\n    const handleClickCalendarDay = useCallback(\n        ({ date }: DateInfo) => {\n            setShowCalendar(false);\n            setDate(date);\n\n            if (inputRef.current) {\n                const node = inputRef.current;\n\n                node.value = formatInput(date);\n\n                // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                const event = document.createEvent(\"HTMLEvents\");\n                event.initEvent(\"input\", true, false);\n                node.dispatchEvent(event);\n\n                node.focus();\n\n                if (onChange) {\n                    // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                    // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                    // så kan det hende du må utvide denne for å dekke behovet ditt.\n                    onChange(event as unknown as ChangeEvent<HTMLInputElement>, date, {\n                        error: null,\n                        value: node.value,\n                    });\n                }\n            }\n        },\n        [setShowCalendar, setDate, onChange],\n    );\n\n    const handleTabOutsideCalendar = useCallback(\n        (e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current && iconButtonRef.current.focus();\n        },\n        [setShowCalendar],\n    );\n\n    return (\n        <InputGroup\n            id={id}\n            className={clsx(\"jkl-datepicker\", className, {\n                \"jkl-datepicker--open\": showCalendar,\n            })}\n            {...rest}\n            ref={datepickerRef}\n            label={label}\n            labelProps={labelProps}\n            density={density}\n            helpLabel={helpLabel}\n            errorLabel={errorLabel}\n            supportLabelProps={supportLabelProps}\n            tooltipProps={tooltipProps}\n            render={(inputProps) => (\n                <BaseTextInput\n                    ref={unifiedInputRef}\n                    data-testid=\"jkl-datepicker__input\"\n                    data-testautoid={testAutoId}\n                    className=\"jkl-datepicker__input\"\n                    name={name}\n                    defaultValue={defaultValue}\n                    density={density}\n                    value={value}\n                    type=\"text\"\n                    placeholder={placeholder}\n                    width={width}\n                    onFocus={handleFocus}\n                    onBlur={handleBlur}\n                    onChange={handleChange}\n                    actionButton={\n                        <Popover\n                            positionReference={inputRef}\n                            open={showCalendar}\n                            onOpenChange={() => setShowCalendar(!showCalendar)}\n                            offset={8}\n                        >\n                            <Popover.Trigger\n                                {...action}\n                                data-testid=\"jkl-datepicker__trigger\"\n                                className=\"jkl-text-input-action-button\"\n                                title={showCalendar ? hideCalendarLabel : showCalendarLabel}\n                                tabIndex={0}\n                                onClick={clickCalendar}\n                                onKeyDown={handleKeyDownAction}\n                                asChild\n                            >\n                                <IconButton>\n                                    <CalendarIcon />\n                                </IconButton>\n                            </Popover.Trigger>\n                            <Popover.Content initialFocus={-1} padding={24}>\n                                <Calendar\n                                    ref={calendarRef}\n                                    density={density}\n                                    date={date}\n                                    minDate={minDate}\n                                    maxDate={maxDate}\n                                    days={days}\n                                    months={months}\n                                    monthLabel={monthLabel}\n                                    yearLabel={yearLabel}\n                                    yearsToShow={yearsToShow}\n                                    onDateSelected={handleClickCalendarDay}\n                                    onTabOutside={handleTabOutsideCalendar}\n                                />\n                            </Popover.Content>\n                        </Popover>\n                    }\n                    {...inputProps}\n                />\n            )}\n        />\n    );\n});\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","density","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltipProps","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","startOfDay","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","nextDate","nextError","val","isWithinLowerBound","isWithinUpperBound","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fremtind/jokul",
-    "version": "0.24.0",
+    "version": "0.24.1",
     "type": "module",
     "publishConfig": {
         "access": "public"
@@ -100,5 +100,5 @@
             "@babel/preset-react"
         ]
     },
-    "gitHead": "78b805878d25fc85622a386e9f7abe28eb310f72"
+    "gitHead": "50521e7ee89a410cff97dd01b32d7bdb30fc1112"
 }

package/styles/components/button/button.css

@@ -136,7 +136,7 @@
   height: 1rem;
 }
 html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
-  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-u28dvqe;
+  animation: cubic-bezier(0.6, 0.2, 0.35, 1) 250ms jkl-tertiary-flash-ug4n164;
 }
 :not([data-touchnavigation]) .jkl-button--primary:hover, :not([data-touchnavigation]) .jkl-button--secondary:hover, :not([data-touchnavigation]) .jkl-button--tertiary:hover {
   scale: 1.05;
@@ -180,7 +180,7 @@ html[data-touchnavigation] .jkl-button.jkl-button--pressed::before {
   --background-color: var(--jkl-color-background-interactive-hover);
 }
 
-@keyframes jkl-tertiary-flash-u28dvqe {
+@keyframes jkl-tertiary-flash-ug4n164 {
   0% {
     opacity: 0.5;
     scale: 1;

package/styles/components/button/button.min.css

@@ -1 +1 @@
-.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-u28dvqe .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-u28dvqe{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}
+.jkl .jkl-button,.jkl-button[data-density=comfortable],.jkl-button[data-layout-density=comfortable],[data-density=comfortable] .jkl-button,[data-layout-density=comfortable] .jkl-button{--padding-block:0.5rem;--padding-text:1.5rem;--padding-icon:1rem;--padding-icon-button:0.5rem;--padding-tertiary-inline:0.25rem;--padding-ghost-inline:0.5rem}.jkl-button[data-density=compact],.jkl-button[data-layout-density=compact],[data-density=compact] .jkl-button,[data-layout-density=compact] .jkl-button{--padding-block:0.25rem;--padding-text:0.75rem;--padding-icon:0.5rem;--padding-icon-button:0.25rem;--padding-tertiary-inline:0.125rem;--padding-ghost-inline:0.25rem;font-size:1rem;font-weight:400;line-height:1.5rem;--jkl-icon-weight:300;--jkl-icon-size:1.25rem;--jkl-icon-opsz:20;--jkl-icon-weight:500;font-weight:700}.jkl-button{--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;background-color:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);font-size:1.125rem;font-weight:400;line-height:1.75rem;max-width:100%;overflow:hidden;padding-block:var(--padding-block);padding-inline:var(--padding-text);position:relative;transition-duration:.15s;transition-property:scale;transition-timing-function:ease;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}@media (min-width:680px){.jkl-button{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300;--jkl-icon-weight:500;font-weight:700}}.jkl-button:has(.jkl-icon:first-child){padding-inline-start:var(--padding-icon)}.jkl-button:has(.jkl-icon:last-child){padding-inline-end:var(--padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:.125rem;pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-button:before{background-color:var(--text-color);border-radius:9999px;content:"";display:block;height:1rem;left:var(--jkl-touch-xcoord,50%);opacity:0;pointer-events:none;position:absolute;top:var(--jkl-touch-ycoord,50%);transform-origin:center;translate:-100%,-100%;width:1rem}html[data-touchnavigation] .jkl-button.jkl-button--pressed:before{animation:jkl-tertiary-flash-ug4n164 .25s cubic-bezier(.6,.2,.35,1)}:not([data-touchnavigation]) .jkl-button--primary:hover,:not([data-touchnavigation]) .jkl-button--secondary:hover,:not([data-touchnavigation]) .jkl-button--tertiary:hover{scale:1.05;transform-origin:center}.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}.jkl-button--secondary:after{border:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary,.jkl-button--tertiary:has(.jkl-icon:first-child),.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:var(--padding-tertiary-inline)}.jkl-button--tertiary:after,.jkl-button--tertiary:has(.jkl-icon:first-child):after,.jkl-button--tertiary:has(.jkl-icon:last-child):after{border-bottom:var(--border-width) solid var(--text-color);border-radius:var(--border-radius);content:"";inset:0;position:absolute}.jkl-button--tertiary:focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:first-child):hover,.jkl-button--tertiary:has(.jkl-icon:last-child):focus-visible,.jkl-button--tertiary:has(.jkl-icon:last-child):hover,.jkl-button--tertiary:hover{--border-width:0.125rem}.jkl-button--ghost,.jkl-button--ghost:has(.jkl-icon:first-child),.jkl-button--ghost:has(.jkl-icon:last-child){border-radius:.25rem;padding-inline:var(--padding-ghost-inline);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button--ghost:has(.jkl-icon:first-child):hover,.jkl-button--ghost:has(.jkl-icon:last-child):hover,.jkl-button--ghost:hover{--background-color:var(--jkl-color-background-interactive-hover)}@keyframes jkl-tertiary-flash-ug4n164{0%{opacity:.5;scale:1}to{opacity:0;scale:8}}

package/styles/components/checkbox/checkbox.css

@@ -32,7 +32,7 @@
   --jkl-checkbox-line-height: 1.5rem;
 }
 
-@keyframes jkl-checkbox-checked-uh1rmtg {
+@keyframes jkl-checkbox-checked-uyfh0cv {
   0% {
     width: 0;
     height: 0;
@@ -46,7 +46,7 @@
     height: 58%;
   }
 }
-@keyframes jkl-checkbox-indeterminate-uh1rmu9 {
+@keyframes jkl-checkbox-indeterminate-uyfh0cx {
   0% {
     width: 0;
   }
@@ -74,11 +74,11 @@
   top: -6px;
 }
 .jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
-  animation: jkl-checkbox-checked-uh1rmtg 150ms ease-in-out forwards;
+  animation: jkl-checkbox-checked-uyfh0cv 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
-  animation: jkl-checkbox-indeterminate-uh1rmu9 150ms ease-in-out forwards;
+  animation: jkl-checkbox-indeterminate-uyfh0cx 150ms ease-in-out forwards;
   opacity: 1;
 }
 .jkl-checkbox__input:focus-visible + .jkl-checkbox__label {

package/styles/components/checkbox/checkbox.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uh1rmtg{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uh1rmu9{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uh1rmtg .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uh1rmu9 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-uyfh0cv{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-uyfh0cx{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{opacity:0;position:absolute;top:-6px}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-uyfh0cv .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-uyfh0cx .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{--background-color:var(--jkl-color-background-input-focus);outline:2px solid var(--jkl-color-border-action);outline-offset:2px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__label:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;box-sizing:border-box;flex-shrink:0;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);margin-inline-end:var(--jkl-spacing-8);outline:none;position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease;width:var(--jkl-checkbox-box-size)}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:1.5rem}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}

package/styles/components/feedback/feedback.css

@@ -2,7 +2,7 @@
  * Do not edit directly
  * Generated on Mon, 23 Sep 2024 08:51:40 GMT
  */
-@keyframes jkl-show-udo5twk {
+@keyframes jkl-show-u353art {
   from {
     transform: translate3d(0, 0.5rem, 0);
     opacity: 0;
@@ -37,7 +37,7 @@
   }
 }
 .jkl-feedback__fade-in {
-  animation: jkl-show-udo5twk 0.25s ease-out;
+  animation: jkl-show-u353art 0.25s ease-out;
 }
 
 .jkl-feedback-smileys {

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@keyframes jkl-show-udo5twk{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-udo5twk .25s ease-out}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}
+@keyframes jkl-show-u353art{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:1.125rem;font-weight:400;line-height:1.75rem;margin-bottom:1rem;--jkl-icon-weight:300}@media (min-width:680px){.jkl-feedback__step-counter{font-size:1.25rem;font-weight:400;line-height:2rem;--jkl-icon-weight:300}}.jkl-feedback__fade-in{animation:jkl-show-u353art .25s ease-out}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:.5rem;max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:after{box-shadow:0 0 0 .125rem currentColor;inset:-.125rem -.125rem -.125rem -.125rem}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}html:not([data-mousenavigation]):not([data-touchnavigation]) input:focus+.jkl-feedback-smiley-option:after,input:checked+.jkl-feedback-smiley-option:before{opacity:1}

package/styles/components/input-group/input-group.css

@@ -78,7 +78,7 @@
   --color: var(--jkl-color-text-default);
 }
 .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-u3j2hyv forwards;
+  animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ubri857 forwards;
 }
 .jkl-form-support-label--sr-only {
   border: 0 !important;
@@ -153,7 +153,7 @@
   white-space: nowrap !important; /* 3 */
 }
 
-@keyframes jkl-support-icon-entrance-u3j2hyv {
+@keyframes jkl-support-icon-entrance-ubri857 {
   0% {
     margin-right: 0;
     opacity: 0;

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-u3j2hyv .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-u3j2hyv{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}
+.jkl-field-group{border-style:none}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert}.jkl-field-group,.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-form-support-label-font-size:var(--jkl-small-font-size);--jkl-form-support-label-line-height:var(--jkl-small-line-height);--jkl-form-support-label-font-weight:var(--jkl-small-font-weight);--jkl-form-support-label-margin:0.5rem 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0}[data-density=compact],[data-layout-density=compact]{--jkl-form-support-label-icon-size:1.375rem;--jkl-form-support-label-icon-margin:0 -1.375rem -0.3125rem 0}.jkl-form-support-label{--color:var(--jkl-color-text-subdued);color:var(--color);display:flex;font-size:var(--jkl-form-support-label-font-size);font-weight:var(--jkl-form-support-label-font-weight);line-height:var(--jkl-form-support-label-line-height);margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{stroke:CanvasText;fill:Canvas}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-ubri857 .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 1rem -0.0625rem;--jkl-label-small-font-size:var(--jkl-small-font-size);--jkl-label-small-line-height:var(--jkl-small-line-height);--jkl-label-small-font-weight:var(--jkl-small-font-weight);--jkl-label-medium-font-size:var(--jkl-body-font-size);--jkl-label-medium-line-height:var(--jkl-body-line-height);--jkl-label-medium-font-weight:var(--jkl-body-font-weight);--jkl-label-large-font-size:var(--jkl-heading-2-font-size);--jkl-label-large-line-height:var(--jkl-heading-2-line-height);--jkl-label-large-font-weight:var(--jkl-heading-2-font-weight)}[data-density=compact],[data-layout-density=compact]{--jkl-label-small-margin:0 0 0.25rem 0;--jkl-label-medium-margin:0 0 0.5rem 0;--jkl-label-large-margin:0 0 0.75rem -0.0625rem}.jkl-label{color:var(--jkl-color-text-default);display:block;margin-left:0}.jkl-label--small{font-size:var(--jkl-label-small-font-size);font-weight:var(--jkl-label-small-font-weight);line-height:var(--jkl-label-small-line-height);margin:var(--jkl-label-small-margin)}.jkl-label--medium{font-size:var(--jkl-label-medium-font-size);font-weight:var(--jkl-label-medium-font-weight);line-height:var(--jkl-label-medium-line-height);margin:var(--jkl-label-medium-margin)}.jkl-label--large{font-size:var(--jkl-label-large-font-size);font-weight:var(--jkl-label-large-font-weight);line-height:var(--jkl-label-large-line-height);margin:var(--jkl-label-large-margin)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}@keyframes jkl-support-icon-entrance-ubri857{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{stroke:ButtonText;fill:ButtonFace}}

package/styles/components/loader/loader.css

@@ -17,15 +17,15 @@
   animation: 2500ms linear infinite;
 }
 .jkl-loader__dot--left {
-  animation-name: jkl-loader-left-spin-uekw5uo;
+  animation-name: jkl-loader-left-spin-uvt0oqf;
   margin-right: 1.71em;
 }
 .jkl-loader__dot--middle {
-  animation-name: jkl-loader-middle-spin-uekw5v3;
+  animation-name: jkl-loader-middle-spin-uvt0ord;
   margin-right: 1.9em;
 }
 .jkl-loader__dot--right {
-  animation-name: jkl-loader-right-spin-uekw5ve;
+  animation-name: jkl-loader-right-spin-uvt0orl;
 }
 @media screen and (forced-colors: active) {
   .jkl-loader__dot {
@@ -53,7 +53,7 @@
   margin-right: 0.3em;
 }
 
-@keyframes jkl-loader-left-spin-uekw5uo {
+@keyframes jkl-loader-left-spin-uvt0oqf {
   0% {
     transform: rotate(0) scale(0);
   }
@@ -67,7 +67,7 @@
     transform: rotate(180deg) scale(0);
   }
 }
-@keyframes jkl-loader-middle-spin-uekw5v3 {
+@keyframes jkl-loader-middle-spin-uvt0ord {
   0% {
     transform: rotate(20deg) scale(0);
   }
@@ -84,7 +84,7 @@
     transform: rotate(200deg) scale(0);
   }
 }
-@keyframes jkl-loader-right-spin-uekw5ve {
+@keyframes jkl-loader-right-spin-uvt0orl {
   0% {
     transform: rotate(40deg) scale(0);
   }

package/styles/components/loader/loader.min.css

@@ -1 +1 @@
-.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uekw5uo;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uekw5v3;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uekw5ve}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-uekw5uo{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uekw5v3{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uekw5ve{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}
+.jkl-loader{display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:.9em;transform-origin:center;width:.9em}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uvt0oqf;margin-right:1.71em}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uvt0ord;margin-right:1.9em}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uvt0orl}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}.jkl-button .jkl-loader>.jkl-loader__dot,.jkl-loader--medium>.jkl-loader__dot{height:.35em;width:.35em}.jkl-button .jkl-loader>.jkl-loader__dot--left,.jkl-loader--medium>.jkl-loader__dot--left{margin-right:.585em}.jkl-button .jkl-loader>.jkl-loader__dot--middle,.jkl-loader--medium>.jkl-loader__dot--middle{margin-right:.65em}.jkl-loader--small>.jkl-loader__dot{height:.25em;width:.25em}.jkl-loader--small>.jkl-loader__dot--left{margin-right:.27em}.jkl-loader--small>.jkl-loader__dot--middle{margin-right:.3em}@keyframes jkl-loader-left-spin-uvt0oqf{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uvt0ord{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uvt0orl{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}

package/styles/components/loader/skeleton-loader.css

@@ -36,7 +36,7 @@
   bottom: 0;
   width: 12.5rem;
   background: linear-gradient(89.17deg, rgba(249, 249, 249, 0) 0.8%, var(--jkl-skeleton-sweeper-color) 50.09%, rgba(249, 249, 249, 0) 96.31%);
-  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ulxw0l5;
+  animation: var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u3tggw2;
 }
 @media (width >= 0) and (max-width: 679px) {
   .jkl-skeleton-animation {
@@ -67,7 +67,7 @@
 @media screen and (forced-colors: active) {
   .jkl-skeleton-element {
     border: 1px solid CanvasText;
-    animation: 2s ease infinite jkl-blink-ulxw0lb;
+    animation: 2s ease infinite jkl-blink-u3tggwi;
   }
 }
 
@@ -123,11 +123,11 @@
 }
 @media screen and (forced-colors: active) {
   .jkl-skeleton-table {
-    animation: 2s ease-in-out infinite jkl-blink-ulxw0lb;
+    animation: 2s ease-in-out infinite jkl-blink-u3tggwi;
   }
 }
 
-@keyframes jkl-sweep-ulxw0l5 {
+@keyframes jkl-sweep-u3tggw2 {
   0% {
     transform: translateX(calc(0vw - 200px));
   }
@@ -135,7 +135,7 @@
     transform: translateX(calc(100vw + 400px));
   }
 }
-@keyframes jkl-blink-ulxw0lb {
+@keyframes jkl-blink-u3tggwi {
   0% {
     opacity: 1;
   }

package/styles/components/loader/skeleton-loader.min.css

@@ -1 +1 @@
-@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-ulxw0l5;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-ulxw0lb 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-ulxw0lb 2s ease-in-out infinite}}@keyframes jkl-sweep-ulxw0l5{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-ulxw0lb{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}
+@media screen and (prefers-color-scheme:light){:root{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}}[data-theme=light]{--jkl-skeleton-element-color:#e0dbd4;--jkl-skeleton-sweeper-color:#f9f9f9}@media screen and (prefers-color-scheme:dark){:root{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}}[data-theme=dark]{--jkl-skeleton-element-color:#636060;--jkl-skeleton-sweeper-color:#1b1917}.jkl-skeleton-animation{--jkl-skeleton-sweep-duration:3s;overflow:hidden;position:relative}.jkl-skeleton-animation:after{animation:var(--jkl-skeleton-sweep-duration) ease infinite jkl-sweep-u3tggw2;background:linear-gradient(89.17deg,#f9f9f900 .8%,var(--jkl-skeleton-sweeper-color) 50.09%,#f9f9f900 96.31%);bottom:0;content:" ";position:absolute;top:0;width:12.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-animation{width:9.375rem}}@media screen and (prefers-reduced-motion:reduce){.jkl-skeleton-animation:after{background:none}}@media screen and (forced-colors:active){.jkl-skeleton-animation:after{animation:none}}.jkl-skeleton-animation--compact:after{width:9.375rem}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-u3tggwi 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:.75rem}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:.5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:.5rem}}.jkl-skeleton-input--compact:after{gap:.5rem}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header{padding:.75rem .5rem}.jkl-skeleton-table__row{padding:1rem .5rem}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:.5rem .25rem}.jkl-skeleton-table__row{padding:.75rem .25rem}}.jkl-skeleton-table--compact::after__header{padding:.5rem .25rem}.jkl-skeleton-table--compact::after__row{padding:.75rem .25rem}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-u3tggwi 2s ease-in-out infinite}}@keyframes jkl-sweep-u3tggw2{0%{transform:translateX(-200px)}80%,to{transform:translateX(calc(100vw + 400px))}}@keyframes jkl-blink-u3tggwi{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}

package/styles/components/message/message.css

@@ -168,7 +168,7 @@
   --background-color: var(--jkl-color-background-alert-success);
 }
 .jkl-message--dismissed {
-  animation: jkl-dismiss-uahu1kp 400ms ease-in-out forwards;
+  animation: jkl-dismiss-uirq2q5 400ms ease-in-out forwards;
   transition: visibility 0ms 400ms;
   visibility: hidden;
 }
@@ -188,7 +188,7 @@
   }
 }
 
-@keyframes jkl-dismiss-uahu1kp {
+@keyframes jkl-dismiss-uirq2q5 {
   from {
     opacity: 1;
     transform: translate3d(0, 0, 0);

package/styles/components/message/message.min.css

@@ -1 +1 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 0.25rem 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:0.75rem;--jkl-message-padding:1rem 0.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:1rem;--jkl-message-padding:1.5rem 1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:0.75rem 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-message-gap);outline:0;outline-style:none;padding:0;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{--tap-increment:calc((var(--jkl-message-dismiss-button-size) - 1.25rem)/2*-1);content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover,.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-uahu1kp .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uahu1kp{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:2.5rem}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-content-font-size:var(--jkl-body-font-size);--jkl-message-content-line-height:var(--jkl-body-line-height);--jkl-message-content-font-weight:var(--jkl-body-font-weight);--jkl-message-title-font-size:var(--jkl-heading-4-font-size);--jkl-message-title-line-height:var(--jkl-heading-4-line-height);--jkl-message-title-font-weight:var(--jkl-heading-4-font-weight);--jkl-message-icon-size:1.5rem;--jkl-message-icon-left:1rem;--jkl-message-icon-top:1.5rem;--jkl-message-title-margin:0 0 0.25rem 0;--jkl-message-dismiss-button-size:2.75rem;--jkl-message-gap:0.75rem;--jkl-message-padding:1rem 0.75rem}@media (min-width:680px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-message-gap:1rem;--jkl-message-padding:1.5rem 1rem}}[data-density=compact],[data-layout-density=compact]{--jkl-message-content-font-size:var(--jkl-small-font-size);--jkl-message-content-line-height:var(--jkl-small-line-height);--jkl-message-content-font-weight:var(--jkl-small-font-weight);--jkl-message-title-font-size:var(--jkl-heading-5-font-size);--jkl-message-title-line-height:var(--jkl-heading-5-line-height);--jkl-message-title-font-weight:var(--jkl-heading-5-font-weight);--jkl-message-icon-size:1.25rem;--jkl-message-icon-left:0.375rem;--jkl-message-icon-top:0.875rem;--jkl-message-dismiss-button-size:2rem;--jkl-message-gap:0.5rem;--jkl-message-padding:0.75rem 0.5rem}.jkl-message{--background-color:var(--jkl-color-background-alert-neutral);--text-color:var(--jkl-color-text-on-alert);align-items:start;background-color:var(--background-color);border-radius:.25rem;box-sizing:border-box;color:var(--text-color);display:grid;grid-template-areas:"icon content dismiss";grid-template-columns:auto 1fr auto;max-width:35rem;padding:var(--jkl-message-padding);width:100%}.jkl-message__icon{grid-area:icon;margin-right:var(--jkl-message-gap);width:var(--jkl-message-icon-size)}@media screen and (forced-colors:active){.jkl-message__icon,.jkl-message__icon path,.jkl-message__icon svg{stroke:CanvasText}}.jkl-message__content{grid-area:content}.jkl-message__message{font-size:var(--jkl-message-content-font-size);font-weight:var(--jkl-message-content-font-weight);line-height:var(--jkl-message-content-line-height);margin-top:-.125rem}.jkl-message__title{font-size:var(--jkl-message-title-font-size);font-weight:var(--jkl-message-title-font-weight);line-height:var(--jkl-message-title-line-height);margin:var(--jkl-message-title-margin)}.jkl-message__title~.jkl-message__message{margin-top:0}.jkl-message__dismiss-button{background-color:initial;border-style:none;color:inherit;cursor:pointer;grid-area:dismiss;justify-self:end;margin-left:var(--jkl-message-gap);outline:0;outline-style:none;padding:0;position:relative}.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-message__dismiss-button{border-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button:active,.jkl-message__dismiss-button:focus,.jkl-message__dismiss-button:hover{outline:revert;outline-style:revert}.jkl-message__dismiss-button,.jkl-message__dismiss-button path,.jkl-message__dismiss-button svg{stroke:ButtonText}.jkl-message__dismiss-button{background-color:ButtonFace}}.jkl-message__dismiss-button:after{--tap-increment:calc((var(--jkl-message-dismiss-button-size) - 1.25rem)/2*-1);content:"";inset:var(--tap-increment) var(--tap-increment) var(--tap-increment) var(--tap-increment);position:absolute}.jkl-message__dismiss-button:hover{color:#636060}@media screen and (forced-colors:active){.jkl-message__dismiss-button:hover,.jkl-message__dismiss-button:hover path,.jkl-message__dismiss-button:hover svg{stroke:ButtonText}}.jkl-message__dismiss-button:focus-visible{outline:2px solid var(--jkl-color-border-action);outline-offset:0}.jkl-message--full{max-width:100%}.jkl-message--info{--background-color:var(--jkl-color-background-alert-info)}.jkl-message--warning{--background-color:var(--jkl-color-background-alert-warning)}.jkl-message--error{--background-color:var(--jkl-color-background-alert-error)}.jkl-message--success{--background-color:var(--jkl-color-background-alert-success)}.jkl-message--dismissed{animation:jkl-dismiss-uirq2q5 .4s ease-in-out forwards;transition:visibility 0s .4s;visibility:hidden}@media screen and (forced-colors:active){.jkl-message{border:2px solid CanvasText}.jkl-message--info{border-style:dotted}.jkl-message--warning{border-style:dashed}.jkl-message--error{border-style:double;border-width:4px}}@keyframes jkl-dismiss-uirq2q5{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(0,-50%,0)}}.jkl-form-error-message{padding-bottom:2.5rem}